/*
Theme Name: First Time Mommy Guide
Theme URI: https://firsttimemommyguide.com
Author: First Time Mommy Guide
Description: Bespoke theme for First Time Mommy Guide — pregnancy, newborn care and baby feeding. Self-contained SEO (JSON-LD incl. Recipe, breadcrumbs, meta control), author entity and YMYL disclosure built in. No SEO plugin required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: ftmg
*/

/* ==========================================================================
   1. TOKENS — palette carried over from the Kadence build
   ========================================================================== */
:root {
  --pink:        #E9A6B3;
  --pink-deep:   #C97D8D;   /* darkened for text/links — #E9A6B3 is 1.9:1 on white */
  --pink-soft:   #F3C7CD;
  --pink-tint:   #FBEEF0;

  --sage:        #8FAF9B;
  --sage-deep:   #5F8570;   /* accessible sage for text */
  --sage-tint:   #EDF3EF;

  --ink:         #2E2A28;
  --body:        #555555;
  --muted:       #777777;
  --faint:       #AAAAAA;

  --cream:       #FAF7F0;
  --blush:       #F5EDEA;
  --white:       #FFFFFF;

  --line:        rgba(46, 42, 40, .12);
  --line-soft:   rgba(46, 42, 40, .07);
  --shadow-sm:   0 1px 2px rgba(46,42,40,.05), 0 2px 8px rgba(46,42,40,.04);
  --shadow-md:   0 4px 14px rgba(46,42,40,.07), 0 12px 32px rgba(46,42,40,.05);
  --shadow-lg:   0 10px 30px rgba(46,42,40,.09), 0 24px 60px rgba(46,42,40,.07);

  --font-display: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.06rem, .4vw + .98rem, 1.15rem);
  --t-xl:   clamp(1.2rem, .6vw + 1.06rem, 1.4rem);
  --t-2xl:  clamp(1.45rem, 1.1vw + 1.2rem, 1.9rem);
  --t-3xl:  clamp(1.8rem, 2vw + 1.3rem, 2.6rem);
  --t-4xl:  clamp(2.15rem, 3.2vw + 1.4rem, 3.4rem);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --container: 1160px;
  --measure: 68ch;
  --radius:    8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  --header-h: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. 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; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
a { color: var(--pink-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease); }
a:hover { color: var(--sage-deep); }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.35em; }
li { margin-bottom: var(--s-2); }
strong { font-weight: 700; color: var(--ink); }
blockquote {
  margin: var(--s-6) 0; padding: var(--s-5) var(--s-6);
  background: var(--pink-tint); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500; color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--t-sm); }
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); }
th { font-weight: 700; color: var(--ink); background: var(--blush); font-family: var(--font-display); }
:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; border-radius: 3px; }

.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;
}
.skip-link { position:absolute; left:-9999px; z-index:999999; background: var(--ink); color: var(--white); padding: var(--s-3) var(--s-5); }
.skip-link:focus { left:0; top:0; color: var(--white); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--s-5); }
.container--narrow { max-width: 760px; }

.section { padding-block: clamp(var(--s-8), 7vw, var(--s-9)); }
.section--tight { padding-block: clamp(var(--s-7), 5vw, var(--s-8)); }
.section--cream { background: var(--cream); }
.section--blush { background: var(--blush); }
.section--white { background: var(--white); }
.section--pink  { background: var(--pink-tint); }

.grid { display:grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2,1fr); }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--4 { grid-template-columns: repeat(4,1fr); }
.grid--5 { grid-template-columns: repeat(5,1fr); }
@media (max-width: 1000px){ .grid--4,.grid--5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 860px) { .grid--3,.grid--4,.grid--5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .grid--2,.grid--3,.grid--4,.grid--5 { grid-template-columns: 1fr; } }

.section-head { max-width: 720px; margin-bottom: var(--s-7); }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head--center p { margin-inline:auto; }
.eyebrow {
  display:inline-block; font-family: var(--font-display); font-size: var(--t-xs);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--pink-deep); margin-bottom: var(--s-3);
}
.section-head p { font-size: var(--t-lg); color: var(--muted); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight:600;
  padding: var(--s-4) var(--s-6); min-height:48px;
  border:1px solid transparent; border-radius: var(--radius-pill);
  cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width:18px; height:18px; flex-shrink:0; }

.btn--primary { background: var(--pink-deep); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #B56A7B; color: var(--white); box-shadow: var(--shadow-md); }
.btn--sage { background: var(--sage-deep); color: var(--white); }
.btn--sage:hover { background: #4E7460; color: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--soft { background: var(--pink-tint); color: var(--pink-deep); }
.btn--soft:hover { background: var(--pink-soft); color: var(--ink); }
.btn--sm { padding: var(--s-3) var(--s-4); min-height:40px; font-size: var(--t-xs); }
.btn--lg { padding: var(--s-5) var(--s-7); min-height:54px; font-size: var(--t-base); }
.btn--block { width:100%; }
.btn-row { display:flex; flex-wrap:wrap; gap: var(--s-3); align-items:center; }

.link-arrow {
  display:inline-flex; align-items:center; gap: var(--s-2);
  font-family: var(--font-display); font-weight:600; font-size: var(--t-sm);
  text-decoration:none; color: var(--pink-deep);
}
.link-arrow::after { content:'→'; transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--sage-deep); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:900;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap: var(--s-5); min-height: var(--header-h); }

/* ---- Brand lockup (coded from the supplied artwork) ---------------------
   Mark in SVG, wordmark in HTML. The source art is a wide banner; at header
   height its wordmark would render ~6px tall, so the two are split and
   sized independently.
   ------------------------------------------------------------------------ */
:root {
  --lg-coral: #E07A5C;
  --lg-sage:  #7E9163;
  --lg-leaf:  #93A87A;
  --lg-hair:  #6E4A30;
  --lg-skin:  #F7D9C4;
  --lg-cream: #FDFBF7;
}
.brand-lockup { display:inline-flex; align-items:center; gap: var(--s-3); text-decoration:none; flex-shrink:0; }
.brand-lockup__mark { height:52px; width:52px; display:block; flex-shrink:0; }
.brand-lockup__mark .lg-leaf  { fill: var(--lg-leaf); }
.brand-lockup__mark .lg-berry { fill: var(--lg-coral); }
.brand-lockup__mark .lg-coral { fill: var(--lg-coral); }
.brand-lockup__mark .lg-hair  { fill: var(--lg-hair); }
.brand-lockup__mark .lg-skin  { fill: var(--lg-skin); }
.brand-lockup__mark .lg-cream { fill: var(--lg-cream); stroke: rgba(110,74,48,.30); stroke-width:1.4; }

.brand-lockup__word { display:flex; flex-direction:column; line-height:1; }
.brand-lockup__script {
  font-family: 'Dancing Script', cursive;
  font-weight:700; font-size:1.55rem; color: var(--lg-coral);
  line-height:1; margin-bottom:1px;
}
.brand-lockup__sans {
  font-family: var(--font-display);
  font-weight:700; font-size:.94rem; letter-spacing:-.01em;
  color: var(--lg-sage); line-height:1;
}
@media (max-width: 620px) {
  .brand-lockup__mark { height:42px; width:42px; }
  .brand-lockup__script { font-size:1.24rem; }
  .brand-lockup__sans { font-size:.76rem; }
}
@media (max-width: 380px) { .brand-lockup__word { display:none; } }

.brand { display:inline-flex; align-items:center; gap: var(--s-3); text-decoration:none; flex-shrink:0; }
.brand__mark {
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-soft) 100%);
  display:grid; place-items:center; flex-shrink:0;
}
.brand__mark svg { width:22px; height:22px; color: var(--white); }
.brand__text { display:flex; flex-direction:column; line-height:1.15; }
.brand__name { font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--ink); letter-spacing:-.02em; }
.brand__tag { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); font-weight:600; }
.brand img { max-height:48px; width:auto; }

.nav-primary ul { list-style:none; display:flex; align-items:center; gap: var(--s-1); margin:0; padding:0; }
.nav-primary li { margin:0; position:relative; }
.nav-primary a {
  display:inline-flex; align-items:center; gap:5px;
  padding: var(--s-3); font-family: var(--font-display); font-size: var(--t-sm); font-weight:500;
  color: var(--ink); text-decoration:none; border-radius: var(--radius);
}
.nav-primary a:hover, .nav-primary .current-menu-item > a { color: var(--pink-deep); }
.nav-primary .menu-item-has-children > a::after {
  content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity:.5;
}
.nav-primary .sub-menu {
  position:absolute; top:calc(100% + 6px); left:-8px; min-width:230px;
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--s-2); flex-direction:column; align-items:stretch; gap:0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-primary li:hover > .sub-menu, .nav-primary li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:none; }
.nav-primary .sub-menu a { padding: var(--s-3) var(--s-4); width:100%; }
.nav-primary .sub-menu a:hover { background: var(--pink-tint); }

.header__actions { display:flex; align-items:center; gap: var(--s-3); flex-shrink:0; }

.nav-toggle {
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius: var(--radius); cursor:pointer;
}
.nav-toggle span { display:block; width:18px; height:1.5px; background: var(--ink); position:relative; transition:background .2s; }
.nav-toggle span::before, .nav-toggle span::after {
  content:''; position:absolute; left:0; width:18px; height:1.5px; background: var(--ink); transition:transform .25s var(--ease);
}
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display:inline-flex; }
  .header__actions .btn--header { display:none; }
  .nav-primary {
    position:fixed; inset: var(--header-h) 0 0 0; background: var(--white);
    flex-direction:column; align-items:stretch; padding: var(--s-5) var(--s-5) var(--s-8);
    overflow-y:auto; transform:translateX(100%); transition:transform .3s var(--ease);
    border-top:1px solid var(--line-soft);
  }
  .nav-primary.is-open { transform:none; }
  .nav-primary ul { flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav-primary a { padding: var(--s-4) 0; font-size: var(--t-lg); border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav-primary .menu-item-has-children > a::after { margin-left:auto; }
  .nav-primary .sub-menu {
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-radius:0; padding:0 0 0 var(--s-4); min-width:0; display:none; background:transparent;
  }
  .nav-primary li.is-expanded > .sub-menu { display:block; }
  .nav-primary .sub-menu a { font-size: var(--t-base); color: var(--muted); }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero { background: linear-gradient(170deg, var(--pink-tint) 0%, var(--cream) 62%, var(--white) 100%); }
.hero__inner { padding-block: clamp(var(--s-8), 7vw, 110px); }
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items:center; }
@media (max-width: 940px){ .hero__grid { grid-template-columns:1fr; gap: var(--s-6); } }
.hero h1 { max-width: 16ch; margin-bottom: var(--s-5); }
.hero__lead { font-size: var(--t-lg); color: var(--body); max-width: 50ch; margin-bottom: var(--s-6); }
.hero__img { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--pink-soft); }
.hero__img img { width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.card {
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: var(--s-6); display:flex; flex-direction:column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.card p { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-4); }
.card .link-arrow { margin-top:auto; }

/* Category card */
.cat-card {
  position:relative; display:block; text-decoration:none;
  border-radius: var(--radius-lg); overflow:hidden; background: var(--blush);
  aspect-ratio: 1/1; transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat-card__img { position:absolute; inset:0; }
.cat-card__img img { width:100%; height:100%; object-fit:cover; }
.cat-card__body {
  position:absolute; inset:auto 0 0 0; padding: var(--s-5) var(--s-4);
  background: linear-gradient(to top, rgba(46,42,40,.78) 0%, rgba(46,42,40,0) 100%);
}
.cat-card__body h3 { color: var(--white); font-size: var(--t-lg); margin:0; }
.cat-card__count { font-size: var(--t-xs); color: rgba(255,255,255,.8); }
/* Fallback when a category has no image */
.cat-card--plain { display:grid; place-items:center; text-align:center; padding: var(--s-5); aspect-ratio: 1/1; }
.cat-card--plain h3 { color: var(--ink); font-size: var(--t-lg); margin:0; }
.cat-card--plain .cat-card__count { color: var(--muted); }

/* Post card */
.post-card {
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card__img { aspect-ratio: 3/2; background: var(--pink-tint); overflow:hidden; display:block; }
.post-card__img img { width:100%; height:100%; object-fit:cover; transition: transform .4s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__body { padding: var(--s-5); display:flex; flex-direction:column; flex-grow:1; }
.post-card__cat {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color: var(--pink-deep); margin-bottom: var(--s-2);
}
.post-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.post-card h3 a { color:inherit; text-decoration:none; }
.post-card h3 a:hover { color: var(--pink-deep); }
.post-card p { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-4); }
.post-card__meta { margin-top:auto; font-size: var(--t-xs); color: var(--faint); display:flex; gap: var(--s-3); align-items:center; }

/* Age-range pill */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--sage-tint); color: var(--sage-deep);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight:600;
}
.pill--pink { background: var(--pink-tint); color: var(--pink-deep); }

/* ==========================================================================
   8. FORMS / EMAIL CAPTURE
   ========================================================================== */
.field { margin-bottom: var(--s-4); }
.field label { display:block; font-family: var(--font-display); font-size: var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.field input, .field textarea, .field select {
  width:100%; font-family: var(--font-body); font-size: var(--t-base); color: var(--ink);
  padding: var(--s-3) var(--s-4); min-height:48px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color: var(--pink-deep); box-shadow: 0 0 0 3px var(--pink-tint);
}
.form-note { font-size: var(--t-xs); color: var(--faint); margin-top: var(--s-3); }
.form-status { margin-top: var(--s-3); font-size: var(--t-sm); padding: var(--s-3) var(--s-4); border-radius: var(--radius); display:none; }
.form-status.is-ok { display:block; background: var(--sage-tint); color: var(--sage-deep); }
.form-status.is-err { display:block; background: var(--pink-tint); color: var(--pink-deep); }

.optin {
  background: var(--blush); border-radius: var(--radius-lg); padding: var(--s-7);
  display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7); align-items:center;
}
@media (max-width: 800px){ .optin { grid-template-columns:1fr; padding: var(--s-6); gap: var(--s-5); } }
.optin h2 { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.optin p { color: var(--body); margin-bottom:0; }
.optin__form { display:flex; flex-direction:column; gap: var(--s-3); }
.optin__row { display:flex; gap: var(--s-2); }
.optin__row input { flex:1; }
@media (max-width: 460px){ .optin__row { flex-direction:column; } }

/* ==========================================================================
   9. ARTICLE
   ========================================================================== */
.article-layout { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-8); align-items:start; }
@media (max-width: 1000px){ .article-layout { grid-template-columns:1fr; } }
.sidebar { position:sticky; top: calc(var(--header-h) + var(--s-5)); display:flex; flex-direction:column; gap: var(--s-5); }
@media (max-width: 1000px){ .sidebar { position:static; } }
.widget { background: var(--cream); border-radius: var(--radius-lg); padding: var(--s-5); }
.widget h3 { font-size: var(--t-base); margin-bottom: var(--s-4); }
.widget ul { list-style:none; padding:0; margin:0; }
.widget li { margin-bottom: var(--s-3); font-size: var(--t-sm); }
.widget a { color: var(--body); text-decoration:none; }
.widget a:hover { color: var(--pink-deep); }

.prose { font-size: var(--t-lg); line-height: 1.8; color: var(--body); }
.prose > * { max-width: var(--measure); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h3 { font-size: var(--t-xl); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose h2:first-child, .prose h3:first-child { margin-top:0; }
.prose ul, .prose ol { margin-bottom: var(--s-5); }
.prose li { margin-bottom: var(--s-3); }
.prose img, .prose figure { max-width:100%; border-radius: var(--radius-md); }
.prose figure { margin: var(--s-6) 0; }
.prose figcaption { font-size: var(--t-sm); color: var(--faint); margin-top: var(--s-3); }
.prose a { color: var(--pink-deep); font-weight:600; }

.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap: var(--s-3); font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-6); }
.article-meta__dot { width:3px; height:3px; border-radius:50%; background: currentColor; opacity:.5; }

/* Author byline */
.byline { display:flex; align-items:center; gap: var(--s-3); }
.byline__avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; background: var(--pink-soft); flex-shrink:0; }
.byline__avatar img { width:100%; height:100%; object-fit:cover; }
.byline__name { font-family: var(--font-display); font-weight:600; color: var(--ink); }

.author-box {
  display:flex; gap: var(--s-5); align-items:flex-start;
  background: var(--cream); border-radius: var(--radius-lg); padding: var(--s-6); margin-top: var(--s-8);
}
@media (max-width: 560px){ .author-box { flex-direction:column; } }
.author-box__avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; background: var(--pink-soft); flex-shrink:0; }
.author-box__avatar img { width:100%; height:100%; object-fit:cover; }
.author-box h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.author-box p { font-size: var(--t-sm); margin-bottom: var(--s-2); }

/* Callout + medical disclosure */
.callout { background: var(--sage-tint); border-left:3px solid var(--sage-deep); padding: var(--s-5); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--s-6) 0; }
.callout p:last-child { margin-bottom:0; }
.callout strong { color: var(--sage-deep); }
.callout--pink { background: var(--pink-tint); border-left-color: var(--pink-deep); }
.callout--pink strong { color: var(--pink-deep); }

.medical-note {
  display:flex; gap: var(--s-3); align-items:flex-start;
  background: var(--blush); border-radius: var(--radius-md);
  padding: var(--s-4) var(--s-5); margin: var(--s-6) 0;
  font-size: var(--t-sm); color: var(--body);
}
.medical-note svg { width:20px; height:20px; color: var(--pink-deep); flex-shrink:0; margin-top:3px; }
.medical-note p { margin:0; max-width:none; }

/* Sources list */
.sources { margin-top: var(--s-8); padding-top: var(--s-6); border-top:1px solid var(--line); }
.sources h2 { font-size: var(--t-lg); margin-bottom: var(--s-4); }
.sources ol { font-size: var(--t-sm); color: var(--muted); }
.sources li { margin-bottom: var(--s-2); }

/* TOC */
.toc { background: var(--cream); border-radius: var(--radius-md); padding: var(--s-5); margin-bottom: var(--s-7); max-width: var(--measure); }
.toc h2 { font-family: var(--font-display); font-size: var(--t-sm); text-transform:uppercase; letter-spacing:.1em; color: var(--muted); margin-bottom: var(--s-3); }
.toc ol { margin:0; padding-left:1.2em; }
.toc li { margin-bottom: var(--s-2); font-size: var(--t-sm); }
.toc a { color: var(--body); text-decoration:none; }
.toc a:hover { color: var(--pink-deep); text-decoration:underline; }

/* ==========================================================================
   10. RECIPE CARD
   ========================================================================== */
.recipe {
  background: var(--white); border:2px solid var(--pink-soft);
  border-radius: var(--radius-lg); padding: var(--s-6); margin: var(--s-7) 0;
}
.recipe__head { display:flex; flex-wrap:wrap; gap: var(--s-4); justify-content:space-between; align-items:flex-start; margin-bottom: var(--s-5); }
.recipe h2 { font-size: var(--t-2xl); margin:0 0 var(--s-2); }
.recipe__facts { display:flex; flex-wrap:wrap; gap: var(--s-5); padding-block: var(--s-4); border-block:1px solid var(--line-soft); margin-bottom: var(--s-5); }
.recipe__fact { display:flex; flex-direction:column; gap:2px; }
.recipe__fact b { font-family: var(--font-display); font-size: var(--t-base); color: var(--ink); }
.recipe__fact span { font-size: var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color: var(--faint); }
.recipe__cols { display:grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-6); }
@media (max-width: 700px){ .recipe__cols { grid-template-columns:1fr; } }
.recipe h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.recipe ul, .recipe ol { font-size: var(--t-base); }

/* ==========================================================================
   11. BREADCRUMBS / PAGE HERO
   ========================================================================== */
.breadcrumbs { padding-block: var(--s-4); font-size: var(--t-xs); color: var(--faint); }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap: var(--s-2); margin:0; padding:0; }
.breadcrumbs li { margin:0; display:inline-flex; align-items:center; gap: var(--s-2); }
.breadcrumbs li:not(:last-child)::after { content:'/'; color: var(--line); }
.breadcrumbs a { color: var(--muted); text-decoration:none; }
.breadcrumbs a:hover { color: var(--pink-deep); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight:600; }

.page-hero { background: linear-gradient(170deg, var(--pink-tint) 0%, var(--cream) 100%); }
.page-hero__inner { padding-block: var(--s-6) clamp(var(--s-7), 5vw, var(--s-8)); }
.page-hero h1 { max-width: 20ch; margin-bottom: var(--s-4); }
.page-hero__lead { font-size: var(--t-lg); color: var(--body); max-width: 58ch; margin-bottom:0; }

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq { max-width: 820px; margin-inline:auto; }
.faq__item { background: var(--white); border-radius: var(--radius-md); margin-bottom: var(--s-3); border:1px solid var(--line-soft); }
.faq__q {
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s-4);
  background:none; border:0; cursor:pointer; text-align:left;
  padding: var(--s-5); font-family: var(--font-display); font-size: var(--t-lg); font-weight:600; color: var(--ink); line-height:1.4;
}
.faq__icon { position:relative; width:18px; height:18px; flex-shrink:0; margin-top:5px; }
.faq__icon::before, .faq__icon::after { content:''; position:absolute; background: var(--pink-deep); border-radius:2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.faq__icon::before { top:8px; left:0; width:18px; height:2px; }
.faq__icon::after { top:0; left:8px; width:2px; height:18px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity:0; }
.faq__a { display:grid; grid-template-rows:0fr; transition: grid-template-rows .3s var(--ease); }
.faq__a > div { overflow:hidden; }
.faq__item.is-open .faq__a { grid-template-rows:1fr; }
.faq__a p { padding: 0 var(--s-5) var(--s-5); color: var(--body); margin:0; max-width:70ch; }

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */
.pagination { display:flex; justify-content:center; gap: var(--s-2); margin-top: var(--s-8); }
.pagination .page-numbers {
  display:grid; place-items:center; min-width:42px; height:42px; padding:0 var(--s-3);
  border:1px solid var(--line); border-radius: var(--radius-pill); text-decoration:none;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight:600; color: var(--body);
}
.pagination .page-numbers:hover { border-color: var(--pink-deep); color: var(--pink-deep); }
.pagination .page-numbers.current { background: var(--pink-deep); color: var(--white); border-color: var(--pink-deep); }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer { background: var(--cream); color: var(--body); font-size: var(--t-sm); }
.site-footer__top { padding-block: var(--s-8) var(--s-7); }
.site-footer__grid { display:grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: var(--s-6) var(--s-5); }
@media (max-width: 900px){ .site-footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .site-footer__grid { grid-template-columns:1fr; } }
.site-footer h3 { font-family: var(--font-display); font-size: var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--ink); margin-bottom: var(--s-4); }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom: var(--s-3); }
.site-footer a { color: var(--body); text-decoration:none; }
.site-footer a:hover { color: var(--pink-deep); }
.footer-brand p { max-width:36ch; margin: var(--s-4) 0 var(--s-5); }
.social-row { display:flex; gap: var(--s-2); }
.social-row a { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; transition: background .2s, border-color .2s; }
.social-row a:hover { background: var(--pink-tint); border-color: var(--pink-soft); }
.social-row svg { width:17px; height:17px; }
.site-footer__bottom {
  border-top:1px solid var(--line); padding-block: var(--s-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--s-4);
  font-size: var(--t-xs); color: var(--faint);
}
.site-footer__bottom ul { display:flex; flex-wrap:wrap; gap: var(--s-5); }
.site-footer__bottom li { margin:0; }

/* Affiliate + medical disclosure in footer — required, not decorative */
.footer-disclosure {
  border-top:1px solid var(--line); padding-block: var(--s-5);
  font-size: var(--t-xs); color: var(--muted); line-height:1.7;
}
.footer-disclosure p { max-width:none; margin-bottom: var(--s-2); }
.footer-disclosure p:last-child { margin-bottom:0; }

/* ==========================================================================
   15. PLACEHOLDER MARKERS
   ========================================================================== */
.is-placeholder {
  background: repeating-linear-gradient(45deg,#FFF4D6,#FFF4D6 8px,#FFE9B0 8px,#FFE9B0 16px);
  color:#7A5200 !important; border-radius:3px; padding:0 .3em; font-weight:600;
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
.u-center { text-align:center; }
.u-mb-0 { margin-bottom:0; }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-muted { color: var(--muted); }
.u-small { font-size: var(--t-sm); }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } }

.alignleft { float:left; margin:0 var(--s-5) var(--s-4) 0; }
.alignright { float:right; margin:0 0 var(--s-4) var(--s-5); }
.aligncenter { display:block; margin-inline:auto; }
.alignwide, .alignfull { max-width:none; }
.wp-caption-text { font-size: var(--t-sm); color: var(--faint); }
.sticky, .gallery-caption, .bypostauthor { display:block; }