/*
Theme Name: Ready Home
Theme URI: https://readyhomereport.com
Description: Custom block theme for The Ready Home — home readiness for real families, not preppers. Design tokens live in theme.json; this file carries only the signature components (Safety Note, problem-first nav, review block, etc).
Author: Ray Colburn
Version: 1.2
Text Domain: ready-home
Requires at least: 6.5
Requires PHP: 8.0
*/

/* ── Image safety net — bare <img> tags inside article content (the
   original SVG charts/diagrams) aren't wrapped in a real image block, so
   they don't inherit core's block-level width constraint. Without this,
   an SVG's native width (1200px+) overflows the mobile viewport. ── */
img{ max-width: 100%; height: auto; }

/* ── Dark mode — automatic, follows the reader's system setting ──
   (section 8.2 of CLAUDE.md: "outage reading at night, battery saving").
   :root:root is deliberate: matches theme.json's generated :root block in
   specificity terms but wins the tie by being more specific, so this
   overrides the light preset values regardless of stylesheet load order. */
@media (prefers-color-scheme: dark){
  :root:root{
    --wp--preset--color--ink: #F3F1EA;
    --wp--preset--color--ink-soft: #B8BCB6;
    --wp--preset--color--background: #14181C;
    --wp--preset--color--surface: #1C2226;
    --wp--preset--color--primary: #7C93A8;
    --wp--preset--color--secondary: #D9B784;
    --wp--preset--color--accent: #F0A430;
    --wp--preset--color--safety: #E07A63;
    --wp--preset--color--safety-bg: #2A1E1B;
    --wp--preset--color--olive: #A6A177;
    --wp--preset--color--line: rgba(243,241,234,0.14);
  }
}

/* ── Safety Note — fixed, recognizable, red-accent (section 7/8 of CLAUDE.md) ── */
.rh-safety-note{
  background: var(--wp--preset--color--safety-bg);
  border-left: 6px solid var(--wp--preset--color--safety);
  border-radius: 8px;
  padding: 28px 32px;
  margin: 2.5rem 0;
  display: flex;
  gap: 18px;
}
.rh-safety-note__icon{ flex-shrink: 0; margin-top: 2px; }
.rh-safety-note__label{
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--safety);
  margin: 0 0 10px;
}
.rh-safety-note__body{
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ── Eyebrow (content-intent label above H1: Problem / Solution / Decision) ── */
.rh-eyebrow{
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--olive);
  margin: 0 0 1rem;
}

/* ── Byline ─────────────────────────────────────────────────── */
.rh-byline{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 1.75rem;
}
.rh-byline strong{ color: var(--wp--preset--color--ink); }
.rh-byline__avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--wp--preset--color--secondary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 12px; color: var(--wp--preset--color--background);
  flex-shrink: 0;
}

/* ── Table of contents box ───────────────────────────────────── */
.rh-toc{
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  padding: 26px 30px;
  margin: 2rem 0;
}
.rh-toc__label{
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--olive);
  margin: 0 0 14px;
}
.rh-toc ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rh-toc a{ font-size: 0.95rem; }

/* ── Ray's Take callout ───────────────────────────────────────── */
.rh-rays-take{
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  padding: 26px 30px;
  margin: 2rem 0;
}
.rh-rays-take__label{
  font-family: var(--wp--preset--font-family--slab);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--wp--preset--color--primary);
  margin: 0 0 10px;
}

/* ── Checklist block (printable-friendly) ────────────────────── */
.rh-checklist{ margin: 2rem 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rh-checklist li{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: 1.0625rem; line-height: 1.5;
}
.rh-checklist li::before{
  content: ""; flex-shrink: 0; margin-top: 5px;
  width: 16px; height: 16px; border-radius: 4px;
  border: 2px solid var(--wp--preset--color--primary);
}

/* ── Review block: pros/cons + score + CTA ───────────────────── */
.rh-review{
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 2.5rem 0;
}
.rh-review__head{
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
  padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.rh-review__score{
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem; font-weight: 800;
}
.rh-review__body{ padding: 28px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.rh-review__pros, .rh-review__cons{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rh-review__pros-label{ color: var(--wp--preset--color--primary); }
.rh-review__cons-label{ color: var(--wp--preset--color--safety); }
.rh-review__cta{ padding: 0 28px 28px; }

/* ── Comparison table ─────────────────────────────────────────── */
.wp-block-table table{ border-collapse: collapse; width: 100%; }
.wp-block-table th{
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--primary);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--wp--preset--color--line);
}
.wp-block-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--wp--preset--color--line);
  vertical-align: top;
}

/* ── Author box ───────────────────────────────────────────────── */
.rh-author-box{
  display: flex; gap: 24px; align-items: center;
  padding: 28px 0; border-top: 1px solid var(--wp--preset--color--line);
  margin-top: 3rem;
}
.rh-author-box__avatar{
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--wp--preset--color--secondary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 24px; color: var(--wp--preset--color--background);
}

/* ── Seasonal banner slot ─────────────────────────────────────── */
.rh-seasonal-banner{
  background: var(--wp--preset--color--olive);
  color: var(--wp--preset--color--background);
  padding: 16px 24px;
  border-radius: 8px;
  margin: 0 0 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.95rem;
}
.rh-seasonal-banner a{ color: var(--wp--preset--color--background); text-decoration: underline; }

/* ── Email capture block (soft, inline) ──────────────────────── */
.rh-email-capture{
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 2.5rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}

/* ── Problem-first nav blocks (home page) ─────────────────────── */
.rh-problem-nav{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px;
}
.rh-problem-nav__card{
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  background: var(--wp--preset--color--primary);
  border-radius: 12px;
  text-decoration: none;
}
.rh-problem-nav__card-title{
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.05rem; font-weight: 800;
  color: var(--wp--preset--color--background);
}
.rh-problem-nav__card-cta{ font-size: 0.875rem; color: var(--wp--preset--color--secondary); }
@media (max-width: 782px){
  .rh-problem-nav{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rh-review__body{ grid-template-columns: 1fr; }
}

/* ── Nav / footer links ───────────────────────────────────────── */
.rh-nav-link{ font-size: 0.9rem; font-weight: 600; }

/* ── Motto (slab accent) ──────────────────────────────────────── */
.rh-motto{
  font-family: var(--wp--preset--font-family--slab);
  font-style: italic;
  color: var(--wp--preset--color--primary);
  line-height: 1.35;
}

/* ── Archive/category card list (index + archive templates) ────── */
.rh-archive-card{
  gap: 24px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.rh-archive-card__image{
  flex-shrink: 0;
  margin: 0;
}
.rh-archive-card__image img{
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.rh-archive-card__body{ min-width: 0; }
.rh-archive-card__title{
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.25;
}
.rh-archive-card__title a{ color: var(--wp--preset--color--ink); }
.rh-archive-card__title a:hover{ color: var(--wp--preset--color--accent); }
.rh-archive-card__excerpt{
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 8px;
}
.rh-archive-card__link{
  font-size: 0.875rem;
  font-weight: 700;
}
@media (max-width: 600px){
  .rh-archive-card{ flex-wrap: wrap; }
  .rh-archive-card__image img{ width: 100%; height: 200px; }
}

/* ── Accessibility floor ──────────────────────────────────────── */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible{
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Print stylesheet for checklists ──────────────────────────── */
@media print{
  header, footer, .rh-email-capture, .rh-seasonal-banner{ display: none; }
  .rh-checklist li::before{ border-color: #000; }
}

/* ── Motion: respect reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .rh-safety-note, .rh-review{
    animation: rh-rise .4s ease both;
    animation-timeline: view();
    animation-range: entry 10% cover 25%;
  }
  @keyframes rh-rise{
    from{ opacity: 0; transform: translateY(8px); }
    to  { opacity: 1; transform: none; }
  }
}