/*
 * Sensorem site header.
 *
 * Rendered by Sensorem_Menu (classes/class-sensorem-menu.php), which replaced
 * five Beaver Builder Themer header layouts. Three bands, from the design:
 *
 *   Utility row  #155A8C  56px   customer-type switcher · Trustpilot · phone + language
 *   Main bar     #29A0DA  72px   logo + top-level nav · CTA pill
 *   Sub bar      #DCEFF8  auto   children of the open item, in flow below the bar
 *
 * ⚠ The sub bar is **in flow and pushes the page down** — it is not overlaid,
 * and it is opened by a click on the section's <summary>, not by hover. It was
 * absolutely positioned while it only ever appeared under the pointer; once the
 * current section's bar started rendering open on arrival, overlaying meant
 * every section page began underneath it. A nested panel cannot be in flow at
 * full width, which is why Sensorem_Menu renders the panels outside the nav and
 * generates one :has() pairing rule per section (Sensorem_Menu::pairing_css).
 * See the notes there before changing any of this.
 *
 * Everything is prefixed .sc- so nothing bleeds into Beaver Builder layouts.
 * The mobile overlay panel itself is NOT styled here — it keeps the rules in
 * style.css:644-985 that the recent mobile rebuild produced.
 */

.sc-header {
    --sc-utility-bg: #155a8c;
    --sc-main-bg: #29a0da;
    --sc-sub-bg: #dceff8;
    --sc-sub-ink: #155a8c;
    --sc-sub-accent: #1a6fa8;
    --sc-cta-bg: #de7541;
    --sc-cta-ink: #0e1b22;
    --sc-gutter: 32px;
    --sc-utility-h: 40px;
    --sc-main-h: 72px;
    --sc-logo-max-h: 46px;

    background: var(--sc-main-bg);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.sc-header *,
.sc-header *::before,
.sc-header *::after {
    box-sizing: border-box;
}

.sc-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-header a {
    text-decoration: none;
}

.sc-header .sc-icon {
    display: block;
    flex: 0 0 auto;
}

/* ── Utility row ──────────────────────────────────────────────────────────── */

.sc-header__utility {
    background: var(--sc-utility-bg);
    color: #ffffff;
    position: relative;
}

.sc-header__utility-inner {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-height: var(--sc-utility-h);
    padding: 0 var(--sc-gutter);
}

.sc-header__slot {
    align-items: center;
    display: flex;
    gap: 18px;
    /* Above the absolutely centred Trustpilot widget, so a wide widget can
       never swallow clicks on the switcher or the phone number. */
    position: relative;
    z-index: 1;
}

/* Trustpilot sits dead centre of the row regardless of how wide the switcher
   and the phone/language group happen to be in each locale. */
.sc-header__trustpilot {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*
 * The widget is asked for width 100%, so this box decides how much of its own
 * row it draws: below roughly 460px it silently drops the "Utmärkt … 4.6 av 5"
 * text and shows only the stars. Clamped so it never grows into the switcher or
 * the phone/language group on a narrow laptop.
 *
 * `min-height` reserves the widget's own 28px. Trustpilot's bootstrap builds
 * the iframe client-side and *replaces* this box's contents — measured at ~9s
 * on a cold cache — so without the reservation the box is 0px tall for the
 * whole load and the row pops when the iframe lands.
 */
.sc-header__trustpilot .trustpilot-widget {
    /* Zero strut so the line box is exactly the inline-flex placeholder's own
       28px — with a 28px line-height the strut made it 32 and the swap to the
       iframe nudged everything 2px. */
    line-height: 0;
    min-height: 28px;
    /* Centres the fallback label in the reserved box, so it sits where the
       widget itself will. The iframe fills the width, so this does not move it. */
    text-align: center;
    width: clamp(320px, 60vw, 900px);
}

/*
 * Trustpilot's own fallback link is all there is until the bootstrap swaps in
 * the iframe — it replaces the anchor rather than adding beside it, so this
 * cannot double up with the real widget.
 *
 * Shown as Trustpilot's official logo (`TP-Logo-Tricolor-White-RGB.svg`, their
 * own asset) so the wait reads as intentional rather than as unstyled text.
 * The box is the widget's own 28px and the logo is drawn 20px tall inside it,
 * so the swap to the real rating is not a nudge.
 *
 * The anchor's "Trustpilot" text is pushed out of sight rather than removed —
 * it is the link's accessible name, and `text-indent` keeps it in the
 * accessibility tree where `display: none` or `font-size: 0` would not.
 */
.sc-header__trustpilot .trustpilot-widget > a {
    background-image: url("../images/TP-Logo-Tricolor-White-RGB.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 20px;
    display: block;
    height: 28px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 100%;
    white-space: nowrap;
}

/* Phone */

.sc-header__phone {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    white-space: nowrap;
}

.sc-header__phone:hover,
.sc-header__phone:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.sc-header__slot--end::before {
    background: rgba(255, 255, 255, 0.28);
    content: '';
    height: 16px;
    order: 1;
    width: 1px;
}

.sc-header__phone {
    order: 0;
}

/* Two anchors are rendered (see Sensorem_Menu::phone_html) because a cached
   page cannot know the viewport. Desktop opens the contact page; the dial link
   takes over at the width where the header goes mobile. Exactly one is
   `display: none`, so only one is in the accessibility tree. */
.sc-header__phone--call {
    display: none;
}

.sc-lang {
    order: 2;
}

/* Customer-type switcher — plain text with pipe separators, per the design,
   rather than the pill treatment customer-type.css gives it elsewhere. */

.sc-header .sc-ct-switcher__list {
    align-items: center;
    gap: 14px;
}

.sc-header .sc-ct-switcher__item + .sc-ct-switcher__item::before {
    color: rgba(255, 255, 255, 0.65);
    content: '|';
    font-size: 12px;
    margin-right: 14px;
}

.sc-header .sc-ct-switcher__item {
    align-items: center;
    display: flex;
}

.sc-header .sc-ct-switcher__link {
    background: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 500;
    padding: 0;
}

.sc-header .sc-ct-switcher__link:hover,
.sc-header .sc-ct-switcher__link:focus-visible {
    background: none;
    color: #ffffff;
}

/* The current entry is the visitor's stored *preference*, published on <html>
   by the customer-type head script — never the page's own type. See
   customer-type.css for why nothing is marked current server-side. */
html[data-ct-pref='privat'] .sc-header .sc-ct-switcher__link[data-ct-set='privat'],
html[data-ct-pref='foretag'] .sc-header .sc-ct-switcher__link[data-ct-set='foretag'],
html[data-ct-pref='kommun'] .sc-header .sc-ct-switcher__link[data-ct-set='kommun'] {
    background: none;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Hiding items per customer type ───────────────────────────────────────── */

/*
 * "Dölj för företag", set per menu item in Appearance -> Menus and emitted as
 * `data-ct-hide` by Sensorem_Menu.
 *
 * ⚠ This has to be CSS, not PHP. WP Rocket serves cached HTML before WordPress
 * boots, so no cacheable page may vary its markup on the sensorem_ct cookie —
 * every visitor of a URL gets byte-identical HTML and the browser decides what
 * to show, off the `data-ct-pref` the customer-type head script puts on <html>
 * before first paint (same mechanism as the switcher's current state above, so
 * no flash and no CLS).
 *
 * Two properties that follow from that, and are not bugs:
 *   - the items are in the HTML for every visitor, so this is tidying the nav,
 *     never concealment of anything sensitive;
 *   - with JavaScript off no data-ct-pref is set and everyone sees everything,
 *     which is the safe direction to fail in.
 *
 * Privat is in here as well as the sections: it is the absence of a section
 * rather than one of them, but a visitor still browses *as* Privat, so an item
 * can be shown only to företag just as it can be hidden from them.
 *
 * `~=` matches one slug in the space-separated list, so a third customer type
 * needs no new selector — only a new value. Items with children are never
 * emitted with the attribute at all (Sensorem_Menu::hidden_for).
 *
 * `.sc-header` covers the mobile panel too: #header-menu-container is rendered
 * inside the same <header>, as a sibling of the main bar.
 */
html[data-ct-pref='privat'] .sc-header [data-ct-hide~='privat'],
html[data-ct-pref='foretag'] .sc-header [data-ct-hide~='foretag'],
html[data-ct-pref='kommun'] .sc-header [data-ct-hide~='kommun'] {
    display: none;
}

/* ── Language switcher ────────────────────────────────────────────────────── */

.sc-lang {
    position: relative;
}

/*
 * The open dropdown has to clear the hamburger, which carries `z-index: 1000`
 * (style.css:727) so it stays clickable as the close button above the panel
 * overlay's 999.
 *
 * ⚠ It must be lifted on **`.sc-header__slot`**, not on `.sc-lang`. The slot is
 * `position: relative; z-index: 1`, which makes it a stacking context — so
 * everything inside it is sealed at z-index 1 relative to `.sc-header`, and any
 * value on the switcher or its list (`z-index: 10`) is compared only against
 * its siblings inside the slot. The hamburger participates in `.sc-header`'s
 * context directly, so 1000 beat the whole slot no matter what. Raising
 * `.sc-lang` itself to 1001 changes nothing; that was tried.
 *
 * Scoped to the open state with `:has()` so the closed switcher stays out of
 * the contest entirely.
 */
.sc-header__slot:has(.sc-lang[open]) {
    z-index: 1001;
}

/*
 * ...but never above the mobile panel. That overlay deliberately covers the
 * utility row, and a dropdown left open before the hamburger was tapped would
 * otherwise float on top of it.
 */
body:has(#hamburger-menu-container[open]) .sc-header__slot:has(.sc-lang[open]) {
    z-index: 1;
}

.sc-lang__toggle {
    align-items: center;
    background: none;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    gap: 4px;
    list-style: none;
    padding: 4px 0;
}

/* <summary> draws a disclosure marker by default. Both the language switcher
   and every nav section with children are <summary> elements. */
.sc-lang__toggle,
.sc-nav__summary {
    list-style: none;
}

.sc-lang__toggle::-webkit-details-marker,
.sc-nav__summary::-webkit-details-marker {
    display: none;
}

.sc-lang__toggle:hover,
.sc-lang__toggle:focus {
    border: 0;
    text-decoration: underline;
    background: none;
}

.sc-lang__current {
    line-height: 1;
}

.sc-lang__toggle .sc-icon:last-child {
    transition: transform 0.2s ease;
}

/* `<details open>` is the browser's own state — no script sets this. */
.sc-lang[open] .sc-lang__toggle .sc-icon:last-child {
    transform: rotate(180deg);
}

.sc-header .sc-lang__list {
    background: var(--sc-utility-bg);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10;
}

.sc-header .sc-lang__link {
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.78);
    display: block;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 10px;
}

.sc-lang__link:hover,
.sc-lang__link:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.sc-lang__link.is-current {
    color: #ffffff;
    font-weight: 700;
}

/* ── Main bar ─────────────────────────────────────────────────────────────── */

.sc-header__main {
    background: var(--sc-main-bg);
}

.sc-header__main-inner {
    align-items: center;
    display: flex;
    gap: var(--sc-gutter);
    min-height: var(--sc-main-h);
    padding: 0 var(--sc-gutter);
}

.sc-header__logo {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}

.sc-header__logo-img {
    display: block;
    height: auto;
    max-height: var(--sc-logo-max-h);
    max-width: 180px;
    width: auto;
}

/* Nav */

/*
 * The nav and its items fill the height of the main bar, so the whole column
 * is a click target rather than just the text.
 *
 * `position` is deliberately left unset on everything between the item and
 * `.sc-header`, so each panel's `position: absolute` resolves against the
 * sticky header and spans the full width.
 */
.sc-nav {
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.sc-nav__list {
    align-items: stretch;
    display: flex;
    gap: 24px;
    height: 100%;
}

.sc-nav__item {
    align-items: center;
    display: flex;
    gap: 4px;
    /* Inactive items sit at 72% in the design; the hovered and current ones
       come up to full white and bold. */
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

/* The <details> fills its item so the summary is a full-height target. */
.sc-nav__disclosure {
    align-items: center;
    display: flex;
    height: 100%;
}

.sc-nav__item:hover,
.sc-nav__item:focus-within,
.sc-nav__item.is-current,
.sc-nav__item:has(> .sc-nav__disclosure[open]) {
    opacity: 1;
}

.sc-nav__link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* A section's control is a <summary>, not an anchor — its page is the "read
   more" link inside the panel. Styled to read exactly like its sibling links. */
.sc-nav__summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 4px;
}

.sc-nav__link:hover,
.sc-nav__link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.sc-nav__item.is-current .sc-nav__link {
    font-weight: 800;
}

.sc-nav__caret {
    color: #ffffff;
    display: flex;
}

.sc-nav__caret .sc-icon {
    transition: transform 0.2s ease;
}

/* Points up while the section is open, as in the design's hover frame. */
.sc-nav__disclosure[open] .sc-nav__caret .sc-icon {
    transform: rotate(180deg);
}

/* CTA */

.sc-header__cta {
    align-items: center;
    background: var(--sc-cta-bg);
    border-radius: 999px;
    color: var(--sc-cta-ink);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 48px;
    padding: 0 28px;
    text-align: center;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.sc-header__cta:hover,
.sc-header__cta:focus-visible {
    color: var(--sc-cta-ink);
    opacity: 0.88;
}

/* ── Sub bar ──────────────────────────────────────────────────────────────── */

/*
 * Closed by default; opened by the <details> the panel sits in, which the
 * browser toggles on a click or on Enter/Space on its <summary>. No JavaScript
 * in this path at all, and `name="sc-nav-section"` on the disclosures makes
 * them mutually exclusive natively — opening one closes the others.
 *
 * `top: 100%` is 100% of `.sc-header`, not of the `<li>`: the item is not
 * positioned, so the sticky header is the containing block. That is what puts
 * the panel at the header's bottom edge and lets it span the full width.
 *
 * `opacity` is reset because the panel is a child of the nav item, which is
 * dimmed to 0.85 when inactive.
 */
/*
 * The sub bar is an ordinary block in the header's flow, rendered after the
 * main bar rather than inside the nav item that opens it, so its height is
 * part of the header and the page starts below it. It used to be absolutely
 * positioned and overlay the page — fine while it only appeared under the
 * pointer, wrong now that the current section's bar is open on arrival and a
 * visitor would find the top of their page sitting behind it.
 *
 * What shows it is one generated `:has()` rule per section
 * (Sensorem_Menu::pairing_css), because trigger and panel are no longer
 * ancestor and descendant.
 */
.sc-subbar {
    background: var(--sc-sub-bg);
    border-bottom: 1px solid rgba(26, 111, 168, 0.12);
    cursor: auto;
    display: none;
    opacity: 1;
    text-align: left;
}

/*
 * Opening animates, behind `prefers-reduced-motion`. The keyframe runs
 * whenever the panel starts being rendered, so it needs no `[open]` selector
 * of its own — the generated pairing rule decides that.
 *
 * Closing is instant. It cannot be a transition: the panel goes straight to
 * `display: none` the moment `[open]` is dropped, and there is nothing left to
 * fade. The `::details-content` trick that used to cover this only worked while
 * the panel lived inside the `<details>`.
 *
 * Two traps in here, both found by measuring:
 *
 *   - The panel's own `display` toggle has to go inside the @supports block,
 *     because `display: none` lands the instant `[open]` is dropped and cuts
 *     the fade off before it starts. When ::details-content is available the UA
 *     already hides the content, so the panel does not need a display switch.
 *   - **Opacity only on ::details-content — never a transform.** A transformed
 *     element is a containing block for absolutely positioned descendants, so a
 *     transform here would re-anchor the panel from `.sc-header` to the nav
 *     item and jump it sideways mid-fade. The slide lives in the keyframes,
 *     on the panel itself.
 */
@media (prefers-reduced-motion: no-preference) {
    .sc-subbar {
        animation: sc-subbar-in 0.26s cubic-bezier(0.16, 0.84, 0.44, 1);
    }
}

/*
 * The current section's panel is rendered `open`, so it is already on screen at
 * first paint and must not play the entry animation — a bar that fades in by
 * itself a moment after load reads as something interrupting the page rather
 * than as part of the header.
 *
 * The marker is never cleared, so that one section stays un-animated for the
 * life of the page even if it is closed and reopened by hand. Clearing it would
 * take a script, and the reveal is deliberately CSS only.
 */
@media (prefers-reduced-motion: no-preference) {
    .sc-subbar.is-open-on-load {
        animation: none;
    }
}

@keyframes sc-subbar-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sc-subbar__inner {
    align-items: center;
    display: flex;
    gap: 18px;
    padding: 6px var(--sc-gutter);
}

/* The section title is the link to the section's own page — the top-level item
   is a disclosure now, so this is where the header links it. It renders as a
   <p> instead when the menu item has no usable URL. */
.sc-subbar__label {
    align-items: center;
    color: var(--sc-sub-accent);
    display: flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.88px;
    margin: 0;
    padding: 8px 0;
    text-transform: uppercase;
    white-space: nowrap;
}

a.sc-subbar__label:hover,
a.sc-subbar__label:focus-visible {
    color: var(--sc-sub-ink);
    text-decoration: underline;
}

/*
 * The section icon, either the default or one an editor picked per menu item in
 * Appearance -> Menus. The picked ones are Ionicons outline files with no
 * width/height of their own, so the box sizes them here.
 */
.sc-subbar__icon {
    display: flex;
    flex: 0 0 auto;
}

.sc-subbar__icon svg {
    display: block;
    height: 16px;
    width: 16px;
}

/* Ionicons leave solid shapes — the dot in help-circle-outline — without a
   fill, which paints them black rather than in the label's colour. */
.sc-subbar__icon svg circle:not([stroke]),
.sc-subbar__icon svg path:not([stroke]) {
    fill: currentColor;
}

.sc-subbar__divider {
    align-self: stretch;
    background: rgba(26, 111, 168, 0.2);
    flex: 0 0 1px;
    margin: 10px 0;
    width: 1px;
}

.sc-subbar__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0 20px;
    padding: 4px 0;
}

.sc-subbar__link {
    color: var(--sc-sub-ink);
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.62;
    padding: 8px 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.sc-subbar__item.is-current .sc-subbar__link {
    color: var(--sc-sub-ink);
    font-weight: 800;
    opacity: 1;
    text-decoration: none;
}

/* ── Hamburger ────────────────────────────────────────────────────────────── */

/* Position and animation live in style.css, which the mobile rebuild owns.
   All this does is keep it out of the desktop bar and give the div-as-button
   a pointer target. */
#hamburger-menu-container {
    display: none;
    flex: 0 0 auto;
}

#hamburger-menu {
    outline-offset: 4px;
}

/*
 * `style.css` pulls the burger 26px left with `right: 26px`, to compensate for
 * it overflowing the narrow Beaver Builder column it used to sit in (see the
 * comment there). In this header it is an ordinary flex item in a padded row,
 * so that shift has nothing to correct and instead dragged it 10px underneath
 * the CTA at every mobile width — and past the viewport edge on a wide tablet.
 *
 * Note the `.sc-header` prefix: style.css's rule is `#hamburger-menu-container
 * #hamburger-menu`, identical specificity, and **menu.css is enqueued before
 * style.css** — so matching its specificity loses on source order. The extra
 * class wins regardless of order.
 */
.sc-header #hamburger-menu-container #hamburger-menu {
    right: auto;
}

/* ── Below the desktop breakpoint ─────────────────────────────────────────── */

/*
 * 992px matches Beaver Builder's medium breakpoint, which the old header
 * switched at. The important fix here is that the phone and the CTA stay
 * visible the whole way down: the old header hid the phone/CTA pair above
 * 768px (fl-visible-mobile) and the desktop pair below 993px
 * (fl-visible-desktop), so between 769px and 992px — iPad Air and iPad Pro in
 * portrait — neither was on the page.
 */
@media (max-width: 992px) {
    .sc-header {
        --sc-gutter: 20px;
        --sc-main-h: 100px;
    }

    .sc-header__phone--call {
        display: flex;
    }

    .sc-header__phone--page {
        display: none;
    }

    /* Hides the top-level items and, with them, their nested sub bars. */
    .sc-nav {
        display: none;
    }

    #hamburger-menu-container {
        display: block;
    }

    .sc-header__main-inner {
        gap: 16px;
    }

    .sc-header__cta {
        margin-left: auto;
    }

    .sc-header__cta {
        font-size: 15px;
        min-height: 42px;
        padding: 0 22px;
    }

    /*
     * Trustpilot is dropped from the header entirely below the desktop
     * breakpoint — at these widths it needed a strip of its own under the
     * switcher and ate more of the viewport than it earned.
     *
     * Note this hides it rather than un-loading it: the page is cached and
     * shared between viewports, so PHP cannot know the width, and Trustpilot's
     * bootstrap initialises every `.trustpilot-widget` regardless of whether it
     * is visible. The requests still happen (disk-cached after the first
     * visit); the space does not.
     *
     * It also leaves the utility row as a single 56px strip on mobile, which is
     * what `style.css`'s `#header-menu-container { top: 55px }` overlay lines
     * up under.
     */
    .sc-header__trustpilot {
        display: none;
    }
}

@media (max-width: 600px) {
    .sc-header {
        --sc-logo-max-h: 34px;
    }

    .sc-header__utility-inner {
        gap: 10px;
    }

    .sc-header .sc-ct-switcher__list {
        gap: 8px;
    }

    .sc-header .sc-ct-switcher__item + .sc-ct-switcher__item::before {
        margin-right: 8px;
    }

    /* The number itself is dropped on the narrowest screens — the icon still
       dials — so the switcher keeps room for three labels. */
    .sc-header__phone-label {
        display: none;
    }

    .sc-header__cta {
        font-size: 14px;
        padding: 0 16px;
    }
}

/* ── Checkout ─────────────────────────────────────────────────────────────── */

/* Checkout has always had a non-sticky header (see checkout.css) so the
   payment step can never be covered on a short viewport. */
.woocommerce-checkout .sc-header {
    position: relative;
    top: auto;
}

/* Only the logo and the contact link render here — Sensorem_Menu::render()
   skips the rest rather than hiding it. The contact link goes to the far end
   so the bar reads as a header and not as a stray pair of items, and the main
   bar keeps its normal height instead of the taller mobile one, since there is
   no nav to wrap. */
.sc-header--checkout .sc-header__phone {
    margin-left: auto;
}

@media (max-width: 992px) {
    .sc-header--checkout {
        --sc-main-h: 72px;
    }
}

/* ── Mobile panel: opening it, with no JavaScript ─────────────────────────── */

/*
 * The hamburger is a `<details>` (Sensorem_Menu::hamburger_html), so the panel
 * opens the moment the markup is parsed. It used to be jQuery in `app.js`,
 * which meant the one control on a phone was dead until jQuery had loaded and
 * that file had run — and `.show()`/`.fadeIn()` wrote inline `display` styles
 * that CSS then had to fight.
 *
 * Three elements are `display: none` in style.css and were all revealed by that
 * script: the overlay, the circle behind it, and the list itself. The panel is
 * not inside the `<details>` — it is a full-screen fixed overlay rendered as a
 * sibling — so `:has()` bridges the two, exactly as it does for the sub bars.
 *
 * `<summary>` needs its marker removed in both engines, like the other two
 * disclosures in this file.
 */
#hamburger-menu {
    list-style: none;
}

#hamburger-menu::-webkit-details-marker {
    display: none;
}

#hamburger-menu-container[open] #menu-circle,
.sc-header:has(#hamburger-menu-container[open]) #header-menu-container,
.sc-header:has(#hamburger-menu-container[open]) #header-menu-container nav .menu {
    display: block;
}

/*
 * The scroll lock app.js used to apply as an inline style on `.fl-page`.
 */
body:has(#hamburger-menu-container[open]) .fl-page {
    overflow: hidden;
}

/*
 * The staged fade the jQuery version had — the ground first, then the list a
 * beat later. Opening only: a closed `<details>` stops rendering, so there is
 * nothing left to fade on the way out, same as the sub bars.
 */
@media (prefers-reduced-motion: no-preference) {
    #hamburger-menu-container[open] #menu-circle {
        animation: sc-panel-in 0.35s ease both;
    }

    .sc-header:has(#hamburger-menu-container[open]) #header-menu-container nav .menu {
        animation: sc-panel-in 0.25s ease 0.12s both;
    }
}

@keyframes sc-panel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Mobile panel ─────────────────────────────────────────────────────────── */

/*
 * Anchors fill their row, so the whole width is a tap target rather than just
 * the label. Beaver Builder's menu module used to supply this through
 * `.fl-menu a { display: block }`, which reached the panel only because the
 * markup borrowed its class names. Renaming them to `sc-*` cut that tie, so the
 * rule lives here now — the padding was always ours, only `display` came from
 * BB. Measured before the rename: 444px wide top-level, 424px submenu.
 */
#header-menu-container .sc-mobile-nav a {
    display: block;
    text-decoration: none;
}

/* ── Mobile panel submenus ────────────────────────────────────────────────── */

/*
 * Only the show/hide, which Beaver Builder's generated per-module CSS used to
 * provide. Everything about how an open submenu *looks* — sizes, the chevron,
 * the language popover — stays in style.css, which the mobile rebuild owns.
 */

#header-menu-container .menu .sub-menu {
    display: none;
}

#header-menu-container .menu .sc-mobile-nav__item--parent.is-expanded > .sub-menu {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    #header-menu-container .menu .sc-mobile-nav__item--parent:not(.pll-parent-menu-item).is-expanded > .sub-menu {
        animation: sc-submenu-in 0.22s ease;
    }
}

@keyframes sc-submenu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#header-menu-container .sc-mobile-nav__toggle {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

/*
 * The chevron glyph and its 180° flip live in style.css; all that is needed
 * here is a box to draw it in, which Beaver Builder's generated per-module CSS
 * used to supply. Centring is done with flexbox rather than a transform,
 * because style.css rotates this element with `transform: … !important` when
 * the item expands and would otherwise wipe out a translate.
 */
#header-menu-container .menu > li > .sc-mobile-nav__row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

#header-menu-container .menu > li:not(.pll-parent-menu-item) > .sc-mobile-nav__row > .sc-mobile-nav__toggle {
    flex: 0 0 28px;
    height: 28px;
    width: 28px;
}