/* OAK Elementor Sections Styles */

    :root {
        --oak-kenya-red: #BB0000;
        --oak-kenya-green: #006600;
        --oak-kenya-black: #000000;
        --oak-kenya-white: #FFFFFF;
        --oak-primary: #BB0000;
        --oak-secondary: #006600;
        --oak-bg-light: #FFFFFF;
        --oak-bg-dark: #000000;
    }

    /* Ensure Tailwind works properly */
    *,
    ::before,
    ::after {
        box-sizing: border-box;
    }

    .frm_button_submit {
        background-color: var(--oak-kenya-green) !important;
    }

    /* Base font */
    body,
    .oak-hero-section *,
    .oak-stats-section *,
    .oak-about-section *,
    .oak-membership-section *,
    .oak-policy-section *,
    .oak-events-section *,
    .oak-stories-section * {
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* General Section Styles */
    .oak-hero-section,
    .oak-stats-section,
    .oak-about-section,
    .oak-membership-section,
    .oak-policy-section,
    .oak-events-section,
    .oak-stories-section {
        font-family: 'Manrope', sans-serif;
    }

    /* Line clamp utility for text truncation */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Smooth transitions */
    .oak-hero-section a,
    .oak-stats-section,
    .oak-about-section .group,
    .oak-membership-section a,
    .oak-policy-section a,
    .oak-events-section .group,
    .oak-stories-section .group {
        transition: all 0.3s ease;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .oak-hero-section h1 {
            font-size: 2rem;
        }

        .oak-membership-section .scale-105 {
            transform: scale(1);
        }
    }

    /* Dark mode support - Using class-based dark mode (requires .dark class on html element) */
    /* Media query dark mode is disabled to ensure consistent appearance */

    /* Material Symbols Icons */
    .material-symbols-outlined {
        font-family: 'Material Symbols Outlined' !important;
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-feature-settings: 'liga';
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    /* Font Awesome Icons Support */
    .oak-about-section i,
    .oak-policy-section i,
    .oak-membership-section i {
        display: inline-block;
        line-height: inherit;
    }

    /* Hero Section - Ensure heading colors work in light mode */
    .oak-hero-section h1 {
        color: #000000 !important;
    }

    /* Only apply white color in actual dark mode */
    .dark .oak-hero-section h1 {
        color: white !important;
    }

    /* Hero Section - Gradient text effect for highlighted text */
    .oak-hero-section h1 span.text-transparent {
        background: linear-gradient(to right, #BB0000, #006600) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        color: transparent !important;
        display: inline !important;
    }

    /* Ensure the span doesn't create a block overlay */
    .oak-hero-section h1 span {
        display: inline;
    }

    /* Fallback for browsers that don't support background-clip */
    @supports not (background-clip: text) or not (-webkit-background-clip: text) {
        .oak-hero-section h1 span.text-transparent {
            color: #BB0000 !important;
            background: none !important;
            -webkit-text-fill-color: inherit !important;
        }
    }

    /* Gradient backgrounds - Kenya flag colors */
    .bg-gradient-to-r.from-kenya-black.via-kenya-red.to-kenya-green {
        background: linear-gradient(to right, #000000, #BB0000, #006600) !important;
    }

    .bg-gradient-to-r.from-kenya-red.to-kenya-green {
        background: linear-gradient(to right, #BB0000, #006600) !important;
    }

    /* About section image gradient bar */
    .oak-about-section .bg-gradient-to-r {
        background: linear-gradient(to right, #000000, #BB0000, #006600) !important;
    }

    /* Events section gradient bar */
    .oak-events-section .bg-gradient-to-r {
        background: linear-gradient(to right, #000000, #BB0000, #006600) !important;
    }

    /* Ensure Kenya color classes work properly */
    .text-kenya-black {
        color: #000000;
    }

    .text-kenya-red {
        color: #BB0000 !important;
    }

    .text-kenya-green {
        color: #006600 !important;
    }

    .text-kenya-white {
        color: #FFFFFF !important;
    }

    /* Background color overrides */
    .bg-kenya-black {
        background-color: #000000 !important;
    }

    .bg-kenya-red {
        background-color: #BB0000 !important;
    }

    .bg-kenya-green {
        background-color: #006600 !important;
    }

    .bg-kenya-white {
        background-color: #FFFFFF !important;
    }

    /* About Section - Dynamic hover effects for feature cards */
    .oak-about-section .feature-card-green:hover {
        border-color: var(--oak-kenya-green) !important;
        background-color: rgba(0, 102, 0, 0.05) !important;
    }

    .oak-about-section .feature-card-red:hover {
        border-color: var(--oak-kenya-red) !important;
        background-color: rgba(187, 0, 0, 0.05) !important;
    }

    .dark .oak-about-section .feature-card-green:hover {
        background-color: rgba(0, 102, 0, 0.1) !important;
    }

    .dark .oak-about-section .feature-card-red:hover {
        background-color: rgba(187, 0, 0, 0.1) !important;
    }

    /* Membership section icon sizing */
    .oak-membership-section .mb-4 i,
    .oak-membership-section .mb-4 svg {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    /* Scrollbar styling for events section */
    .oak-events-section .overflow-x-auto::-webkit-scrollbar {
        height: 8px;
    }

    .oak-events-section .overflow-x-auto::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .oak-events-section .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .oak-events-section .overflow-x-auto::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Accessibility improvements */
    .oak-hero-section a:focus,
    .oak-membership-section a:focus,
    .oak-policy-section a:focus,
    .oak-events-section a:focus {
        /* outline: 2px solid var(--oak-primary); */
        /* outline-offset: 2px; */
    }

    /* Print styles */
    @media print {

        .oak-hero-section,
        .oak-stats-section,
        .oak-about-section,
        .oak-membership-section,
        .oak-policy-section,
        .oak-events-section {
            page-break-inside: avoid;
        }
    }

    /* Fallback styles if Tailwind doesn't load */
    .oak-hero-section .bg-primary,
    .oak-membership-section .bg-primary,
    .oak-policy-section .text-primary,
    .oak-events-section .text-primary {
        background-color: var(--oak-primary);
        color: white;
    }

    .oak-hero-section .text-primary,
    .oak-stats-section .text-primary,
    .oak-about-section .text-primary {
        color: var(--oak-primary) !important;
    }

    /* Ensure sections have proper width containment */
    .oak-hero-section>div,
    .oak-stats-section>div,
    .oak-about-section>div,
    .oak-membership-section>div,
    .oak-policy-section>div,
    .oak-events-section>div

    /* .oak-stories-section > div  */
        {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Override Elementor container styles if needed */
    .elementor-widget-oak_hero_section .elementor-widget-container,
    .elementor-widget-oak_stats_section .elementor-widget-container,
    .elementor-widget-oak_about_section .elementor-widget-container,
    .elementor-widget-oak_membership_section .elementor-widget-container,
    .elementor-widget-oak_policy_section .elementor-widget-container,
    .elementor-widget-oak_events_section .elementor-widget-container,
    .elementor-widget-oak_stories_section .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fix for full-width sections in Elementor */
    .elementor-widget-oak_hero_section,
    .elementor-widget-oak_stats_section,
    .elementor-widget-oak_about_section,
    .elementor-widget-oak_membership_section,
    .elementor-widget-oak_policy_section,
    .elementor-widget-oak_events_section,
    .elementor-widget-oak_stories_section {
        width: 100%;
    }

    /* Stories Section - Specific Styles */
    .oak-stories-section .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .oak-stories-section .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Stories section video card hover effects */
    .oak-stories-section .group:hover h3 {
        color: var(--oak-primary, #137fec);
    }

    /* Video Modal Styles */
    .oak-video-modal {
        animation: fadeIn 0.3s ease-out;
    }

    .oak-video-modal.show {
        display: flex !important;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .oak-video-modal .relative.max-w-6xl {
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(50px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Prevent body scroll when modal is open */
    body.oak-modal-open {
        overflow: hidden;
    }

    /* Video responsive iframe */
    .oak-video-container iframe,
    .oak-video-container video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Share Modal Styles */
    .oak-share-modal {
        animation: fadeIn 0.3s ease-out;
    }

    .oak-share-modal.show {
        display: flex !important;
    }

    .oak-share-modal>div {
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Print styles - add stories section */
    @media print {
        .oak-stories-section {
            page-break-inside: avoid;
        }
    }

    /* Contact Widgets Styles */
    .oak-contact-form-wrapper {
        width: 100%;
    }

    /* Style form plugins to match OAK design */
    .oak-contact-form-wrapper input[type="text"],
    .oak-contact-form-wrapper input[type="email"],
    .oak-contact-form-wrapper input[type="tel"],
    .oak-contact-form-wrapper input[type="url"],
    .oak-contact-form-wrapper input[type="number"],
    .oak-contact-form-wrapper select,
    .oak-contact-form-wrapper textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        color: #111418;
        outline: none;
        transition: all 0.3s;
    }

    .dark .oak-contact-form-wrapper input[type="text"],
    .dark .oak-contact-form-wrapper input[type="email"],
    .dark .oak-contact-form-wrapper input[type="tel"],
    .dark .oak-contact-form-wrapper input[type="url"],
    .dark .oak-contact-form-wrapper input[type="number"],
    .dark .oak-contact-form-wrapper select,
    .dark .oak-contact-form-wrapper textarea {
        background-color: #101922;
        border-color: #374151;
        color: white;
    }

    .oak-contact-form-wrapper input:focus,
    .oak-contact-form-wrapper select:focus,
    .oak-contact-form-wrapper textarea:focus {
        border-color: #BB0000;
        box-shadow: 0 0 0 1px #BB0000;
    }

    .oak-contact-form-wrapper label {
        font-weight: 600;
        font-size: 0.875rem;
        color: #111418;
        margin-bottom: 0.375rem;
        display: block;
    }

    .dark .oak-contact-form-wrapper label {
        color: white;
    }

    /* Style common form plugin submit buttons */
    .oak-contact-form-wrapper input[type="submit"],
    .oak-contact-form-wrapper button[type="submit"],
    .oak-contact-form-wrapper .forminator-button-submit,
    .oak-contact-form-wrapper .wpcf7-submit,
    .oak-contact-form-wrapper .wpforms-submit {
        background-color: #006600 !important;
        color: white !important;
        font-weight: 700;
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .oak-contact-form-wrapper input[type="submit"]:hover,
    .oak-contact-form-wrapper button[type="submit"]:hover,
    .oak-contact-form-wrapper .forminator-button-submit:hover,
    .oak-contact-form-wrapper .wpcf7-submit:hover,
    .oak-contact-form-wrapper .wpforms-submit:hover {
        background-color: #004d00 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        transform: scale(0.98);
    }

    /* Override Elementor container styles for contact widgets */
    .elementor-widget-oak_contact_hero .elementor-widget-container,
    .elementor-widget-oak_contact_info_cards .elementor-widget-container,
    .elementor-widget-oak_contact_map .elementor-widget-container,
    .elementor-widget-oak_contact_form .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fix for full-width sections in Elementor */
    .elementor-widget-oak_contact_hero,
    .elementor-widget-oak_contact_info_cards,
    .elementor-widget-oak_contact_map,
    .elementor-widget-oak_contact_form {
        width: 100%;
    }

    /* Accessibility improvements for contact widgets */
    .oak-contact-form-wrapper input:focus,
    .oak-contact-form-wrapper select:focus,
    .oak-contact-form-wrapper textarea:focus,
    .oak-contact-form-wrapper button:focus {
        /* outline: 2px solid var(--oak-primary); */
        /* outline-offset: 2px; */
    }

    /* Header & Footer Widgets Styles */

    /* Header Styles */
    .oak-header {
        transition: all 0.3s ease;
    }

    .oak-header a {
        text-decoration: none;
    }

    .oak-header .oak-header-nav a:hover {
        transition: color 0.3s ease;
    }

    /* Logo Styles */
    .oak-logo-icon {
        font-size: 32px;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .oak-logo-image {
        width: 120px;
        height: auto;
        object-fit: contain;
    }

    /* Mobile Menu Styles */
    .oak-mobile-menu {
        transition: opacity 0.3s ease;
    }

    .oak-mobile-menu-content {
        transition: transform 0.3s ease-out;
    }

    /* Prevent body scroll when mobile menu is open */
    body.overflow-hidden {
        overflow: hidden;
    }

    /* Footer Styles */
    .oak-footer a {
        text-decoration: none;
        transition: color 0.3s ease;
    }

    /* Override Elementor container styles for header/footer widgets */
    .elementor-widget-oak_header .elementor-widget-container,
    .elementor-widget-oak_footer .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Fix for full-width sections in Elementor */
    .elementor-widget-oak_header,
    .elementor-widget-oak_footer {
        width: 100%;
    }

    /* Social media icons hover effect */
    .oak-footer a[target="_blank"]:hover svg {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }

    /* Accessibility improvements for header/footer */
    .oak-header button:focus,
    .oak-header a:focus,
    .oak-footer a:focus {
        /* outline: 2px solid var(--oak-primary); */
        /* outline-offset: 2px; */
    }

    button {
        border: none !important;
    }

    /* Responsive adjustments for header */
    @media (max-width: 768px) {
        .oak-header {
            padding: 0.75rem 1rem;
        }
    }