/*
Theme Name: We All Need Help
Theme URI: https://weallneedhelp.org
Author: We All Need Help
Description: Homepage theme for weallneedhelp.org. Editorial layout built on the Modernist design system — Archivo throughout, flat, zero corner radius, 2px rules, flush left, single red accent. Includes the 4A hero, the six-beat family-struggle arc (with a vertical-rail fallback on small screens) and the ledger-index warning section.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: weallneedhelp
*/

/* ===== Design tokens — Modernist ===== */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #ffffff;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-700: #8c1c0b;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --font-heading: "Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --radius-md: 0px;

  --ink: #201e1d;
  --sand: #d8b98d;
  --bluegrey: #93aeb8;
  --teal: #52777a;
  --hero-ground: #0b0b0b;

  --page-w: 1040px;
  --gutter: 56px;
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #e7e5e4;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

.wanh-page {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  background: var(--color-bg);
}

.wanh-tag-outline {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px;
  border: 1px solid var(--color-accent); color: var(--color-accent);
  border-radius: 0;
  margin-right: 9px; vertical-align: 2px;
}

/* ===== Hero (4A) ===== */
.wanh-hero {
  position: relative;
  height: 298px;
  overflow: hidden;
  background: var(--hero-ground);
  border-bottom: 2px solid var(--color-text);
}
.wanh-hero-lede {
  position: absolute; left: var(--gutter); top: 18px; width: 620px; margin: 0;
  font-size: 18px; font-weight: 700; line-height: 1.4; color: #f3f2f2;
}
.wanh-hero-l1 {
  position: absolute; left: var(--gutter); top: 113px;
  font-family: var(--font-heading); font-weight: 700; font-size: 54px;
  line-height: 1; letter-spacing: -0.05em; color: #f3f2f2; white-space: nowrap;
}
.wanh-hero-l2 {
  position: absolute; left: 246px; top: 159px;
  font-family: var(--font-heading); font-weight: 700; font-size: 92px;
  line-height: 1; letter-spacing: -0.055em; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #d2d2d2 52%, #6d6d6d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wanh-hero-menu {
  position: absolute; right: var(--gutter); bottom: 62px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9a9a9a; white-space: nowrap;
}
.wanh-hero-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  border-top: 1px solid #2a2a2a;
  overflow: hidden;
}
.wanh-hero-band img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08);
}
.wanh-hero-band-empty { background: repeating-linear-gradient(135deg, #141414 0 8px, #101010 8px 16px); }

/* ===== The Story ===== */
.wanh-story {
  background: linear-gradient(180deg, #f8f1e7 0%, #f1f5f5 50%, #eaf1ee 100%);
  border-bottom: 2px solid var(--color-text);
}
.wanh-kicker {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px;
}
.wanh-kicker-teal { color: var(--teal); }
.wanh-h2 { font-size: 34px; line-height: 1.15; margin: 0; }

/* -- desktop arc -- */
.wanh-arc { position: relative; height: 1000px; overflow: hidden; }
.wanh-arc-head { position: absolute; left: var(--gutter); top: 44px; width: 700px; z-index: 1; }
.wanh-arc-svg { position: absolute; top: 0; left: 0; z-index: 0; }
.wanh-node {
  position: absolute; width: 80px; height: 80px;
  border: 2px solid var(--color-text); border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.wanh-label {
  position: absolute; left: 372px; width: 540px;
  transform: translateY(-50%); z-index: 1;
}
.wanh-label h4 { font-size: 19px; line-height: 1.25; margin: 0 0 7px; }
.wanh-label p { font-size: 16px; line-height: 1.55; margin: 0; }
.wanh-fleuron { position: absolute; left: 338px; top: 899px; width: 32px; height: 32px; z-index: 2; }
.wanh-more {
  position: absolute; left: 378px; top: 915px; transform: translateY(-50%);
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
  white-space: nowrap; z-index: 1;
}

/* -- mobile rail (hidden on desktop) -- */
.wanh-rail { display: none; padding: 36px 20px 40px; }
.wanh-rail-head { margin-bottom: 28px; }
.wanh-rail-list { position: relative; margin: 0; padding: 0; list-style: none; }
.wanh-rail-list::before {
  content: ""; position: absolute; left: 27px; top: 8px; bottom: 46px; width: 3px;
  background: linear-gradient(180deg, var(--sand) 0%, var(--bluegrey) 50%, var(--teal) 100%);
}
.wanh-rail-item {
  position: relative; display: grid; grid-template-columns: 56px 1fr;
  gap: 16px; padding-bottom: 26px;
}
.wanh-rail-dot {
  width: 56px; height: 56px; border: 2px solid var(--color-text); border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.wanh-rail-dot svg { width: 32px; height: 32px; }
.wanh-rail-body { padding-top: 4px; }
.wanh-rail-body h4 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
.wanh-rail-body p { font-size: 17px; line-height: 1.55; margin: 0; }
.wanh-rail-end {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
  padding-left: 12px;
}

/* ===== Ledger index ===== */
.wanh-ledger { padding: var(--gutter); border-top: 2px solid var(--color-text); }
.wanh-ledger-head { margin: 0 0 30px; max-width: 820px; }
.wanh-ledger-list { border-top: 2px solid var(--color-text); }
.wanh-row {
  display: grid; grid-template-columns: 72px 268px 1fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--color-text); align-items: start;
}
.wanh-row:last-child { border-bottom-width: 2px; }
.wanh-num {
  font-family: var(--font-heading); font-weight: 700; font-size: 32px;
  line-height: 0.86; color: var(--color-accent);
}
.wanh-row h3 { font-size: 19px; line-height: 1.25; margin: 0; }
.wanh-row p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ===== Fallback template (index.php / page.php) ===== */
.wanh-entry { padding: var(--gutter); }
.wanh-entry-title { font-size: 34px; line-height: 1.15; margin: 0 0 16px; }
.wanh-entry + .wanh-entry { border-top: 2px solid var(--color-text); }

/* ===== Tablet ===== */
@media (max-width: 1040px) {
  :root { --gutter: 40px; }
  .wanh-hero-lede { width: auto; right: var(--gutter); }
  .wanh-hero-menu { font-size: 10px; letter-spacing: 0.12em; }
}

@media (max-width: 900px) {
  /* the arc cannot reflow — swap it for the rail */
  .wanh-arc { display: none; }
  .wanh-rail { display: block; }
}

/* ===== Mobile ===== */
@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .wanh-hero {
    height: auto; position: static;
    padding: 22px var(--gutter) 0;
  }
  .wanh-hero-lede,
  .wanh-hero-l1,
  .wanh-hero-l2,
  .wanh-hero-menu,
  .wanh-hero-band { position: static; }
  .wanh-hero-lede { width: auto; font-size: 17px; margin: 0 0 26px; }
  .wanh-hero-l1 { font-size: clamp(30px, 8.6vw, 42px); }
  .wanh-hero-l2 { font-size: clamp(52px, 15vw, 74px); margin: 2px 0 0 -2px; }
  .wanh-hero-menu {
    white-space: normal; font-size: 11px; letter-spacing: 0.14em;
    line-height: 1.7; margin: 20px 0 22px;
  }
  .wanh-hero-band { height: 90px; margin: 0 calc(var(--gutter) * -1); }

  .wanh-h2 { font-size: 26px; }

  .wanh-rail { padding: 32px var(--gutter) 36px; }
  .wanh-rail-list::before { left: 23px; }
  .wanh-rail-item { grid-template-columns: 48px 1fr; gap: 14px; }
  .wanh-rail-dot { width: 48px; height: 48px; }
  .wanh-rail-dot svg { width: 27px; height: 27px; }

  .wanh-ledger { padding: 34px var(--gutter) 40px; }
  .wanh-row {
    grid-template-columns: 48px 1fr;
    gap: 6px 14px;
    padding: 20px 0;
  }
  .wanh-num { font-size: 26px; padding-top: 2px; }
  .wanh-row h3 { font-size: 20px; }
  .wanh-row p { grid-column: 2; font-size: 17px; margin-top: 8px; }
}

/* ===== Print ===== */
@media print {
  body { background: #fff; }
  .wanh-rail { display: none !important; }
  .wanh-arc { display: block !important; }
}