/* ==========================================================================
   U Jabka — Soda design system: SHELL (header, nav, footer, theme control)
   Integrator-owned. Pairs with the `theme-soda` branch of layouts/frontend.php.

   The 1024/1023.98px drawer breakpoint is a CONTRACT shared with
   public/assets/js/frontend.js (`matchMedia('(min-width: 1024px)')`) — if it
   moves here it moves there too. It was 980/981 and moved with the Vesper shell
   so the drawer and the vw/rem regime split (base.css) step together.

   The dead .soda-topbar rules are gone: nothing rendered them (the legacy branch
   renders .topbar, styled by frontend.css) and a diagnostic asserts the strip
   must not return.
   ========================================================================== */

/* ============================================================ header
   SOURCE-FAITHFUL PORT of the 21st Dalim header (docs/component-prompts/
   navbar.md). The defining mechanics, kept:

     REST      a fixed, full-width nav; inside it a centred container
               (max-width 72rem = the source's max-w-6xl) with no ground of
               its own — the page shows through.
     SCROLLED  past 50px (ui.js, the source's own threshold) the container
               CONDENSES: 56rem (max-w-4xl), hairline border, rounded
               translucent ground, backdrop blur — one 300ms transition-all,
               exactly the source's `transition-all duration-300`.
     MENU      the links sit in the exact centre of the row, independent of
               the logo and utility widths: `absolute inset-0 m-auto
               size-fit`, ported literally.
     LINKS     ink-only hover over 150ms (the source's duration-150).
     MOBILE    the toggle morphs equal <-> X (200ms rotate/scale/opacity
               crossfade) and the menu opens as a rounded bordered card the
               container wraps around. No side drawer, no scrim.

   Adapted with permission: glossy-black palette instead of the source's
   theme tokens, the approved lockup, radius from the existing token scale
   (--r-plane for the source's rounded-2xl/3xl), and U Jabka's utility
   controls where the source has login/signup. */

html.theme-soda .soda-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* The source's `px-2` on the fixed nav. */
    padding-inline: .5rem;
    background: none;

    /* THE BAR IS THEMELESS DARK in both surface themes: at rest it floats
       over the glossy-black ground, scrolled it carries its own black glass.
       Scoping the ink tokens here is the established shell pattern. */
    --ink: #fff;
    --ink-muted: rgba(255, 255, 255, .66);
    --ink-faint: rgba(255, 255, 255, .55);
    --line: rgba(255, 255, 255, .1);
    --line-hi: rgba(255, 255, 255, .3);
    --line-nav: rgba(255, 255, 255, .1);
    --btn-border: rgba(255, 255, 255, .2);
    --hover-wash: rgba(255, 255, 255, .08);
    --focus: #fff;
    color: #fff;
}

/* The condensing container. `transition: all` is the source's own choice —
   max-width, padding, border, background and radius all morph on one clock. */
html.theme-soda .soda-header__shell {
    max-width: 72rem;
    margin: .5rem auto 0;
    padding-inline: clamp(1.25rem, 3vw, 3rem);
    border: 1px solid transparent;
    border-radius: var(--r-plane);
    background: none;
    transition: all .3s var(--ease);
}

/* GLOSSY BLACK GLASS, not the source's theme token: a deep lacquer at 55%
   over a 16px blur (the source's bg-background/50 backdrop-blur-lg),
   with the hairline supplying the edge. */
html.theme-soda .soda-header.is-scrolled .soda-header__shell {
    /* The source condenses 6xl -> 4xl with four labels; six Czech labels need
       two rem more or the centred menu reaches the logo. Same move, same
       proportion, wider floor. */
    max-width: 58rem;
    padding-inline: clamp(1rem, 2vw, 1.25rem);
    border-color: rgba(255, 255, 255, .1);
    background: rgba(9, 9, 11, .55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* The condensed bar trims the lockup a step — the counterpart of the source
   hiding its secondary buttons when scrolled. Geometry stays proportional. */
html.theme-soda .soda-header.is-scrolled .soda-brand__lockup {
    height: 1.8rem;
}

html.theme-soda .soda-brand__lockup {
    transition: height .3s var(--ease);
}

/* Content clears the floating bar; the hero cancels it and runs underneath.
   THE BAND ITSELF IS PAINTED VOID: the rest-state bar is transparent (the
   source's own rest state), and every Soda page opens on the void ground —
   but under the light surface theme the body behind this padding is ivory,
   which put a white strip behind a white-ink bar. Painting just the band
   keeps the transparent rest state honest on every page and both themes. */
html.theme-soda main#obsah {
    padding-top: var(--header-band);
    background: linear-gradient(var(--vesper-void), var(--vesper-void)) top / 100% var(--header-band) no-repeat;
}

/* The row. `position: relative` anchors the centred menu; wrap lets the
   mobile menu card break onto its own line INSIDE the same container, which
   is how the source's open menu inflates the bar rather than covering it. */
html.theme-soda .soda-header__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    min-height: var(--header-h);
    padding-block: .5rem;
}

html.theme-soda .soda-header__lead {
    display: flex;
    align-items: center;
    flex: none;
}

/* The approved horizontal lockup, light variant on the glossy-black bar
   (BRAND-SPEC.md §E: header. Geometry preserved — height only, 620:210). */
html.theme-soda .soda-brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    flex: none;
}

html.theme-soda .soda-brand__lockup {
    display: block;
    width: auto;
    height: 2.1rem;
}

/* THE CENTRED MENU — the source's `absolute inset-0 m-auto hidden size-fit
   lg:block`: dead-centre of the row, independent of what flanks it. */
html.theme-soda .soda-nav {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    /* The source's gap-8, tightened responsively so six Czech labels hold. */
    gap: clamp(1.1rem, 2.2vw, 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--r-none);
    background: none;
    box-shadow: none;
}

html.theme-soda .soda-nav__item {
    padding: 0;
    /* SQUARE, so the current-page rule is a STRAIGHT line. A radius here drew
       nothing — the item has no background and no side borders — but the
       bottom border follows the rounded corners, so the underline curled up at
       both ends. The mobile list below has always used --r-none for the same
       reason; this is the desktop row catching up. */
    border-radius: var(--r-none);
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-muted);
    white-space: nowrap;
    background: none;
    /* The source's NAV link: ink only, duration-150. */
    transition: color .15s var(--ease), border-color .15s var(--ease);
    border-bottom: 1px solid transparent;
}

html.theme-soda .soda-nav__item:hover,
html.theme-soda .soda-nav__item:focus-visible {
    color: #fff;
}

/* Current page: ink plus a hairline. The source ships no active state; this
   is the accessibility floor the storefront keeps (aria-current + shape). */
html.theme-soda .soda-nav__item.is-current {
    color: #fff;
    background: none;
    border-bottom-color: #fff;
}

/* -------------------------------------------------------------- actions */

html.theme-soda .soda-header__actions {
    display: flex;
    align-items: stretch;
    gap: .375rem;
    flex: none;
}

/* Square tiles that self-stretch, so the inset to the bar edge is one value on
   three sides — Vesper's Contact button geometry. */
html.theme-soda .soda-icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: auto;
    aspect-ratio: 1;
    padding: 0 .5rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--r-control);
    background: none;
    color: var(--ink);
    cursor: pointer;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

html.theme-soda .soda-icon-btn:hover {
    background: var(--hover-wash);
    border-color: var(--line-hi);
}

html.theme-soda .soda-icon-btn .ico {
    width: 1.15rem;
    height: 1.15rem;
}

/* The count is the one thing in the bar that must be noticed, so it is the one
   filled surface — filled with ink, not with colour. White on black is the
   highest-contrast marker available and introduces no second hue. */
html.theme-soda .soda-icon-btn .cart-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .2rem;
    border-radius: var(--r-pill);
    background: #fff;
    color: #000;
    font-family: var(--font-display);
    font-size: .625rem;
    font-weight: 500;
    line-height: 1rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------- mobile toggle + menu card

   The source's mobile mechanic, ported: the toggle is TWO STACKED ICONS that
   crossfade with a rotate/scale over 200ms (Equal out: rotate-180 scale-0
   opacity-0; X in: from -rotate-180 scale-0 opacity-0), and the open menu is
   a ROUNDED, BORDERED CARD that breaks onto its own row inside the header
   container — the bar inflates around it. Not a drawer; no scrim. */

html.theme-soda .nav-toggle {
    display: none;
    position: relative;
}

html.theme-soda .nav-toggle .ico {
    grid-area: 1 / 1;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}

html.theme-soda .nav-toggle__close {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
}

html.theme-soda .nav-toggle[aria-expanded='true'] .nav-toggle__equal {
    transform: rotate(180deg) scale(0);
    opacity: 0;
}

html.theme-soda .nav-toggle[aria-expanded='true'] .nav-toggle__close {
    transform: rotate(0) scale(1);
    opacity: 1;
}

/* The ported menu needs no scrim: the element stays in the DOM as a JS/test
   contract, but nothing renders it. */
html.theme-soda .nav-scrim {
    display: none !important;
}

/* The dropdown-card menu below 1024px — the same boundary as the vw/rem
   regime split. Gated on `html.js-nav-enhanced`, set by frontend.js: without
   JS the nav stays a visible card in the flow, never a menu nothing can open. */
@media (max-width: 1023.98px) {
    html.theme-soda .nav-toggle {
        display: grid;
        place-items: center;
    }

    /* TOUCH TARGETS: 44px floor inside the bar, as before. */
    html.theme-soda .soda-icon-btn,
    html.theme-soda .nav-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    /* The card replaces the centred-absolute placement: full row, in flow.
       No `order` any more: the menu is rendered after the actions in the
       markup, so it already lands on its own row under the bar and the DOM
       order a keyboard walks matches the order an eye reads. */
    html.theme-soda .soda-nav {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: .75rem 0 .5rem;
        padding: 1.25rem 1.5rem;
        /* The source's rounded-3xl bordered card, in the glossy-black voice:
           near-opaque lacquer, hairline edge, token radius. Its shadow-2xl is
           not taken — depth in this system is a hairline, never a cast. */
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--r-plane);
        background: rgba(10, 10, 12, .94);
        -webkit-backdrop-filter: blur(var(--blur-glass));
        backdrop-filter: blur(var(--blur-glass));
    }

    /* The source's mobile list: text-base rows, space-y-6 rhythm. */
    html.theme-soda .soda-nav__item {
        padding: .8rem 0;
        border-radius: var(--r-none);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-size: 1rem;
    }

    html.theme-soda .soda-nav__item:last-child {
        border-bottom-color: transparent;
    }

    html.theme-soda .soda-nav__item.is-current {
        border-bottom-color: rgba(255, 255, 255, .08);
        text-decoration: underline;
        text-underline-offset: .3em;
    }

    /* The source toggles hidden -> block with no travel; only the icon
       animates. Enhanced pages keep that exact mechanic. */
    html.theme-soda.js-nav-enhanced .soda-nav {
        display: none;
    }

    html.theme-soda.js-nav-enhanced .soda-nav.is-open {
        display: flex;
    }

    /* NO SCROLL LOCK. This block used to carry `overflow: hidden` for the
       `.no-scroll` class frontend.js set while the menu was open — the legacy
       drawer's modal lifecycle, inherited by a disclosure that covers nothing.
       frontend.js no longer sets that class on this shell, and the rule is
       gone with it so it cannot quietly come back: the legacy stylesheet is
       not loaded on redesigned pages, so this was the whole lock. */
}

/* ================================================================= footer */

/* Vesper's closing band: a dark ground, one hairline separator, wordmark and
   claim on the left, link columns pushed right. No gradient, no card, no panel.

   THEMELESS DARK, like the header and the Vesper plane above it. The footer
   used to be transparent over --page-bg, so under the light theme it was an
   ivory block with accent-tinted icons — the beige footer the direction rules
   out. It is now the dark closing band on every page and in both themes, and
   its ink tokens are scoped here exactly as the header scopes its own. */
html.theme-soda .soda-footer {
    position: relative;
    z-index: 6;
    border-top: 1px solid rgba(255, 255, 255, .15);
    background: var(--vesper-void);
    padding: clamp(3.4rem, 6vw, 5.5rem) 0 2rem;

    --ink: #fff;
    --ink-muted: rgba(255, 255, 255, .72);
    --ink-faint: rgba(255, 255, 255, .55);
    --ink-2: rgba(255, 255, 255, .72);
    --ink-3: rgba(255, 255, 255, .55);
    --line: rgba(255, 255, 255, .15);
    --focus: #fff;
    color: #fff;
}

html.theme-soda .soda-footer__grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1.6rem, 3vw, 3rem);
    flex-wrap: wrap;
}

/* The wordmark block holds the left edge (Vesper: 27.5vw). */
html.theme-soda .soda-footer__brand {
    flex: 0 1 27.5vw;
    min-width: 16rem;
}

/* The approved stacked lockup (light variant on the dark band). The box keeps
   the file's own 420:470 ratio — the geometry is measured, never restyled. */
html.theme-soda .soda-brand--footer {
    display: inline-block;
}

html.theme-soda .soda-brand--footer .soda-brand__lockup {
    height: 6.5rem;
}

html.theme-soda .soda-footer__claim {
    margin-top: 1.1rem;
    max-width: 40ch;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-2);
}

html.theme-soda .soda-footer__heading {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

html.theme-soda .soda-footer__col {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 0 1 auto;
}

html.theme-soda .soda-footer__contact {
    flex: 0 1 auto;
}

html.theme-soda .soda-footer__col a {
    font-size: .9rem;
    /* Was hardcoded white: fine on the dark ground it was authored for,
       unreadable on ivory. */
    color: var(--ink-muted);
    transition: color var(--dur) var(--ease);
    width: fit-content;
}

/* Ink only. MUTED_LINK changes colour and nothing else — and the colour it
   changes to is white, not the mood accent. */
html.theme-soda .soda-footer__col a:hover {
    color: #fff;
}

html.theme-soda .soda-footer__line {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .6rem;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

html.theme-soda .soda-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: clamp(2.4rem, 4vw, 3.4rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--ink-3);
}

html.theme-soda .soda-footer__bottom p {
    margin: 0;
}

/* Model licence credit (CC-BY) — a licence obligation, not decoration. */
html.theme-soda .soda-footer__credit a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: .16em;
}

html.theme-soda .soda-footer__credit a:hover {
    color: #fff;
}

@media (max-width: 1023.98px) {
    html.theme-soda .soda-footer__brand {
        flex: 1 1 100%;
    }

    html.theme-soda .soda-footer__col,
    html.theme-soda .soda-footer__contact {
        flex: 1 1 40%;
    }
}

@media (max-width: 640px) {
    html.theme-soda .soda-footer__grid {
        flex-direction: column;
    }
}


/* ==== footer trust ==== */
html.theme-soda .soda-footer__trust {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .85rem;
    color: var(--ink-muted);
}

/* Three ruled lines, not three icon rows. The claims are unchanged — they are
   the ones relocated here when the topbar was removed, and a diagnostic pins
   them — but the accent glyph in front of each one was the last piece of the
   old icon-chip vocabulary in the shell. */
html.theme-soda .soda-footer__trust li {
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}