/* Mcava · the site header, shared by v1-clock, v2-poster and v3-app (each build copies this file in).
   The one-line logo on the left, the page's own sections in the middle, the status on the right.
   Phone and tablet: the logo, and a Menu button that opens a full-width sheet with the links and the status.

   The logo is shared/logo/mcava-meats-line-*.svg, as is. Its clear space (brand guide p. 19: an M half MCAVA's height)
   is half the logo's height on every side, so the bar is exactly that tall: logo + 2 x clear space, and it never changes.
   Each page sets the colours: --sh-bg (the open sheet, solid), --sh-fg, --sh-line, --sh-focus, --sh-dot, --sh-font, --sh-pad,
   and optionally --sh-glass-rgb for the glass tint (Eggshell by default). */
:root { --sh-logo: 30px; --sh-cs: calc(var(--sh-logo) / 2); --sh-h: calc(var(--sh-logo) * 2); }
@media (max-width: 1099px) { :root { --sh-logo: 24px; } }
/* Anchors land below the bar (Lenis reads this too). */
html { scroll-padding-top: calc(var(--sh-h) + 16px); }
html.sh-lock { overflow: hidden; }

/* Glass: an Eggshell tint over a blur, a hairline under it and a faint highlight on top. Over a red or dark part of the
   page the tint thickens (data-ground="strong", set by the script), so the links and the logo stay readable whatever
   passes under them. No backdrop-filter, or reduced transparency asked for: a near-solid Eggshell bar instead. */
.sh {
  position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: var(--sh-h); color: var(--sh-fg);
  background: rgba(var(--sh-glass-rgb, 252, 235, 217), var(--sh-glass-a, .6));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(25, 25, 25, .08);
  transition: background-color .35s ease;
}
.sh[data-ground="strong"] { --sh-glass-a: .86; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sh { --sh-glass-a: .94; }
}
@media (prefers-reduced-transparency: reduce) {
  .sh { --sh-glass-a: .94; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sh-bar {
  height: 100%; padding: 0 var(--sh-pad, 32px);
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: var(--sh-cs);
}
.sh-logo { justify-self: start; display: block; height: var(--sh-logo); margin-right: var(--sh-cs); border-radius: 3px; }
.sh-logo img { display: block; width: auto; height: 100%; max-width: none; }
.sh-panel { display: contents; }
.sh-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sh-nav a {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 6px;
  font: 600 15px/1 var(--sh-font); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: inherit;
}
.sh-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.sh-nav a:hover::after, .sh-nav a[aria-current]::after { transform: scaleX(1); }
.sh-nav a[aria-current] { font-weight: 700; }
.sh-status {
  justify-self: end; display: flex; align-items: center; gap: 9px; margin: 0;
  font: 600 13px/1 var(--sh-font); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sh-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-dot, currentColor); }
.sh-menu { display: none; }
.sh :focus-visible { outline: 3px solid var(--sh-focus, currentColor); outline-offset: 2px; }

/* ---------- Phone and tablet: Menu button and sheet ---------- */
@media (max-width: 1099px) {
  .sh-bar { display: flex; justify-content: space-between; column-gap: var(--sh-cs); }
  .sh-logo { margin-right: 0; }
  .sh-menu {
    display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-right: -12px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: inherit; cursor: pointer;
    font: 700 14px/1 var(--sh-font); letter-spacing: .14em; text-transform: uppercase;
  }
  .sh-menu-i { position: relative; width: 22px; height: 12px; }
  .sh-menu-i::before, .sh-menu-i::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), top .3s cubic-bezier(.22, 1, .36, 1);
  }
  .sh-menu-i::before { top: 0; }
  .sh-menu-i::after { top: 10px; }
  .sh.is-open .sh-menu-i::before { top: 5px; transform: rotate(45deg); }
  .sh.is-open .sh-menu-i::after { top: 5px; transform: rotate(-45deg); }

  /* The sheet: under the bar, the full width and the rest of the screen. Closed, it is hidden from everyone. */
  .sh-panel {
    position: fixed; left: 0; right: 0; top: var(--sh-h); height: calc(100vh - var(--sh-h)); height: calc(100dvh - var(--sh-h));
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--sh-pad, 20px) calc(28px + env(safe-area-inset-bottom));
    background: var(--sh-bg); box-shadow: inset 0 1px 0 var(--sh-line);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s;
  }
  .sh.is-open .sh-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  .sh-nav ul { flex-direction: column; gap: 0; }
  .sh-nav a {
    display: flex; width: 100%; height: auto; min-height: 68px; padding: 0; border-radius: 0; box-shadow: 0 1px 0 var(--sh-line);
    font-size: clamp(30px, 8.4vw, 46px); font-weight: 700; letter-spacing: .005em;
  }
  .sh-nav a::after { display: none; }
  .sh-nav a[aria-current]::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 14px; border-radius: 50%; background: var(--sh-dot, currentColor); }
  .sh-status { justify-self: auto; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh, .sh *, .sh *::before, .sh *::after { transition: none !important; }
}