/* Shared finishing layer for the homepage and generated recipe pages. */
:root {
  --primary: #a92432;
  --primary-dark: #801b26;
  --bg: #fffaf3;
  --surface-2: #f8efe4;
  --text: #25231f;
  --muted: #625c55;
  --border: #e7dac9;
  --shadow: 0 16px 42px rgba(55, 30, 18, .09);
}

body.dark {
  --bg: #171916;
  --surface: #242721;
  --surface-2: #30342b;
  --text: #f7f1e7;
  --muted: #cfc8bc;
  --border: #46483e;
  --primary: #f2a098;
  --primary-dark: #e8847b;
}

.brand-mark { width: 42px; height: 42px; border-radius: 11px; flex: none; }
.mobile-logo { display: flex; align-items: center; gap: 10px; }
.mobile-logo img { border-radius: 10px; }
.header { backdrop-filter: blur(12px); }
.desktop-nav { gap: clamp(12px, 1.6vw, 26px); }
.dropdown-menu { max-height: min(70vh, 520px); overflow-y: auto; }
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; }

.hero { min-height: min(720px, 92svh); }
.hero-content { max-width: 780px; padding-block: 90px 70px; }
.hero-small { letter-spacing: .14em; }
.hero h1 { max-width: 800px; font-size: clamp(3.1rem, 6.7vw, 5.7rem); line-height: 1.05; text-wrap: balance; }
.hero p { font-size: clamp(1rem, 1.7vw, 1.17rem); line-height: 1.7; }
.hero-stats { gap: clamp(20px, 5vw, 60px); margin-top: 46px; }
.btn { border-radius: 11px; }
.dark .btn-primary, .dark .print-recipe { background: #912330; color: #fff; }
.section-heading { max-width: 740px; }
.section-heading p { line-height: 1.7; }
.section-heading a, .category-directory a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; font-weight: 700; }

.featured { background: var(--bg); padding-block: clamp(64px, 8vw, 108px); }
.featured-heading { margin-bottom: 30px; }
.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.featured-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.featured-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(55, 30, 18, .16); }
.featured-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.featured-card-content { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px; line-height: 1.5; }
.featured-card-content strong { font: 700 clamp(1.4rem, 2vw, 1.8rem)/1.2 Georgia, serif; color: var(--text); }
.featured-card-content > span:nth-of-type(2) { color: var(--muted); }
.featured-kicker { color: var(--primary); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.featured-arrow { color: var(--primary); font-weight: 800; margin-top: auto; padding-top: 8px; }
.category-directory { margin-top: 26px; text-align: center; }
.category-box { border: 1px solid var(--border); border-radius: 17px; min-height: 170px; }
.recipe-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.recipe-card .recipe-image img { aspect-ratio: 4 / 3; object-fit: cover; }
.filter-buttons { gap: 8px; }
.filter-btn, .saved-filter, .surprise-recipe { min-height: 44px; }
.region-card { border-radius: 18px; overflow: hidden; }
.footer { border-top: 1px solid rgba(255,255,255,.12); }

/* Jekyll category and individual recipe pages share the same brand treatment. */
.seo-site-header, .cat-site-header { background: var(--surface) !important; border-color: var(--border) !important; }
.seo-site-nav, .cat-site-nav { max-width: 1180px !important; gap: 24px !important; }
.seo-site-brand, .cat-site-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--primary) !important; font-size: 1.15rem !important; white-space: nowrap; }
.seo-site-brand img, .cat-site-brand img { width: 38px; height: 38px; border-radius: 9px; }
.seo-site-links a, .cat-site-links a { color: var(--text) !important; }
.seo-site-links a:hover, .cat-site-links a:hover { color: var(--primary) !important; }
.seo-recipe, .cat { max-width: 1100px !important; margin-inline: auto; }
.seo-recipe { max-width: 850px !important; }
.seo-recipe h1, .cat h1 { font-family: Georgia, serif; line-height: 1.12; text-wrap: balance; }
.seo-recipe h2, .cat h2 { font-family: Georgia, serif; line-height: 1.25; }
.seo-recipe img { border-radius: 20px !important; }
.seo-desc { color: var(--muted); }
.seo-meta { padding: 16px 0; border-block: 1px solid var(--border); align-items: center; }
.seo-meta a, .seo-breadcrumb a, .cat nav a { color: var(--primary); }
.seo-recipe article > ul, .seo-recipe article > ol { padding-left: 1.5rem; }
.seo-recipe article > li { line-height: 1.7; }
.related-recipes a, .popular-recipes a, .cat .card, .cat-guide, .recipe-note { background: var(--surface) !important; border: 1px solid var(--border); color: var(--text) !important; border-radius: 14px !important; }
.related-recipes a:hover, .popular-recipes a:hover, .cat .card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.cat .grid { gap: 16px !important; }
.cat .card { padding: 20px !important; }
.cat .card strong { color: var(--primary); }
.category-nav a { background: var(--surface) !important; border: 1px solid var(--border); }
.seo-site-footer, .cat-site-footer { background: #27231f !important; }
.hub-site-header { background: var(--surface) !important; border-color: var(--border) !important; }
.hub-site-nav { max-width: 1180px !important; }
.hub-site-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--primary) !important; font-size: 1.15rem !important; }
.hub-site-brand img { width: 38px; height: 38px; border-radius: 9px; }
.hub-site-links a { color: var(--text) !important; }
.hub-site-links a:hover { color: var(--primary) !important; }
.hub { margin-inline: auto; }
.hub h1, .hub h2 { font-family: Georgia, serif; line-height: 1.15; text-wrap: balance; }
.hub-hero { padding: clamp(20px, 4vw, 36px); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.hub-hero img { border-radius: 16px; }
.hub-card { border: 1px solid var(--border); background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow); }
.hub-card strong { color: var(--primary); }
.hub-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.hub-categories a, .popular-links a { background: var(--surface) !important; color: var(--primary) !important; border: 1px solid var(--border); }
.hub-categories a:hover, .popular-links a:hover { border-color: var(--primary); }
.hub-site-footer { background: #27231f !important; }
.print-recipe { appearance: none; background: var(--primary); color: #fff; border: 0; border-radius: 9px; padding: 10px 16px; min-height: 44px; font: inherit; font-weight: 700; cursor: pointer; }
.print-recipe:hover { background: var(--primary-dark); }

@media (max-width: 800px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-card:last-child { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
  .featured-card:last-child img { height: 100%; }
}
@media (max-width: 620px) {
  .hero { min-height: 0; padding-top: 76px; }
  .hero-content { padding-block: 88px 64px; }
  .hero h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .hero-stats { gap: 20px; margin-top: 40px; }
  .hero-stats div { min-width: 0; }
  .hero-stats span { font-size: .75rem; }
  .featured-grid { grid-template-columns: 1fr; gap: 17px; }
  .featured-card:last-child { grid-column: auto; display: flex; }
  .featured-card:last-child img { height: auto; }
  .featured-card-content { padding: 20px; }
  .seo-recipe, .cat { padding-inline: 18px !important; }
  .seo-site-nav, .cat-site-nav { padding: 12px 18px !important; }
  .seo-site-links, .cat-site-links { gap: 6px 14px !important; }
  .seo-site-links a, .cat-site-links a { min-height: 36px; display: inline-flex; align-items: center; }
}
@media print {
  .seo-site-header, .cat-site-header, .seo-site-footer, .cat-site-footer, .print-recipe, .popular-recipes, .related-recipes { display: none !important; }
  .seo-recipe { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .seo-recipe figure img { max-height: 240px; object-fit: contain; }
  body { color: #000; background: #fff; }
}