/* ==========================================================================
   Header (header-hero piece). Root: #header.hd
   One sticky 60px bar. Bordó while the hero runs under it (it is part of the
   panel), solid cream with a hairline once the hero has scrolled away.
   Grid: the bar's controls carry 8px of inner padding on their outer side, so
   the icons themselves sit on the page gutter, the same line as the hero copy,
   the hero's arch and the menu below.
   ========================================================================== */
#header.hd {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

#header .hd-bar {
  position: relative;
  isolation: isolate;
  padding-top: var(--safe-top);
  /* Solid paper (no backdrop blur: nothing from below should ghost through). */
  background: var(--c-cream-50);
  box-shadow: 0 1px 0 var(--color-line-strong);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* The bordó layer: same paper grain as the hero (soft-light) so bar and panel
   read as one surface; crossfades away as the scalloped hem passes. */
#header .hd-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .126 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--c-burgundy-700);
  background-blend-mode: soft-light, normal;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
#header.on-hero .hd-bar::before { opacity: 1; }
#header.on-hero .hd-bar { box-shadow: 0 1px 0 transparent; }

#header .hd-bar__inner {
  --hd-edge: 8px; /* the controls' inner padding on their outer side */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline:
    max(calc(var(--gutter) - var(--hd-edge)), var(--safe-left))
    max(calc(var(--gutter) - var(--hd-edge)), var(--safe-right));
}

/* "Menú" and "Pedido": quiet sentence-case labels, so the wordmark's CAKES is
   the only tracked-caps moment at the top of the page. */
#header .hd-link,
#header .hd-cart__label {
  font: var(--fw-regular) .9375rem/1 var(--font-sans);
  letter-spacing: .015em;
  white-space: nowrap; /* a label never breaks onto two lines */
  color: var(--color-text-brand);
}
#header .hd-link {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap); padding: 0 14px 0 var(--hd-edge);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: color 240ms var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
#header .hd-link span { padding-top: 1px; } /* optical: Jost sits high */
@media (hover: hover) { #header .hd-link:hover { background: rgba(110, 33, 41, .06); } }
#header .hd-link:active { background: rgba(110, 33, 41, .1); }

/* Wordmark: hidden while the hero logo is on screen (functional fade) */
#header .hd-logo {
  display: grid; align-content: center;
  min-height: var(--tap); /* 44px tap target around the 22px-tall wordmark */
  padding: 0 6px; border-radius: var(--radius-sm);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
#header .hd-logo img { grid-area: 1 / 1; width: 104px; height: auto; transition: opacity 240ms var(--ease-out); }
#header .hd-logo__cream { opacity: 0; }
#header.on-hero .hd-logo__cream { opacity: 1; }
#header.on-hero .hd-logo__ink { opacity: 0; }
/* While the hero's own logo is on screen the bar's wordmark is hidden, so its
   centre column collapses to nothing: the labels get the whole width. */
#header:not(.show-logo) .hd-bar__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
#header .hd-logo { justify-self: center; }
#header.show-logo .hd-logo {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
}

/* Cart button ------------------------------------------------------------- */
#header .hd-cart {
  justify-self: end;
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  min-width: var(--tap); min-height: var(--tap);
  padding: 0 var(--hd-edge) 0 14px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-brand);
  touch-action: manipulation;
  transition: color 240ms var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
#header .hd-cart__label { padding-top: 1px; }
@media (hover: hover) { #header .hd-cart:hover { background: rgba(110, 33, 41, .06); } }
#header .hd-cart:active { background: rgba(110, 33, 41, .1); transform: translateY(1px); }
#header .hd-cart__glyph { position: relative; display: block; width: 26px; height: 26px; }
#header .hd-link__icon { width: 24px; height: 24px; flex: none; }
#header .hd-cart__icon { display: block; width: 26px; height: 26px; }

/* Focus: one crisp ring drawn inside the control's own pill, never wider than
   the control (so it can't reach into the gutter). */
#header .hd-link:focus-visible,
#header .hd-cart:focus-visible,
#header .hd-logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }

/* The count lives on the box: empty box = outline with its band; with items the
   box fills and the number is written on it in the bar's colour. */
#header .hd-cart__fill { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
#header .hd-cart__band { transition: opacity var(--dur-fast) var(--ease-out); }
#header.has-items .hd-cart__fill { opacity: 1; }
#header.has-items .hd-cart__band { opacity: 0; }
#header .hd-cart__count {
  position: absolute; left: 4px; right: 4px; top: 10.4px; height: 13px;
  display: grid; place-items: center;
  color: var(--c-cream-50);
  font: var(--fw-medium) 11px/1 var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring), color 240ms var(--ease-out);
}
#header .hd-cart__count[data-len="2"] { font-size: 10.5px; letter-spacing: -.03em; }
#header .hd-cart__count[data-len="3"] { font-size: 8.5px; letter-spacing: -.04em; }
#header.has-items .hd-cart__count { opacity: 1; transform: none; }

/* Bordó mode: while the hero is under the bar, the bar is part of it.
   Functional colour fade only (240ms). */
#header.on-hero .hd-link,
#header.on-hero .hd-cart__label,
#header.on-hero .hd-cart { color: var(--c-cream-ink); }
#header.on-hero .hd-cart__count { color: var(--c-burgundy-700); }
@media (hover: hover) {
  #header.on-hero .hd-link:hover,
  #header.on-hero .hd-cart:hover { background: rgba(251, 237, 230, .08); }
}
#header.on-hero .hd-link:active,
#header.on-hero .hd-cart:active { background: rgba(251, 237, 230, .14); }
#header.on-hero .hd-link:focus-visible,
#header.on-hero .hd-cart:focus-visible,
#header.on-hero .hd-logo:focus-visible { outline-color: var(--c-cream-ink); }

/* Tiny bump on cart:added (the allowed "tiny bump") */
#header .hd-cart.is-bumped .hd-cart__glyph { animation: hd-bump 420ms var(--ease-spring); }
@keyframes hd-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.16) rotate(-4deg); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { #header .hd-cart.is-bumped .hd-cart__glyph { animation: none; } }
html[data-reduced-motion] #header .hd-cart.is-bumped .hd-cart__glyph { animation: none; }

/* Narrow phones: once the wordmark takes the centre, the bar goes icons-only so
   nothing crowds it (both controls keep their accessible names). */
@media (max-width: 389px) { #header.show-logo .hd-cart__label, #header.show-logo .hd-link span { display: none; } }
@media (max-width: 299px) { #header .hd-cart__label, #header .hd-link span { display: none; } }

@media (min-width: 768px) {
  #header .hd-logo img { width: 124px; }
}