/*
  Header navigation.

  Conventional and quiet: the visitor should never have to learn it. The brand personality lives in
  the mascot logo, the red rule that draws itself under a link, and the badge treatment — never in
  novel interaction.

  Desktop: one row — logo · primary links · utility cluster.
  Mobile:  logo · cart · menu button, with the primary links and account menu in a panel.
*/

/* ---- Primary links -------------------------------------------------------- */
.primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex: 1 1 auto;
    justify-content: flex-end;
}

.primary-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav__link {
    position: relative;
    display: inline-block;
    padding-block: var(--space-2xs);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-strong);
    transition: color var(--transition-fast);
}

/* The red rule draws itself from the left — the footer ornament's ribbon logic at UI scale. */
.primary-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.primary-nav__link:hover { color: var(--color-accent); }
.primary-nav__link:hover::after,
.primary-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav__link[aria-current="page"] { color: var(--color-accent); }

/* ---- Utility cluster ------------------------------------------------------ */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.nav-actions__favorites,
.nav-actions__cart { display: flex; }

/* Cart + favourites badges share one visual. */
.cart-summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-ink-strong);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.cart-summary:hover {
    color: var(--color-accent);
    background: var(--color-surface-muted);
}

.cart-summary__icon { display: inline-flex; }

.cart-summary__count {
    min-inline-size: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--cg-white);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 1.25rem;
    text-align: center;
}

.cart-summary__count.is-empty {
    background: transparent;
    color: var(--color-ink-muted);
    font-weight: var(--weight-medium);
}

/* ---- Account menu --------------------------------------------------------- */
.account-menu { position: relative; }

.account-menu__disclosure summary { list-style: none; }
.account-menu__disclosure summary::-webkit-details-marker { display: none; }

.account-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 2.75rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-ink-strong);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.account-menu__trigger:hover {
    color: var(--color-accent);
    background: var(--color-surface-muted);
}

.account-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: var(--radius-pill);
    background: var(--cg-black);
    color: var(--cg-white);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex: none;
}

.account-menu__avatar--guest {
    background: transparent;
    color: currentColor;
    border: 1.5px solid currentColor;
}

.account-menu__trigger-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.account-menu__list {
    list-style: none;
    margin: 0;
    padding: var(--space-xs);
    display: grid;
    gap: var(--space-3xs);
}

.account-menu__list a,
.account-menu__signout {
    display: block;
    inline-size: 100%;
    text-align: start;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-ink);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.account-menu__list a:hover,
.account-menu__signout:hover {
    background: var(--color-surface-muted);
    color: var(--color-accent);
}

.account-menu__sep {
    margin-block-start: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--color-border);
}

/* ---- Language selector ---------------------------------------------------- */
.language-selector { display: flex; align-items: center; }

.language-selector__list {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.language-selector__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-sm);
    opacity: 0.42;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.language-selector__link:hover { opacity: 0.85; background: var(--color-surface-muted); }
.language-selector__link.is-current { opacity: 1; }

.language-selector__link .flag {
    inline-size: 1.4rem;
    block-size: auto;
    border-radius: 2px;
}

/* ---- Mobile menu button --------------------------------------------------- */
.nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-md);
    color: var(--color-ink-strong);
    flex: none;
}

.nav-toggle:hover { background: var(--color-surface-muted); }

/* Three bars from one element: the middle bar is the element, the outer two are pseudos. */
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    position: absolute;
    inline-size: 1.35rem;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    inset-inline-start: 0;
}

.nav-toggle__bar::before { transform: translateY(-6px); }
.nav-toggle__bar::after { transform: translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   MOBILE (default) — the primary nav is a panel below the header bar.
   --------------------------------------------------------------------------- */
@media (max-width: 61.9375rem) {
    .site-header__inner { position: relative; }

    /* Absolute insets resolve against the containing block's PADDING box, and `.site-header__inner`
       is a `.container` whose padding box already spans the full header width. Offsetting by
       -container-pad therefore pushed the panel off-screen and left the links flush against the
       viewport edge; `inset-inline: 0` plus the panel's own padding is what actually gives the gutter. */
    .primary-nav {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        display: grid;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--container-pad) var(--space-xl);
        background: var(--color-bg);
        border-block-end: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        justify-content: stretch;
    }

    .primary-nav[data-open="false"] { display: none; }

    .primary-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .primary-nav__link {
        font-size: var(--text-lg);
        letter-spacing: var(--tracking-tight);
        text-transform: none;
        padding-block: var(--space-md);
        border-block-end: 1px solid var(--color-border);
    }

    .primary-nav__link::after { display: none; }

    .nav-actions {
        justify-content: space-between;
        gap: var(--space-md);
        flex-wrap: wrap;
    }

    .account-menu { flex: 1 1 100%; }

    .account-menu__list {
        margin-block-start: var(--space-xs);
        padding: var(--space-xs);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }
}

/* ---------------------------------------------------------------------------
   DESKTOP
   --------------------------------------------------------------------------- */
@media (min-width: 62rem) {
    .nav-toggle { display: none; }

    /* Three destinations on the left of the utility cluster. The gaps are deliberately unequal: the
       links belong together, the utilities belong together, and the space between the two groups is
       what keeps the bar from reading as one undifferentiated row. */
    .primary-nav {
        display: flex;
        gap: var(--space-xl);
    }

    .primary-nav__list {
        margin-inline-end: auto;
        gap: var(--space-xl);
    }

    /* Keep the flag switcher from crowding the cart badge. */
    .primary-nav .language-selector { margin-inline-start: var(--space-xs); }

    .account-menu__list {
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: calc(100% + var(--space-2xs));
        min-inline-size: 13rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: var(--z-overlay);
    }
}

/* ---------------------------------------------------------------------------
   REDESIGN — the phone menu fills the screen below the header, the Tha3D way: big numbered
   destinations that arrive one after another over a faint kiln glow. Same links, same order.
   --------------------------------------------------------------------------- */
@media (max-width: 61.9375rem) {
    .primary-nav {
        position: fixed;
        inset-inline: 0;
        inset-block: var(--header-height) 0;
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-block: var(--space-xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
        background:
            radial-gradient(120% 60% at 100% 0%, var(--kiln-glow-soft), transparent 60%),
            var(--color-bg);
        border: 0;
        box-shadow: none;
    }

    .primary-nav__list { counter-reset: nav-item; }
    .primary-nav__item { counter-increment: nav-item; }

    .primary-nav__link {
        display: flex;
        align-items: baseline;
        gap: var(--space-md);
        min-block-size: 2.75rem;
        font-family: var(--font-display);
        font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem);
        font-stretch: 112%;
        font-weight: var(--weight-black);
        letter-spacing: -0.03em;
        line-height: 1.05;
    }

    .primary-nav__link::before {
        content: counter(nav-item, decimal-leading-zero);
        font-size: var(--text-xs);
        font-stretch: var(--stretch-label);
        font-weight: var(--weight-bold);
        letter-spacing: 0.08em;
        color: var(--cg-red);
    }

    @media (prefers-reduced-motion: no-preference) {
        .primary-nav[data-open="true"] .primary-nav__item,
        .primary-nav[data-open="true"] .nav-actions,
        .primary-nav[data-open="true"] .language-selector {
            animation: cg-menu-in 520ms var(--ease-out) both;
        }

        .primary-nav[data-open="true"] .primary-nav__item:nth-child(2) { animation-delay: 50ms; }
        .primary-nav[data-open="true"] .primary-nav__item:nth-child(3) { animation-delay: 100ms; }
        .primary-nav[data-open="true"] .primary-nav__item:nth-child(4) { animation-delay: 150ms; }
        .primary-nav[data-open="true"] .nav-actions { animation-delay: 220ms; }
        .primary-nav[data-open="true"] .language-selector { animation-delay: 280ms; }
    }
}

@keyframes cg-menu-in {
    from { opacity: 0; transform: translateY(16px); }
}

/* The administrator's country preview (only rendered for a signed-in administrator). */
.language-selector--admin { gap: var(--space-xs); }
.language-selector--admin .language-selector__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    white-space: nowrap;
}