/*
Theme Name: Prostadine Reviews
Theme URI: https://prostadinereviews.org
Author: Prostadine Reviews Editorial
Description: Custom editorial review theme for prostadinereviews.org — a single-brand, trust-first affiliate review publication. Classic theme: shared header/footer, content in <main>, native CSS + vanilla JS.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: prostadinereviews
*/

/* ============================================================
   0. Design tokens  (light default + dark override)
   Palette: bone base, off-black ink, single pine-green accent.
   Gold is reserved ONLY for rating stars.
   Radius rule: buttons = pill, cards = 12px, inputs = 8px.
   ============================================================ */
:root {
  --bg:        #f6f7f4;
  --surface:   #ffffff;
  --surface-2: #f0f2ed;
  --text:      #16201b;
  --muted:     #59645d;
  --faint:     #7c8880;
  --accent:    #1f6b4f;
  --accent-strong:#17583f;
  --accent-soft:#e6f0ea;
  --accent-ink:#0d3b2a;
  --gold:      #c08a24;
  --danger:    #a83a2d;
  --danger-soft:#f6e7e4;
  --border:    #e2e6df;
  --border-strong:#cfd6cc;
  --shadow:    0 1px 2px rgba(22,32,27,.05), 0 8px 24px rgba(22,32,27,.06);
  --shadow-lg: 0 2px 6px rgba(22,32,27,.06), 0 22px 48px rgba(22,32,27,.10);
  --radius:    12px;
  --radius-sm: 8px;
  --maxw:      1120px;
  --readw:     68ch;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f1512;
    --surface:   #161d18;
    --surface-2: #1c241f;
    --text:      #eef2ec;
    --muted:     #a2ada4;
    --faint:     #808d84;
    --accent:    #56b489;
    --accent-strong:#6cc79c;
    --accent-soft:#16271f;
    --accent-ink:#bfe8d4;
    --gold:      #d7a63f;
    --danger:    #e0796b;
    --danger-soft:#2a1a17;
    --border:    #26302a;
    --border-strong:#354037;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 22px 48px rgba(0,0,0,.5);
  }
}
/* explicit theme toggle wins in both directions */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f1512;--surface:#161d18;--surface-2:#1c241f;--text:#eef2ec;--muted:#a2ada4;--faint:#808d84;
  --accent:#56b489;--accent-strong:#6cc79c;--accent-soft:#16271f;--accent-ink:#bfe8d4;--gold:#d7a63f;
  --danger:#e0796b;--danger-soft:#2a1a17;--border:#26302a;--border-strong:#354037;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 22px 48px rgba(0,0,0,.5);
}

/* ============================================================
   1. Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-strong); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.01em; color:var(--text); }
h2{ font-size:clamp(1.6rem,1.1rem+2vw,2.3rem); margin:0 0 .5em; }
h3{ font-size:clamp(1.25rem,1rem+1vw,1.55rem); margin:2em 0 .5em; }
p{ margin:0 0 1.1em; }
strong{ font-weight:700; color:var(--text); }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:3px; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.skip-link{ position:absolute; left:-999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:200; background:var(--surface); padding:.6rem 1rem; border-radius:var(--radius-sm); box-shadow:var(--shadow); }

/* ============================================================
   2. Header / nav
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--bg) 86%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:66px; }
.brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--serif); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand__dot{ width:26px; height:26px; border-radius:7px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:800; font-size:.85rem; }
.brand em{ color:var(--accent-strong); font-style:normal; }
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{ color:var(--muted); font-size:.94rem; font-weight:500; }
.nav a:hover{ color:var(--text); text-decoration:none; }
.header-cta{ font-size:.9rem !important; padding:.5rem 1rem; }
.theme-toggle{ background:none; border:1px solid var(--border-strong); color:var(--muted); width:38px; height:38px; border-radius:999px; cursor:pointer; display:grid; place-items:center; }
.theme-toggle:hover{ color:var(--text); border-color:var(--accent); }
.theme-toggle svg{ width:18px; height:18px; }
.nav-toggle{ display:none; }
@media (max-width:860px){
  .nav{ display:none; }
  .header-cta{ display:none !important; }   /* sticky bottom CTA covers mobile; frees header width */
  .nav-toggle{ display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:none; color:var(--text); cursor:pointer; }
  .site-header.open .nav{
    display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border); padding:.5rem 0;
  }
  .site-header.open .nav a{ padding:.85rem clamp(1rem,4vw,2rem); width:100%; }
}

/* ============================================================
   3. Buttons  (pill)
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:650; font-size:1rem; line-height:1; white-space:nowrap;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), background .2s, box-shadow .2s;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%, transparent); }
.btn--primary:hover{ background:var(--accent-strong); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-strong); }
.btn--lg{ padding:1.05rem 2rem; font-size:1.08rem; }
.btn__note{ display:block; font-size:.8rem; font-weight:500; color:var(--faint); margin-top:.5rem; text-align:center; }

/* ============================================================
   4. Rating stars  (gold = semantic, stars only)
   ============================================================ */
.stars{ --pct:80%; display:inline-block; position:relative; font-size:1.1em; line-height:1; white-space:nowrap; font-family:var(--sans); }
.stars::before{ content:"★★★★★"; color:var(--border-strong); letter-spacing:2px; }
.stars::after{ content:"★★★★★"; color:var(--gold); letter-spacing:2px; position:absolute; inset:0; width:var(--pct); overflow:hidden; }
.rating-inline{ display:inline-flex; align-items:center; gap:.5rem; }
.rating-inline b{ font-size:1.05rem; }

/* ============================================================
   5. Hero
   ============================================================ */
.hero{ padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--border); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.eyebrow{ font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:1rem; }
.hero h1{ font-size:clamp(2rem,1.4rem+3vw,3.2rem); margin:0 0 1rem; }
.hero h1 em{ font-style:italic; color:var(--accent-strong); }
.hero__lede{ font-size:1.18rem; color:var(--muted); max-width:38ch; margin-bottom:1.6rem; }
.byline{ display:flex; align-items:center; flex-wrap:wrap; gap:.55rem 1rem; font-size:.9rem; color:var(--faint); margin-bottom:1.6rem; }
.byline img{ width:34px; height:34px; border-radius:999px; object-fit:cover; border:1px solid var(--border); }
.byline .who{ color:var(--text); font-weight:600; }
.byline .sep{ width:1px; height:16px; background:var(--border-strong); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.hero__aside{ }
.verdict-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:1.5rem; text-align:center;
}
.verdict-card__media{ border-radius:var(--radius-sm); overflow:hidden; background:linear-gradient(160deg,var(--accent-soft),var(--surface-2)); margin-bottom:1.1rem; padding:.75rem; display:grid; place-items:center; }
.verdict-card__media img{ display:block; width:auto; height:auto; max-width:100%; max-height:320px; }
.verdict-card h2{ font-size:1.15rem; margin:0 0 .25rem; }
.verdict-score{ font-family:var(--sans); font-weight:800; font-size:2.6rem; line-height:1; color:var(--text); }
.verdict-score span{ font-size:1.1rem; color:var(--faint); font-weight:600; }
.verdict-card .stars{ font-size:1.25em; margin:.5rem 0 .75rem; }
.verdict-meter{ display:grid; gap:.5rem; margin:1.1rem 0; text-align:left; }
.verdict-meter div{ display:grid; grid-template-columns:1fr auto; font-size:.86rem; color:var(--muted); gap:.4rem; }
.verdict-meter i{ grid-column:1/-1; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.verdict-meter i::before{ content:""; display:block; height:100%; width:var(--w,70%); background:var(--accent); border-radius:999px; }
@media (max-width:820px){
  .hero__grid{ grid-template-columns:1fr; gap:2rem; }
  .hero__aside{ order:-1; max-width:420px; }
}

/* ============================================================
   6. Sections & prose
   ============================================================ */
.section{ padding:clamp(2.5rem,5vw,4rem) 0; border-bottom:1px solid var(--border); }
.section--tint{ background:var(--surface-2); }
.section__head{ max-width:var(--readw); margin-bottom:1.5rem; }
.section__head p{ color:var(--muted); font-size:1.06rem; margin:0; }
.prose{ max-width:var(--readw); }
.prose p, .prose li{ font-size:1.06rem; }
.prose h3:first-child{ margin-top:0; }
.prose ul{ padding-left:1.2rem; margin:0 0 1.2em; }
.prose li{ margin-bottom:.5em; }
.lead{ font-size:1.18rem !important; color:var(--text); }

/* Media split (text + lifestyle image) */
.media{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.media__img{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/10; }
.media__img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  .media{ grid-template-columns:1fr; gap:1.4rem; }
  .media--rev .media__img{ order:-1; }
  .media .media__img{ aspect-ratio:16/9; }
}

/* Key-takeaways Q&A block */
.takeaways{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,2rem); }
.takeaways h2{ font-size:1.35rem; margin:0 0 1.2rem; display:flex; align-items:center; gap:.6rem; }
.takeaways h2 svg{ width:22px; height:22px; color:var(--accent); }
.qa{ padding:1rem 0; border-top:1px solid var(--border); }
.qa:first-of-type{ border-top:none; padding-top:0; }
.qa dt{ font-weight:700; font-size:1.02rem; margin-bottom:.3rem; color:var(--text); }
.qa dd{ margin:0; color:var(--muted); font-size:1rem; }

/* ============================================================
   7. Ingredient cards / grid
   ============================================================ */
.ingredients{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.ing{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.25rem; }
.ing__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.35rem; }
.ing h4{ font-family:var(--sans); font-size:1.05rem; font-weight:700; margin:0; }
.ing .tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-strong); background:var(--accent-soft); padding:.2rem .5rem; border-radius:999px; white-space:nowrap; }
.ing p{ margin:0; font-size:.94rem; color:var(--muted); }
@media (max-width:640px){ .ingredients{ grid-template-columns:1fr; } }

/* ============================================================
   8. Pros / Cons
   ============================================================ */
.proscons{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; }
.pc h3{ margin:0 0 .8rem; font-family:var(--sans); font-size:1.1rem; display:flex; align-items:center; gap:.5rem; }
.pc ul{ list-style:none; margin:0; padding:0; }
.pc li{ position:relative; padding-left:1.7rem; margin-bottom:.65rem; font-size:.98rem; color:var(--muted); }
.pc li::before{ position:absolute; left:0; top:.05em; font-weight:800; }
.pc--pro li::before{ content:"✓"; color:var(--accent); }
.pc--con li::before{ content:"✕"; color:var(--danger); }
@media (max-width:640px){ .proscons{ grid-template-columns:1fr; } }

/* ============================================================
   9. Pricing
   ============================================================ */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.price{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; position:relative; display:flex; flex-direction:column; }
.price--best{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.price__flag{ position:absolute; top:-.75rem; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.28rem .8rem; border-radius:999px; }
.price h3{ font-family:var(--sans); font-size:1.05rem; margin:.2rem 0 .6rem; }
.price__per{ font-size:2.2rem; font-weight:800; color:var(--text); line-height:1; }
.price__per span{ font-size:.95rem; color:var(--faint); font-weight:600; }
.price__total{ color:var(--muted); font-size:.9rem; margin:.4rem 0 1rem; }
.price ul{ list-style:none; margin:0 0 1.2rem; padding:0; text-align:left; font-size:.9rem; color:var(--muted); flex:1; }
.price li{ padding:.3rem 0 .3rem 1.5rem; position:relative; }
.price li::before{ content:"✓"; color:var(--accent); font-weight:800; position:absolute; left:0; }
@media (max-width:760px){ .pricing{ grid-template-columns:1fr; } }

/* ============================================================
   10. FAQ (native <details>, crawlable)
   ============================================================ */
.faq{ max-width:var(--readw); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{ cursor:pointer; list-style:none; padding:1.1rem 2.2rem 1.1rem 0; position:relative; font-weight:650; font-size:1.06rem; color:var(--text); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.3rem; top:1rem; font-size:1.4rem; color:var(--accent); transition:transform .2s var(--ease); font-weight:400; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:0 0 1.2rem; color:var(--muted); font-size:1rem; }

/* ============================================================
   11. Bio / methodology / disclosure
   ============================================================ */
.bio{ display:flex; gap:1.2rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; }
.bio + .bio{ margin-top:1rem; }
.bio img{ width:64px; height:64px; border-radius:999px; object-fit:cover; border:1px solid var(--border); flex:none; }
.bio h4{ font-family:var(--sans); font-size:1.05rem; margin:0 0 .1rem; }
.bio .role{ font-size:.85rem; color:var(--accent-strong); font-weight:600; margin-bottom:.5rem; }
.bio p{ margin:0; font-size:.95rem; color:var(--muted); }
.disclosure{ background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.2rem; font-size:.9rem; color:var(--muted); }
.disclosure strong{ color:var(--text); }

/* Callout / CTA band */
.cta-band{ background:var(--accent-ink); color:#eafff5; border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.6rem); text-align:center; }
:root[data-theme="dark"] .cta-band, .cta-band{ }
.cta-band h2{ color:#fff; margin:0 0 .5rem; }
.cta-band p{ color:#c9e8db; max-width:52ch; margin:0 auto 1.4rem; }
.cta-band .btn--primary{ background:#fff; color:var(--accent-ink); }
.cta-band .btn--primary:hover{ background:#eafff5; }

/* ============================================================
   12. Footer + sticky mobile CTA
   ============================================================ */
.site-footer{ background:var(--surface-2); border-top:1px solid var(--border); padding:2.5rem 0 6rem; font-size:.9rem; color:var(--muted); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer__brand p{ max-width:34ch; }
.footer h4{ font-family:var(--sans); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:0 0 .8rem; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.5rem; }
.footer a{ color:var(--muted); }
.footer a:hover{ color:var(--text); }
.footer__legal{ border-top:1px solid var(--border); padding-top:1.4rem; font-size:.82rem; color:var(--faint); }
.footer__legal p{ margin:0 0 .6rem; }
@media (max-width:700px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  background:color-mix(in srgb,var(--surface) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--border); padding:.7rem clamp(1rem,4vw,2rem);
  align-items:center; justify-content:space-between; gap:1rem;
}
.sticky-cta strong{ font-size:.95rem; }
.sticky-cta small{ display:block; color:var(--faint); font-size:.78rem; }
@media (max-width:860px){ .sticky-cta{ display:flex; } }

/* ============================================================
   13. Scroll reveal (motivated: staggered entrance; reduced-motion safe)
   ============================================================ */
/* Content is visible by default; only hidden (to animate in) when JS is present. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

.mono-avatar{ display:inline-grid; place-items:center; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-family:var(--sans); font-weight:800; border:1px solid var(--border); flex:none; letter-spacing:.02em; }
.verdict-card__media--empty{ position:relative; }
.verdict-card__media--empty .glyph{ display:grid; place-items:center; gap:.4rem; color:var(--accent-strong); }
.verdict-card__media--empty svg{ width:54px; height:54px; opacity:.9; }
.verdict-card__media--empty b{ font-family:var(--sans); font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }

.mt0{ margin-top:0; }
.center{ text-align:center; }
.stat{ font-family:var(--sans); font-weight:800; font-size:2.4rem; color:var(--accent-strong); line-height:1; }