/* Salient Fusion Nav Bundle — stylesheet
   Extracted from hello-theme-child-master/style.css so the bundle is self-contained
   and portable. Enqueued by bootstrap.php. */
/*
   SALIENT FUSION — HAND-CODED HEADER / NAV / MEGA MENU
   Pure HTML + CSS + 20 lines of JS. Apple-style.
   Breakpoint: ≥900px desktop mega menu · <900px mobile drawer accordion.
   ========================================================================= */

:root {
    --sf-nav-h:        44px;
    --sf-ink:          #1D1D1F;
    --sf-ink-dim:      #6E6E73;
    --sf-border:       rgba(0, 0, 0, 0.06);
    --sf-glass:        rgba(255, 255, 255, 0.78);
    --sf-shadow-soft:  0 8px 24px rgba(0, 0, 0, 0.06);
    --sf-shadow-lift:  0 20px 60px rgba(0, 0, 0, 0.08);
    --sf-font:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.sf-skip-link { position: absolute; left: -9999px; }
.sf-skip-link:focus { left: 8px; top: 8px; background: #000; color: #fff; padding: 8px 12px; z-index: 10000; }

/* ---------- HEADER SHELL (always visible, fixed top) --------------------- */
.sf-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--sf-nav-h);
    /* Solid-colour fallback — glass effect comes from the ::before pseudo
       so that .sf-header itself does NOT get a backdrop-filter. Applying
       backdrop-filter here would create a new containing block for any
       position: fixed descendants (the mega panel), offsetting them. */
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--sf-border);
    z-index: 1000;
    font-family: var(--sf-font);
    color: var(--sf-ink);
}
.sf-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter:         saturate(180%) blur(20px);
    z-index: -1;
    pointer-events: none;
}
/* When backdrop-filter is supported, let the solid fallback on .sf-header
   go fully transparent so the glass layer shows cleanly. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sf-header { background: transparent; }
}

/* Body padding-top is ZERO — hero background extends to top of viewport
   behind the fixed header. The first content section gets compensating
   top padding equal to nav height so its content isn't hidden under the
   header. This is the Apple.com pattern and eliminates white gaps. */
body { padding-top: 0 !important; }
body.admin-bar .sf-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sf-header { top: 46px; } }

/* Strip top margin/padding from every wrapper Hello Elementor inserts
   between body and the first section. */
main#content,
.site-main,
main.site-main,
.hfeed.site,
#page { padding-top: 0 !important; margin-top: 0 !important; }

/* Kill top margin on the first content section and any wrapper around it. */
main#content > *:first-child,
.site-main > *:first-child,
.elementor > *:first-child,
.elementor-inner > *:first-child,
[data-elementor-type="wp-page"] > *:first-child,
[data-elementor-type="single-page"] > *:first-child,
[data-elementor-type] > *:first-child,
.elementor-section:first-of-type,
.e-con:first-of-type {
    margin-top: 0 !important;
}

.sf-header-inner {
    max-width: 1024px;
    margin: 0 auto;
    height: 100%;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ---------- LOGO ---------------------------------------------------------- */
.sf-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--sf-ink);
}
.sf-logo img { display: block; width: 26px; height: 26px; }
.sf-logo-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ---------- DESKTOP NAV (default) ---------------------------------------- */
.sf-nav { flex: 1; min-width: 0; }
.sf-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    /* No flex gap — horizontal spacing comes from per-item padding so the
       cursor never enters a dead-zone between items while traversing. */
    gap: 0;
}
.sf-nav-item {
    position: relative;             /* for ::after pointer bridge */
    padding: 0 18px;                /* replaces the old 36px flex gap */
}
/* Pointer-event bridge: extends each has-mega item's zone downward by
   12px into the space between the nav bar and the mega band. Always
   visible (unlike a pseudo on .sf-mega which inherits visibility:hidden)
   and below the header's z-index so it never blocks the logo/search. */
.sf-nav-item.has-mega::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 12px;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}
.sf-nav-link {
    display: flex;
    align-items: center;
    height: var(--sf-nav-h);
    font-size:               13px !important;
    font-weight:             500 !important;
    letter-spacing:          -0.005em !important;
    color:                   var(--sf-ink) !important;
    -webkit-text-fill-color: var(--sf-ink) !important;
    background:              none !important;
    text-decoration:         none !important;
    font-family:             var(--sf-font) !important;
    transition:              color 150ms ease;
}
.sf-nav-link:hover,
.sf-nav-item:focus-within > .sf-nav-link {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.sf-logo,
.sf-logo-text {
    color:                   var(--sf-ink) !important;
    -webkit-text-fill-color: var(--sf-ink) !important;
    text-decoration:         none !important;
    font-family:             var(--sf-font) !important;
}

/* ---------- MEGA DROPDOWN ------------------------------------------------ */
.sf-mega {
    position: fixed;
    top: var(--sf-nav-h);
    left: 0;
    right: 0;
    bottom: 0;                /* extend glass to the bottom of the viewport */
    width: 100vw;
    /* Glass layer — fills the entire remaining viewport */
    background: var(--sf-glass);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter:         blur(40px) saturate(180%);
    box-shadow: var(--sf-shadow-lift), var(--sf-shadow-soft);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity    180ms ease,
        visibility 0s linear 180ms;
    pointer-events: none;
    z-index: 999;
    will-change: opacity;
}
body.admin-bar .sf-mega { top: calc(var(--sf-nav-h) + 32px); }
@media (max-width: 782px) { body.admin-bar .sf-mega { top: calc(var(--sf-nav-h) + 46px); } }

/* Full-width solid white band — auto-sized to its content. Sits at the top
   of the surface; everything below stays glass all the way to viewport bottom.
   Captures pointer-events so the dropdown stays open ONLY while the cursor
   is over the content band, not the empty glass area below it. */
.sf-mega-band {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid var(--sf-border);
    pointer-events: auto;
}
/* Old band ::before bridge removed — it inherited visibility:hidden from
   the closed mega and its z-index was blocking the header logo/search.
   Replaced by an always-visible bridge on .sf-nav-item.has-mega::after. */

.sf-mega-inner {
    position: relative;
    z-index: 1;
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 22px;
    display: grid;
    /* Each column sizes to its longest link; columns sit naturally
       left-aligned rather than stretching to the container edges, so
       the right column is pulled inward toward the centre. */
    grid-template-columns: max-content max-content max-content;
    justify-content: start;
    gap: 72px;
}

.sf-mega-heading {
    font-size:               12px !important;
    font-weight:             500 !important;
    letter-spacing:          0.04em !important;
    text-transform:          uppercase !important;
    color:                   var(--sf-ink-dim) !important;
    -webkit-text-fill-color: var(--sf-ink-dim) !important;
    background:              none !important;
    background-image:        none !important;
    -webkit-background-clip: initial !important;
    background-clip:         initial !important;
    margin:                  0 0 16px 0 !important;
    padding:                 0 !important;
    line-height:             1.4 !important;
    font-family:             var(--sf-font) !important;
}
.sf-mega-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sf-mega-list li { margin: 0 !important; padding: 0 !important; }
.sf-mega-band,
.sf-mega-inner,
.sf-mega-col,
.sf-mega-list,
.sf-mega-list li,
.sf-mega-list a { pointer-events: auto !important; }
.sf-mega-list a {
    display:                 inline-block;
    color:                   var(--sf-ink) !important;
    -webkit-text-fill-color: var(--sf-ink) !important;
    background:              none !important;
    background-image:        none !important;
    -webkit-background-clip: initial !important;
    background-clip:         initial !important;
    font-size:               16px !important;
    font-weight:             500 !important;
    line-height:             1.55 !important;
    text-decoration:         none !important;
    font-family:             var(--sf-font) !important;
    transition:              color 150ms ease;
}
/* Apple-style: first column has larger text (like Shop the Latest / Mac / iPad) */
.sf-mega-col:first-child .sf-mega-list { gap: 14px; }
.sf-mega-col:first-child .sf-mega-list a {
    font-size:   24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.018em !important;
    white-space: nowrap;
}
.sf-mega-list a:hover {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}


/* Show mega via JS-controlled .is-mega-open class, or keyboard focus.
   The CSS :hover fallback was removed — it kept the panel visible even
   after JS removed .is-mega-open, fighting the close-on-leave behaviour. */
.sf-nav-item.has-mega.is-mega-open > .sf-mega,
.sf-nav-item.has-mega:focus-within > .sf-mega {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Hide the mobile-only controls on desktop */
.sf-mob-expand { display: none !important; }
.sf-mob-toggle { display: none !important; }

/* ---------- SEARCH TRIGGER (always visible, right of nav) --------------- */
.sf-search-trigger {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          40px;
    height:         40px;
    margin-left:    8px;
    flex-shrink:    0;
    background:     none !important;
    border:         0 !important;
    outline:        none !important;
    box-shadow:     none !important;
    padding:        0 !important;
    cursor:         pointer;
    color:          var(--sf-ink) !important;
    -webkit-tap-highlight-color: transparent;
    appearance:     none;
    -webkit-appearance: none;
    transition:     opacity 150ms ease;
}
.sf-search-trigger:hover,
.sf-search-trigger:focus,
.sf-search-trigger:active { color: #000 !important; outline: none !important; }
.sf-search-trigger:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px; }
.sf-search-trigger svg { display: block; color: inherit; }

/* ---------- SEARCH PANEL ------------------------------------------------ */
.sf-search-panel {
    position: fixed;
    top:      var(--sf-nav-h);
    left: 0; right: 0; bottom: 0;
    width:    100vw;
    background:              var(--sf-glass);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter:         blur(40px) saturate(180%);
    box-shadow:              var(--sf-shadow-lift), var(--sf-shadow-soft);
    opacity:        0;
    transform:      translateY(-6px);
    transition:
        opacity    180ms ease,
        transform  180ms ease,
        visibility 0s linear 180ms;
    /* CRITICAL: visibility:hidden when closed so the panel and its
       pointer-events:auto descendants (.sf-search-band, inputs etc.)
       cannot intercept mouse events in the dropdown area. Without this
       the search panel overlays — and blocks — the mega menu. */
    visibility:     hidden;
    pointer-events: none;
    overflow:       hidden;
    z-index:        1001;
}
body.admin-bar .sf-search-panel { top: calc(var(--sf-nav-h) + 32px); }
@media (max-width: 782px) { body.admin-bar .sf-search-panel { top: calc(var(--sf-nav-h) + 46px); } }

.sf-search-panel[data-open="true"] {
    opacity:        1;
    transform:      translateY(0);
    visibility:     visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* White content band, same architecture as mega menu */
.sf-search-band {
    position:        relative;
    width:           100%;
    background:      #ffffff;
    border-bottom:   1px solid var(--sf-border);
    pointer-events:  auto;   /* close panel only when clicking outside band */
}

.sf-search-inner {
    position:   relative;
    max-width:  1024px;          /* matches .sf-header-inner so the input
                                    left edge aligns with the logo */
    margin:     0 auto;
    padding:    32px 22px 40px;  /* horizontal padding also mirrors header */
}

/* Search form — large input, no borders, magnifier on left */
.sf-search-form {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        12px 0 20px;
    border-bottom:  1px solid var(--sf-border);
    margin-bottom:  32px;
    background:     transparent !important;
}

/* Magnifier = submit button, no visible container */
.sf-search-submit {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    background:  none !important;
    border:      0 !important;
    outline:     none !important;
    box-shadow:  none !important;
    padding:     0 !important;
    margin:      0 !important;
    color:       var(--sf-ink) !important;
    cursor:      pointer;
    flex-shrink: 0;
    width:       28px;
    height:      28px;
    -webkit-appearance: none;
    appearance:  none;
}
.sf-search-submit svg { display: block; }
.sf-search-submit:focus-visible { outline: 2px solid #000 !important; outline-offset: 4px; border-radius: 4px; }

.sf-search-input {
    flex:                    1;
    min-width:               0;
    width:                   auto !important;
    background:              transparent !important;
    background-color:        transparent !important;
    background-image:        none !important;
    border:                  0 !important;
    border-radius:           0 !important;
    outline:                 none !important;
    box-shadow:              none !important;
    padding:                 4px 0 !important;
    margin:                  0 !important;
    font-size:               30px !important;
    font-weight:             400 !important;
    line-height:             1.2 !important;
    letter-spacing:          -0.015em !important;
    color:                   var(--sf-ink) !important;
    -webkit-text-fill-color: var(--sf-ink) !important;
    font-family:             var(--sf-font) !important;
    -webkit-appearance:      none;
    appearance:              none;
}
.sf-search-input:focus,
.sf-search-input:focus-visible,
.sf-search-input:active {
    outline:    none !important;
    box-shadow: none !important;
    border:     0 !important;
    background: transparent !important;
}
/* Kill any Elementor/theme yellow ring on the form wrapper */
.sf-search-form,
.sf-search-form:focus,
.sf-search-form:focus-within,
.sf-search-form:hover {
    outline:      none !important;
    box-shadow:   none !important;
    border-top:   0 !important;
    border-left:  0 !important;
    border-right: 0 !important;
}
.sf-search-panel input,
.sf-search-panel input:focus,
.sf-search-panel input:focus-visible,
.sf-search-panel input:active {
    outline:       none !important;
    box-shadow:    none !important;
    border-color:  transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}
.sf-search-input::placeholder { color: #86868B; opacity: 1; font-weight: 400; }
.sf-search-input::-webkit-search-decoration,
.sf-search-input::-webkit-search-cancel-button,
.sf-search-input::-webkit-search-results-button,
.sf-search-input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }

/* Kill Chrome autofill yellow */
.sf-search-input:-webkit-autofill,
.sf-search-input:-webkit-autofill:hover,
.sf-search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow:         0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--sf-ink) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Close = small X icon */
.sf-search-close {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    background:    none !important;
    border:        0 !important;
    outline:       none !important;
    box-shadow:    none !important;
    padding:       0 !important;
    margin:        0 !important;
    color:         var(--sf-ink-dim) !important;
    cursor:        pointer;
    flex-shrink:   0;
    width:         28px;
    height:        28px;
    transition:    color 150ms ease;
    -webkit-appearance: none;
    appearance:    none;
}
.sf-search-close:hover { color: #000 !important; }
.sf-search-close svg { display: block; }

/* Quick links — Apple-style mixed case label, right-arrow prefix */
.sf-quick-links { margin-top: 4px; }
.sf-quick-links-label {
    font-size:               15px !important;
    font-weight:             400 !important;
    letter-spacing:          -0.01em !important;
    text-transform:          none !important;
    color:                   var(--sf-ink-dim) !important;
    -webkit-text-fill-color: var(--sf-ink-dim) !important;
    margin:                  0 0 10px 0 !important;
    font-family:             var(--sf-font) !important;
}
.sf-quick-links-list {
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
    display:    flex;
    flex-direction: column;
    gap:        0;
}
.sf-quick-links-list a {
    display:        inline-flex;
    align-items:    baseline;
    gap:            10px;
    padding:        6px 0;
    color:          var(--sf-ink) !important;
    -webkit-text-fill-color: var(--sf-ink) !important;
    font-size:      17px !important;
    font-weight:    500 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    font-family:    var(--sf-font) !important;
    transition:     color 150ms ease;
}
.sf-quick-links-list a:hover { color: #000 !important; }
.sf-quick-arrow {
    display:        inline-block;
    color:          var(--sf-ink);
    font-size:      15px;
    line-height:    1;
    transition:     transform 150ms ease;
}
.sf-quick-links-list a:hover .sf-quick-arrow {
    color:     var(--sf-ink);
    transform: translateX(3px);
}

/* Body lock when search open (re-uses the drawer-lock variable name family) */
body.sf-search-locked { overflow: hidden; }

/* =========================================================================
   MOBILE — drawer + accordion. Breakpoint 900px matches Apple.com behaviour.
   ========================================================================= */
@media (max-width: 900px) {
    .sf-header-inner { padding: 0 20px; gap: 16px; }
    .sf-logo-text    { display: none; }

    /* Hamburger — Apple.com style: two crisp 18×2px bars, 5px gap */
    .sf-mob-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px; height: 40px;
        margin-left: auto;
        background:              none !important;
        border:                  0 !important;
        outline:                 none !important;
        box-shadow:              none !important;
        padding:                 0 !important;
        cursor:                  pointer;
        gap:                     5px;
        color:                   var(--sf-ink) !important;
        -webkit-tap-highlight-color: transparent;
        appearance:              none;
        -webkit-appearance:      none;
    }
    .sf-mob-toggle:hover,
    .sf-mob-toggle:focus,
    .sf-mob-toggle:active { color: var(--sf-ink) !important; outline: none !important; }
    .sf-mob-toggle:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px; }

    .sf-mob-bar {
        display:        block;
        width:          18px;
        height:         2px;
        background:     #1D1D1F !important;
        border-radius:  1px;
        transition:     transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                        opacity   240ms ease;
        transform-origin: center;
    }
    /* Animate to X — Apple-style cross */
    .sf-header[data-mobile-open="true"] .sf-mob-bar:nth-child(1) {
        transform: translateY(3.5px) rotate(45deg);
    }
    .sf-header[data-mobile-open="true"] .sf-mob-bar:nth-child(2) {
        transform: translateY(-3.5px) rotate(-45deg);
    }

    /* Hide desktop nav by default; it becomes the drawer when open */
    .sf-nav {
        position: fixed;
        inset: var(--sf-nav-h) 0 0 0;
        background: #ffffff;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity    200ms ease,
            transform  200ms ease,
            visibility 0s linear 200ms;
        pointer-events: none;
    }
    body.admin-bar .sf-nav { top: calc(var(--sf-nav-h) + 46px); }
    .sf-header[data-mobile-open="true"] .sf-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
        pointer-events: auto;
    }

    /* Lock body scroll while drawer is open */
    body.sf-nav-locked { overflow: hidden; }

    .sf-nav-list {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        padding: 12px 0 48px;
    }
    .sf-nav-item {
        position: relative;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .sf-nav-link {
        height: auto;
        padding: 20px 56px 20px 24px;   /* right padding reserves room for chevron */
        font-size: 22px !important;
        font-weight: 500 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.1 !important;
    }

    /* Apple.com pattern: no per-item chevron on mobile — tapping the
       top-level link navigates to its parent page, which surfaces the
       sub-items there rather than inline in the drawer. */
    .sf-mob-expand { display: none !important; }

    /* Mobile inline accordion: tapping the top-level link toggles
       expansion (JS handles the click). No chevron arrow is shown — the
       row itself is the trigger. */
    .sf-mega {
        display: block !important;
        position: static;
        width: auto;
        background: #fafafa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        overflow: hidden;
        max-height: 0;
        transition: max-height 260ms ease;
    }
    .sf-mega::before { display: none; }
    .sf-nav-item.is-expanded .sf-mega { max-height: 1600px; }
    .sf-mega-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 12px 24px 22px;
    }
    .sf-mega-heading {
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
        margin: 8px 0 8px !important;
    }
    .sf-mega-list { gap: 2px; }
    .sf-mega-list a { font-size: 16px !important; padding: 10px 0 !important; }
    .sf-mega-col:first-child .sf-mega-list a {
        font-size: 16px !important;
        letter-spacing: -0.005em !important;
        font-weight: 500 !important;
    }

    /* Nav link padding — no right-side room needed since no chevron. */
    .sf-nav-link { padding-right: 24px !important; }

    /* Header layout on mobile:
         logo (left) ──── free space ──── search · hamburger (right)
       Push the logo to absorb the free space so the two right-side
       buttons sit together at the far right. */
    .sf-logo { margin-right: auto; }
    .sf-search-trigger {
        display: flex !important;
        width: 40px;
        height: 40px;
        margin: 0 4px 0 0 !important;   /* no auto margin — sits immediately left of hamburger */
    }
    .sf-mob-toggle { margin-left: 0 !important; }

    /* Suppress desktop hover-to-open on mobile */
    .sf-nav-item.has-mega:hover > .sf-mega,
    .sf-nav-item.has-mega:focus-within > .sf-mega { opacity: 1; }

    /* Search panel — tighter padding on mobile */
    .sf-search-inner   { padding: 24px 20px 32px; }
    .sf-search-input   { font-size: 20px !important; }
    .sf-quick-links-list a { font-size: 16px !important; }
}