@layer components {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-s);
        padding: var(--space-s);
        background: color-mix(in srgb, var(--color-surface) 82%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid transparent;
        transition: padding 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);

        &.is-scrolled {
            padding-block: var(--space-2xs);
            border-color: var(--color-border);
            box-shadow: var(--shadow-s);

            & .site-header__cta {
                font-size: 0.9375rem;
            }
        }

        & .site-header__actions {
            display: flex;
            align-items: center;
            gap: var(--space-s);
        }

        /* The button's own padding is in `em`, so one font-size step shrinks the whole pill with
           the header instead of leaving a full-size CTA in a slimmed-down bar. */
        & .site-header__cta {
            transition: font-size 0.25s var(--ease-out);
        }

        /* On a phone the bar is logo + CTA + language, none of which can shrink on their own:
           the logo is height-driven with width:auto (7.4:1 wordmark) and the CTA is a nowrap
           pill. At 390px that already overflowed in Slovak, and the whole page — not just the
           header — scrolled sideways as a result; German ("Demo ausprobieren" is 30px wider
           than "Vyskúšať demo") made it worse. Shrink the type and the gaps rather than
           wrapping the bar onto two lines, which would push the hero below the fold. */
        @media (width < 30rem) {
            padding-inline: var(--space-xs);
            gap: var(--space-2xs);

            & .site-header__actions {
                gap: var(--space-2xs);
            }

            /* Fluid rather than a second breakpoint: the row's minimum width is the sum of three
               things that each scale differently per language, so a step at one width just moves
               the overflow to the next device size down.

               The logo is the biggest item and the only one that gives up width without hurting
               legibility, so it takes most of the reduction. `.logo .logo__img` — not just
               `.logo__img` — because Logo.css already sets the height at that specificity and
               would otherwise win on source order, leaving a full-size logo to squeeze the CTA
               into a two-line pill instead. */
            & .logo .logo__img {
                height: clamp(1.125rem, 0.75rem + 1.9vw, 1.5rem);
            }

            & .site-header__cta {
                font-size: clamp(0.8125rem, 0.65rem + 0.8vw, 0.9375rem);
                padding-inline: 1.15em;
            }

            & .locale-switcher__button {
                font-size: clamp(0.8125rem, 0.65rem + 0.8vw, 0.9375rem);
                padding-inline: 0.7em;
            }
        }

        /* Below ~352px (iPhone SE 1st gen, folded cover screens) the three parts don't fit on
           one line in any language — Slovak overflowed here too, long before the German copy
           existed. Let the bar become two centred lines: a taller header is a fair trade for
           not scrolling the entire page sideways. The cut-off sits just under the narrowest
           phone still in real use (360px), so no current device gets the two-line bar. */
        @media (width <= 22rem) {
            flex-wrap: wrap;
            justify-content: center;
        }
    }
}