/* ============================================================
   theme.css
   Merged from: 01-home.html, 02-single-recipe.html
   Scaffold:    theme.css
   ============================================================ */

/* ============================================================
   Trudy's Treats — theme.css
   Palette: white page, burgundy panels with white text. No cream, no pink.
   Fonts: Fraunces (headings) / Inter (body)
   ============================================================ */

:root{
  /* Layout */
  --max:1180px;
  --radius:14px;
  --radius-sm:10px;
  --space:clamp(48px,5vw,80px);
  --header-h:74px;

  /* Type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Fraunces',Georgia,'Times New Roman',serif;

  /* Surfaces */
  --bg:#ffffff;
  --bg-alt:#ffffff;          /* surfaces are white — no cream */
  --hover:#f4f2f2;           /* neutral hover wash, the only tint on the site */
  --bg-dark:#4a2a33;
  --dark-2:#5c3740;
  --dark-line:rgba(255,255,255,.14);
  --dark-line-2:rgba(255,255,255,.26);
  --dark-ink:#fdf8f9;
  --dark-ink-2:#e7d6da;
  --dark-muted:#bfa5ab;

  /* Ink */
  --ink:#222222;
  --ink-soft:#6b615f;
  --line:#e4e2e1;

  /* Brand */
  --brand:#8e4b57;
  --brand-deep:#753c46;
  --on-brand:#ffffff;
  --on-brand-soft:rgba(255,255,255,.88);
  --focus-ring:rgba(142,75,87,.28);

  /* Accent — gold, ratings and favourite badges only */
  --accent:#c08a2e;          /* gold stars on white */
  --accent-light:#e8c46a;    /* gold stars on burgundy */

  /* Status */
  --ok:#0b8a4a;   --ok-bg:#e6f6ee;
  --warn:#b4231f; --warn-bg:#fdeceb;

  /* Shadow */
  --shadow:0 1px 2px rgba(74,42,51,.05),0 8px 24px rgba(74,42,51,.07);
  --shadow-lg:0 12px 40px rgba(74,42,51,.14);
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{margin:0;font-family:var(--font);font-size:17px;color:var(--ink);background:var(--bg);
     line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
input,select,textarea{font-family:inherit;font-size:16px}
svg{display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(32px,5vw,52px)}
h2{font-size:clamp(26px,3.5vw,38px)}
h3{font-size:22px;font-weight:600}
section{padding:var(--space) 0}

/* Two sections on the same surface share one gap rather than stacking two.
   A .band section (cream/dark fill) always keeps its own padding. */
section+section{padding-top:0}
section.band+section,section+section.band{padding-top:var(--space)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.lead{font-size:19px;color:var(--ink-soft)}

.eyebrow{display:inline-block;font-family:var(--font);font-size:12px;font-weight:700;
         letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.i{width:18px;height:18px;display:block;flex:none}

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

.skip-link{position:absolute;left:-9999px;top:0;padding:12px 18px;
           background:var(--bg-dark);color:var(--dark-ink);z-index:99999}
.skip-link:focus{left:8px;top:8px}
.is-hidden{display:none}

/* Spam honeypot — must never be visible to a human. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---------- BUTTONS ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:var(--font);font-weight:700;font-size:15px;
     padding:13px 24px;border-radius:999px;border:1px solid transparent;
     cursor:pointer;transition:.15s;line-height:1.1}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-dark{background:var(--bg-dark);color:#fff}
.btn-dark:hover{background:var(--dark-2)}
.btn-on-brand{background:var(--bg);color:var(--brand)}
.btn-on-brand:hover{background:var(--on-brand-soft)}
.btn-ghost-light{background:transparent;border-color:var(--dark-line-2);color:var(--on-brand)}
.btn-ghost-light:hover{background:var(--dark-line);border-color:var(--on-brand)}
.btn-block{display:flex;width:100%}
.btn svg{width:18px;height:18px;flex:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- SECTION HEADS ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.sec-head p{color:var(--ink-soft);margin-top:8px;max-width:56ch}

.sec-head .more{font-size:15px;font-weight:600;color:var(--brand);white-space:nowrap;
                border-bottom:1px solid var(--line);padding-bottom:2px}
.sec-head .more:hover{border-bottom-color:var(--brand)}

/* ---------- CHIPS / RATING ---------- */

.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;color:var(--on-brand);background:var(--brand);
      padding:6px 11px;border-radius:999px}
.rating{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.stars{display:flex;gap:2px;color:var(--accent)}
.stars svg{width:14px;height:14px;fill:currentColor}
.meta{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink-soft)}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--brand);color:var(--on-brand)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.topbar p{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--on-brand-soft)}
.topbar-links{display:flex;align-items:center;gap:18px}

.topbar-links a{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
                padding:9px 0;color:var(--on-brand)}
.topbar-links a:hover{color:var(--on-brand-soft)}
.topbar-links svg{width:15px;height:15px;fill:currentColor}

/* ---------- HEADER ---------- */

.site-header{position:sticky;top:0;z-index:60;background:var(--bg);
             border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);
      font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.logo .mark{width:34px;height:34px;flex:none;color:var(--brand)}
.logo .mark svg{width:34px;height:34px;fill:currentColor}
.nav-main{margin-left:auto}
.menu{display:flex;align-items:center;gap:4px}

.menu a{display:block;padding:10px 14px;font-size:15px;font-weight:600;color:var(--ink);
        border-radius:var(--radius-sm)}
.menu a:hover{color:var(--brand);background:var(--hover)}
.menu .current-menu-item>a,.menu .current_page_item>a{color:var(--brand)}
.menu>li.menu-cta{display:none}   /* mobile only — beats .menu>li from the dropdown rules */
.nav-right{display:flex;align-items:center;gap:12px}

.navsearch{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
           border-radius:50%;color:var(--ink)}
.navsearch:hover{background:var(--hover);color:var(--brand)}
.navsearch svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}

.navtoggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
           border-radius:var(--radius-sm);color:var(--ink)}
.navtoggle span{display:block;width:22px;height:2px;background:currentColor;position:relative}

.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:22px;
           height:2px;background:currentColor}
.navtoggle span::before{top:-7px}
.navtoggle span::after{top:7px}

/* ---------- HERO — featured recipe ---------- */
.hero{background:var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.hero-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero-media img{width:100%;aspect-ratio:3/2;object-fit:cover}

.hero-badge{position:absolute;top:16px;left:16px;background:var(--brand);color:var(--on-brand);
            font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
            padding:8px 13px;border-radius:999px}
.hero-copy h1{margin-bottom:16px}
.hero-copy .lead{margin-bottom:22px}

.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:26px;
           padding-bottom:22px;border-bottom:1px solid var(--line)}

/* ---------- CATEGORY TILES ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-tile{position:relative;border-radius:var(--radius);overflow:hidden;display:block}
.cat-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s}
.cat-tile:hover img{transform:scale(1.04)}

.cat-tile .cat-label{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
        font-family:var(--font-head);font-size:19px;font-weight:600;color:#fff;
        background:linear-gradient(180deg,rgba(74,42,51,0) 0%,rgba(74,42,51,.82) 72%)}

/* ---------- RECIPE CARDS ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.rcard{display:flex;flex-direction:column}
.rcard-media{border-radius:var(--radius);overflow:hidden;margin-bottom:16px;background:var(--hover)}
.rcard-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s}
.rcard:hover .rcard-media img{transform:scale(1.03)}
.rcard .chip{margin-bottom:10px;align-self:flex-start}
.rcard h3{margin-bottom:8px}
.rcard:hover h3{color:var(--brand)}
.rcard p{font-size:15px;color:var(--ink-soft);margin-bottom:12px}
.rcard .meta,.rcard .rating{margin-top:auto;padding-top:6px}

/* ---------- SIGNUP ---------- */
.signup{background:var(--brand);color:var(--on-brand)}
.signup .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.signup h2{margin-bottom:14px;color:var(--on-brand)}
.signup .eyebrow{color:var(--on-brand-soft)}
.signup>.wrap>.signup-copy p{color:var(--on-brand-soft)}

.signup-card{background:var(--bg);color:var(--ink);border:1px solid var(--line);
             border-radius:var(--radius);padding:28px}
.signup-card .field{margin-bottom:14px}
.signup-card label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}

.signup-card input[type=email],.signup-card input[type=text]{width:100%;padding:13px 15px;
             border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
             color:var(--ink)}
.signup-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring)}
.signup-note{font-size:13px;color:var(--ink-soft);margin-top:12px}

/* ---------- READER FAVOURITES ---------- */

/* ---------- ABOUT STRIP ---------- */

.about-strip .wrap{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center;
        background:var(--brand);color:var(--on-brand);border-radius:var(--radius);padding:40px}
.about-photo{border-radius:var(--radius);overflow:hidden}
.about-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.about-strip .eyebrow{color:var(--on-brand-soft)}
.about-copy h2{margin-bottom:14px;color:var(--on-brand)}
.about-copy p{color:var(--on-brand-soft);margin-bottom:14px}
.about-copy .btn{margin-top:8px}

/* ---------- COLLECTIONS ---------- */
.coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.coll-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
           background:var(--brand);color:var(--on-brand);border-radius:var(--radius-sm);
           padding:16px 18px;font-weight:600;font-size:16px;min-height:56px}
.coll-item:hover{background:var(--brand-deep)}
.coll-item .count{font-size:13px;font-weight:600;color:var(--on-brand-soft)}

/* ---------- AD ZONES — dimensions reserved to stop layout shift ---------- */

.ad-slot{display:flex;align-items:center;justify-content:center;margin:0 auto;
         background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius-sm);
         color:var(--ink-soft);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ad-footer{min-height:280px;max-width:970px}
.ad-leader{min-height:280px;max-width:970px}
.ad-inline{min-height:280px}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg-dark);color:var(--dark-ink-2);padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.foot-brand .logo{color:var(--dark-ink);margin-bottom:14px}
.foot-brand .mark{color:var(--dark-ink)}
.foot-brand p{font-size:15px;color:var(--dark-muted);max-width:34ch}
.social{display:flex;gap:8px;margin-top:18px}

.social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
          border:1px solid var(--dark-line);border-radius:50%;color:var(--dark-ink-2)}
.social a:hover{border-color:var(--dark-line-2);color:var(--dark-ink);background:var(--dark-2)}
.social svg{width:18px;height:18px;fill:currentColor}

.foot-col h2,.foot-col h4{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;
             text-transform:uppercase;color:var(--dark-ink);margin-bottom:8px}
.footer-col a{display:block;padding:12px 0;font-size:15px;color:var(--dark-ink-2)}
.footer-col a:hover{color:var(--dark-ink)}

.foot-bottom{border-top:1px solid var(--dark-line);padding:22px 0 30px;
             display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.foot-bottom p{font-size:13px;color:var(--dark-muted);max-width:70ch}
.disclosure{font-size:13px;line-height:1.6;color:var(--dark-muted);max-width:88ch;margin-bottom:20px}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{padding-top:20px;font-size:13px;color:var(--ink-soft)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumb a{color:var(--brand)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:var(--line)}

/* ---------- POST HEADER ---------- */
.page-hero{padding:22px 0 0}
.narrow{max-width:820px}
.page-hero .chip{margin-bottom:14px}
.page-hero h1{margin-bottom:14px}
.page-hero .lead{margin-bottom:20px}

.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 0;margin-bottom:22px;
        border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none}
.byline-avatar img{width:44px;height:44px;object-fit:cover}
.byline-who{font-size:14px;font-weight:600;line-height:1.4}
.byline-who span{display:block;font-weight:500;color:var(--ink-soft)}
.byline .rating{margin-left:auto}
.post-figure{margin-top:26px}
.post-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.post-figure figcaption{font-size:13px;color:var(--ink-soft);margin-top:10px;text-align:center}

/* ---------- ARTICLE LAYOUT ---------- */

.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;
                align-items:start;padding-top:36px}
.sidebar{position:sticky;top:94px}
/* No sidebar content yet: drop the empty rail and centre the article. */
.article-layout.no-sidebar{grid-template-columns:minmax(0,1fr)}
.article-layout.no-sidebar .prose{max-width:72ch;margin:0 auto}

/* ---------- TABLE OF CONTENTS ---------- */

.toc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
     padding:18px 22px;margin-bottom:30px}
.toc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

.toc-head h2{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;
             text-transform:uppercase;color:var(--ink-soft)}

.toc-toggle{display:none;align-items:center;gap:8px;min-height:44px;
            font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
            color:var(--brand)}
.toc-toggle .ic{font-size:20px;line-height:1}
.toc ol{margin-top:10px}
.toc li{border-top:1px solid var(--line)}
.toc a{display:block;padding:11px 0;font-size:16px;font-weight:600;color:var(--ink)}
.toc a:hover,.toc a.active{color:var(--brand)}

/* ---------- PROSE ----------
   Element selectors are scoped to unclassed elements so components dropped into
   the_content() (callouts, the signup card, the WPRM card) keep their own styling. */
.prose{max-width:72ch;font-size:17px}
.prose>:first-child{margin-top:0}

.prose p:not([class]),.prose ul:not([class]),.prose ol:not([class]),
.prose figure:not([class]){margin:0 0 1.1em}
.prose ul:not([class]){list-style:disc;padding-left:1.2em}
.prose ol:not([class]){list-style:decimal;padding-left:1.3em}
.prose ul:not([class])>li,.prose ol:not([class])>li{margin-bottom:.4em}
.prose h2{font-size:clamp(24px,3vw,30px);margin:1.7em 0 .5em;scroll-margin-top:100px}
.prose h3{font-size:20px;margin:1.4em 0 .4em;scroll-margin-top:100px}
.prose a:not([class]){color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose a:not([class]):hover{color:var(--brand-deep)}
.prose strong{font-weight:600}

.prose blockquote{border-left:3px solid var(--brand);padding-left:18px;margin:1.5em 0;
                  color:var(--ink-soft);font-style:italic}
.prose figure:not([class]) img{width:100%;border-radius:var(--radius)}
.prose figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px;text-align:center}

/* ---------- CALLOUT ---------- */

.callout{background:var(--brand);color:var(--on-brand);border-radius:var(--radius);
         padding:20px 22px;margin:1.7em 0}

.callout h4{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;
            text-transform:uppercase;color:var(--on-brand-soft);margin-bottom:8px}
.callout p{font-size:16px;color:var(--on-brand)}

/* ---------- INLINE SIGNUP ---------- */

.signup-inline{background:var(--brand);color:var(--on-brand);border-radius:var(--radius);
               padding:26px;margin:2em 0}
.signup-inline h3{color:var(--on-brand);margin-bottom:6px}
.signup-inline p{color:var(--on-brand-soft);font-size:15px;margin-bottom:16px}

.signup-inline label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;
                     color:var(--on-brand)}
.signup-inline .field-row{display:flex;gap:10px;align-items:flex-end}
.signup-inline .field{flex:1}

.signup-inline input[type=email],.signup-inline input[type=text]{width:100%;padding:13px 15px;
               border:1px solid transparent;border-radius:var(--radius-sm);
               background:var(--bg);color:var(--ink)}
.signup-inline input:focus{outline:none;box-shadow:0 0 0 3px var(--dark-line-2)}
.signup-inline .btn{white-space:nowrap}

/* ---------- FAQ ---------- */
.faq-list{margin:1.2em 0}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}

.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
       text-align:left;padding:18px 0;font-family:var(--font-head);font-size:19px;
       font-weight:600;line-height:1.35}
.faq-q .ic{font-size:24px;line-height:1;color:var(--brand);flex:none}
.faq-a{display:none;padding-bottom:18px;font-size:16px;color:var(--ink-soft)}
.faq-item.open .faq-a{display:block}

/* ---------- WP RECIPE MAKER CARD ----------
   WPRM's own markup, restyled through the plugin's template editor + this CSS.
   The theme never overrides WPRM's HTML. */

.wprm-recipe-container{background:var(--bg);color:var(--ink);border:2px solid var(--brand);
        border-radius:var(--radius);padding:28px;margin:2.4em 0;scroll-margin-top:100px}
.wprm-recipe-name{font-size:26px;margin-bottom:8px;color:var(--brand)}
.wprm-recipe-rating{margin-bottom:10px}
.wprm-recipe-summary{font-size:15px;color:var(--ink-soft)}
.wprm-recipe-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.wprm-recipe-actions .btn{font-size:14px;padding:11px 18px}

.wprm-recipe-meta-container{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
        margin:24px 0;padding:20px 0;
        border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wprm-recipe-meta{font-size:16px;font-weight:600;color:var(--ink)}

.wprm-recipe-meta span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
        text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.wprm-recipe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:34px}

.wprm-recipe-ingredients-container h3,.wprm-recipe-instructions-container h3,
.wprm-recipe-notes-container h3{font-family:var(--font);font-size:12px;font-weight:700;
        letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}

.wprm-recipe-ingredient-group h4{font-family:var(--font-head);font-size:18px;font-weight:600;
        margin:14px 0 6px;color:var(--ink)}
.wprm-recipe-ingredient-group:first-of-type h4{margin-top:0}

.wprm-recipe-ingredient{display:flex;gap:11px;align-items:flex-start;padding:7px 0;
        font-size:17px;line-height:1.5;border-bottom:1px solid var(--line)}
.wprm-recipe-ingredient:last-child{border-bottom:0}
.wprm-checkbox{width:20px;height:20px;flex:none;margin-top:4px;accent-color:var(--brand)}
.wprm-recipe-ingredient input:checked+span{text-decoration:line-through;color:var(--ink-soft)}
.wprm-recipe-instruction{display:flex;gap:14px;padding:11px 0;font-size:17px;line-height:1.6}

.wprm-recipe-instruction .step-n{display:flex;align-items:center;justify-content:center;
        width:28px;height:28px;flex:none;margin-top:3px;border-radius:50%;
        background:var(--brand);color:var(--on-brand);
        font-family:var(--font);font-size:14px;font-weight:700;line-height:1}

.wprm-recipe-notes-container{background:var(--hover);color:var(--ink);
        border-radius:var(--radius-sm);padding:18px 20px;margin-top:24px}
.wprm-recipe-notes-container h3{color:var(--brand)}

.wprm-recipe-notes-container ul{list-style:disc;padding-left:1.2em;font-size:16px;
        color:var(--ink-soft)}
.wprm-recipe-notes-container li{margin-bottom:.4em}
.wprm-nutrition-label-container{margin-top:18px;font-size:13px;color:var(--ink-soft)}

/* ---------- POST FURNITURE ---------- */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:2em 0}

.author-box{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;
        background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
        padding:26px;margin:2em 0}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.author-box h2,.author-box h3{margin-bottom:6px}
.author-box p{font-size:15px;color:var(--ink-soft);margin-bottom:10px}
.author-box a,.prose .author-box a{font-size:14px;font-weight:600;color:var(--brand);text-decoration:none}

/* ---------- SIDEBAR ---------- */

.side-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
          padding:22px;margin-bottom:24px}

.side-box h2,.side-box h3{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;
             text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.side-about{text-align:center}
.side-about img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 12px}
.side-about p{font-size:15px;color:var(--ink-soft);margin-bottom:14px}
.pop-list li{border-top:1px solid var(--line)}
.pop-list li:first-child{border-top:0}
.pop-list a{display:flex;align-items:center;gap:12px;padding:12px 0}
.pop-list img{width:64px;height:64px;flex:none;border-radius:var(--radius-sm);object-fit:cover}
.pop-list .t{font-size:15px;font-weight:600;line-height:1.35}
.pop-list a:hover .t{color:var(--brand)}
.ad-sidebar{min-height:600px;max-width:300px}

/* ---------- RELATED ---------- */
.related{background:var(--bg);border-top:1px solid var(--line);margin-top:var(--space)}

/* ---------- FROM THE SCAFFOLD — templates the mockups did not cover ---------- */
body>main{flex:1 0 auto}
body>footer{flex:none}
.page-body{padding-top:var(--space);padding-bottom:var(--space)}

/* ---------- UTILITY BAR ---------- */


/* ---------- NAV DROPDOWNS ----------
   Two levels ship by default. header.php renders the primary menu at depth 2,
   so the moment a client nests an item under another in Appearance > Menus it
   shows up here instead of silently vanishing — which is what happened on two
   real builds before these rules existed.

   Revealed on hover AND :focus-within, so the submenu is reachable by keyboard
   with no JS at all. Top-level items stretch to the full header height, so the
   panel hangs off the header edge with no dead gap for the pointer to cross. */
.menu>li{position:relative;display:flex;align-items:center}
.menu .menu-item-has-children>a{display:inline-flex;align-items:center;gap:7px}

.menu .menu-item-has-children>a::after{content:"";width:6px;height:6px;flex:none;
     border-right:2px solid currentColor;border-bottom:2px solid currentColor;
     transform:translateY(-2px) rotate(45deg);transition:transform .15s}

.menu>li.menu-item-has-children:hover>a::after,
.menu>li.menu-item-has-children:focus-within>a::after{transform:translateY(1px) rotate(-135deg)}

.sub-menu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:-14px;
     min-width:224px;background:var(--bg);border:1px solid var(--line);
     border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:90;
     opacity:0;visibility:hidden;transform:translateY(6px);
     transition:opacity .15s,transform .15s,visibility .15s}

/* Last item would push a left-aligned panel off the right edge. */
.menu>li:last-child .sub-menu{left:auto;right:-14px}
.menu>li:hover>.sub-menu,.menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.sub-menu li{display:block}

.sub-menu a{display:flex;align-items:center;min-height:44px;padding:6px 16px;
     color:var(--ink-soft);white-space:nowrap}

/* 44px tap target */
.sub-menu a:hover,.sub-menu .current-menu-item>a{color:var(--brand);background:var(--hover)}

/* ---------- FAQ ---------- */
.faq-q svg{transition:transform .2s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}

/* ---------- FINAL CTA ---------- */

/* ---------- POST LIST ---------- */
.prose :where(p:not([class]),ul:not([class]),ol:not([class]),figure:not([class]),blockquote:not([class]),table:not([class])){margin:0 0 1.1em}
.prose :where(ul:not([class])){list-style:disc;padding-left:1.2em}
.prose :where(ol:not([class])){list-style:decimal;padding-left:1.2em}
.prose :where(li:not([class])){margin:0}
.prose :where(h2:not([class])){margin:1.6em 0 .5em}
.prose :where(h3:not([class])){margin:1.4em 0 .4em}
.prose :where(a:not([class])){color:var(--brand);text-decoration:underline}

/* ---------- ARCHIVE / SEARCH / 404 ---------- */
.archive-head{margin-bottom:38px;max-width:70ch}
.archive-head h1{margin-bottom:12px}
.archive-desc{color:var(--ink-soft)}

/* ---------- SEARCH FORM ---------- */
.searchform{display:flex;gap:10px;max-width:520px}

.searchform input{flex:1;padding:12px 14px;border:1px solid var(--line);
     border-radius:var(--radius-sm);background:var(--bg-alt);color:var(--ink);outline:0}

.searchform input:focus{border-color:var(--brand);background:var(--bg);
     box-shadow:0 0 0 3px var(--focus-ring)}

/* ---------- WIDGETS ---------- */
.widget{margin-bottom:32px}
.widget-title{font-size:17px;margin-bottom:12px}

/* ---------- PAGINATION ---------- */
.pagination{margin-top:48px;display:flex;justify-content:center}

.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
     min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);
     border-radius:var(--radius-sm);margin:0 4px;font-weight:600}
.pagination .page-numbers.current{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.pagination a.page-numbers:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- SETUP PANEL (admins only) ---------- */
.setup-panel-wrap{padding:var(--space) 0;background:var(--bg-alt)}

.setup-panel{border:2px dashed var(--line);border-radius:var(--radius);
     padding:30px;background:var(--bg);max-width:720px}

.setup-panel-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;
     font-weight:600;letter-spacing:.08em;text-transform:uppercase;
     color:var(--ink-soft);margin-bottom:14px}
.setup-panel-eyebrow svg{width:16px;height:16px;flex:none}
.setup-panel h2{font-size:22px;margin-bottom:8px}
.setup-panel p{color:var(--ink-soft);font-size:15.5px;max-width:60ch}

.setup-badge{display:inline-block;background:var(--warn-bg);color:var(--warn);
     font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius-sm);
     margin:16px 0 0}
.setup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

.setup-note{font-size:13px;margin-top:18px;padding-top:16px;
     border-top:1px solid var(--line)}
.site-footer .menu{flex-direction:column;gap:10px}
.site-footer .menu a{color:var(--dark-ink-2)}
.site-footer .menu a:hover{color:var(--dark-ink)}


/* ---------- RESPONSIVE — widest breakpoint first ---------- */

@media (max-width:1024px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .card-grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .menu a{padding:10px 10px;font-size:14px}
  .article-layout{grid-template-columns:minmax(0,1fr) 280px;gap:38px}
  .wprm-recipe-grid{grid-template-columns:repeat(1,1fr);gap:26px}
}

@media (max-width:960px){
}

@media (max-width:860px){
  .topbar{display:none}
  /* Sidebar stacks under the article here, putting this directly below the
     author box — same face, same bio, twice. The rail version is a desktop
     convenience only. */
  .side-about{display:none}

  .nav-main{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--bg);
              border-top:1px solid var(--line);padding:18px 24px 40px;overflow-y:auto;
              transform:translateY(-8px);opacity:0;pointer-events:none;transition:.18s}
  .nav-main.open{transform:none;opacity:1;pointer-events:auto}
  .menu{display:block}
  .menu a{padding:14px 4px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .menu a:hover{background:none}
  .menu>li.menu-cta{display:block;margin-top:22px}
  .menu-cta a{border-bottom:0}
  .navtoggle{display:flex}
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .signup .wrap{grid-template-columns:1fr;gap:28px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .about-strip .wrap{grid-template-columns:1fr;gap:26px;padding:28px}
  .about-photo{max-width:200px}
  .coll-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:repeat(1,1fr);gap:44px;padding-top:28px}
  .sidebar{position:static}
  .ad-sidebar{max-width:100%;min-height:280px}

  /* TOC collapses to an accordion — closed by default, the recipe is one tap away below */
  .toc-toggle{display:flex}
  .toc ol{display:none}
  .toc.open ol{display:block}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .logo{font-size:20px}
  .logo .mark,.logo .mark svg{width:30px;height:30px}
  .nav-right .btn{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px}
  .hero-copy h1{font-size:32px}
  .hero-copy .lead{font-size:17px}
  .hero-meta{margin-bottom:20px;padding-bottom:18px}
  .cta-row .btn{flex:1 1 auto}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-tile .cat-label{font-size:16px;padding:26px 12px 12px}
  .card-grid{grid-template-columns:repeat(1,1fr);gap:28px}
  .card-grid-4{grid-template-columns:repeat(2,1fr);gap:18px}
  .card-grid-4 .rcard h3{font-size:17px}
  .coll-grid{grid-template-columns:repeat(1,1fr)}
  .foot-grid{grid-template-columns:repeat(1,1fr);gap:26px;padding-bottom:32px}
  .signup-card{padding:22px}
  .ad-footer,.ad-leader{min-height:100px}
  .byline .rating{margin-left:0;width:100%}

  /* The last crumb is the page you are on — drop it and its separator on a phone */
  .breadcrumb li:nth-last-child(-n+2){display:none}

  /* Nobody prints from a phone — one full-width save instead of a two-row button block. */
  .page-hero .print-btn{display:none}
  .page-hero .pin-btn{width:100%}
  .post-figure img{aspect-ratio:4/3}
  .prose{font-size:17px}
  .wprm-recipe-container{padding:20px}
  .wprm-recipe-meta-container{grid-template-columns:repeat(2,1fr);gap:16px}
  .wprm-recipe-actions .btn{flex:1 1 auto}
  .author-box{grid-template-columns:repeat(1,1fr);gap:16px;padding:22px}
  .signup-inline{padding:22px}
  .signup-inline .field-row{display:block}
  .signup-inline .btn{width:100%;margin-top:12px}
  .navtoggle{display:block;padding:12px}

  /* 44px tap target */

  .menu{display:none;position:absolute;top:70px;left:0;right:0;background:var(--bg);
          border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 16px}
  .menu.open{display:flex}
  .menu li{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu>li{display:block}

  /* Sub-items are always open on mobile — a phone has no hover to reveal them. */

  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
          margin:6px 0 0 2px;padding:0;background:none;box-shadow:none;
          border:0;border-left:2px solid var(--line);border-radius:0}
  .menu>li:last-child .sub-menu{right:auto}
  .sub-menu li{padding:0;border-bottom:0}
  .sub-menu a{min-height:44px;padding:6px 14px}
  .sub-menu a:hover,.sub-menu .current-menu-item>a{background:none;color:var(--brand)}
  .menu .menu-item-has-children>a{display:flex}
  .menu .menu-item-has-children>a::after{margin-left:auto}
  .searchform{flex-direction:column}
  .searchform .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}


/* ============================================================
   TEMPLATES WITHOUT A MOCKUP
   Archive, search, 404, recipe index, roundup and the WordPress
   classes the mockups could not emit by hand.
   ============================================================ */

/* ---------- WordPress-emitted classes ---------- */
.custom-logo-link{display:flex;align-items:center}
.custom-logo-link img{max-height:44px;width:auto}
.menu .current-menu-item>a,.menu .current_page_item>a,
.menu .current-menu-ancestor>a,.menu .current-post-ancestor>a{color:var(--brand)}
.menu .sub-menu{display:none}
.alignleft{float:left;margin:0 1.4em 1em 0}
.alignright{float:right;margin:0 0 1em 1.4em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:8px}
.post-password-form input[type=password]{padding:13px 15px;border:1px solid var(--line);
        border-radius:var(--radius-sm)}

/* ---------- HEADER SEARCH ---------- */
.header-search{border-top:1px solid var(--line);background:var(--bg)}
.header-search .wrap{padding-top:16px;padding-bottom:16px}
.search-form{display:flex;gap:10px}
.search-form label{flex:1}
.search-form .search-field{width:100%;padding:13px 15px;border:1px solid var(--line);
        border-radius:var(--radius-sm);background:var(--bg);color:var(--ink)}
.search-form .search-field:focus{outline:none;border-color:var(--brand);
        box-shadow:0 0 0 3px var(--focus-ring)}
.search-form .search-submit{font-family:var(--font);font-weight:700;font-size:15px;
        padding:13px 24px;border-radius:999px;background:var(--brand);color:var(--on-brand);
        border:0;cursor:pointer;white-space:nowrap}
.search-form .search-submit:hover{background:var(--brand-deep)}

/* ---------- ARCHIVE / SEARCH / 404 ---------- */
.archive-head{padding:30px 0 0}
.archive-head h1{margin-bottom:12px}
.archive-desc{color:var(--ink-soft);max-width:64ch}
.archive-search{max-width:520px;margin-top:20px}
.archive-body{padding-top:34px}
.empty-state{text-align:center;max-width:52ch;margin:0 auto;padding:40px 0 20px}
.empty-state h2{margin-bottom:10px}
.empty-state p{color:var(--ink-soft);margin-bottom:20px}

/* ---------- PAGINATION ---------- */
.pagination{margin-top:44px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{display:flex;align-items:center;justify-content:center;
        min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);
        border-radius:var(--radius-sm);font-size:15px;font-weight:600;color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);
        color:var(--on-brand)}
.pagination .page-numbers.dots{border-color:transparent}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
        overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- RECIPE INDEX ---------- */
.index-jump{padding:22px 0 0}
.index-jump .wrap{display:flex;flex-wrap:wrap;gap:8px}
.index-jump .chip{padding:9px 14px;font-size:12px}
.index-group{padding-top:var(--space)}
.index-group+.index-group{padding-top:0;margin-top:calc(var(--space) * .8)}

/* ---------- ROUNDUP — RANKED PICKS ---------- */
.rank-list{display:grid;gap:34px;margin:2em 0}
.rank-item{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start;
        padding-top:32px;border-top:1px solid var(--line);scroll-margin-top:100px}
.rank-item:first-child{padding-top:0;border-top:0}
.rank-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--hover)}
.rank-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rank-num{position:absolute;top:12px;left:12px;display:flex;align-items:center;
        justify-content:center;width:38px;height:38px;border-radius:50%;
        background:var(--brand);color:var(--on-brand);
        font-family:var(--font);font-size:16px;font-weight:700;line-height:1}
.rank-body .chip{margin-bottom:10px}
.rank-body h2{font-size:clamp(21px,2.6vw,26px);margin:0 0 8px;scroll-margin-top:100px}
.prose .rank-body h2 a:hover{color:var(--brand)}
.rank-body .rating{margin-bottom:12px}
.rank-why{font-size:16px;color:var(--ink-soft);margin-bottom:14px}
.rank-meta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px;
        font-size:14px;color:var(--ink-soft)}
.rank-meta strong{font-weight:700;color:var(--brand);text-transform:uppercase;
        letter-spacing:.1em;font-size:11px;display:block}

/* ---------- PAGE BODY ---------- */
.page-body{padding-top:32px;padding-bottom:var(--space)}
.page-body .prose{max-width:none}

/* ---------- COMMENTS / REVIEWS ---------- */
.reviews{border-top:1px solid var(--line);padding-top:28px;margin-top:2em}
.reviews h2,.comments-title{font-size:26px;margin-bottom:6px}
.reviews>p{color:var(--ink-soft);font-size:15px;margin-bottom:16px}
.comment-list{margin:0 0 28px}
.comment-list li{border-bottom:1px solid var(--line);padding:18px 0}
.comment-list .children{padding-left:22px;border-left:2px solid var(--line);margin-top:14px}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:15px}
.comment-author img{width:36px;height:36px;border-radius:50%}
.comment-metadata{font-size:13px;color:var(--ink-soft)}
.comment-respond{border-top:1px solid var(--line);padding-top:24px}
.comment-form label{display:block;font-size:14px;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:13px 15px;
        border:1px solid var(--line);border-radius:var(--radius-sm);
        background:var(--bg);color:var(--ink);margin-bottom:14px}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--brand);
        box-shadow:0 0 0 3px var(--focus-ring)}
.comment-form .submit{font-family:var(--font);font-weight:700;font-size:15px;padding:13px 24px;
        border-radius:999px;background:var(--brand);color:var(--on-brand);border:0;cursor:pointer}
.comment-form .submit:hover{background:var(--brand-deep)}

/* ---------- WIDGETS ---------- */
.widget{margin-bottom:24px}
.widget-title{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;
        text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.widget ul li{border-top:1px solid var(--line)}
.widget ul li:first-child{border-top:0}
.widget ul a{display:block;padding:11px 0;font-size:15px;font-weight:600}
.widget ul a:hover{color:var(--brand)}

/* ---------- WP RECIPE MAKER ----------
   One photograph per post: the featured image is the recipe photo, so the
   card's own image is suppressed on single posts. Cleaner still is to remove
   the image block in WPRM > Settings > Recipe Template — this rule is the
   belt-and-braces so the duplicate cannot come back if that is reset. */
.single-post .wprm-recipe-image,
.single-ttr_roundup .wprm-recipe-image{display:none}
.wprm-recipe-container .wprm-recipe-header{grid-template-columns:minmax(0,1fr)}

/* ---------- AD BAND ---------- */
.ad-band{padding-top:var(--space)}

/* ---------- RESPONSIVE — templates without a mockup ---------- */
@media (max-width:860px){
  .rank-item{grid-template-columns:220px minmax(0,1fr);gap:20px}
}
@media (max-width:640px){
  .archive-head{padding-top:22px}
  .rank-item{grid-template-columns:repeat(1,1fr);gap:16px}
  .rank-media img{aspect-ratio:3/2}
  .rank-body .cta-row .btn{flex:1 1 auto}
  .search-form{flex-direction:column}
  .search-form .search-submit{width:100%}
  .index-jump .wrap{gap:6px}
  .comment-list .children{padding-left:14px}
}

/* ============================================================
   COMPONENT OVERRIDES INSIDE .prose
   `.prose a:not([class])` has specificity (0,2,1) because :not() carries the
   weight of its argument. Any component dropped into the article — the
   contents box, the ranked list, the author box — has unclassed links inside
   it that would otherwise be painted as body links. These rules match that
   specificity and come last, so they win on source order. Keep this block at
   the bottom of the file.
   ============================================================ */
.prose .toc a{color:var(--ink);text-decoration:none}
.prose .toc a:hover,.prose .toc a.active{color:var(--brand)}
.prose .rank-body h2 a{color:var(--ink);text-decoration:none}
.prose .rank-body h2 a:hover{color:var(--brand)}
.prose .author-box a{color:var(--brand);text-decoration:none}
.prose .pop-list a{color:var(--ink);text-decoration:none}