/*
 * The site navigation.
 *
 * Shared by every page. It lives in its own file rather than in etalon.css
 * because the litter pages need it identically, and a nav copied into two
 * stylesheets is a nav that will eventually disagree with itself — which is
 * exactly what happened to the hand-written cross-links this replaces.
 *
 * The markup is generated from tools/lib/nav.mjs.
 */

/* ---- Index / nav ------------------------------------------------------
   Sticky, because the page is long and the sections are the reason someone
   came. Translucent so the cream shows through rather than sitting on a
   white bar that would fight the ground. */

.site-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-chrome);
    background: color-mix(in srgb, var(--color-bg) 95%, transparent);
    backdrop-filter: blur(10px);
    /* No 1px rule: the bar is closed by a branch instead. See ::after. */
}

/* The site's horizontal rule, hung just under the bar rather than drawn on its
   edge, so the flowers are not clipped by the bar's own background.
   It tiles, so it fits any width without stretching the drawing. */
.site-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--vine-border-height);
    /* Lifted so the CREST of the branch always overlaps the bar's bottom edge
       by ~1px, at every width — the branch is attached to the bar, never
       floating under it.

       Anchored on the TROUGH, not the crest. Anchoring on the crest only
       guaranteed contact where the wave peaked — between peaks the branch dips
       away and a sliver of whatever is underneath shows through above it, which
       is exactly the gap that was visible over the hero photograph.

       Derived, not tuned by eye: in the 46-unit viewBox the stem's LOWEST point
       is y=26.5 and its widest stroke is 12.94, so the branch's top edge never
       falls below 20.03 units — 17.42px down a 40px band. Lifting by that plus
       a pixel is 46.5% (rounded up from 46.0 so the measured coverage clears 1px,
       not 0.98), which puts every point of the branch over the edge below it.

       Change --vine-border-height, the wave depth or the stroke width and this
       needs recomputing. */
    transform: translateY(-46.5%);
    /* One tile now: the stem and its blooms were tuned together in
       tools/vine-editor.html, and splitting them across two layers would drift
       the flowers off the branch they were placed on. The tile is 1080 units
       wide with eight irregularly spaced blooms, which is long enough that the
       repeat is not obvious at any normal width. */
    background: url('../img/elements/vine-border.svg') repeat-x center / auto 100%;
    pointer-events: none;
}

.site-nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    /* Sized so the bar reads the same on a laptop and a phone. It was 68px on
       a wide screen and 29px on a narrow one — too heavy at one end, cramped at
       the other. */
    /* Bottom padding is larger than top: anchoring the branch on its trough
       lifted the band, and the links need to sit clear of the blooms. */
    padding: 1.05rem var(--space-md) 1.5rem;
    display: flex;
    align-items: center;
    /* Centred with a fixed gap, not space-between. The dead middle came from
       throwing the brand and the links to opposite edges — capping the width
       instead only made the home page's nine links wrap onto a second row and
       doubled the bar's height. This shrinks the gap without constraining how
       much the bar can hold. */
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-display);
    font-variation-settings: var(--wonk-formal);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink-deep);
    text-decoration: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* The same paw that marks the photo dots and the carousel arrows. It is the
   one drawn element the site already repeats everywhere, so it is the mark —
   nothing new needed to have a logo. The artwork is solid black, so it is
   tinted to the ink colour with a mask rather than shipped in two colours. */
.site-brand-paw {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    background: var(--color-field);
    -webkit-mask: url('../img/elements/patte.svg') center / contain no-repeat;
            mask: url('../img/elements/patte.svg') center / contain no-repeat;
}

.site-brand:hover .site-brand-paw,
.site-brand:focus-visible .site-brand-paw {
    background: var(--color-ink-deep);
}

.site-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* The text is 0.78rem, so the link box was about 14px tall — under the 24×24
   WCAG 2.2 asks of a target. The padding buys the height without moving the
   type: the bar already had more vertical room than the text used, and the
   negative margin keeps the row's own height exactly where it was. */
.site-nav-list a {
    text-decoration: none;
    color: var(--color-ink-soft);
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding-block: 0.3rem;
    margin-block: -0.3rem;
}

.site-nav-list a:hover,
.site-nav-list a:focus-visible {
    color: var(--color-field);
}

/* The page you are on. Marked with the structural green and a rule under it,
   rather than by removing the link — a visitor who clicks it should not be
   left wondering whether the site is broken. */
.site-nav-list a.is-current {
    color: var(--color-ink-deep);
    border-bottom: 2px solid var(--color-field);
    padding-bottom: 0.15rem;
}

/* In-page anchors are secondary to the pages themselves — distinguished by
   weight alone, NOT by opacity.
   They were at 0.8, which reads as "disabled" rather than "secondary". On a
   narrow screen the page links scroll out of view and only these remain, so the
   whole bar looked greyed out. Weight carries the hierarchy on its own. */
.site-nav-anchor a {
    font-weight: 400;
}

/* Anchors must not land under the sticky bar. */
[id] {
    scroll-margin-top: 5rem;
}

@media (max-width: 64rem) {
    /* The nav wrapped to two rows here and ate a third of the viewport, which
       is a lot to spend on chrome that is sticky. One row that scrolls
       sideways instead: the brand shrinks, the list never wraps. */
    .site-nav-inner {
        /* One row that scrolls sideways rather than two rows that double the
           bar's height. Nine links stop fitting well above phone width, and a
           120px bar pushes the whole page down. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--space-md);
        padding: 0.95rem var(--space-sm) 1.45rem;
    }

    .site-brand {
        font-size: 0.9rem;
        flex: 0 0 auto;
    }

    .site-nav-list {
        flex-wrap: nowrap;
        gap: var(--space-md);
        font-size: 0.7rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* The hint that the row scrolls is a 20px wash of the bar's own colour at
       the very edge, NOT a mask over the list.
       A mask-image faded the last 15% of the row — on a 390px bar that is
       nearly 60px, so the final link or two rendered visibly greyed and looked
       disabled. This only touches the last 20px, where the content is cut off
       anyway, and leaves every link at full strength. */
    .site-nav-inner { position: relative; }

    .site-nav-inner::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(244, 238, 234, 0), var(--color-bg));
    }

    .site-nav-list::-webkit-scrollbar { display: none; }
    .site-nav-list li { flex: 0 0 auto; }

    [id] { scroll-margin-top: 3.5rem; }
}