/*
Theme Name: 2026
Theme URI: https://lifesambrosia.com
Description: Modern, full-width recipe blog theme for Life's Ambrosia. Clean card grid layout, sticky nav, and two-column recipe pages.
Version: 1.1.0
Author: Life's Ambrosia
Author URI: https://lifesambrosia.com
Tags: food-and-drink, blog, two-columns, custom-colors, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments
Text Domain: lifesambrosia-2026
*/

/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  Variables & Reset
   2.  Typography
   3.  Utilities
   4.  Header / Navigation
   5.  Hero Banner
   6.  Category Strip
   7.  Recipe Card (shared)
   8.  Section Layouts
   9.  Featured Recipe Callout
   10. Newsletter
   11. Footer
   12. Single Post (Recipe Page)
   13. Recipe Summary Sidebar
   14. Archive / Index / Search
   15. Page
   16. Comments
   17. 404
   18. WordPress Core Overrides
═══════════════════════════════════════════════════════════════ */

/* ── 1. Variables & Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink:       #CF2378;
  --pink-dark:  #a81c60;
  --pink-light: #fdf0f6;
  --text:       #1a1a1a;
  --muted:      #6b7280;
  --light:      #fafaf8;
  --white:      #ffffff;
  --border:     #e5e7eb;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --max-w:      1200px;
  --content-w:  780px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--light);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ── 2. Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.font-brand { font-family: 'Gloria Hallelujah', cursive; }

/* ── 3. Utilities ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section-pad { padding: 64px 24px; }

.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  position: relative;
  margin-bottom: 0;
}

.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--pink);
  border-radius: 2px;
  margin-top: 8px;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}

.view-all-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding-top: 4px;
  transition: gap .2s;
}

.view-all-link:hover { gap: 8px; }

.btn-pink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 99px;
  border: none;
  transition: background .2s, transform .15s, box-shadow .2s;
}

.btn-pink:hover {
  background: var(--pink-dark);
  transform: translateY(-1px);
  color: var(--white);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  transition: all .2s;
  cursor: pointer;
}

.btn-outline:hover {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}

/* Save / heart button variant */
.btn-save-recipe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s;
}

.btn-save-recipe:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--pink-light);
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 4. Header / Navigation ───────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo img {
  height: 38px;
  width: auto;
}

/* Fallback text logo if no image */
.site-logo .logo-text {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 18px;
  color: var(--pink);
  line-height: 1.2;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.main-nav ul {
  display: flex;
  align-items: left;
  gap: 2px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding: 6px 14px;
  border-radius: 6px;
  transition: color .2s, background .2s;
  white-space: nowrap;
  display: block;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
  color: var(--pink);
  background: var(--pink-light);
}

.main-nav .menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: .6;
}

/* Dropdown */
.main-nav .menu-item-has-children {
  position: relative;
}

.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 8px;
  padding-top: 16px; /* visual gap lives inside the element so hover stays active */
  flex-direction: column;
  gap: 2px;
  z-index: 101;
}

.main-nav .menu-item-has-children:hover .sub-menu {
  display: flex;
}

.main-nav .sub-menu li a {
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
}

/* ── Category mega-dropdown (grouped columns) ──────────────── */
.main-nav .cat-dropdown {
  /* Full-width panel pinned below the sticky header */
  position: fixed;
  top: 71px; /* 70px header + 1px border (no admin bar) */
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  border-radius: 0;
  min-width: 0;
  /* Center columns to site max-width */
  padding: 20px max(24px, calc((100% - var(--max-w)) / 2)) 16px;
  box-sizing: border-box;
  display: none;
  z-index: 99;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* When admin bar is visible (logged-in users), header sits 32px lower */
body.admin-bar .main-nav .cat-dropdown {
  top: 103px; /* 32px admin-bar + 70px header + 1px border */
}

.main-nav .menu-item-has-children.dropdown-open .cat-dropdown {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* Inner wrapper removed — flex lives directly on .cat-dropdown */

/* Columns fill available space equally */
.cat-group {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 280px;
  box-sizing: border-box;
  padding: 0 16px 8px;
  border-right: 1px solid var(--border);
  list-style: none;
}
.cat-group:last-child { border-right: none; }

/* Group header — uppercase label linking to the parent category page */
.cat-group-header {
  padding: 0 0 10px 0;
  margin-bottom: 2px;
}
.cat-group-header a,
.cat-group-header .cat-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.cat-group-header a:hover { color: var(--pink); background: none !important; }

/* Items inside a group */
.cat-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* All links in the dropdown — emoji + text, left-aligned */
.main-nav .cat-dropdown li a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: color .15s, background .15s;
}

.main-nav .cat-dropdown li a:hover {
  color: var(--pink);
  background: var(--pink-light);
}

.cat-icon {
  font-size: 15px;
  line-height: 1.4; /* align with first line of text */
  flex-shrink: 0;
}

/* Keep the dropdown on-screen — clamp to right edge near viewport boundary */
@media (min-width: 1025px) {
  .main-nav .cat-dropdown {
    left: 0;
    transform: none;
  }
  /* Remove the old right-edge correction — not needed with fixed positioning */
  .main-nav .menu-item-has-children:last-child .cat-dropdown,
  .main-nav .menu-item-has-children:nth-last-child(-n+2) .cat-dropdown {
    left: 0;
    right: auto;
    transform: none;
  }
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Search form in header — inline slide-out (right → left) */
.header-search {
  display: flex;
  align-items: center;
  flex-direction: row-reverse; /* toggle button on right, form expands leftward */
}

.header-search-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}

.header-search-toggle:hover {
  background: var(--pink-light);
  border-color: var(--pink);
}

.header-search-toggle svg {
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  transition: stroke .2s;
}

.header-search-toggle:hover svg { stroke: var(--pink); }

/* Swap magnifier → × when open */
.header-search-toggle[aria-expanded="true"] .icon-search { display: none; }
.header-search-toggle .icon-close                        { display: none; }
.header-search-toggle[aria-expanded="true"] .icon-close  { display: block; }

/* Outer wrapper: clips overflow and drives the width animation */
.header-search-form {
  overflow: hidden;
  width: 0;
  min-width: 0; /* override flex's min-width:auto so the item can be truly 0px wide */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* right-align so the input's right edge reveals first */
  opacity: 0;
  pointer-events: none;
  transition: width .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  /* Reset old dropdown styles */
  position: static;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.header-search-form.is-open {
  width: 276px;
  opacity: 1;
  pointer-events: auto;
}

/* WP html5 search form: <label> wraps the <input>, so never hide the label itself */
.header-search-form label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* The "Search for:" text inside the label — visually hidden, keep accessible */
.header-search-form .screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inner <form>: fixed width so it fills the animated wrapper */
.header-search-form form {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 8px;
  box-sizing: border-box;
}

.header-search-form input[type="search"],
.header-search-form input[type="text"] {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  outline: none;
  font-family: inherit;
  background: var(--bg, #fafafa);
  transition: border-color .2s;
  box-sizing: border-box;
}

.header-search-form input[type="search"]:focus,
.header-search-form input[type="text"]:focus { border-color: var(--pink); }

/* Hide WP submit button only — NOT the label (input lives inside it) */
.header-search-form input[type="submit"],
.header-search-form button[type="submit"] {
  display: none;
}


/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  margin-left: auto;
}

.mobile-menu-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  display: block;
  transition: all .2s;
}

/* Admin bar compensation */
.admin-bar .site-header { top: 32px; }

/* ── 5. Hero Banner ───────────────────────────────────────────── */
.hero {
  position: relative;
  height: clamp(420px, 55vw, 580px);
  overflow: hidden;
  background: #1a1a1a;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.10) 55%,
    rgba(0,0,0,0) 100%
  );
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.hero-eyebrow {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  letter-spacing: .05em;
  margin-bottom: 16px;
}

.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  max-width: 520px;
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,.8);
  max-width: 360px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pink);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 99px;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(207,35,120,.4);
}

.hero-cta:hover {
  background: var(--pink-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(207,35,120,.5);
  color: var(--white);
}

/* ── 6. Category Strip ────────────────────────────────────────── */
.category-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.category-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

.category-strip-inner::-webkit-scrollbar { display: none; }

.cat-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: var(--white);
  transition: all .2s;
  white-space: nowrap;
}

.cat-pill:hover,
.cat-pill.current-cat {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--pink-light);
}

.cat-pill .cat-emoji { font-size: 15px; line-height: 1; }

/* ── Browse by Category section (wrapping pill grid) ────────── */
.cat-browse-section {
  background: var(--bg, #fafafa);
  border-top: 1px solid var(--border);
  padding: 52px 0 56px;
}

.cat-browse-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.cat-browse-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 28px;
}

.cat-browse-grid {
  display: flex;
  flex-wrap: wrap;       /* wrap onto multiple rows — no scrolling */
  gap: 10px;
  justify-content: center;
}

/* Pills in the browse grid can wrap so don't force flex-shrink:0 */
.cat-browse-grid .cat-pill {
  flex-shrink: 1;
}

/* ── 7. Recipe Card (shared) ──────────────────────────────────── */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.recipe-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.recipe-card a.card-link {
  display: block;
  color: inherit;
}

.card-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--border);
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.recipe-card:hover .card-thumb img { transform: scale(1.05); }

.card-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 10px;
  border-radius: 99px;
}

.card-time-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.6);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

.card-body {
  padding: 20px 22px 22px;
}

.card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--text);
  transition: color .2s;
}

.recipe-card:hover .card-title { color: var(--pink); }

.card-excerpt {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

.card-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.card-stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
.card-rating { font-size: 12px; color: var(--muted); }

/* ── 8. Section Layouts ───────────────────────────────────────── */
.home-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px;
}

.bg-white { background: var(--white); }
.bg-light  { background: var(--light); }

/* ── 9. Featured Recipe Callout ───────────────────────────────── */
.featured-wrap {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.featured-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.featured-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-lg);
}

.featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--pink);
  color: var(--white);
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 99px;
}

.featured-eyebrow {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 12px;
  color: var(--pink);
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.featured-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.featured-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.featured-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;
}

.f-stat { text-align: center; }

.f-stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pink);
}

.f-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 2px;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 99px;
  transition: background .2s, transform .15s;
}

.btn-dark:hover {
  background: var(--pink);
  transform: translateY(-1px);
  color: var(--white);
}

/* ── 10. Newsletter ───────────────────────────────────────────── */
.newsletter-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1a23 100%);
  padding: 72px 24px;
  text-align: center;
}

.newsletter-inner {
  max-width: 520px;
  margin: 0 auto;
}

.newsletter-eyebrow {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 12px;
  color: var(--pink);
  letter-spacing: .05em;
  margin-bottom: 16px;
}

.newsletter-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 12px;
}

.newsletter-sub {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin-bottom: 32px;
}

.email-form {
  display: flex;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

.email-form input[type="email"] {
  flex: 1;
  padding: 15px 22px;
  font-size: 14px;
  font-family: inherit;
  border: none;
  outline: none;
  background: var(--white);
  color: var(--text);
  min-width: 0;
}

.email-form button[type="submit"] {
  background: var(--pink);
  color: var(--white);
  border: none;
  padding: 15px 24px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.email-form button[type="submit"]:hover { background: var(--pink-dark); }

.newsletter-note {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  margin-top: 14px;
}

/* ── 11. Footer ───────────────────────────────────────────────── */
.site-footer {
  background: #111;
  color: rgba(255,255,255,.65);
}

.footer-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}

.footer-brand img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .7;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.45);
  max-width: 240px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  transition: all .2s;
}

.footer-social a:hover {
  border-color: var(--pink);
  background: var(--pink);
  color: var(--white);
}

.footer-col h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: .02em;
}

.footer-col ul { display: flex; flex-direction: column; gap: 10px; }

.footer-col a {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  transition: color .2s;
}

.footer-col a:hover { color: var(--pink); }

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.28);
  flex-wrap: wrap;
}

/* ── 12. Single Post (Recipe Page) ───────────────────────────── */
.recipe-page-hero {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 48px 24px 0;
}

.recipe-page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.recipe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pink);
  margin-bottom: 14px;
}

.recipe-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--pink);
  border-radius: 2px;
}

.recipe-page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  max-width: 800px;
  margin-bottom: 20px;
}

.recipe-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.rating-stars { color: #f59e0b; font-size: 16px; letter-spacing: 1px; }
.rating-score { font-size: 15px; font-weight: 700; }
.rating-count { font-size: 13px; color: var(--muted); }

.recipe-author-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}

.recipe-author-row .sep {
  width: 4px;
  height: 4px;
  background: var(--border);
  border-radius: 50%;
  display: inline-block;
}

.recipe-author-row a { color: var(--pink); font-weight: 600; }
.recipe-author-row strong { color: var(--text); font-weight: 600; }

.recipe-intro {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.75;
  max-width: 700px;
  margin-bottom: 28px;
  font-style: italic;
}

.recipe-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}

.btn-jump-recipe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--pink);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 99px;
  border: none;
  transition: background .2s, transform .15s;
}

.btn-jump-recipe:hover {
  background: var(--pink-dark);
  transform: translateY(-1px);
  color: var(--white);
}

.recipe-hero-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: block;
}

/* Breadcrumb */
.breadcrumb-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.breadcrumb-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.breadcrumb-inner a { color: var(--muted); transition: color .2s; }
.breadcrumb-inner a:hover { color: var(--pink); }
.breadcrumb-inner .sep { opacity: .4; }
.breadcrumb-inner .current { color: var(--text); font-weight: 500; }

/* Two-column recipe body */
.recipe-body-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

/* Narrative / post content */
.post-content h1,
.post-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  margin: 36px 0 14px;
  color: var(--text);
}

.post-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 12px;
}

.post-content h1:first-child,
.post-content h2:first-child { margin-top: 0; }

.post-content p {
  font-size: 16px;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 18px;
}

.post-content ul,
.post-content ol {
  margin: 0 0 18px 24px;
  list-style: disc;
}

.post-content ol { list-style: decimal; }

.post-content li {
  font-size: 15px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 6px;
}

.post-content img {
  border-radius: var(--radius-md);
  margin: 24px 0;
}

.post-content a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content blockquote {
  border-left: 4px solid var(--pink);
  padding: 16px 20px;
  margin: 24px 0;
  background: var(--pink-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: #4b2a3a;
}

/* Recipe card within post content (fallback if shortcode not stripped) */
.post-content .wprm-recipe-container,
.post-content .ambrosia-recipe-card {
  margin: 32px 0;
}

/* ── 13. Recipe Summary Sidebar ───────────────────────────────── */
.recipe-sidebar {
  position: sticky;
  top: 90px;
}

/* ── Recipe scroll hint (shown when card extends below fold) ─── */
.recipe-scroll-hint {
  position: fixed;
  bottom: 90px;
  /* left/width set by JS to match the sidebar column */
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 50;
}

.recipe-scroll-hint.is-visible {
  opacity: 1;
}

.recipe-scroll-hint svg {
  width: 28px;
  height: 28px;
  color: var(--pink);
  animation: hint-bounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(207,35,120,.3));
}

@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

@media print {
  .recipe-scroll-hint,
  .recipe-sidebar .sidebar-related,
  .rsc-top-bar,
  .rsc-btn-print { display: none !important; }
}
@media (max-width: 1024px) { .recipe-scroll-hint { display: none !important; } }

.recipe-summary-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 24px;
}

.rsc-top-bar {
  height: 5px;
  background: linear-gradient(to right, var(--pink), #f472b6);
}

.rsc-header {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
}

.rsc-recipe-title {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 16px;
  color: var(--text);
}

.rsc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: center;
}

.rsc-stat {
  padding: 12px 6px;
  border-right: 1px solid var(--border);
}

.rsc-stat:last-child { border-right: none; }

.rsc-stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--pink);
}

.rsc-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 2px;
}

.rsc-body {
  padding: 18px 22px;
}

.rsc-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.rsc-actions {
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
}

.rsc-btn-print,
.rsc-btn-save {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: all .2s;
  cursor: pointer;
}

.rsc-btn-print {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
}

.rsc-btn-print:hover { border-color: var(--text); color: var(--text); }

.rsc-btn-save {
  background: var(--pink);
  border: none;
  color: var(--white);
}

.rsc-btn-save:hover { background: var(--pink-dark); }

/* WPRM recipe card styling is handled by the "2026" custom template.
   See: WP Recipe Maker → Templates → 2026 (CSS field). */

/* Related in sidebar */
.sidebar-related { margin-top: 24px; }

.sidebar-related h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pink);
  display: inline-block;
}

.sidebar-related-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-related-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sidebar-related-thumb {
  width: 68px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-related-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  transition: color .2s;
}

.sidebar-related-item:hover .sidebar-related-title { color: var(--pink); }

.sidebar-related-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── 14. Archive / Index / Search ─────────────────────────────── */
.archive-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.archive-header {
  grid-column: 1 / -1;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.archive-header p {
  padding: 10px 0 20px;
}
.archive-header h2 {
  font-size: 24px;
}

/* Full-width layout variant — no sidebar column */
.archive-wrap--full {
  grid-template-columns: 1fr;
}

/* Category filter strip on the /recipes all-recipes page */
.cat-filter-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.cat-filter-strip .cat-pill {
  flex-shrink: 1;
}

.no-results {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 15px;
  padding: 32px 0;
}

.archive-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 700;
  margin-bottom: 6px;
}

.archive-description {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 600px;
}

.archive-sidebar {
  position: sticky;
  top: 90px;
}

.widget {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.widget-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pink);
  display: inline-block;
}

.widget ul { display: flex; flex-direction: column; gap: 8px; }

.widget ul li a {
  font-size: 14px;
  color: var(--muted);
  transition: color .2s;
  display: flex;
  justify-content: space-between;
}

.widget ul li a:hover { color: var(--pink); }

/* Pagination */
.pagination-wrap {
  margin-top: 56px;
  padding-bottom: 8px;
  display: flex;
  justify-content: center;
}

/* List reset — paginate_links( 'type' => 'list' ) outputs a <ul class="page-numbers"> */
ul.page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

ul.page-numbers li {
  display: contents; /* let the inner <a>/<span> participate directly in the flex row */
}

/* Number / prev / next pills */
.page-numbers a,
.page-numbers span {
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #c06;
  background: #fce4ee;
  border: none;
  transition: background .18s, color .18s;
  white-space: nowrap;
  text-decoration: none;
}

.page-numbers a:hover {
  background: #f8b8d0;
  color: #900;
}

.page-numbers .current {
  background: #c06;
  color: #fff;
}

/* Prev / next labels get slightly more padding */
.page-numbers .prev,
.page-numbers .next {
  padding: 0 20px;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Ellipsis — no pill background */
.page-numbers .dots {
  background: transparent;
  color: #999;
  font-weight: 400;
  padding: 0 4px;
  min-width: auto;
}

/* ── 15. Page ─────────────────────────────────────────────────── */
.page-wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

/* ── 16. Comments ─────────────────────────────────────────────── */
.comments-area {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.comments-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 32px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.comments-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--pink);
  border-radius: 2px;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-list .comment {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.comment-list .comment:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.comment-body {
  display: flex;
  gap: 14px;
}

.comment-body .avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
}

.comment-content-wrap { flex: 1; min-width: 0; }

.comment-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-author { font-weight: 600; font-size: 14px; }
.comment-date { font-size: 12px; color: var(--muted); }

.comment-text {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
}

.comment-text p { margin: 0 0 8px; }
.comment-text p:last-child { margin-bottom: 0; }

.comment-reply { margin-top: 8px; }

.comment-reply-link {
  font-size: 12px;
  color: var(--pink);
  font-weight: 600;
  margin-top: 8px;
  display: inline-block;
}

#respond {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-top: 32px;
}

#reply-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--light);
  transition: border-color .2s;
  margin-bottom: 16px;
}

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--pink); }

.comment-form textarea { height: 110px; resize: vertical; }

.comment-form .form-submit input {
  background: var(--pink);
  color: var(--white);
  border: none;
  padding: 11px 26px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  width: auto;
}

.comment-form .form-submit input:hover { background: var(--pink-dark); }

/* ── 17. 404 ──────────────────────────────────────────────────── */
.error-404-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 100px 24px;
  text-align: center;
}

.error-404-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 120px;
  font-weight: 700;
  color: var(--border);
  line-height: 1;
  margin-bottom: 16px;
}

.error-404-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.error-404-sub {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 32px;
}

/* ── 18. WordPress Core Overrides ─────────────────────────────── */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; }

.alignleft  { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto; }
.alignwide  { max-width: calc(var(--content-w) + 200px); margin-left: auto; margin-right: auto; }
.alignfull  { max-width: 100%; }

/* Gallery */
.wp-block-gallery { margin: 24px 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-inner { grid-template-columns: 1fr; gap: 32px; }
  .featured-img-wrap { aspect-ratio: 16/9; }
  .recipe-body-wrap { grid-template-columns: 1fr; }
  .recipe-sidebar { position: static; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .archive-wrap { grid-template-columns: 1fr; }
  .archive-sidebar { display: none; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }

}

/* Mobile inline recipe card: hidden on desktop, shown on mobile directly
   under post text (before author bio / comments). */
.recipe-card-mobile-inline { display: none; }

/* Desktop: hide the mobile inline card and the shortcode card that may still
   be in the post body; the sidebar version is the canonical display. */
@media (min-width: 1025px) {
  .recipe-card-mobile-inline { display: none !important; }
  .post-content .ambrosia-recipe-card,
  .post-content .ambrosia-jump-link { display: none !important; }
}

/* Mobile: show the inline card, hide the sidebar. */
@media (max-width: 1024px) {
  .recipe-card-mobile-inline { display: block; margin-top: 32px; }
  .recipe-sidebar { display: none !important; }
}

/* Recipe prose wrapper — used by [recipe-content]...[/recipe-content] shortcode.
   Always hidden: on desktop the sidebar card is shown; on mobile the sidebar
   collapses below the content and shows the same card there. */
.recipe-inline-content { display: none !important; }

@media (max-width: 768px) {
  /* Constrain search slide-out so it doesn't crowd the logo */
  .header-search-form.is-open { width: 200px; }
  .header-search-form form    { width: 192px; }

  .main-nav { display: none; }
  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-lg);
    z-index: 99;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .main-nav.is-open ul { flex-direction: column; width: 100%; }
  .main-nav.is-open a { padding: 10px 0; }
  .mobile-menu-toggle { display: flex; }

  /* ── Mobile accordion: parent nav item shows a chevron ───── */
  .main-nav.is-open .menu-item-has-children > a::after {
    content: ' ▾';
    display: inline-block;
    font-size: 11px;
    opacity: .6;
    transition: transform .2s;
    transform-origin: center 55%;
  }
  .main-nav.is-open .menu-item-has-children.mobile-expanded > a::after {
    transform: rotate(-180deg);
  }

  /* ── Mobile: category dropdown becomes an inline vertical list ── */

  /* Kill the hover/JS trigger on mobile */
  .main-nav.is-open .menu-item-has-children:hover .cat-dropdown,
  .main-nav.is-open .menu-item-has-children.dropdown-open .cat-dropdown,
  .main-nav.is-open .menu-item-has-children:hover .sub-menu {
    display: none !important;
  }

  /* Hidden by default; shown when parent has mobile-expanded */
  .main-nav.is-open .sub-menu,
  .main-nav.is-open .cat-dropdown {
    display: none !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid var(--border) !important;
    border-radius: 0 !important;
    transform: none !important;
    background: transparent !important;
    width: 100% !important;
    padding: 4px 0 8px 16px !important;
    margin-top: 0 !important;
  }
  .main-nav.is-open .menu-item-has-children.mobile-expanded > .sub-menu,
  .main-nav.is-open .menu-item-has-children.mobile-expanded > .cat-dropdown {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Flatten the group columns into a single vertical stack */
  .main-nav.is-open .cat-dropdown .cat-group {
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    min-width: 0 !important;
    margin-bottom: 4px;
  }
  .main-nav.is-open .cat-dropdown .cat-group:last-child {
    border-bottom: none !important;
    margin-bottom: 0;
  }

  /* Group header: slightly smaller, muted label */
  .main-nav.is-open .cat-group-header {
    padding: 8px 0 4px !important;
    margin-bottom: 0 !important;
  }
  .main-nav.is-open .cat-group-header a,
  .main-nav.is-open .cat-group-header .cat-group-label {
    font-size: 10px !important;
    color: var(--muted) !important;
  }

  /* Category item links */
  .main-nav.is-open .cat-dropdown li a {
    padding: 6px 8px !important;
    font-size: 14px !important;
  }

  .recipe-grid { grid-template-columns: 1fr; }
  .featured-stats { gap: 16px; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; }
  .recipe-actions { flex-direction: column; align-items: flex-start; }
  .related-grid { grid-template-columns: 1fr; }
  .header-inner { position: relative; }
}

@media (max-width: 480px) {
  .hero { height: 380px; }
  .hero-title { font-size: 28px; }
  .rsc-stats { grid-template-columns: repeat(2, 1fr); }
  .rsc-stat:nth-child(2) { border-right: none; }
  .rsc-stat:nth-child(1),
  .rsc-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}