/* =========================================================================
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, at every width above the hamburger breakpoint: the whole header scales to fit on one line inside its divider line. The row
   takes nearly the full width (a small edge gap instead of Divi's percentage margin, which on a wide screen left the 8-item menu wider than the
   row and pushed the account menu past the line), up to a cap so it stays centred on very large screens. The gaps between the logo, menu and
   account icons close up, and the logo, menu text and menu spacing grow and shrink smoothly with the screen. */
@media (min-width: 1281px) {
    .afca-global-header .et_pb_row {
        width: calc(100% - clamp(28px, 3vw, 56px)) !important;
        max-width: 2200px !important;
        margin-left: auto !important;
        margin-right: auto !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;
    }
}