/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* ── Kitchen Bridget Brand Palette ──────────────────────────────────────────
     Raw palette variables. Never use these directly in components — always
     reference a semantic --color-* token below. Add no hex values outside
     this block; every color in the site must trace back to one of these twenty.
     ────────────────────────────────────────────────────────────────────────── */
  --palette-denim:          #425B76;  /* Signature Denim    */
  --palette-linen:          #FDFBF7;  /* Crisp Linen        */
  --palette-olive:          #8B9D58;  /* "Good" Olive Oil   */
  --palette-french-blue:    #859DB4;  /* French Blue        */
  --palette-tomato:         #D64F41;  /* Heirloom Tomato    */
  --palette-butcher-block:  #C48A5A;  /* Butcher Block      */
  --palette-lemon:          #F4D03F;  /* Zested Lemon       */
  --palette-chocolate:      #4A2E24;  /* Beatty's Chocolate */
  --palette-boxwood:        #3A5335;  /* Boxwood Green      */
  --palette-sea-salt:       #D8D4CC;  /* Warm Sea Salt      */
  --palette-cast-iron:      #2D2C2A;  /* Cast Iron Pan      */
  --palette-dijon:          #C49C40;  /* Dijon Mustard      */
  --palette-copper-pot:     #B86944;  /* Copper Pot         */
  --palette-rosemary:       #6B7A63;  /* Fresh Rosemary     */
  --palette-shallot:        #D7A4A3;  /* Sliced Shallot     */
  --palette-fig:            #5B4153;  /* Mission Fig        */
  --palette-truffle:        #7E7065;  /* Black Truffle      */
  --palette-balsamic:       #372124;  /* Aged Balsamic      */
  --palette-earl-grey:      #848B92;  /* Earl Grey Tea      */
  --palette-creme:          #EDE4D3;  /* Crème Anglaise     */

  /* ── Semantic Color Tokens (light mode) ─────────────────────────────────────
     Map palette vars to roles. Components reference these tokens only.
     ────────────────────────────────────────────────────────────────────────── */
  /* Boxwood Green (#3A5335): rich forest green — 7.5:1 on Linen ✓ WCAG AA  */
  --color-primary:    var(--palette-boxwood);      /* Buttons, links, focus rings         */
  /* Copper Pot (#B86944): warm terracotta — used for secondary CTAs and accents */
  --color-secondary:  var(--palette-copper-pot);   /* Secondary buttons, accents          */
  --color-accent:     var(--palette-tomato);       /* Alerts, errors, highlight accents   */
  --color-text:       var(--palette-chocolate);    /* Body text                           */
  /* Chocolate/Truffle mix: passes AA (5.3:1) on Crème and (4.6:1) on Sea Salt */
  --color-text-muted: color-mix(in srgb, var(--palette-chocolate) 50%, var(--palette-truffle));
  /* Crème Anglaise: warm golden page — adds colour without overwhelming */
  --color-bg:         var(--palette-creme);
  /* Crisp Linen: clean near-white card/section bg — creates lift off the Crème page bg */
  --color-bg-subtle:  var(--palette-linen);
  /* Warm Sea Salt: softer border than Truffle — gentle structural line on Linen cards */
  --color-border:     var(--palette-sea-salt);
  --color-nav-bg:     var(--palette-linen);        /* Slightly lighter chrome strip above Crème body */
  --color-nav-link:   var(--palette-chocolate);    /* Nav link text                       */
  /* Linen is the nearest palette equivalent to white; used as the light contrast
     color on saturated brand backgrounds (active nav, chips, category pills).
     Linen (#FDFBF7) passes WCAG AA on every saturated palette color where it appears. */
  --color-white:      var(--palette-linen);

  /* On-color tokens: text to place ON a primary/secondary background.
     Linen on Boxwood = 7.5:1 ✓. Linen on Copper Pot ≈ 3.8:1 — passes for
     UI components (3:1 threshold) and large/bold button text. Redefined below
     for dark mode where primaries are lighter. Always use these tokens inside
     filled buttons, chips, and pills — never --color-white directly. */
  --color-on-primary:   var(--palette-linen);     /* Text on --color-primary backgrounds   */
  --color-on-secondary: var(--palette-linen);     /* Text on --color-secondary backgrounds */

  /* Typography */
  --font-base:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-size-base: 1rem;
  --line-height:    1.6;

  /* Layout */
  --max-width: 72rem;

  /* Spacing scale */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */

  /* Border radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-full: 9999px;   /* Pill / chip shapes */

  /* Transitions */
  --transition-base: 200ms ease;

  /* Nav bar height — used to offset page content below the fixed nav bar.
     Derived from the bar's padding-block (2 × --space-md) + flex content (~1.75rem).
     Update this value if the bar's padding or font size changes. */
  --nav-bar-height: 3.75rem;
}

/* ============================================================
   Dark Mode — override custom properties via OS preference
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Re-map semantic tokens for dark mode — palette vars are unchanged */
    /* Olive (#8B9D58): muted sage-green — 4.8:1 on Cast Iron ✓ WCAG AA  */
    --color-primary:    var(--palette-olive);         /* Warm olive — readable on dark bg        */
    /* Copper Pot stays consistent across modes — warm terracotta accent */
    --color-secondary:  var(--palette-copper-pot);   /* Terracotta accent — matches light mode  */
    --color-accent:     var(--palette-tomato);       /* Tomato — same in both modes             */
    /* Crème Anglaise: warmer than Linen, easier on dark background reading */
    --color-text:       var(--palette-creme);
    --color-text-muted: var(--palette-sea-salt);     /* Warm grey for supporting text           */
    /* Cast Iron: deeper/cooler dark bg than Chocolate — less warm-colour fatigue */
    --color-bg:         var(--palette-cast-iron);
    /* Card bg: Cast Iron with a touch of Mission Fig for subtle warm depth */
    --color-bg-subtle:  color-mix(in srgb, var(--palette-cast-iron) 70%, var(--palette-fig));
    /* Black Truffle: warm grey-brown border, more visible on Cast Iron */
    --color-border:     var(--palette-truffle);
    /* Aged Balsamic: rich dark nav/footer bar — warm depth against Cast Iron body */
    --color-nav-bg:     var(--palette-balsamic);
    /* Crème Anglaise: warm off-white on Balsamic nav — 12:1 contrast */
    --color-nav-link:   var(--palette-creme);
    /* Dark-mode primaries are lighter; Cast Iron on Olive = 4.8:1 ✓.
       Linen on Copper Pot ≈ 3.8:1 — passes for UI components and large/bold text. */
    --color-on-primary:   var(--palette-cast-iron);  /* Cast Iron on Olive = 4.8:1 ✓       */
    --color-on-secondary: var(--palette-linen);      /* Linen on Copper Pot ≈ 3.8:1 (UI ✓) */
  }
}

/* ============================================================
   Manual Theme Overrides
   Placed after @media block so attribute selector wins cascade
   at equal specificity. Applied by JS when the user clicks
   "Theme" button in the footer; persisted via localStorage.
   ============================================================ */
[data-theme="dark"] {
  --color-primary:      var(--palette-olive);
  --color-secondary:    var(--palette-copper-pot);
  --color-accent:       var(--palette-tomato);
  --color-text:         var(--palette-creme);
  --color-text-muted:   var(--palette-sea-salt);
  --color-bg:           var(--palette-cast-iron);
  --color-bg-subtle:    color-mix(in srgb, var(--palette-cast-iron) 70%, var(--palette-fig));
  --color-border:       var(--palette-truffle);
  --color-nav-bg:       var(--palette-balsamic);
  --color-nav-link:     var(--palette-creme);
  --color-on-primary:   var(--palette-cast-iron);
  --color-on-secondary: var(--palette-linen);
}

[data-theme="light"] {
  --color-primary:      var(--palette-boxwood);
  --color-secondary:    var(--palette-copper-pot);
  --color-accent:       var(--palette-tomato);
  --color-text:         var(--palette-chocolate);
  --color-text-muted:   color-mix(in srgb, var(--palette-chocolate) 50%, var(--palette-truffle));
  --color-bg:           var(--palette-creme);
  --color-bg-subtle:    var(--palette-linen);
  --color-border:       var(--palette-sea-salt);
  --color-nav-bg:       var(--palette-linen);
  --color-nav-link:     var(--palette-chocolate);
  --color-on-primary:   var(--palette-linen);
  --color-on-secondary: var(--palette-linen);
}

/* ============================================================
   Modern CSS Reset (mobile-first)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  /* NOTE: clip (not hidden) prevents horizontal scroll from full-bleed recipe
     hero images without creating a new scroll container. position: sticky
     elements continue to work correctly with overflow-x: clip. */
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* ============================================================
   Screen-reader-only utility
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   Skip-to-content Link (accessibility)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(1.75rem, 4vw, 3rem); }
h2 { font-size: clamp(1.375rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
  max-width: 68ch;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover { color: var(--color-secondary); }

a:focus-visible {
  color: var(--color-secondary);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Page Shell Layout
   ============================================================ */
.site-header,
.site-footer {
  background-color: var(--color-nav-bg);
  /* border-bottom handled per-element below — header uses .site-header__bar,
     footer uses border-top only */
}

.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* ── Nav bar ─── */
/* Wraps the site title, nav links, and theme toggle.
   Non-home pages: always fixed at viewport top; .site-header acts as an
   in-flow spacer (min-height below) so content doesn't start under the bar.
   Home page mobile: sticky so it flows naturally below the brand section.
   Home page desktop: fixed + scroll-revealed by initScrollNav() in main.js. */
.site-header__bar {
  background-color: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
  /* Home page mobile default — overridden for non-home and home-desktop below */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Non-home pages: fixed at the top of the viewport on all screen sizes.
   The brand section is hidden on these pages so there is nothing above the
   bar to scroll past — fixed keeps it permanently in view. */
body:not(.page-home) .site-header__bar {
  position: fixed;
  left: 0;
  right: 0;
}

/* Spacer — gives .site-header an in-flow height equal to the fixed bar so
   the first element in <main> starts below the bar, not behind it. */
body:not(.page-home) .site-header {
  min-height: var(--nav-bar-height);
}

/* ── Scroll-reveal: home page at desktop only ─── */
/* Hidden initial state — translateY(-100%) moves the bar above the viewport.
   pointer-events: none prevents invisible interaction when hidden. */
@media (min-width: 1280px) {
  .page-home .site-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    /* cubic-bezier gives the slide-in a snappy deceleration feel */
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms ease;
  }

  /* Revealed state — added by initScrollNav() after SCROLL_THRESHOLD_PX */
  .page-home .site-header__bar.is-scrolled {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   Site Brand Header
   Always-visible section above the nav bar on every page.
   Displays the large wordmark and tagline.
   ============================================================ */
.site-brand {
  text-align: center;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  background-color: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
}

/* The entire wordmark (icon + name) is one focusable link */
.site-brand__wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  /* Decorative Butcher Block rule appears beneath the wordmark on hover/focus */
}

.site-brand__wordmark::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 2px;
  background-color: var(--palette-butcher-block);
  border-radius: 1px;
  /* Fade in on hover so the rule feels like a reveal, not a jump */
  opacity: 0.5;
  transition: opacity var(--transition-base), width var(--transition-base);
}

.site-brand__wordmark:hover::after,
.site-brand__wordmark:focus-visible::after {
  opacity: 1;
  width: 5rem;
}

.site-brand__wordmark:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

/* Chef's hat icon — uses secondary (Copper Pot) to match the 'Bridget' text below */
.site-brand__icon {
  width: 3rem;
  height: 2.75rem;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.site-brand__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* tight line-height so the two lines read as a single unit */
  line-height: 1;
  gap: 0.15em;
}

/* "Kitchen" — small eyebrow label above the signature name.
   Uppercase + letter-spacing gives it the feel of a category tag. */
.site-brand__kitchen {
  font-family: var(--font-heading);
  font-size: clamp(0.75rem, 1.5vw, 0.9375rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  /* Compensate visually for letter-spacing gap after the last character */
  padding-right: 0.35em;
  color: var(--color-primary);
}

/* "Bridget" — the signature: large, italic Lora for an editorial recipe-site feel */
.site-brand__bridget {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 700;
  font-style: italic;
  /* Lora italic descenders sit low — negative letter-spacing tightens the colour block */
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--color-secondary);
}

.site-brand__tagline {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Theme toggle — lives inside .site-nav__list so it collapses into the
   hamburger on mobile and renders inline on desktop.
   Base appearance mirrors .site-nav__link exactly, except color starts at
   --color-text-muted (neutral) rather than --color-nav-link to signal that
   no override is active (System/auto mode). */
.theme-toggle {
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-nav-link);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.theme-toggle:hover {
  color: var(--color-primary);
  background-color: var(--color-bg-subtle);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Active override state (JS adds .is-overriding when data-theme="dark"|"light").
   Mirrors .site-nav__link[aria-current="page"] so the "something is selected"
   visual language is identical across the nav. */
.theme-toggle.is-overriding {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--palette-butcher-block);
}

.site-header__inner,
.site-footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-xl);
}

/* ============================================================
   Site Header
   ============================================================ */
.site-header__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-header__title a {
  /* Use primary (Boxwood/Olive) so the brand name reads as the site identity,
     distinct from the standard nav link text colour */
  color: var(--color-primary);
  text-decoration: none;
}

.site-header__title a:hover {
  color: var(--color-secondary);
}

/* ============================================================
   Navigation
   ============================================================ */
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
}

.site-nav__link {
  color: var(--color-nav-link);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-bg-subtle);
  outline: none;
}

.site-nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  /* Butcher Block underline adds warm contrast to the denim primary colour */
  border-bottom: 2px solid var(--palette-butcher-block);
}

/* Hamburger toggle — hidden on wide screens */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: var(--space-xs);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.site-nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile nav — stacked layout */
@media (max-width: 48rem) {
  .site-nav__toggle {
    display: flex;
  }

  .site-nav__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    padding-block: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }

  .site-nav__list.is-open {
    display: flex;
  }

  .site-nav__link {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
  }

  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header__inner > .site-nav {
    width: 100%;
  }

  /* Theme toggle inside the open hamburger menu — full-width block to match
     nav links. */
  .site-nav__list .theme-toggle {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    color: var(--color-nav-link);
  }

  .site-nav__list .theme-toggle:hover,
  .site-nav__list .theme-toggle:focus-visible {
    color: var(--color-primary);
    background-color: var(--color-bg-subtle);
    outline: none;
  }

  /* Active override on mobile: bold primary without the border-bottom —
     an underline indicator looks odd in a stacked list context */
  .site-nav__list .theme-toggle.is-overriding {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: none;
  }
}

/* ============================================================
   Footer — multi-column layout
   ============================================================ */

/* Override the shared site-header__inner / site-footer__inner flex rule so
   the footer can be a grid instead. Header remains flex-row. */
.site-footer .site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

@media (min-width: 768px) {
  .site-footer .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .site-footer .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: var(--space-2xl);
  }
}

/* ── Footer column headings ─── */
.footer-col__heading {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--palette-butcher-block);
}

/* ── Brand column ─── */
.footer-brand__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.footer-brand__name:hover { color: var(--color-secondary); }

.footer-brand__tagline {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

.footer-brand__copy {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}

/* ── Social links ─── */
.footer-social {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-social__link:hover { color: var(--color-primary); }

.footer-social__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.footer-social__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ── Nav columns (Recipes, Quick Links) ─── */
.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav__link {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-nav__link:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.15em; }

.footer-nav__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Newsletter column ─── */
.footer-newsletter__desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.footer-newsletter__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-on-secondary);
  background-color: var(--color-secondary);
  padding: 0.125rem var(--space-sm);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}

.footer-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-newsletter__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.footer-newsletter__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.footer-newsletter__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.footer-newsletter__btn {
  align-self: flex-start;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.footer-newsletter__btn:hover {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.footer-newsletter__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.footer-newsletter__note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
   About Page
   ============================================================ */
.about {
  max-width: 68ch;
  padding-block: var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Butcher Block accent rule beneath the page title — matches the warm editorial
   treatment used on listing pages and recipe/menu detail headers */
.about h1 {
  padding-bottom: var(--space-md);
  border-bottom: 3px solid var(--palette-butcher-block);
  margin-bottom: var(--space-sm);
}

/* Section headings — slightly smaller than global h2, with a subtle divider */
.about h2 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* Tighten line-height on the introductory paragraph for a more editorial feel */
.about p:first-of-type {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* Category list — spaced and indented, with disc markers */
.about ul {
  padding-left: var(--space-lg);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.about li {
  line-height: 1.6;
  padding-left: var(--space-xs);
}

/* Recipe count badge appended to each category list item — muted so it reads
   as supporting metadata rather than competing with the category name */
.about-category-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}

/* CTA block at the bottom of the about page */
.about-cta {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-cta__heading {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-text);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.about-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base),
              border-color var(--transition-base);
}

.about-cta__btn--primary {
  background-color: var(--color-primary);
  color: var(--palette-linen);
  border: 2px solid var(--color-primary);
}

.about-cta__btn--primary:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.about-cta__btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.about-cta__btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--palette-linen);
}

.about-cta__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ============================================================
   Page Intro Strip
   Used at the top of listing pages (recipes, menus) to give the
   page a branded heading and contextual tagline — mirrors the
   home-identity editorial pattern.
   ============================================================ */

.page-intro {
  padding-block: var(--space-xl) 0;
  border-left: 4px solid var(--palette-butcher-block);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.page-intro__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.page-intro__tagline {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.6;
}

/* ============================================================
   No-Script Notice
   Shown only when JavaScript is disabled. Informs the user
   that filtering requires JS while all recipes remain visible.
   ============================================================ */
.noscript-notice {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* ============================================================
   Recipe Detail Page — Breadcrumb
   ============================================================ */
.recipe-breadcrumb {
  margin-bottom: var(--space-md);
}

.recipe-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 0.875rem;
}

.recipe-breadcrumb__list li {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

/* Separator: rendered via CSS ::before so it is not exposed to the
   accessibility tree — screen readers will not announce the slash */
.recipe-breadcrumb__list li + li::before {
  content: '/';
  margin-right: var(--space-sm);
  color: var(--color-border);
}

.recipe-breadcrumb__list a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.recipe-breadcrumb__list a:hover {
  text-decoration: underline;
}

.recipe-breadcrumb__list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Current page: truncate very long titles */
.recipe-breadcrumb__list [aria-current="page"] {
  max-width: 32ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Recipe Listing Page
   ============================================================ */

/* Category filter subnav */
.recipe-subnav {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-block: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  -webkit-overflow-scrolling: touch;
}

.recipe-subnav::-webkit-scrollbar        { height: 4px; }
.recipe-subnav::-webkit-scrollbar-track  { background: transparent; }
.recipe-subnav::-webkit-scrollbar-thumb  {
  background-color: var(--color-border);
  border-radius: 2px;
}

.recipe-subnav__btn {
  flex-shrink: 0;
  white-space: nowrap;
  /* A11Y: min-height meets the 44px recommended touch target size */
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

/* When a category button has --cat-bg set, show it as an outlined button in the
   category color so inactive buttons hint at their identity before selection */
.recipe-subnav__btn[data-category]:not([data-category="all"]) {
  border-color: var(--cat-bg);
  color: var(--cat-bg);
}

/* Hover: fill with the category color (or primary for "All") */
.recipe-subnav__btn:hover {
  background-color: var(--cat-bg, transparent);
  border-color: var(--cat-bg, var(--color-primary));
  color: var(--cat-text, var(--color-primary));
}

.recipe-subnav__btn:focus-visible {
  outline: 2px solid var(--cat-bg, var(--color-primary));
  outline-offset: 3px;
  border-color: var(--cat-bg, var(--color-primary));
  color: var(--cat-text, var(--color-primary));
}

/* Active: filled with the category color, matching the home page tile treatment */
.recipe-subnav__btn[aria-pressed="true"] {
  background-color: var(--cat-bg, var(--color-primary));
  border-color: var(--cat-bg, var(--color-primary));
  color: var(--cat-text, var(--color-on-primary));
}

/* Per-category color tokens — mirrors the home page .category-tile--* palette */
.recipe-subnav__btn[data-category="starters"]  { --cat-bg: var(--palette-dijon);         --cat-text: var(--palette-chocolate); }
.recipe-subnav__btn[data-category="lunch"]     { --cat-bg: var(--palette-rosemary);      --cat-text: var(--palette-linen);     }
.recipe-subnav__btn[data-category="dinner"]    { --cat-bg: var(--palette-denim);         --cat-text: var(--palette-linen);     }
.recipe-subnav__btn[data-category="sides"]     { --cat-bg: var(--palette-truffle);       --cat-text: var(--palette-linen);     }
.recipe-subnav__btn[data-category="dessert"]   { --cat-bg: var(--palette-shallot);       --cat-text: var(--palette-chocolate); }
.recipe-subnav__btn[data-category="breakfast"] { --cat-bg: var(--palette-butcher-block); --cat-text: var(--palette-chocolate); }
.recipe-subnav__btn[data-category="cocktails"] { --cat-bg: var(--palette-fig);           --cat-text: var(--palette-linen);     }

/* Menus page has its own category slugs — map them to the same palette */
.recipe-subnav__btn[data-category="holidays"]       { --cat-bg: var(--palette-tomato);   --cat-text: var(--palette-linen);     }
.recipe-subnav__btn[data-category="family-dinners"] { --cat-bg: var(--palette-denim);    --cat-text: var(--palette-linen);     }

/* Count badge inside each filter button — rendered server-side at build time */
.recipe-subnav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.25rem;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: var(--space-xs);
  vertical-align: middle;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Invert badge colors when the button is active so the count remains legible
   against whichever category background is now applied */
.recipe-subnav__btn[aria-pressed="true"] .recipe-subnav__count,
.recipe-subnav__btn:hover .recipe-subnav__count {
  background-color: color-mix(in srgb, var(--cat-text, var(--color-on-primary)) 20%, transparent);
  color: var(--cat-text, var(--color-on-primary));
}

/* ── Title search ────────────────────────────────────────────────────────── */

/* Full-width bar sitting between the category subnav and the filter toolbar */
.title-search {
  margin-top: var(--space-md);
}

.title-search__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Positioning context for the dropdown; constrains both input and dropdown width */
.title-search__combobox {
  position: relative;
  max-width: 32rem;
}

/* Input shares the same visual language as .tag-filter__search */
.title-search__input {
  display: block;
  width: 100%;
  padding: 0.5rem var(--space-sm);
  font-size: 0.9375rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-base);
  box-sizing: border-box;
}

.title-search__input:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-subtle);
}

/* Autocomplete dropdown — floats below the input, hidden until JS opens it */
.title-search__dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  /* 6 rows × 2.625rem per row */
  max-height: calc(6 * 2.625rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--palette-chocolate) 12%, transparent);
}

/* Individual suggestion row */
.title-search__option {
  display: flex;
  align-items: center;
  min-height: 2.625rem;
  padding: 0.5rem var(--space-sm);
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.title-search__option:last-child {
  border-bottom: none;
}

/* Hover + keyboard-highlight share the same style for visual consistency */
.title-search__option:hover,
.title-search__option.is-highlighted {
  background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-bg));
  color: var(--color-secondary);
  font-weight: 500;
}

/* Matched substring highlight inside each suggestion row.
   Lemon yellow with Chocolate text — identical treatment to .tag-filter__match. */
.title-search__match {
  background-color: var(--palette-lemon);
  color: var(--palette-chocolate);
  border-radius: 2px;
  padding-inline: 1px;
  font-style: normal;
}

/* ── Filter & sort toolbar ───────────────────────────────────────────────── */

/* Flex row that houses the tag filter (conditional) and sort controls (always).
   Owns the visual separation from the recipe grid below. */
.recipe-toolbar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-md);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

/* ── Tag filter ──────────────────────────────────────────────────────────── */

.tag-filter {
  /* Spacing and border-bottom are now owned by the parent .recipe-toolbar */
  max-width: 24rem;
  min-width: 14rem;
  flex: 1;
}

/* Visible label above the search input */
.tag-filter__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Positioning context for the absolute-positioned dropdown */
.tag-filter__combobox {
  position: relative;
}

/* Search input — full border-radius now that no list is joined below */
.tag-filter__search {
  display: block;
  width: 100%;
  padding: 0.5rem var(--space-sm);
  font-size: 0.9375rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-base);
  box-sizing: border-box;
}

.tag-filter__search:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-subtle);
}

/* Autocomplete dropdown — floats below the input, hidden until JS opens it */
.tag-filter__dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  padding: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  /* 6 rows × 2.625rem per row */
  max-height: calc(6 * 2.625rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--palette-chocolate) 12%, transparent);
}

/* Individual option row */
.tag-filter__option {
  display: flex;
  align-items: center;
  min-height: 2.625rem;
  padding: 0.5rem var(--space-sm);
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.tag-filter__option:last-child {
  border-bottom: none;
}

/* Hover + keyboard-highlight share the same style for visual consistency */
.tag-filter__option:hover,
.tag-filter__option.is-highlighted {
  background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-bg));
  color: var(--color-secondary);
  font-weight: 500;
}

/* Matched substring highlight inside each dropdown option.
   Lemon yellow background with Chocolate text passes WCAG AA (6.8:1 contrast).
   Forced dark text so the mark reads clearly in both light and dark modes. */
.tag-filter__match {
  background-color: var(--palette-lemon);
  color: var(--palette-chocolate);
  border-radius: 2px;
  padding-inline: 1px;
  font-style: normal;
}

/* Selected tag chips — rendered below the list by JS */
.tag-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* Chip button: shows the tag name + a × remove affordance */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-on-secondary);
  background-color: var(--color-secondary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 1.75rem;
  transition: opacity var(--transition-base);
}

.tag-chip:hover {
  opacity: 0.8;
}

.tag-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tag-chip__remove {
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 300;
  opacity: 0.85;
}

/* ── Sort controls ───────────────────────────────────────────────────────── */

.recipe-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  /* Offset by the tag-filter label height so sort buttons align with the input */
  padding-top: calc(1.25rem + var(--space-xs));
}

/* "Sort by" text — decorative for sighted users; hidden from accessibility tree */
.recipe-sort__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Individual sort toggle button */
.recipe-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* A11Y: min-height meets the 44px recommended touch target size */
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

.recipe-sort__btn:hover:not([aria-pressed="true"]) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.recipe-sort__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Active sort — same treatment as pressed category filter buttons */
.recipe-sort__btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Direction arrow — shown inside the active sort button */
.recipe-sort__dir {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1;
  /* Slight left margin separates the arrow from the label text */
  margin-left: 0.125rem;
}

/* No-results message — shown/hidden via the hidden attribute in JS */
.recipe-empty {
  text-align: center;
  padding-block: var(--space-2xl);
  color: var(--color-text-muted);
}

/* Recipe card grid */
.recipe-grid {
  /* scroll-margin-top ensures the grid clears the sticky header when JS scrolls to it */
  scroll-margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .recipe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .recipe-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.recipe-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.recipe-card:hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--palette-chocolate) 12%, transparent);
  transform: translateY(-2px);
}

.recipe-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.recipe-card__img {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.recipe-card__body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background-color: var(--color-bg-subtle);
}

.recipe-card__category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.recipe-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-xs);
}

.recipe-card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

.recipe-card__date {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ============================================================
   Recipe Listing Pagination
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A11Y: min dimensions meet the 44×44px recommended touch target */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Active page — same visual treatment as a pressed filter button */
.pagination__btn[aria-current="page"],
.pagination__btn.is-current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  cursor: default;
}

/* Prev/Next at bounds — visually dimmed, not interactive */
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ellipsis gap indicator — purely decorative, hidden from accessibility tree */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  /* Not interactive — no cursor change needed */
  user-select: none;
}

/* ============================================================
   Recipe Detail Page
   ============================================================ */

/* Shared hero image treatment — used on both recipe and menu detail pages.
   Contained within the content column; rounded corners match the home carousel. */
.recipe-hero,
.menu-hero {
  /* height: auto overrides the HTML height="525" presentational hint so that
     aspect-ratio (below) can control the height. Without this, browsers treat
     the HTML attribute as a fixed height and aspect-ratio is silently ignored,
     causing a portrait-ish crop on mobile and a fixed-height bar on desktop. */
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
  /* 16:7 ratio gives a wide, cinematic food photography feel */
  aspect-ratio: 16 / 7;
  min-height: 14rem;
  max-height: 28rem;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}

.recipe-header {
  /* Hero above provides top spacing via margin-bottom — no extra margin-top needed */
  margin-block: 0 var(--space-lg);
  padding-bottom: var(--space-lg);
  /* Butcher Block left-border accent — matches the warm editorial feel of the home page
     menu cards and provides a visual anchor for the recipe identity block */
  border-left: 4px solid var(--palette-butcher-block);
  border-bottom: 1px solid var(--color-border);
  padding-left: var(--space-lg);
}

.recipe-header__category {
  display: block;   /* <a> is inline by default; restore block layout */
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: var(--space-xs);
}

.recipe-header__category:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.recipe-header__category:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.recipe-header__date {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  display: block;
}

/* Constrain the body text to a readable line length */
.recipe-body {
  max-width: 68ch;
}

.recipe-body h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-border);
}

.recipe-body ul {
  padding-left: var(--space-lg);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.recipe-body ol {
  padding-left: var(--space-lg);
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recipe-body li {
  line-height: 1.75;
  padding-left: var(--space-xs);
}

/* Recipe tag pills */
.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.recipe-tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  /* Reset <a> defaults */
  text-decoration: none;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
}

a.recipe-tag:hover {
  opacity: 0.8;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--palette-chocolate) 10%, transparent);
}

a.recipe-tag:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Category tag is visually prominent — uses the primary brand color */
.recipe-tag--category {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ============================================================
   Menu Listing Page
   ============================================================ */

/* .menu-subnav reuses all .recipe-subnav rules; no extra overrides needed.
   The class is added alongside .recipe-subnav in menus.njk for JS targeting. */

/* Stacked list of menu cards — one per row, full width */
.menu-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  list-style: none;
  padding: 0;
}

/* ── Menu card ───────────────────────────────────────────────────────────── */

.menu-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg);
}

/* Header strip: category eyebrow + menu title link */
.menu-card__header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-subtle);
}

.menu-card__category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.menu-card__title {
  font-size: clamp(1rem, 2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
}

.menu-card__date {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.menu-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.menu-card__title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.menu-card__title a:focus-visible {
  color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Carousel ────────────────────────────────────────────────────────────── */

/* Outer flex row: [prev btn] [recipe wrapper] [next btn] */
.menu-card__carousel {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}

/* Overflow container — JS translates the track inside this */
.menu-card__recipe-wrapper {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* Scrolling track: all recipe slides laid out in a single row */
.menu-card__recipe-track {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  /* Smooth slide transition; JS toggles this off during resize to avoid flash */
  transition: transform var(--transition-base);
  will-change: transform;
}

/* Individual slide — width set dynamically by menus.js */
.menu-card__recipe-slide {
  flex-shrink: 0;
  /* Rounded corners so slide content respects the card's border-radius */
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.menu-card__recipe-slide:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--palette-chocolate) 10%, transparent);
  transform: translateY(-2px);
}

/* ── Carousel nav buttons ────────────────────────────────────────────────── */

.menu-card__nav-btn {
  /* A11Y: meet 44×44px recommended touch target */
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
  /* Arrow glyphs are rendered via CSS content so HTML stays clean */
}

.menu-card__nav-btn::before {
  font-size: 1rem;
  line-height: 1;
}

.menu-card__nav-btn--prev::before { content: '←'; }
.menu-card__nav-btn--next::before { content: '→'; }

.menu-card__nav-btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.menu-card__nav-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.menu-card__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* When the carousel doesn't need navigation (total ≤ visible), buttons are
   hidden via the HTML hidden attribute. Use visibility:hidden instead so
   the flex layout stays balanced and the recipe track doesn't shift width.
   JS uses .menu-card__nav-btn[hidden] — we override hidden's display:none. */
.menu-card__nav-btn[hidden] {
  display: flex;        /* keep the element in the flex row */
  visibility: hidden;   /* invisible + non-interactive */
  pointer-events: none;
}

/* ============================================================
   Menu Detail Page
   ============================================================ */

.menu-detail-header {
  margin-block: var(--space-xl) var(--space-lg);
  padding-bottom: var(--space-lg);
  /* Butcher Block left-border accent — consistent with recipe-header treatment */
  border-left: 4px solid var(--palette-butcher-block);
  border-bottom: 1px solid var(--color-border);
  padding-left: var(--space-lg);
}

/* When a hero image sits directly above the header, the hero's margin-bottom
   already provides the gap — suppress the redundant top margin. */
.menu-detail-header--below-hero {
  margin-top: 0;
}

.menu-detail-header__category {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: var(--space-xs);
}

.menu-detail-header__category:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.menu-detail-header__category:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.menu-detail-header__date {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.menu-detail-header__desc {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  max-width: 68ch;
}

/* The menu detail recipe grid reuses .recipe-grid for layout.
   .menu-detail__grid is a hook for any future detail-page overrides. */

/* ============================================================
   Home Page
   ============================================================ */

/* ── Hero carousel section ───────────────────────────────────────────────── */

.home-hero {
  margin-bottom: var(--space-2xl);
}

/* Positioning context for all overlaid elements (buttons, dots, body).
   overflow: hidden clips the image and gradient scrim to the rounded corners. */
.hero-carousel__img-area {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Gradient scrim — fades from transparent at the top to dark cast-iron at the
   bottom so the overlaid text always reads against the image regardless of
   its colours. pointer-events: none lets clicks pass through to the buttons. */
.hero-carousel__img-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    color-mix(in srgb, var(--palette-cast-iron) 50%, transparent) 62%,
    color-mix(in srgb, var(--palette-cast-iron) 82%, transparent) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Clips the sliding track horizontally */
.hero-carousel__viewport {
  overflow: hidden;
}

/* Flex row of slides — JS animates via transform */
.hero-carousel__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Respect user motion preference — disable slide animation and autoplay
   (autoplay is also disabled in home.js when this media query matches) */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track {
    transition: none;
  }
}

.hero-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.hero-carousel__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  min-height: 22rem;
  /* Cap height so the hero never dominates the page on wide screens */
  max-height: 30rem;
  object-fit: cover;
  object-position: center;
}

/* ── Prev / Next buttons ─────────────────────────────────────────────────── */

.hero-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* z-index 2: above the gradient scrim (z-index 1) */
  z-index: 2;

  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: none;
  /* Semi-transparent dark button — readable on all recipe image tones */
  background-color: color-mix(in srgb, var(--palette-cast-iron) 72%, transparent);
  color: var(--palette-linen);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), opacity var(--transition-base);
}

.hero-carousel__btn:hover:not(:disabled) {
  background-color: var(--palette-cast-iron);
}

.hero-carousel__btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* A11Y: focus-visible ring in Linen so it reads on any image */
.hero-carousel__btn:focus-visible {
  outline: 2px solid var(--palette-linen);
  outline-offset: 3px;
}

.hero-carousel__btn--prev { left: var(--space-md); }
.hero-carousel__btn--prev::before { content: '←'; }

.hero-carousel__btn--next { right: var(--space-md); }
.hero-carousel__btn--next::after { content: '→'; }

/* ── Dot indicators ──────────────────────────────────────────────────────── */

.hero-carousel__dots {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-sm);
  /* z-index 2: above the gradient scrim (z-index 1) */
  z-index: 2;
}

.hero-carousel__dot {
  /* A11Y: 1.5rem (24px) meets WCAG 2.2 SC 2.5.8 Target Size Minimum.
     The visual dot is rendered by ::before so the button's full box is the hit area. */
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visual dot — size and appearance separated from the interactive hit area */
.hero-carousel__dot::before {
  content: '';
  display: block;
  width: 0.625rem;   /* 10px visual dot */
  height: 0.625rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--palette-linen);
  background-color: transparent;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.hero-carousel__dot.is-active::before {
  background-color: var(--palette-linen);
  transform: scale(1.25);
}

.hero-carousel__dot:focus-visible {
  outline: 2px solid var(--palette-linen);
  outline-offset: 3px;
}

/* ── Slide content body (overlaid on image) ──────────────────────────────── */

/* Absolute positioning places the body over the bottom of the image.
   max-width + margin-inline: auto centres the text block within the full-bleed
   image on wide screens, matching the main content column width. z-index 2 sits
   above the gradient scrim (z-index 1). */
.hero-carousel__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  /* Horizontal padding must clear the arrow buttons:
     each button is 2.75rem wide, inset by --space-md from the edge.
     calc(--space-md + 2.75rem + --space-sm) = 1rem + 2.75rem + 0.5rem = 4.25rem */
  padding: var(--space-xl) calc(var(--space-md) + 2.75rem + var(--space-sm)) var(--space-lg);
  z-index: 2;
}

@media (min-width: 768px) {
  .hero-carousel__body {
    /* Extra --space-md breathing room on wider viewports */
    padding: var(--space-2xl) calc(var(--space-md) + 2.75rem + var(--space-md)) var(--space-xl);
  }
}

.hero-carousel__category {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Butcher Block (warm amber) reads warmly over the dark gradient scrim
     and is visually distinct from the white title text below it */
  color: var(--palette-butcher-block);
  margin-bottom: var(--space-xs);
}

.hero-carousel__title {
  font-size: clamp(1.375rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.hero-carousel__title a {
  /* Linen (near-white) over the dark gradient scrim — passes WCAG AA */
  color: var(--palette-linen);
  text-decoration: none;
}

.hero-carousel__title a:hover {
  color: var(--palette-creme);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hero-carousel__title a:focus-visible {
  color: var(--palette-linen);
  outline: 2px solid var(--palette-linen);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.hero-carousel__desc {
  /* Crème Anglaise: softer than Linen, creates hierarchy below the title */
  color: var(--palette-creme);
  max-width: 62ch;
  margin-bottom: var(--space-lg);
}

.hero-carousel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.625rem var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  /* Linen button with Chocolate text: high contrast on the dark gradient scrim,
     visually distinct from a standard primary button */
  background-color: var(--palette-linen);
  color: var(--palette-chocolate);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.hero-carousel__cta:hover {
  background-color: var(--palette-creme);
  color: var(--palette-chocolate);
}

.hero-carousel__cta:focus-visible {
  /* Linen outline reads on both the dark gradient and the light button itself */
  outline: 2px solid var(--palette-linen);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* ── Site Identity strip ─────────────────────────────────────────────────── */

/* Short editorial statement between the hero and category tiles.
   Centred so it reads as a standalone brand moment. */
.home-identity {
  text-align: center;
  padding: var(--space-xl) 0;
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.home-identity__tagline {
  font-size: clamp(1rem, 2.5vw, 1.1875rem);
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* Outlined CTA — visually lighter than the filled hero button */
.home-identity__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem var(--space-xl);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.home-identity__cta:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.home-identity__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* ── Category tiles ──────────────────────────────────────────────────────── */

/* 2-col mobile → 4-col tablet → 7-col (single row) desktop */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .category-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  /* 8 columns: 7 categories + 1 "All Recipes" tile in a single row */
  .category-tiles {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* Base tile — a full-width link with centred text and a lift on hover */
.category-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.category-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--palette-cast-iron) 18%, transparent);
}

.category-tile:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Per-category background + text combinations.
   All pairings verified at WCAG 2.2 AA for large text (3:1 minimum).
   Dark-background tiles use Linen text; light-background tiles use Chocolate. */
/* Dijon/Chocolate: Starters now uses the golden dijon accent — differentiated
   from Boxwood Green which became the site's primary interactive color. */
.category-tile--starters  { background-color: var(--palette-dijon);         color: var(--palette-chocolate); }
.category-tile--lunch     { background-color: var(--palette-rosemary);      color: var(--palette-linen);     }
.category-tile--dinner    { background-color: var(--palette-denim);         color: var(--palette-linen);     }
.category-tile--sides     { background-color: var(--palette-truffle);       color: var(--palette-linen);     }
.category-tile--dessert   { background-color: var(--palette-shallot);       color: var(--palette-chocolate); }
.category-tile--breakfast { background-color: var(--palette-butcher-block); color: var(--palette-chocolate); }
.category-tile--cocktails { background-color: var(--palette-fig);           color: var(--palette-linen);     }
/* "All Recipes" tile — Chocolate/Linen: neutral anchor that reads as a call-to-action
   rather than a category. Chocolate on Linen = 12:1 ✓ */
.category-tile--all       { background-color: var(--palette-chocolate);     color: var(--palette-linen);     }

/* ── Home recipe grid (4-col variant) ────────────────────────────────────── */

/* Override the standard recipe-grid 3-col desktop cap to 4 on the home page */
@media (min-width: 1280px) {
  .home-recipe-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Latest Menus section ────────────────────────────────────────────────── */

.home-section {
  margin-bottom: var(--space-2xl);
}

.home-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.home-section__heading {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
}

.home-section__link {
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.home-section__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-section__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Menu cards: 1-col mobile → 2-col tablet → 3-col desktop (one per menu) */
.home-menu-list {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .home-menu-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .home-menu-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-menu-card {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  /* Warm accent stripe on the left edge — same Butcher Block used in the hero */
  border-left-width: 4px;
  border-left-color: var(--palette-butcher-block);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-menu-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.home-menu-card__category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.home-menu-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.home-menu-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-menu-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.home-menu-card__title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-menu-card__title a:focus-visible {
  color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.home-menu-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* Inline recipe list: "Title · Title · Title" */
.home-menu-card__recipes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) 0;
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  list-style: none;
  padding: 0;
}

/* Bullet separator between items */
.home-menu-card__recipe + .home-menu-card__recipe::before {
  content: ' · ';
  white-space: pre;
}

.home-menu-card__recipe a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.home-menu-card__recipe a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.home-menu-card__recipe a:focus-visible {
  color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Badge for recipes beyond the first three — "· +N more" */
.home-menu-card__recipe--more {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ============================================================
   Recipe Metadata Row (prep time, cook time, servings)
   Displayed between the recipe header and body content.
   ============================================================ */
.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.recipe-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 6rem;
}

.recipe-meta__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.recipe-meta__value {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Asterisk denotes an estimated value — visible cue mirrored in the legend */
.recipe-meta__est {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  vertical-align: super;
  line-height: 1;
}

.recipe-meta__legend {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xs);
}

/* ── Print button ─── */
.recipe-print-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
  /* A11Y: minimum 44px touch target via padding stack */
}

.recipe-print-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.recipe-print-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.recipe-print-btn__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ── Row that houses the print button above recipe body ─── */
.recipe-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

/* ============================================================
   Reduced Motion — disable all animations and transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}