/* ============================================================
   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.
     ────────────────────────────────────────────────────────────────────────── */
  --color-primary:    var(--palette-denim);        /* Buttons, links, focus rings         */
  --color-secondary:  var(--palette-boxwood);      /* Secondary buttons, category labels  */
  --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);
  /* Warm Sea Salt: clearly distinct card/section bg against Crème page */
  --color-bg-subtle:  var(--palette-sea-salt);
  /* Black Truffle: 3.6:1 on Crème — visible structural border */
  --color-border:     var(--palette-truffle);
  --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.
     In light mode, primary/secondary are dark enough that Linen (near-white) passes.
     In dark mode, primary/secondary are lighter (French Blue, Olive), so Cast Iron
     (near-black) is required. These tokens are redefined in the dark-mode blocks below.
     Always use --color-on-primary / --color-on-secondary instead of --color-white
     for text inside filled buttons, chips, and pills. */
  --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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-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;
}

/* ============================================================
   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 */
    --color-primary:    var(--palette-french-blue);  /* Lighter blue readable on dark bg        */
    --color-secondary:  var(--palette-olive);        /* Olive accent                            */
    --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, so dark text is needed for contrast on filled elements */
    --color-on-primary:   var(--palette-cast-iron);  /* Cast Iron on French Blue = 5.1:1 ✓ */
    --color-on-secondary: var(--palette-cast-iron);  /* Cast Iron on Olive = 4.8:1 ✓       */
  }
}

/* ============================================================
   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-french-blue);
  --color-secondary:    var(--palette-olive);
  --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-cast-iron);
}

[data-theme="light"] {
  --color-primary:      var(--palette-denim);
  --color-secondary:    var(--palette-boxwood);
  --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-sea-salt);
  --color-border:       var(--palette-truffle);
  --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: 1px solid var(--color-border);
}

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

/* Theme toggle button in footer — unstyled button that looks like a nav link */
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  /* Explicit size matches .site-footer__nav a — <button> doesn't inherit from that selector */
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-base);
}

.theme-toggle:hover {
  color: var(--color-secondary);
}

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

.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.25rem;
  font-weight: 700;
}

.site-header__title a {
  color: var(--color-text);
  text-decoration: none;
}

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

/* ============================================================
   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;
  border-bottom: 2px solid currentColor;
}

/* 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%;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer__copy {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  max-width: unset;
}

.site-footer__nav ul {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-footer__nav a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ============================================================
   Content / Coming Soon Page
   ============================================================ */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-2xl);
  gap: var(--space-lg);
}

.coming-soon p {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-inline: auto;
}

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

/* Decorative accent rule beneath the page title */
.about h1 {
  padding-bottom: var(--space-md);
  border-bottom: 3px solid var(--color-primary);
  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);
}

/* ============================================================
   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);
}

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

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

.recipe-subnav__btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* 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 */
.recipe-subnav__btn[aria-pressed="true"] .recipe-subnav__count {
  background-color: color-mix(in srgb, var(--color-on-primary) 20%, transparent);
  color: var(--color-on-primary);
}

/* ── 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
   ============================================================ */

.recipe-hero {
  /* Full-bleed: escape the centered max-width container so the image spans
     the full viewport width. overflow-x: clip on body prevents the horizontal
     scroll this would otherwise introduce. */
  display: block;
  width: 100vw;
  /* 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. */
  height: auto;
  margin-left: calc(50% - 50vw);
  /* The breadcrumb above the hero sits within main's top padding — no pull-up needed */
  margin-top: 0;
  max-width: 100vw;
  /* 16:7 ratio gives a wide, cinematic food photography feel */
  aspect-ratio: 16 / 7;
  min-height: 18rem;
  object-fit: cover;
  object-position: center;
}

.recipe-header {
  margin-block: var(--space-xl) var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.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);
  border-bottom: 1px solid var(--color-border);
}

.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 {
  /* Full-bleed — same escape technique as .recipe-hero.
     overflow-x: clip on body prevents the horizontal scroll. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Pull up to remove main's top padding so the carousel sits flush */
  margin-top: calc(-1 * var(--space-xl));
  margin-bottom: var(--space-2xl);
}

/* Positioning context for the overlaid buttons and dots */
.hero-carousel__img-area {
  position: relative;
}

/* 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;
}

.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: 14rem;
  object-fit: cover;
  object-position: center;
}

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

.hero-carousel__btn {
  position: absolute;
  /* Vertically center in the image area: image aspect = 16:7, so image height
     = width × (7/16) = 43.75% of parent width. Buttons sit at that midpoint. */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;

  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: 1;
}

.hero-carousel__dot {
  width: 0.625rem;    /* 10px */
  height: 0.625rem;
  padding: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--palette-linen);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), transform var(--transition-base);
  /* A11Y: minimum touch target via negative margin trick */
  margin: 0.375rem;
}

.hero-carousel__dot.is-active {
  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 (below image) ────────────────────────────────────── */

.hero-carousel__body {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md);
  /* Reserve minimum height to prevent layout shift as descriptions vary in length */
  min-height: 11rem;
}

@media (min-width: 768px) {
  .hero-carousel__body {
    padding: var(--space-xl) var(--space-xl);
    min-height: 9rem;
  }
}

.hero-carousel__category {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  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 {
  color: var(--color-text);
  text-decoration: none;
}

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

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

.hero-carousel__desc {
  color: var(--color-text-muted);
  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;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.hero-carousel__cta:hover {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

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

/* ── 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: single column on mobile, two columns on desktop */
.home-menu-list {
  display: grid;
  gap: var(--space-md);
}

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

.home-menu-card {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  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;
}

/* ============================================================
   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;
  }
}