/* JS-state rules (RUCSS-vulnerable) — moved out of style.css. WP Rocket RUCSS prunes any
   selector keyed on a class only added by JS at runtime (body.scrolled, mm-spn, Splide
   is-active, mobile-show/mobHd wrapper) because it's absent from the crawled server HTML.
   This whole file is excluded from RUCSS (functions.php), so it always ships intact. */

/* Keep the header's bottom border constant in EVERY state. The parent removes it on hover
   (header:hover) and when scrolled (.scrolled header) with border:none — the 2px width drop
   jolts the header, and the color falls to the black currentColor, flashing a dark line on
   hover-off and on scroll. Pin all states to the resting 2px so the width never changes (no
   jolt) and the color never goes black (no flash). White-15% is the faint line over the hero
   at the top; it's invisible on the white scrolled/interior header, where the shadow separates. */
#header:hover,
body.scrolled #header,
body.scrolled #header:hover {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

/* Home Book Now flips secondary->primary once scrolled or on hover (see style.css for the
   resting hero state). */
body.home.scrolled #header .booking-opener,
body.home.scrolled #header .booking-blank,
body.home #header:hover .booking-opener,
body.home #header:hover .booking-blank {
    background-color: var(--primaryColor);
    color: var(--white);
}

/* ===== MOBILE NAV DRAWER (mmenu-light mm-spn) =====
   Panel title bar ("Lyon Dental" / drilled-in submenu title): brand it instead of
   the theme's faded gray text-only bar. opacity:1 — the base rule fades the whole
   pseudo-element (bg included), not just the text.
   (The empty-box `.opener` span is removed at the source — FGMB_Walker_Nav_Menu.) */
.mm-spn.mm-spn--navbar::after {
    background-color: var(--primaryColor);
    color: var(--white);
    opacity: 1;
}
/* Drilled-in submenu back-arrow (border chevron, currentColor by default) — white on
   the green bar. z-index lifts it above the ::after title-bar background (both are
   z-index:auto, so ::after paints over it). Only shows on non-main panels. */
.mm-spn.mm-spn--navbar::before {
    border-color: var(--white);
    opacity: 1;
    z-index: 1;
}

/* Mobile (<=1024): sticky phone button, drawer chevrons, mobile CTA at-rest/scrolled
   states, offer pagination dots — all keyed on JS-added classes. */
@media (max-width: 1024px) {
    .mobile-show.moreInfo a {
        background: var(--primaryColor);
        color: var(--white);
        font-size: 18px;
        width: 34px;
        height: 34px;
        border-radius: var(--btnBorderRadius);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    body .mm-spn li::before {
        border-color: #767676;
    }
    /* padding-top 0: the upper banner (.banWrap, style.css MOBILE) now clears the fixed 56px top bar. */
    .mobHd {
        padding-top: 0;
        padding-bottom: min(58px, 14vw);
    }
    /* Book Now wrapper stays in the flow under the logo in BOTH states, holding the at-rest
       button's height (padding 2 x min(16px, 4vw) + 24px line + 2px border). Once scrolled only
       the inner button floats up into the bar (below), so the page no longer jumps ~97px at the
       95px scroll threshold (that jump was ~0.09 CLS on phones) — an empty gap scrolls away
       instead. transform:none also stops it trapping the fixed inner button. */
    #header .btn-block.mobile-show {
        position: static;
        transform: none;
        margin: 40px auto 0;
        width: fit-content;
        height: calc(2 * min(16px, 4vw) + 26px);
    }
    body:not(.scrolled) #header .btn-block.mobile-show .booking-opener,
    body:not(.scrolled) #header .btn-block.mobile-show .booking-blank {
        padding: min(16px, 4vw) min(32px, 8vw);
        font-size: 16px;
        line-height: 1.5;
    }
    /* transition: colour only. The parent's .btn-primary `transition: all .5s` animated the
       scrolled re-pin (translate + padding), so the button glided diagonally into the bar and
       back out — it now snaps into place; the hover colour fade is kept. */
    #header .btn-block.mobile-show .booking-opener,
    #header .btn-block.mobile-show .booking-blank {
        background-color: var(--primaryColor);
        color: var(--white);
        transition: background-color .5s linear, color .5s linear, border-color .5s linear;
    }
    body .mobile-show.moreInfo {
        top: 11px;
    }
    /* Scrolled: the parent re-pins the button into the 56px bar (no-rucss, 1.0.23); trim it to the
       34px phone button's height. */
    body.scrolled #header .btn-block.mobile-show .booking-opener,
    body.scrolled #header .btn-block.mobile-show .booking-blank {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .home .offers .splide__pagination__page {
        background: var(--primaryColor);
        opacity: 1;
    }
    .home .offers .splide__pagination__page.is-active {
        background: var(--black);
    }
}

/* Desktop (>=1025): hide the upper banner on the homepage the same way interior pages do.
   Interior headers are sticky with a negative top (style.css), so the banner scrolls off 1:1.
   The homepage header is FIXED (see-through over the hero), so a scroll-driven animation moves
   it up by the banner height over the first --banWrapH px of scroll: it tracks the scrollbar
   exactly (no JS, no delay) and always covers the #main offset (no white strip on the way
   back). transform, not top: it runs on the compositor (no layout per scroll frame) and
   transform moves don't count toward CLS — a fixed element moved with top does. The desktop
   header has no fixed-position children, so the transform's containing block is harmless.
   Lives here, not in style.css, so RUCSS can't drop the @keyframes / @supports.
   transition: the parent's `all .5s linear` stays for the scrolled colour swap, but the
   transform must follow the scroll instantly. */
@keyframes banWrapHide {
    to {
        transform: translateY(calc(-1 * var(--banWrapH)));
    }
}
@media (min-width: 1025px) {
    body.home #header {
        transition: all .5s linear, transform 0s;
    }
    @supports (animation-timeline: scroll()) {
        body.home #header {
            animation: banWrapHide linear both;
            animation-timeline: scroll(root);
            animation-range: 0 var(--banWrapH);
        }
        /* The animated header layer is re-rastered on every frame of its hover colour fade; at
           125% / 150% display scaling that shifted the banner text by sub-pixels (visible jiggle on
           hover in and out). Its own layer keeps the banner's raster fixed through the fade. */
        body.home .banWrap {
            will-change: transform;
        }
    }
    /* No scroll-driven animations (Firefox today): snap up once general.js adds body.scrolled. */
    @supports not (animation-timeline: scroll()) {
        body.home.scrolled #header {
            transform: translateY(calc(-1 * var(--banWrapH)));
        }
    }
}