/* =========================================================================
CHAPTER 1: CSS VARIABLES & FILE PATHS
========================================================================= */

:root {
    /* Profile & Cart Icons */
    --afca-profile-light: url('/wp-content/uploads/2024/02/FFProfileIcon.png');
    --afca-profile-dark:  url('/wp-content/uploads/2026/08/FFProfileIcon-white.png');
    
    --afca-cart-light:    url('/wp-content/uploads/2024/03/HotShopCart.png');
    --afca-cart-dark:     url('/wp-content/uploads/2026/08/HotShopCart.png');

    /* Scrolled Logo Override */
    --afca-scrolled-logo: url('/wp-content/uploads/2022/12/AFCA-Logo-1.png');
}

/* =========================================================================
CHAPTER 2: SMART STICKY HEADER & THEME ENGINE
========================================================================= */

/* Core Structure */
.afca-global-header {
    position: fixed !important;
    top: 0; left: 0; width: 100%;
    z-index: 99999 !important;
    transition: background-color 0.4s ease, height 0.4s ease, box-shadow 0.4s ease !important;
}

/* Push body content down only on standard pages (Prevents content clipping) */
body:not(.home):not(.landing-page) #et-main-area {
    padding-top: 140px !important;
}

/* WordPress Admin Bar Offsets */
body.admin-bar .afca-global-header { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar .afca-global-header { top: 46px !important; }
}

/* Glass Background on Scroll */
#et-boc .et-l--header .afca-global-header.afca-scrolled-header {
    background-color: rgba(30, 30, 30, 0.95) !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Center and shrink inner row */
.afca-global-header .et_pb_row {
    transition: height 0.4s ease, border-color 0.4s ease !important;
    margin: 0 auto !important;
}
.afca-global-header.afca-scrolled-header .et_pb_row {
    height: 80px !important;
    border-bottom-color: transparent !important;
}

/* =========================================================================
CHAPTER 3: LOGO SWAP & SHRINK
========================================================================= */

.afca-global-header .et_pb_image_wrap {
    position: relative;
    display: block;
    height: 100px; /* Explicit height to prevent mobile vanishing */
    width: auto;
    transition: height 0.4s ease !important;
}

.afca-global-header .et_pb_image_wrap img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    transition: all 0.4s ease !important;
}

/* Force Monogram to swap to Full Logo on Scroll by cross-fading a background layer */
.afca-global-header .et_pb_image_wrap::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--afca-scrolled-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0; /* Hidden initially */
    transition: opacity 0.4s ease !important;
    z-index: 2;
    pointer-events: none;
}

/* Trigger the cross-fade when scrolled */
.afca-global-header.afca-scrolled-header .et_pb_image_wrap img {
    opacity: 0 !important; /* Hide original image */
}
.afca-global-header.afca-scrolled-header .et_pb_image_wrap::after {
    opacity: 1 !important; /* Show new logo */
}

/* Scale specific to breakpoints */
@media (min-width: 981px) {
    .afca-global-header.afca-scrolled-header .et_pb_image_wrap { height: 55px !important; }
}
@media (max-width: 980px) {
    /* Expanded mobile logo */
    .afca-global-header .et_pb_image_wrap { height: 125px !important; }
    
    /* Scrolled mobile logo */
    .afca-global-header.afca-scrolled-header .et_pb_image_wrap { height: 64px !important; }
}

/* =========================================================================
CHAPTER 4: ICON SWAP ENGINE (CART & PROFILE)
========================================================================= */

/* Add spacing between the search icon and menu text */
.et_pb_menu__icon.et_pb_menu__search-button {
margin-left: 25px !important;
}

/* 1. Base Alignments & Dimensions (Strips Divi's native padding causing misalignment) */
.afca-global-header .mini-cart-custom-nav-wrap {
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.afca-global-header .afca-ff-icon > a,
.afca-global-header .mini-cart-info {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    text-decoration: none !important;
}

/* Lock all icon images (Profile, Cart, and Avatar) to exactly 32x32px and force them visible */
.afca-global-header .afca-ff-icon > a img,
.afca-global-header .mini-cart-info img {
    display: inline-block !important; /* Overrides any previous display:none attempts */
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

/* Force the avatar to be a perfect circle */
.afca-global-header .afca-ff-icon > a img.afca-menu-avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
    width: 40px !important;
    height: 40px !important;
}

/* 2. DIRECT IMAGE CONTENT SWAPPING (Bulletproof Attribute Targeting) 
   By targeting [src*="FFProfileIcon"], we ONLY swap the generic icon. 
   Avatars (which have "avatar" in their URL) are completely ignored and remain safe! */

/* --- Light Theme (Unscrolled) - Dark Icons --- */
.afca-global-header.afca-theme-light:not(.afca-scrolled-header) .afca-ff-icon > a img[src*="FFProfileIcon"] {
    content: var(--afca-profile-light) !important;
}
.afca-global-header.afca-theme-light:not(.afca-scrolled-header) .mini-cart-info img {
    content: var(--afca-cart-light) !important;
}

/* --- Dark Theme (Unscrolled) - White Icons --- */
.afca-global-header.afca-theme-dark:not(.afca-scrolled-header) .afca-ff-icon > a img[src*="FFProfileIcon"] {
    content: var(--afca-profile-dark) !important;
}
.afca-global-header.afca-theme-dark:not(.afca-scrolled-header) .mini-cart-info img {
    content: var(--afca-cart-dark) !important;
}

/* --- Scrolled State (Overrides both themes) - White Icons --- */
.afca-global-header.afca-scrolled-header .afca-ff-icon > a img[src*="FFProfileIcon"] {
    content: var(--afca-profile-dark) !important;
}
.afca-global-header.afca-scrolled-header .mini-cart-info img {
    content: var(--afca-cart-dark) !important;
}

/* --- Mobile Bubbles (Overrides everything inside the mobile menu block) --- */
@media (max-width: 1280px) {
    /* Default Mobile Icons (Landing & Home Pages) - White Icons */
    .afca-global-header .afca-mobile-actions-wrap .afca-ff-icon > a img[src*="FFProfileIcon"] {
        content: var(--afca-profile-dark) !important;
    }
    .afca-global-header .afca-mobile-actions-wrap .mini-cart-info img {
        content: var(--afca-cart-dark) !important;
    }
    
    /* Standard Global Pages - Dark Icons (Both Unscrolled & Scrolled) */
    body:not(.home):not(.landing-page) .afca-global-header .afca-mobile-actions-wrap .afca-ff-icon > a img[src*="FFProfileIcon"] {
        content: var(--afca-profile-light) !important;
    }
    body:not(.home):not(.landing-page) .afca-global-header .afca-mobile-actions-wrap .mini-cart-info img {
        content: var(--afca-cart-light) !important;
    }
}

/* Invert Menu Text Colors on Dark Themes & Scrolled */
.afca-theme-dark .et_pb_menu__menu > nav > ul > li > a,
.afca-theme-dark .et_pb_menu__icon,
.afca-scrolled-header .et_pb_menu__menu > nav > ul > li > a,
.afca-scrolled-header .et_pb_menu__icon {
    color: #ffffff !important;
}

/* Desktop Active Link Indicator */
.afca-scrolled-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a::before,
.afca-scrolled-header .et_pb_menu__menu > nav > ul > li.current-menu-ancestor > a::before {
    background-color: #ffffff !important;
}

/* ---------------------------------------------------------
NATIVE DIVI SEARCH BAR COLORS (Desktop)
--------------------------------------------------------- */

/* Default State (Light Background) - Dark Text */
.afca-global-header .et_pb_menu__search-input {
color: #0f172a !important;
}
.afca-global-header .et_pb_menu__search-input::placeholder {
color: #64748b !important;
}
.afca-global-header .et_pb_menu__close-search-button {
color: #0f172a !important;
}

/* Scrolled State & Landing Page State (Dark Background) - White Text */
.afca-global-header.afca-scrolled-header .et_pb_menu__search-input,
.afca-global-header.afca-theme-dark .et_pb_menu__search-input {
color: #ffffff !important;
}
.afca-global-header.afca-scrolled-header .et_pb_menu__search-input::placeholder,
.afca-global-header.afca-theme-dark .et_pb_menu__search-input::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
.afca-global-header.afca-scrolled-header .et_pb_menu__close-search-button,
.afca-global-header.afca-theme-dark .et_pb_menu__close-search-button {
color: #ffffff !important;
}

/* =========================================================================
CHAPTER 6: DESKTOP NAVIGATION DROPDOWNS (visible above 1280px)
========================================================================= */

:root {
    --afca-menu-accent: #3453a5;
    --afca-menu-hover-bg: #f1f5fb;
    --afca-menu-border: #e5e9f0;
    --afca-panel-pad: 8px;      /* inner padding of every dropdown panel */
    --afca-drop-gap: 14px;      /* gap between top-level link and its dropdown */
    --afca-side-gap: 6px;       /* visual gap between a panel and its side flyout */
    --afca-hide-delay: 0.14s;   /* grace period so diagonal mouse paths don't close menus */
}

/* Top level underline animation */
.et_pb_menu .et-menu-nav > ul.nav > li > a { position: relative !important; }
.et_pb_menu .et-menu-nav > ul.nav > li > a::before {
    content: ''; position: absolute; width: 0; height: 2px;
    background-color: var(--afca-menu-accent); bottom: -4px; left: 0;
    transition: width 0.3s ease;
}
.et_pb_menu .et-menu-nav > ul.nav > li:hover > a::before,
.et_pb_menu .et-menu-nav > ul.nav > li:focus-within > a::before,
.et_pb_menu .et-menu-nav > ul.nav > li.current-menu-item > a::before { width: 100%; }

/* ---- Panels (every level) ---- */
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu {
    width: min(280px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    padding: var(--afca-panel-pad) !important;
    border: 1px solid var(--afca-menu-border) !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 34px -10px rgba(15, 23, 42, 0.2) !important;
    transform: translateY(6px);
    /* Fade out after a short grace period; visibility flips last so the panel stays hoverable while fading */
    transition: opacity 0.18s ease var(--afca-hide-delay),
                transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) var(--afca-hide-delay),
                visibility 0s linear calc(var(--afca-hide-delay) + 0.2s) !important;
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu::before { display: none !important; }

/* Open state: hover OR keyboard focus, no delay on the way in */
.et_pb_menu .et-menu-nav > ul.nav li:hover > ul.sub-menu,
.et_pb_menu .et-menu-nav > ul.nav li:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0);
    transition-delay: 0s !important;
}

/* ---- Top-level dropdown placement + hover bridge ---- */
.et_pb_menu .et-menu-nav > ul.nav > li > ul.sub-menu {
    top: 100% !important;
    margin-top: var(--afca-drop-gap) !important;
}
.et_pb_menu .et-menu-nav > ul.nav > li > ul.sub-menu::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--afca-drop-gap) - 2px);
    height: calc(var(--afca-drop-gap) + 2px);   /* 2px overlap so there is never a seam */
    background: transparent;
}

/* ---- Side flyouts (3rd level and deeper) ---- */
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    top: calc(-1 * (var(--afca-panel-pad) + 1px)) !important;    /* align first item with parent's first item */
    left: calc(100% + var(--afca-panel-pad) + 1px + var(--afca-side-gap)) !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-6px);
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children:focus-within > ul.sub-menu {
    transform: translateX(0);
}

/* Side hover bridge: spans parent padding + border + visual gap (+2px overlap) */
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children > ul.sub-menu::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 100%;
    width: calc(var(--afca-panel-pad) + 1px + var(--afca-side-gap) + 2px);
    background: transparent;
}

/* Flip to the left when a flyout would run off the right edge (class added by afca-header.js) */
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children.afca-flip > ul.sub-menu {
    left: auto !important;
    right: calc(100% + var(--afca-panel-pad) + 1px + var(--afca-side-gap)) !important;
    transform: translateX(6px);
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children.afca-flip:hover > ul.sub-menu,
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children.afca-flip:focus-within > ul.sub-menu {
    transform: translateX(0);
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children.afca-flip > ul.sub-menu::after {
    right: auto; left: 100%;
}

/* ---- Items ---- */
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li {
    width: 100% !important; margin: 0 !important; padding: 0 !important;
    display: block !important; position: relative !important;
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li a {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 15px !important;           /* readable, consistent size at every depth */
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;       /* long labels wrap instead of clipping */
    background-color: transparent !important;
    color: var(--afca-menu-accent) !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li:hover > a,
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li:focus-within > a {
    background-color: var(--afca-menu-hover-bg) !important;
    color: var(--afca-menu-accent) !important;
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.current-menu-item > a,
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.current-menu-ancestor > a {
    font-weight: 600 !important;
    background-color: var(--afca-menu-hover-bg) !important;
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li a:focus-visible {
    outline: 2px solid var(--afca-menu-accent);
    outline-offset: -2px;
}

/* Chevron for items that open a side flyout */
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children > a { padding-right: 38px !important; }
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children > a::after {
    content: '\35' !important; font-family: 'ETmodules' !important;
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px; font-weight: normal; line-height: 1;
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children:hover > a::after { opacity: 1; transform: translateY(-50%) translateX(2px); }
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children.afca-flip > a { padding-right: 14px !important; padding-left: 38px !important; }
.et_pb_menu .et-menu-nav > ul.nav li ul.sub-menu li.menu-item-has-children.afca-flip > a::after {
    right: auto; left: 12px; transform: translateY(-50%) scaleX(-1);
}

/* =========================================================================
CHAPTER 7: MOBILE FLEXBOX LAYOUT & OVERLAY (Up to 1280px)
========================================================================= */

@media (min-width: 1281px) {
    .afca-custom-hamburger { display: none !important; }
    .et_pb_menu__menu .mobile-link { display: none !important; }
}

/* Desktop header on a narrower laptop (from where the hamburger header ends up to 1700px): the whole header scales to fit on one line. The row
   takes nearly the full width (a small edge gap instead of the usual 15% of margin), the gaps between the logo, menu and account icons close
   up, and the logo, menu text and menu spacing shrink smoothly with the screen. Measured on the main site's 8-item menu from 1281px to 1700px:
   the logo, every menu item, the search icon, the account menu and the cart all stay inside the row. */
@media (min-width: 1281px) and (max-width: 1700px) {
    .afca-global-header .et_pb_row {
        width: calc(100% - clamp(28px, 3vw, 56px)) !important;
        max-width: none !important;
        column-gap: clamp(14px, 1.5vw, 28px) !important;
    }
    .afca-global-header .et_pb_image_wrap { width: clamp(180px, 15vw, 230px) !important; }
    .afca-global-header .et-menu-nav > ul.nav > li > a {
        font-size: clamp(13.5px, 1.05vw, 17px) !important;
        padding-right: clamp(5px, 0.95vw, 15px) !important;
    }
    .afca-global-header .et-menu-nav > ul.nav > li {
        padding-left: clamp(4px, 0.5vw, 9px) !important;
        padding-right: clamp(4px, 0.5vw, 9px) !important;
    }
}


@media (max-width: 1280px) {
    /* 1. Nuke Native Divi Elements entirely */
    .afca-global-header .et_mobile_nav_menu,
    .afca-global-header .et_pb_menu__menu,
    .afca-global-header .mobile_nav,
    .afca-global-header .dipl_ajax_search,
    .afca-global-header .et_pb_menu__icon {
        display: none !important;
    }

    /* Anchor logo to top left to prevent jumping */
    .afca-global-header .et_pb_image_wrap img {
        object-position: left top !important;
    }
    .afca-global-header .et_pb_image_wrap::after {
        background-position: left top !important;
    }

    /* 2. Flexbox Override for Row (Prevents vertical stacking) */
    .afca-global-header .et_pb_row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important; /* Anchor items to the top edge */
        width: 95% !important;
    }

    /* 3. Stop columns from filling 100% width */
    .afca-global-header .et_pb_column {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Anchor items to the top edge */
        width: auto !important;
        flex: 0 1 auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .afca-global-header .et_pb_column:only-child { width: 100% !important; justify-content: space-between !important; }
    .afca-global-header .et_pb_column:last-child { justify-content: flex-end !important; flex-grow: 1 !important; }

    /* 4. Glass Bubbles */
    .afca-mobile-actions-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        margin-left: auto !important;
        margin-top: 6px !important; /* Centered for 55px tablet scrolled logo */
    }
    .mini-cart-custom-nav-wrap,
    .afca-custom-hamburger {
        background: rgba(50, 50, 50, 0.3) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 25px rgba(15, 23, 42, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    .afca-custom-hamburger svg { width: 28px !important; height: 28px !important; display: block !important; transition: all 0.3s ease !important;}
    .afca-custom-hamburger:hover { background: rgba(24, 32, 78, 0.85) !important; transform: translateY(-1px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35) !important; }

    /* 5. Hide profile link on mobile headers (since it's in the hamburger overlay) */
    .afca-global-header .afca-ff-icon { display: none !important; }

    /* 6. SCROLLED MOBILE OVERRIDES (Transparent & Snug to Top) */
       
    /* Enforce consistent padding to prevent jump when scrolling */
    #et-boc .et-l--header .afca-global-header {
        padding-top: 15px !important;
    }

    /* Make the header completely transparent and remove all excessive section padding */
    #et-boc .et-l--header .afca-global-header.afca-scrolled-header {
        background-color: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding-top: 15px !important; /* Snug to top edge, matches unscrolled so it doesn't jump */
        padding-bottom: 0 !important;
        pointer-events: none !important; /* Allow clicks through empty transparent space */
    }

    /* Re-enable clicking on the actual visible items */
    .afca-global-header .et_pb_image_wrap,
    .afca-mobile-actions-wrap {
        pointer-events: auto !important;
    }
}

@media (max-width: 980px) {
    /* Force the mobile row height smaller than the logo so it overlaps the bottom */
    .afca-global-header .et_pb_row {
        height: 100px !important;
    }
    .afca-global-header.afca-scrolled-header .et_pb_row {
        height: 80px !important;
    }
    .afca-mobile-actions-wrap {
        margin-top: 11px !important; /* Perfectly vertically centers a 42px bubble within the 64px scrolled logo edge */
    }
}

/* =========================================================================
CHAPTER 8: CUSTOM OVERLAY UI
========================================================================= */

#afca-custom-overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; z-index: 999999 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.98) translateY(-10px) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; box-sizing: border-box !important; display: block !important; }
#afca-custom-overlay.afca-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: scale(1) translateY(0) !important; }
.afca-overlay-scroll { width: 100% !important; height: 100% !important; max-height: 100dvh; overflow-y: auto !important; padding: calc(85px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(28px + env(safe-area-inset-left, 0px)) !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
#afca-close-btn { position: absolute !important; top: calc(24px + env(safe-area-inset-top, 0px)) !important; right: calc(28px + env(safe-area-inset-right, 0px)) !important; padding: 0 !important; -webkit-appearance: none; appearance: none; font-family: inherit !important; width: 44px !important; height: 44px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 26px !important; color: #18204e !important; cursor: pointer !important; line-height: 1 !important; z-index: 1000000 !important; transition: all 0.25s ease !important; }
#afca-close-btn:hover { background: #18204e !important; color: #ffffff !important; transform: rotate(90deg) !important; }


/* Overlay Search */
.dipl_ajax_search_wrap { position: relative !important; }
.dipl_ajax_search_wrap .dipl_ajax_search_results_wrap { width: 175% !important; left: 0 !important; right: auto !important; max-width: none !important; }
@media (max-width: 767px) { .dipl_ajax_search_wrap .dipl_ajax_search_results_wrap { width: 100% !important; } }

/* Inside the overlay the results must always match the input width and scroll if long */
#afca-mobile-search-wrap .dipl_ajax_search_wrap .dipl_ajax_search_results_wrap {
    width: 100% !important;
    max-height: min(60vh, 480px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

#afca-mobile-search-wrap {
margin-bottom: 25px !important;
width: 100% !important;
position: relative !important;
}

#afca-mobile-search-wrap .dipl_ajax_search {
width: 100% !important;
max-width: 100% !important;
position: relative !important;
display: block !important;
}

/* Kill the weird underline/border created by the Divi Plus H5 wrapper */
#afca-mobile-search-wrap h5.dipl_ajax_search_wrap,
#afca-mobile-search-wrap .dipl_ajax_search_wrap {
position: relative !important;
width: 100% !important;
display: block !important;
border: none !important;
text-decoration: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}

/* Base Input Wrap */
#afca-mobile-search-wrap .dipl_ajax_search_field_wrap {
position: relative !important;
width: 100% !important;
display: block !important;
border: none !important; /* Strips browser border */
background: transparent !important;
}

/* The Search Input */
#afca-mobile-search-wrap input.dipl_ajax_search_field { 
    width: 100% !important; 
    height: 52px !important; 
    background-color: #f8fafc !important; 
    color: #0f172a !important; 
    border: 1.5px solid #e2e8f0 !important; 
    border-radius: 14px !important; 
    padding: 0 48px 0 20px !important; /* Space for the clear 'x' */
    font-size: 16px !important; 
    font-weight: 500 !important; 
    box-sizing: border-box !important; 
    outline: none !important; 
    transition: all 0.25s ease !important; 
    margin: 0 !important;
    -webkit-appearance: none; /* Stops iOS from overriding the shape */
    box-shadow: none !important;
}

#afca-mobile-search-wrap input.dipl_ajax_search_field:focus { 
    background-color: #ffffff !important; 
    border-color: #3453a5 !important; 
    box-shadow: 0 0 0 4px rgba(52, 83, 165, 0.1) !important; 
}

#afca-mobile-search-wrap input.dipl_ajax_search_field::placeholder { 
    color: #94a3b8 !important; 
}

/* Hide the Divi Plus duplicate magnifying glass icon entirely */
#afca-mobile-search-wrap .dipl_ajax_search_field_wrap:not(.dipl_ajax_search_loader)::after {
    display: none !important;
}

/* Hide native browser 'x' clear buttons so they don't clash with Divi Plus */
#afca-mobile-search-wrap input[type="search"]::-webkit-search-cancel-button,
#afca-mobile-search-wrap input[type="search"]::-webkit-search-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Position the Divi Plus 'X' clear icon properly inside the box */
#afca-mobile-search-wrap .el_ajax_clear_icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #0f172a !important;
    font-size: 20px !important;
    z-index: 10 !important;
}

/* ---------------------------------------------------------
   GLOBAL TRUMPET SPINNER INJECTION
--------------------------------------------------------- */
/* 1. Custom animation for the right-aligned search loader */
@keyframes afca-search-spinner {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* 2. Override the Divi loader and apply the new animation */
.dipl_ajax_search_loader::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    /* REMOVED !important from transform so the animation can override it */
    transform: translateY(-50%); 
    width: 32px !important; 
    height: 32px !important;
    background-image: var(--afca-chief-spinner-svg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23e2e8f0' stroke-width='3'/%3E%3Cpath d='M16 4a12 12 0 0 1 12 12' fill='none' stroke='%23f1cd00' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Call the new targeted animation */
    animation: afca-search-spinner 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; 
    border: none !important; 
    border-radius: 0 !important;
    z-index: 10;
}

/* Results Box */
.dipl_ajax_search_results_wrap { 
    position: absolute !important;
    width: 100% !important; 
    left: 0 !important; 
    right: 0 !important; 
    border-radius: 12px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; 
    margin-top: 8px !important; 
    z-index: 1000001 !important; 
    background: #ffffff !important;
}

/* Overlay Nav Items */
#afca-mobile-nav { list-style: none !important; padding: 0 !important; margin: 0 !important; flex-grow: 1 !important; }
#afca-mobile-nav > li { display: block !important; position: relative !important; border-bottom: 1px solid #f1f5f9 !important; width: 100% !important; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; }
#afca-custom-overlay.afca-active #afca-mobile-nav > li { opacity: 1; transform: translateY(0); }
#afca-mobile-nav > li > a { display: flex !important; align-items: center !important; font-size: 20px !important; font-weight: 700 !important; color: #0f172a !important; padding: 18px 60px 18px 0 !important; text-decoration: none !important; width: 100% !important; box-sizing: border-box !important; }
#afca-custom-overlay a::after, #afca-custom-overlay a::before { display: none !important; content: none !important; }
#afca-mobile-nav .afca-ff-icon a img:not(.afca-menu-avatar) { content: var(--afca-profile-light) !important; }

/* Overlay Submenus */
#afca-mobile-nav ul.sub-menu { display: grid !important; grid-template-rows: 0fr !important; transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; list-style: none !important; padding: 0 !important; margin: 0 !important; background-color: transparent !important; border: none !important; }
#afca-mobile-nav ul.sub-menu.open { grid-template-rows: 1fr !important; }
#afca-mobile-nav ul.sub-menu > .afca-submenu-squish { min-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
#afca-mobile-nav ul.sub-menu .afca-submenu-inner { padding: 6px 0 12px 0 !important; margin: 0 0 12px 12px !important; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
#afca-mobile-nav ul.sub-menu.open .afca-submenu-inner { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
#afca-mobile-nav ul.sub-menu li { border-bottom: 1px solid #e2e8f0 !important; position: relative !important; }
#afca-mobile-nav ul.sub-menu li:last-child { border-bottom: none !important; }
#afca-mobile-nav ul.sub-menu li > a { display: block !important; font-size: 16px !important; font-weight: 500 !important; color: #334155 !important; padding: 14px 60px 14px 14px !important; width: 100% !important; box-sizing: border-box !important; text-decoration: none !important; border-radius: 8px !important; }

/* Overlay Chevrons */
.afca-nav-toggle { position: absolute !important; right: 0 !important; top: 8px !important; width: 44px !important; height: 44px !important; border-radius: 10px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; cursor: pointer !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.afca-nav-toggle .afca-chevron { width: 8px !important; height: 8px !important; border-right: 2.5px solid #18204e !important; border-bottom: 2.5px solid #18204e !important; transform: rotate(45deg) !important; transition: transform 0.3s ease !important; display: block !important; margin-top: -2px !important; }
.afca-nav-toggle.open { background: #18204e !important; border-color: #18204e !important; }
.afca-nav-toggle.open .afca-chevron { border-color: #f1cd00 !important; transform: rotate(225deg) !important; margin-top: 2px !important; }
#afca-mobile-nav ul.sub-menu .afca-nav-toggle { top: 6px !important; bottom: auto !important; margin: 0 !important; width: 36px !important; height: 36px !important; right: 4px !important; }
#afca-mobile-nav ul.sub-menu .afca-nav-toggle .afca-chevron { width: 7px !important; height: 7px !important; }

/* Overlay Footer */
.afca-mobile-overlay-footer { margin-top: 35px !important; padding-top: 20px !important; }
.afca-mobile-footer-actions { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 12px !important; margin-bottom: 20px !important; }
.afca-footer-btn { display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; color: #18204e !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; }
.afca-footer-btn.primary { background-color: #18204e !important; color: #ffffff !important; border-color: #18204e !important; }
.afca-mobile-copy { font-size: 12px !important; color: #94a3b8 !important; text-align: center !important; margin: 0 !important; }
.afca-footer-btn[data-show="logged_in"] { display: none !important; }
body.logged-in .afca-footer-btn[data-show="logged_in"] { display: flex !important; }
body.logged-in .afca-footer-btn[data-show="logged_out"] { display: none !important; }


/* =========================================================================
CHAPTER 9: POLISH — BUTTON RESETS, FOCUS, SCROLL LOCK, MOTION, AVATARS
========================================================================= */

/* Hamburger, close and chevron toggles are real <button>s now (keyboard + screen reader accessible) */
.afca-custom-hamburger,
.afca-nav-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    font: inherit;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.afca-nav-toggle { padding: 0 !important; }

/* Visible keyboard focus */
.afca-custom-hamburger:focus-visible { outline: 2px solid #f1cd00 !important; outline-offset: 3px !important; }
#afca-close-btn:focus-visible,
.afca-nav-toggle:focus-visible,
#afca-mobile-nav a:focus-visible,
.afca-footer-btn:focus-visible { outline: 2px solid #3453a5 !important; outline-offset: 2px !important; }
#afca-mobile-nav a:focus-visible { border-radius: 8px !important; }

/* Lock page scroll while the overlay is open (iOS-safe; replaces the inline body style) */
html.afca-menu-open,
html.afca-menu-open body { overflow: hidden !important; }

/* Avatars: one source of truth (moved out of PHP). Header override above sets 40px. */
.afca-menu-avatar {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
#afca-mobile-nav .afca-menu-avatar { margin-right: 12px !important; }

/* Pressed feedback on touch, hover polish only where hover exists */
@media (hover: none) {
    .afca-custom-hamburger:hover { transform: none !important; box-shadow: 0 8px 25px rgba(15, 23, 42, 0.25) !important; background: rgba(50, 50, 50, 0.3) !important; }
}
.afca-custom-hamburger:active { transform: scale(0.96) !important; }
#afca-mobile-nav > li > a:active,
#afca-mobile-nav ul.sub-menu li > a:active { background: #f1f5f9 !important; }

/* Very small phones */
@media (max-width: 380px) {
    #afca-mobile-nav > li > a { font-size: 18px !important; }
    .afca-mobile-footer-actions { grid-template-columns: 1fr !important; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .afca-global-header,
    .afca-global-header *,
    #afca-custom-overlay,
    #afca-custom-overlay *,
    .et_pb_menu .et-menu-nav ul.sub-menu {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
    }
}