/* ==========================================================
   header-mobile.css — Mobile header + search overlay
   (linealight-style)

   [Version History]
   v2.2.0 - 2026-08-02 - Initial two-state mobile header.
   v2.2.4 - 2026-08-02 - Logo fixes: restore aspect ratio (Rey pinned the
       mobile logo to 180x32 vs natural 200x111); remove the mis-anchored
       :not(.jyl-dark) rules that leaked filter:brightness(0) into dark
       mode; reveal the configured white logo in dark mode by hiding
       img.rey-mobileLogo (the existing swap only hid img.custom-logo).
   v2.2.3 - 2026-08-02 - Visual polish: pill bg forced with !important
       (header resets button bg to transparent); stronger pill border;
       icon margin-left; msb text black/white non-bold; search overlay
       input restyled as a rounded bordered pill; plain X; light-mode
       logo swapped to dark at ALL scroll states (was faint at top).
   v2.2.2 - 2026-08-02 - Pill fixes: force full pill radius with !important
       (Elementor/Rey reset buttons in-header to radius:0); hide the pill
       while the mega menu or search overlay is open.
   v2.2.1 - 2026-08-02 - Rework after visual review:
       (1) trigger pinned far-right (container space-between).
       (2) glass on the TOP BAR only; search pill floats over
           the hero as an absolute layer (header itself is now
           transparent).
       (3)/(4) search pill opens a custom overlay (#jyl-search)
           with a real input + Quick-access cards (see
           jyl-search.js + jyl_search_panel_render()).
       (5) header is ALWAYS position:fixed on mobile (no
           hide-on-scroll); .jyl-hdr--scrolled only drives the
           visual swap glass -> solid.
       (6) account link restyled/relocated (jyl-mega-menu.css).

   Driven by html.jyl-hdr--scrolled (toggled in main.js initHeader).
   Scope: EVERY rule is inside @media (max-width: 897px) so the
   desktop header (>=898px) and Rey's sticky clone are untouched.
   Concrete target is .rey-siteHeader--226 (this Elementor header
   has no .rey-header-top / .rey-siteHeader__inner).
   ========================================================== */

@media (max-width: 897px) {

    /* ---- Tunables (adjust here after visual check) ---- */
    .rey-siteHeader--226 {
        --jyl-msb-h:   50px;   /* search pill height             */
        --jyl-msb-gap: 12px;   /* gap: top bar bottom -> pill    */
        --jyl-msb-px:  16px;   /* pill horizontal inset          */
        --jyl-logo-h:  44px;   /* logo max-height (width scales)  */
    }

    /* ---- 1. Header shell: ALWAYS fixed, transparent (issues 2 + 5) ---- */
    .rey-siteHeader--226,
    .rey-siteHeader--226.header-pos--absolute {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        width: 100%;
        background: transparent !important;
        border: 0 !important;
        overflow: visible !important;
        z-index: var(--jyl-z-header, 100);
    }
    /* Neutralise the hide-on-scroll transform on mobile (issue 5):
       the header must stay put in both scroll directions. */
    .rey-siteHeader--226.jyl-hdr--hidden { transform: none !important; }

    /* ---- 2. TOP BAR = the glass bar (Elementor section) (issue 2) ---- */
    .rey-siteHeader--226 .elementor-element-bf0188f {
        background: rgba( 150, 150, 150, .30 ) !important;
        background-image: none !important;
        -webkit-backdrop-filter: blur( 18px );
        backdrop-filter: blur( 18px );
        border-bottom: 1px solid rgba( 255, 255, 255, .16 );
        min-height: 0 !important;
        transition: background var(--jyl-t300) var(--jyl-ease);
    }
    .jyl-dark .rey-siteHeader--226 .elementor-element-bf0188f {
        background: rgba( 18, 18, 18, .42 ) !important;
        border-bottom-color: rgba( 239, 238, 236, .12 );
    }

    /* ---- 1b. Top row layout: logo far-left, trigger far-right (issue 1) ---- */
    .rey-siteHeader--226 .elementor-element-bf0188f > .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        max-width: none;
    }
    .rey-siteHeader--226 .elementor-element-bf0188f > .elementor-container > .elementor-column {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }
    /* Controls column: push its (only visible) child — the trigger — hard right. */
    .rey-siteHeader--226 .elementor-element-a9fa1ba .elementor-widget-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
    }

    /* Account icon hidden (moved to mega-menu footer). Rey search icon hidden
       at top (the floating pill replaces it) — shown again when scrolled. */
    .rey-siteHeader--226 .elementor-widget-reycore-header-account { display: none !important; }
    .rey-siteHeader--226 .elementor-widget-reycore-header-search  { display: none !important; }

    /* ---- 3. Floating search pill: absolute layer over the hero (issue 2) ----
       Shape props carry !important because Elementor/Rey reset buttons inside
       the header (border-radius:0) with higher-priority rules. */
    .jyl-mobile-searchbar {
        position: absolute;
        top: 100%;                                  /* just below the top bar */
        left: var(--jyl-msb-px);
        right: var(--jyl-msb-px);
        margin-top: var(--jyl-msb-gap);
        height: var(--jyl-msb-h);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 20px;
        border: 1px solid rgba( 0, 0, 0, .12 ) !important;
        border-radius: 999px !important;            /* full pill (screenshot 1) */
        background: rgba( 240, 240, 240, .96 ) !important; /* !important: header resets button bg */
        font-family: var(--jyl-font);
        font-size: var(--jyl-fs-14);
        text-align: left;
        cursor: text;
        box-shadow: var(--jyl-shadow-nav, 0 6px 24px rgba(0,0,0,.12));
        -webkit-appearance: none;
        appearance: none;
    }
    .jyl-mobile-searchbar .jyl-msb-icon {
        flex: 0 0 auto; width: 18px; height: 18px; display: block;
        margin-left: 20px;                          /* item 2: keep icon off the border */
        color: var(--jyl-grey-dark);
    }
    .jyl-mobile-searchbar .jyl-msb-text {
        flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        color: var(--jyl-black);                    /* item 1: black in light mode */
        font-weight: 400;                           /* item 1: no bold */
    }
    .jyl-dark .jyl-mobile-searchbar {
        background: rgba( 255, 255, 255, .12 ) !important;
        border-color: rgba( 255, 255, 255, .16 ) !important;
    }
    .jyl-dark .jyl-mobile-searchbar .jyl-msb-icon { color: var(--jyl-white); }
    .jyl-dark .jyl-mobile-searchbar .jyl-msb-text { color: var(--jyl-white); } /* item 1: white in dark */

    /* Hide the pill whenever an overlay owns the screen — the mega menu
       (issue: pill floated over the open menu) or the search overlay itself. */
    body.jyl-menu-open .jyl-mobile-searchbar,
    body.jyl-search-open .jyl-mobile-searchbar {
        display: none !important;
    }

    /* ---- 4. SCROLLED state: solid compact bar, no pill (issue 5 visual) ---- */
    .jyl-hdr--scrolled .rey-siteHeader--226 .elementor-element-bf0188f {
        background: var(--jyl-white) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid var(--jyl-beige-medium);
        box-shadow: var(--jyl-shadow-nav, 0 6px 24px rgba(0,0,0,.10));
    }
    .jyl-dark.jyl-hdr--scrolled .rey-siteHeader--226 .elementor-element-bf0188f {
        background: var(--jyl-black) !important;
        border-bottom-color: rgba( 239, 238, 236, .12 );
    }
    .jyl-hdr--scrolled .jyl-mobile-searchbar { display: none !important; }
    .jyl-hdr--scrolled .rey-siteHeader--226 .elementor-widget-reycore-header-search {
        display: block !important;
    }
    /* Icon + hamburger ink in the white bar (light mode). */
    .jyl-hdr--scrolled:not(.jyl-dark) .rey-siteHeader--226 .rey-headerIcon,
    .jyl-hdr--scrolled:not(.jyl-dark) .rey-siteHeader--226 .jyl-menu-trigger {
        color: var(--jyl-grey-dark);
    }

    /* ---- 5. Logo: fix distortion + dark-mode white logo ----
       The mobile logo (img.rey-mobileLogo) is JingYinglight-Logo-2.png — a DARK
       PNG (measured luminance ~45). Rey pins it to a fixed 180x32 while the
       natural size is 200x111, which squashes it flat; restore aspect ratio by
       driving off height only. A dark PNG already reads on both the light glass
       bar and the white scrolled bar, so LIGHT mode needs NO colour change.

       DARK mode: the existing swap (jyl-mega-menu.css) paints the configured
       white logo (--jyl-logo-dark-mobile = Logo-1.png) as an ::after background
       but only hides img.custom-logo (a desktop node). The visible mobile node
       is img.rey-mobileLogo, so hide THAT too and the white logo shows. */
    .rey-siteHeader--226 .rey-siteLogo img {
        width: auto !important;
        height: auto !important;
        max-height: var(--jyl-logo-h, 44px) !important;
        max-width: 180px !important;
        object-fit: contain !important;
        filter: none !important;                /* clear any inherited brightness() */
    }
    .jyl-dark-logo--active.jyl-dark .rey-siteHeader--226 .rey-siteLogo a.custom-logo-link > img.rey-mobileLogo,
    .jyl-dark.jyl-dark-logo--active .rey-siteHeader--226 .rey-siteLogo a.custom-logo-link > img.rey-mobileLogo {
        visibility: hidden;
    }
    /* Size the dark-mode ::after white logo to the same box (left-aligned). */
    .jyl-dark .rey-siteHeader--226 .rey-siteLogo a.custom-logo-link::after {
        background-position: left center;
    }
}

/* ==========================================================
   Search overlay (#jyl-search) — issues 3 + 4
   Rendered in wp_footer by jyl_search_panel_render(); opened by
   jyl-search.js. Anchored below the header (uses --jyl-hdr-real,
   published by main.js initHeaderOffset). Mobile-first; the pill
   that opens it is mobile-only, but the overlay itself is width
   agnostic and simply hidden until opened.
   ========================================================== */
.jyl-search {
    position: fixed; inset: 0;
    z-index: var(--jyl-z-header, 100);
    visibility: hidden;
    pointer-events: none;
}
.jyl-search.is-open { visibility: visible; pointer-events: auto; }

.jyl-search__backdrop {
    position: absolute; inset: 0;
    background: rgba( 20, 20, 20, .55 );
    opacity: 0;
    transition: opacity var(--jyl-t300) var(--jyl-ease);
}
.jyl-search.is-open .jyl-search__backdrop { opacity: 1; }

.jyl-search__panel {
    position: absolute;
    top: var(--jyl-hdr-real, 64px);
    left: 0; right: 0;
    background: var(--jyl-white);
    box-shadow: 0 12px 32px rgba( 0, 0, 0, .18 );
    transform: translateY( -12px );
    opacity: 0;
    transition: transform var(--jyl-t300) var(--jyl-ease),
                opacity var(--jyl-t300) var(--jyl-ease);
    max-height: calc( 100vh - var(--jyl-hdr-real, 64px) );
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.jyl-search.is-open .jyl-search__panel { transform: translateY( 0 ); opacity: 1; }
.jyl-dark .jyl-search__panel { background: var(--jyl-black); }

.jyl-search__form {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
}
.jyl-search__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--jyl-grey-dark); }
.jyl-dark .jyl-search__icon { color: var(--jyl-white); }
.jyl-search__input {
    flex: 1 1 auto;
    outline: 0;
    border: 1px solid var(--jyl-beige-dark);
    border-radius: 999px;                       /* item 3: rounded input pill (screenshot 1) */
    background: var(--jyl-white);
    font-family: var(--jyl-font); font-size: var(--jyl-fs-16, 16px);
    color: var(--jyl-black);
    padding: 11px 18px;
}
.jyl-dark .jyl-search__input {
    color: var(--jyl-white);
    background: rgba( 255, 255, 255, .06 );
    border-color: rgba( 255, 255, 255, .16 );
}
.jyl-search__input::placeholder { color: var(--jyl-grey-light); }
.jyl-search__close {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: transparent;                    /* plain X, no circle (screenshot 1) */
    color: var(--jyl-grey-dark);
    cursor: pointer;
}
.jyl-dark .jyl-search__close { color: var(--jyl-white); }

.jyl-search__quick { padding: 20px 16px 24px; }
.jyl-search__quick-title {
    margin: 0 0 14px;
    font-family: var(--jyl-font);
    font-size: var(--jyl-fs-14);
    font-weight: var(--jyl-fw-medium);
    letter-spacing: var(--jyl-ls-md);
    color: var(--jyl-black);
}
.jyl-dark .jyl-search__quick-title { color: var(--jyl-white); }
.jyl-search__cards {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.jyl-search__cards::-webkit-scrollbar { display: none; }
.jyl-search__card {
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align: start;
    border-radius: var(--jyl-radius-sm);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background: var(--jyl-beige-medium);
}
.jyl-search__card-img {
    display: block; width: 100%; height: 150px; object-fit: cover;
}
.jyl-search__card-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 12px;
    background: linear-gradient( to top, rgba(0,0,0,.65), rgba(0,0,0,0) );
    color: var(--jyl-white);
    font-family: var(--jyl-font);
    font-size: var(--jyl-fs-14);
    font-weight: var(--jyl-fw-medium);
}

/* Body scroll lock while the overlay is open. */
body.jyl-search-open { overflow: hidden; }