/* Green footer, the region-list band fix, and the deep-forest accent pass.

   Ray asked for the footer and the band fix after the light-mode deploy; the
   accent rules arrived with round 3, the return to a dark ground, and were
   re-cut when the client asked for the green itself to be dark.

   ---------------------------------------------------------------------------
   1. Green footer, done through the token layer rather than per-element rules.
      The footer uses bg-ink, text-cream, text-cream/50, text-clay, text-ink3,
      border-line, text-flame and text-ember/70. Those all resolve to the theme
      custom properties, and the alpha variants go through color-mix against the
      same properties, so redefining the tokens inside the footer inverts the
      whole component at once. Nothing in the markup changes and the design's
      own structure, spacing and type are untouched.

      The earlier iteration Ray liked used #03512a with a light ink, which is
      what this reproduces.
   ---------------------------------------------------------------------------
   2. The region list showed thick pale bands between terroirs.

      Cause: the list is a grid of `li`s with `gap-px bg-line`, and each `li`
      holds a `button` that is not full height. The grid rows stretch to match
      the panel beside them, so roughly 13px of bare bg-line showed under every
      button. In the dark palette that was invisible (line #3a2822 on ink
      #120b08); once line became #d9e3dc on white it read as a heavy band.

      The fix is to let the button fill its row, which is what `gap-px` was
      always for: 1px hairlines, not 13px gutters. This corrects a latent bug
      rather than changing the design.
*/

:root {
  --footer-ground: #03512a;
  --footer-ink: #eaf4ee;
  --footer-ink-soft: #c6dbcd;
  --footer-muted: #a8c4b2;
  --footer-accent: #f6b40e;
  --footer-rule: rgba(255, 255, 255, 0.18);
  --footer-ghost: rgba(255, 255, 255, 0.15);
}

/* ---------- region list: the band ---------- */

/* one ul in the section, the terroir list. No id needed, so no markup edit. */
#regions ul > li {
  display: flex;
}

#regions ul > li > button {
  flex: 1 1 auto;
  width: 100%;
}

/* ---------- green footer, by token override ---------- */

/* Scoped to the real footer. A bare `footer` selector also matches the two
   <footer> elements inside the Origin blockquotes, and overriding their tokens
   would put light-on-white text there. The site footer is the only one with
   bg-ink, and `footer[role]` is not set, so bg-ink is the reliable hook. */
footer.bg-ink {
  --color-ink: var(--footer-ground);
  --color-ink2: #0a4230;
  --color-ink3: #10553d;
  --color-line: var(--footer-rule);

  /* ink flips to light: every text-cream/N and text-clay/N alpha variant
     follows automatically because they color-mix against these properties */
  --color-cream: var(--footer-ink);
  --color-clay: var(--footer-muted);

  --color-flame: var(--footer-accent);
  --color-ember: var(--footer-accent);
  --color-leaf: var(--footer-accent);

  /* the giant marquee line is a ghost, not body copy */
  --color-ink3: var(--footer-ghost);
}

/* gold on deep green clears 10:1, so the hover state stays legible */
footer.bg-ink a:hover {
  color: var(--footer-accent);
}

/* ---------- round 3: dark ground, deep forest accents ---------- */

/* The client asked for the green to be dark, so the accents split by role.
   The FILL token (ember #055c35) carries the darkness: cream on it measures
   6.8:1, and the markup on those fills is already text-cream, so unlike the
   bright grade there is no flip left to do. The TEXT token (flame #0b7f49)
   can only go so dark before it vanishes against #201a14 — 3.4:1, which is
   the floor for the 11px accent labels the client still has to read — so
   every green text use resolves to flame, including the ones written as
   ember. In footer scope both vars resolve to the gold accent, so the footer
   is unaffected.

   These rules are unlayered and the utilities are in @layer utilities, so
   they take precedence over hover:text-ink on the pills without needing to
   outrank it on specificity. */

.bg-ember,
.bg-flame {
  color: var(--color-cream);
}

.bg-ember:hover,
.bg-flame:hover {
  color: var(--color-cream);
}

.text-ember,
.text-ember\/70 {
  color: var(--color-flame);
}

/* Alpha borders fade out of sight at this grade: the nav pill outline is
   border-flame/45, which blends to roughly 1.5:1 against the ground. */
.border-flame\/30,
.border-flame\/35,
.border-flame\/45,
.hover\:border-flame\/60:hover {
  border-color: var(--color-flame);
}

/* the hero hairline, same reason */
.via-flame\/40 {
  --tw-gradient-via: var(--color-flame);
}

/* The alpha steps that read as gentle greys on white come out as unreadable
   on the dark ground: clay/70 measures 3.3:1 against
   #201a14, under the 4.5:1 their size needs. On this ground the muted and
   accent labels run at full token strength instead; the hierarchy still comes
   from size, weight and the eyebrow tracking.

   Body copy is left alone: text-cream/55 on the ground measures 5.5:1 and
   should keep its grey. The footer gets the same treatment scoped to itself,
   where its own alphas measured 2.8-4.1:1 against the deep green. */

.text-clay\/70,
.text-clay\/75,
.text-clay\/80 {
  color: var(--color-clay);
}

.text-flame\/70,
.text-flame\/80,
.text-flame\/85 {
  color: var(--color-flame);
}

footer.bg-ink .text-cream\/50,
footer.bg-ink .text-cream\/55,
footer.bg-ink .text-cream\/60 {
  color: var(--color-cream);
}

footer.bg-ink .text-clay\/60 {
  color: var(--color-clay);
}

/* ---------- growing regions: the cherry-branch plate ---------- */

/* Round 3: the client's wide cherry-branch shot (Unsplash 1645926680403,
   2000x900 after resize) sits under the section header, above the terroir
   selector, spliced in by patch-regions-img.mjs.

   It inherits the bordered-media language already used by the visit photos
   and the terroir panel: 1px of --color-line, the same 2px radius. The height
   is a clamp rather than an aspect-ratio because the source is 2.22:1 and a
   literal 2.22:1 at container width would be 600px tall — taller than the
   section header it sits under. object-fit: cover takes the crop; positioning
   slightly below centre keeps the cherry cluster, which sits low in the
   frame, inside the band at every width.

   margin-top matches the panel's own mt-12, so the header-to-plate and
   plate-to-panel gaps are identical. */
.regions-plate {
  margin-top: 3rem;
  height: clamp(200px, 28vw, 400px);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background: var(--color-ink2);
}

.regions-plate-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}