/* Top bar, the same on all five pages (Joe approved it 29 Oct 2026 for every page and every screen size).
   One file for the whole site: every page (the 404 too) loads it last, so a change here changes the bar everywhere.
   First drawn for the Home hero comps of 27 Oct 2026.
   One row: Gallery and Flavors, the logo in the middle, Visit us and a pencil-circled "Schedule a tasting" (the pencil
   circle, not a solid button, confirmed by Joe 31 Oct 2026). Phones held upright stack it: see the end of the file.

   Fluid: every size is a straight line between a 345px-wide bar (a 360 phone with a desktop scrollbar) and an
   840px one (the white column at 1440), clamped at both ends. The bar sizes from its own width (container units).
   Phones held upright (under 480px): logo on top, the links in a row below (Joe, 31 Oct 2026: in one row the logo
   was squeezed between its neighbours); those rules, at the end of the file, set their own logo size, padding and
   spacing over the fluid ones. On Home the bar spans the white column where the hero photo
   shows (landscape, over 1100px; placed in home.css) and the full width everywhere else.

   Nothing else styles the bar's look, so the few things it used to inherit from the old header (medium weight, no underline
   until hover, no grid area on the logo) are set here. The current page's link is marked by aria-current only, with no
   underline. Tokens it needs, in each page's :root block: --ink, --ease-out, --bar-pencil (the loop's graphite) and
   --bar-tone (the hover wash, the Gallery's tone panel colour). */

.site-header {
  --u: 1cqi;                                                   /* 1% of the bar's own width */
  --bar-fs:   clamp(15px, calc(13.6px + 0.4 * var(--u)), 17px);
  --bar-logo: clamp(44px, calc(13px + 9 * var(--u)), 88px);
  --bar-pad:  clamp(8px, calc(1px + 2.2 * var(--u)), 20px);    /* above and below the row */
  --bar-edge: clamp(10px, calc(-16.5px + 7.68 * var(--u)), 48px);
  --bar-gap:  clamp(5px, calc(-20px + 7.2 * var(--u)), 44px);  /* between neighbours, the logo included */

  container: bar / inline-size;
  display: block; padding: 0; column-gap: 0;
}

/* One row: the two short lists either side of the logo. Three columns, the outer two equal, so the logo sits at
   the true centre of the bar. A narrow bar (phones held sideways, small tablets) pins Gallery and the circled link to the edges, which spreads its
   little spare room evenly; a wider one gathers the links round the logo with one even gap. */
.site-header .bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: var(--bar-gap);
  padding: var(--bar-pad) var(--bar-edge);
  font-size: var(--bar-fs); font-weight: 500; color: var(--ink);
}
.bar-side { display: flex; align-items: center; justify-content: space-between; gap: var(--bar-gap); min-width: 0; }
.bar-side li { display: flex; }
@container bar (min-width: 600px) {
  .bar-l { justify-content: flex-end; }
  .bar-r { justify-content: flex-start; }
}

/* The links: ink, 44px tall to tap, underline on hover (as before). */
.site-header .bar a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--ink);
  text-decoration: none; text-underline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) { .site-header .bar a:hover { text-decoration: underline; } }
.site-header .bar .logo { min-height: 0; grid-area: auto; }
.site-header .logo img { height: var(--bar-logo); width: auto; max-width: none; }

/* "Schedule a tasting": a text link circled in pencil. The padding is the room the loop needs, taken back with a
   negative margin so the loop overhangs the gaps instead of widening the row; the focus ring goes round the loop. */
.site-header .bar .cta {
  --loop-x: 18px; --loop-y: 12px;
  position: relative; isolation: isolate;
  padding: var(--loop-y) var(--loop-x); margin: calc(-1 * var(--loop-y)) calc(-1 * var(--loop-x));
  margin-right: calc(-1 * min(var(--loop-x), var(--bar-edge) - 4px));  /* the loop keeps 4px clear of the screen edge */
  text-decoration: none; line-height: 1.2; text-align: center;
  transition: transform 160ms var(--ease-out);
}
.cta-label > span { white-space: nowrap; }
.loop {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--bar-pencil); stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-1.5deg);  /* a hand never draws it level */
}
.loop path { vector-effect: non-scaling-stroke; transition: stroke 160ms ease, stroke-width 160ms ease, fill 160ms ease; }
.loop .lead { stroke-width: 1.3px; opacity: 0.85; }
.loop .ghost { stroke-width: 0.8px; opacity: 0.35; }   /* the second, lighter pass a pencil leaves */
.site-header .bar .cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .site-header .bar .cta:hover { text-decoration: none; }
  .site-header .bar .cta:hover .lead { stroke: var(--ink); stroke-width: 2.2px; fill: var(--bar-tone); opacity: 1; }
  .site-header .bar .cta:hover .ghost { stroke: var(--ink); opacity: 0.6; }
}
.site-header .bar a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@container bar (min-width: 600px) {
  .site-header .bar .cta { margin-left: 0; }  /* gathered round the logo, the loop is the link's edge: its gap matches */
}

/* It draws itself once as the page opens, with the menu (not after the cakes): about 600ms, the ghost pass a beat
   behind. With reduced motion it is simply there, fully drawn. */
@media (prefers-reduced-motion: no-preference) {
  .loop path { stroke-dasharray: 1.02; stroke-dashoffset: 1.02; animation: loop-draw 600ms cubic-bezier(0.55, 0, 0.3, 1) 120ms forwards; }
  .loop .ghost { animation-duration: 520ms; animation-delay: 220ms; }
}
@keyframes loop-draw { to { stroke-dashoffset: 0; } }

/* A narrow bar stacks the label, "Schedule" over "a tasting", and the loop rounds out to fit. */
@container bar (max-width: 679px) {
  .cta-label > span { display: block; }
  .site-header .bar .cta { --loop-x: clamp(8px, calc(-4.5px + 3.6 * var(--u)), 14px); --loop-y: 9px; line-height: 1.06; }
}

/* Phones and tablets: the bar's height is known (the logo, never under 44px, plus its padding; the loop overhangs), so
   the first screen can give the cakes everything under it. Same formulas in vw, since up to 1100px the bar is the full
   width. */
@media (max-width: 1100px) {
  :root {
    --bar-h: calc(2 * clamp(8px, calc(1px + 2.2vw), 20px) + max(clamp(44px, calc(13px + 9vw), 88px), 44px));
  }
}

/* Phones held upright (under 480px): the logo centred on top, the four links evenly spaced in one row under it. In
   one row the logo had 6-11px either side at 360-430 (QA, 30 Oct 2026); Joe chose this over a one-row bar with a
   shorter circled link (31 Oct). The circle sits in the row like the other links (no sideways overhang), so the even
   spacing is what shows; "Schedule a tasting" takes two lines in it below 400px and one line from 400px, where it fits.
   The two-line circle gets 12px each side (the fluid 8-10px let the pencil touch the "S" at 328-356px; the row has room).
   It still hangs about 3px below the row, past the bar's 4px bottom padding, so the bar sits above what follows: on
   Home the drawing's stage painted over the bottom of its focus ring at 320-399px. */
@media (max-width: 479px) {
  .site-header { position: relative; z-index: 1; }
  .site-header .bar { grid-template-columns: repeat(4, auto); justify-content: space-evenly; row-gap: 0; padding: 8px 6px 4px; }
  .bar-side { display: contents; }
  .site-header .bar .logo { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  .site-header .logo img { height: 52px; }
  .site-header .bar .cta { margin-inline: 0; --loop-x: 12px; }
  :root { --bar-h: 108px; }  /* 8 + 52 logo + 44 links + 4 */
}
@media (min-width: 400px) and (max-width: 479px) {
  .cta-label > span { display: inline; }
  /* The label may still break between "Schedule" and "a tasting" (each kept whole) if one line has no room: only with
     a reader's wider letter and word spacing (WCAG 1.4.12), which pushed the page 5px sideways at 414px. At normal
     spacing the row has 80px+ to spare. */
  .site-header .bar .cta { --loop-x: 14px; line-height: 1.2; white-space: normal; }
}

/* "Skip to content" moves focus to <main> (on Home to the hero's words, #intro, since its h1 and buttons come before
   <main>). Both are only landing spots (tabindex="-1": the skip link or a click inside them focuses them, Tab never
   stops on them), so they draw no ring; the next Tab carries on from there. In this file because every page loads it last. */
main:focus, #intro:focus { outline: none; }

/* The footer's bottom row: the copyright, then "Privacy" and "Accessibility" (the same footer on every page, so the rule
   is here, in the one file every page loads last). They are ordinary footer links: the row's size and colour, an
   underline on hover, and the tap size the footer gives its links (30px tall: .site-footer p a). On tablet and desktop
   the words run on after the copyright, on the same line. The two links wrap as a pair (an inline block), so a narrow
   screen never leaves "Accessibility" on a line by itself. On a phone the pair always starts its own line under the
   copyright, whatever the screen's width (at 390px it used to share the copyright's second line, at 320px it did not). */
.site-footer .small-print .copyright { margin-right: 20px; }
.site-footer .small-print .legal-links { display: inline-block; }
.site-footer .small-print .legal-links a { margin-right: 20px; }
.site-footer .small-print .legal-links a:last-child { margin-right: 0; }
@media (max-width: 760px) {
  .site-footer .small-print .copyright, .site-footer .small-print .legal-links { display: block; }
  .site-footer .small-print .copyright { margin-right: 0; }
}