/* ==========================================================
   PITCH.CSS  -  table of contents
   1. Design tokens (the ONLY :root block)
   2. Pitch shell + navigation   (index.html: nav above an iframe)
   3. Reset, base & shared page layout  (page-*: container, section,
      heading/text/bullets, full-height body, navy footer)
   4. Hero section  (page-hero + r4-stats)
   5. Domain tree section  (r4-*, portfolio page only)
   6. Reduced motion (the ONLY reduced-motion block)

   Naming:
   - page-*   shared by every iframed page
   - r4-*     portfolio page only (stats, cards, tree, bonus, CTA)
   - pitch-*  colour tokens, and the shell (pitch-shell, pitch-frame)

   Breakpoints in use: 640, 960 (also the nav), 1000 (hero
   subtitle only), 1150.

   Order notes (rules that depend on source order):
   - .nav-links-desktop (2) must stay AFTER .nav-links.
   - .r4-stats__item--full (4) must stay AFTER the 640px stats media query.
   - .r4-card--bonus (5e) must stay AFTER .r4-card (5a).
========================================================== */


/* ==========================================================
   1. DESIGN TOKENS  (from "palette card.txt")
   Change a value here and it updates everywhere.
========================================================== */
:root {
  /* Core */
  --pitch-navy:      #000A3C;
  --pitch-red:       #E53935;
  --pitch-red-dark:  #C62F2C;   /* CTA hover */
  --pitch-white:     #FFFFFF;

  /* Accent */
  --pitch-silver:    #C0C0C0;
  --pitch-slate:     #666666;
  --pitch-sky:       #4DA3FF;

  /* White at reduced opacity (text and dividers on navy / red) */
  --pitch-white-07:  rgba(255, 255, 255, 0.07);   /* stat bar panel */
  --pitch-white-12:  rgba(255, 255, 255, 0.12);   /* stat dividers */
  --pitch-white-60:  rgba(255, 255, 255, 0.6);    /* stat labels */
  --pitch-white-65:  rgba(255, 255, 255, 0.65);   /* nav links */
  --pitch-white-70:  rgba(255, 255, 255, 0.7);    /* hero subtitle */
  --pitch-white-85:  rgba(255, 255, 255, 0.85);   /* root card description */

  /* Utility */
  --bg-primary:      var(--pitch-white);
  --bg-secondary:    #F5F7FA;
  --text-primary:    #1A1A1A;
  --text-secondary:  var(--pitch-slate);
  --text-inverse:    var(--pitch-white);   /* currently unused; kept on purpose */
  --border-light:    #E5E7EB;

  /* Typography */
  --font-heading:    'Montserrat', Arial, sans-serif;
  --font-body:       'Source Sans 3', Arial, sans-serif;

  /* Layout */
  --max-width:       1280px;
  --section-width:   1100px;               /* currently unused; kept on purpose */
  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       20px;                 /* currently unused; kept on purpose */
  --shadow-soft:     0 8px 24px rgba(0, 10, 60, 0.08);
  --shadow-medium:   0 12px 32px rgba(0, 10, 60, 0.12);
  --page-gutter:     clamp(1rem, 4vw, 2rem);   /* side padding of .page-container */

  /* Pitch shell / nav */
  --nav-height:        56px;
  --nav-width:         99%;
  --nav-bar:           3px;                              /* red bar thickness */
  --nav-gutter:        clamp(0.25rem, 1vw, 0.5rem);      /* nav side padding */
  --nav-gutter-right:  calc(var(--nav-gutter) + 21px);   /* +21px: iframe scrollbar allowance (Edge) */

  /* Domain-tree helpers */
  --r4-gap:         1.25rem;                  /* gap between tree columns */
  --r4-line:        2px;                      /* connector line thickness */
  --r4-line-color:  var(--pitch-silver);      /* connector line color */
  --r4-drop:        28px;                     /* length of connector drops */
}


/* ==========================================================
   2. PITCH SHELL  (index.html: nav above an iframe)
   Scoped to body.pitch-shell so the iframed pages keep
   normal page scrolling.
========================================================== */
body.pitch-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;              /* modern browsers; 100vh is the fallback */
  overflow: hidden;            /* the iframe scrolls, not the shell */
}

/* ---------- 2a. Navigation (navy bar with red bottom rule) ---------- */
.site-nav {
  flex: 0 0 auto;
  position: relative;
  z-index: 100;
  background: var(--pitch-navy);
  border-bottom: var(--nav-bar) solid var(--pitch-red);
}

.nav-inner {
  max-width: var(--nav-width);
  margin-inline: auto;
  padding-left: var(--nav-gutter);
  padding-right: var(--nav-gutter-right);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Headline: "Pitch: Race4 Election News Portal" (plain text, not a link) */
.nav-wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  letter-spacing: -0.01em;
  color: var(--pitch-white);
  white-space: nowrap;
}
.nav-wordmark span { color: var(--pitch-sky); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links a {
  font-size: 0.875rem;
  color: var(--pitch-white-65);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--pitch-white); }

.nav-links a.active {
  color: var(--pitch-white);
  font-weight: 600;
  position: relative;
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: var(--pitch-sky);
  border-radius: 1px;
}

/* ---------- 2b. Mobile menu ---------- */
.nav-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--pitch-white);
}
.nav-menu-btn svg { display: block; }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--pitch-navy);
  border-top: var(--nav-bar) solid var(--pitch-red);
  z-index: 200;
  flex-direction: column;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}
.mobile-nav.open { opacity: 1; visibility: visible; pointer-events: auto; }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.mobile-nav-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pitch-white);
  padding: 6px;
}
.mobile-nav-links { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-nav-links a {
  font-size: 1.125rem;
  color: var(--pitch-white-65);
  transition: color 0.2s;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--pitch-white); font-weight: 600; }

/* Collapse links into the menu button on narrower screens.
   (At 960px and up, the base rules above already hide the button and
   overlay, so no matching min-width block is needed.) */
@media (max-width: 959px) {
  .nav-links-desktop { display: none; }
  .nav-menu-btn { display: block; }
  .mobile-nav { display: flex; }
}

/* ---------- 2c. Content frame (fills the space under the nav) ---------- */
.pitch-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg-secondary);
  display: block;
}


/* ==========================================================
   3. RESET, BASE & SHARED PAGE LAYOUT
   (Order-independent relative to section 2: every shell/nav
   selector has higher specificity than these.)
========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }
strong, b { font-weight: 700; }

a { color: var(--pitch-sky); text-decoration: none; }
ul { list-style: none; }

/* Centered, indented wrapper used on every iframed page */
.page-container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Grey padded band that holds a page's main content */
.page-section {
  background: var(--bg-secondary);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

/* Thin silver rule between blocks (an <hr>) */
.page-divider { border: 0; border-top: 1px solid var(--pitch-silver); }

/* Section heading, body text and bullet list inside .page-section */
.page-section__title {
  font-weight: 800;
  font-size: 1.75rem;            /* 28px */
  line-height: 1.25;
  color: var(--pitch-navy);
  margin-bottom: 1rem;
}
.page-section__text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 72ch;               /* keeps long paragraphs readable on wide screens */
}
.page-section__text + .page-section__text { margin-top: 1rem; }

/* Bullet list: same size, line height, colour and width as the body text,
   with small sky-blue round bullets and a hanging indent for wrapped lines */
.page-section__list {
  list-style: none;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 72ch;
}
.page-section__list li {
  position: relative;
  padding-left: 1.5rem;
}
.page-section__list li + li { margin-top: 0.5rem; }
.page-section__list li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: calc(0.85em - 0.25rem);   /* centers the dot on the first line */
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pitch-sky);
}

/* Bold lead-ins (<strong>) inside text or bullets */
.page-section__text strong,
.page-section__list strong { color: var(--pitch-navy); }

/* Spacing between neighbouring blocks */
.page-section__text + .page-section__list,
.page-section__list + .page-section__text { margin-top: 1rem; }
.page-section__text + .page-section__title,
.page-section__list + .page-section__title { margin-top: 2rem; }

/* Spacing when blocks are separated by a divider (does not affect the
   divider in the portfolio's bonus block, which has its own spacing) */
.page-section__text + .page-divider,
.page-section__list + .page-divider      { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.page-divider + .page-section__title     { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Full-height page: the grey .page-section grows to fill the iframe, so the
   footer sits at the bottom even when content is short.
   Markup: <body class="page-body"> ... <main> ... </main> <footer class="page-footer"></footer> */
body.page-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-body main { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-body .page-section { flex: 1 0 auto; }

/* Empty navy footer band (no button) */
.page-footer {
  flex: 0 0 auto;
  background: var(--pitch-navy);
  min-height: 3.75rem;           /* 60px; raise if you ever add content */
}

/* Red call-to-action colours (see 5f for the portfolio CTA button) */
.cta-button { background: var(--pitch-red); color: var(--pitch-white); }


/* ==========================================================
   4. HERO SECTION
   Markup: <section class="page-hero"> ... </section>
========================================================== */
.page-hero {
  background: var(--pitch-navy);
  color: var(--pitch-white);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  text-align: center;
}

/* Small uppercase label above the headline */
.page-hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pitch-sky);
  margin-bottom: 1rem;
}

.page-hero__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.page-hero__sub {
  font-weight: 300;
  font-size: clamp(0.95rem, 2vw, 1.125rem);
  color: var(--pitch-white-70);
  max-width: 940px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
/* When the subtitle is the last thing in the hero (no stats bar), drop its
   bottom margin so the hero's top and bottom padding look equal */
.page-hero__sub:last-child { margin-bottom: 0; }
/* Keep the subtitle on one line when there's room; let it wrap on small screens.
   NOTE: the current text (~98 characters) is close to the limit for one line
   at 1000px. If you lengthen it, raise this breakpoint or drop nowrap. */
@media (min-width: 1000px) {
  .page-hero__sub { white-space: nowrap; max-width: none; }
}

/* Stat bar: stacked on mobile, 3-across on wider screens */
.r4-stats {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin-inline: auto;
  background: var(--pitch-white-07);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-wrap: wrap;               /* lets the full-width row drop to its own line */
}
.r4-stats__item { flex: 1; padding: 1.25rem 1.5rem; }
.r4-stats__item + .r4-stats__item { border-top: 1px solid var(--pitch-white-12); }

.r4-stats__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.r4-stats__label {
  font-size: 0.8rem;
  color: var(--pitch-white-60);
  margin-top: 0.25rem;
}

@media (min-width: 640px) {
  .r4-stats { flex-direction: row; }
  .r4-stats__item + .r4-stats__item {
    border-top: 0;
    border-left: 1px solid var(--pitch-white-12);
  }
}

/* Full-width stat row under the three stats (acts like colspan=3).
   Must stay AFTER the 640px media query above: it has the same
   specificity as the sibling-border rule and wins by source order. */
.r4-stats .r4-stats__item--full {
  flex: 0 0 100%;
  border-left: 0;
  border-top: 1px solid var(--pitch-white-12);
}
.r4-stats__item--full .r4-stats__num {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 400;                          /* matches the "Categories" label */
  color: var(--pitch-white-60);              /* matches the "Categories" label */
}


/* ==========================================================
   5. DOMAIN TREE SECTION (the "vertical flow chart")
   Sits inside .page-section > .page-container.
   Structure:
     .r4-tree
       .r4-root            -> Race4.us (top of the chart)
       .r4-tree__trunk     -> line from root down to the bus
       .r4-tree__cols      -> grid of columns
         .r4-col           -> one group (President, Congress...)
           .r4-col__label  -> group heading
           .r4-col__list > .r4-col__item > .r4-card
========================================================== */

/* ---------- 5a. Domain card (used everywhere) ---------- */
@keyframes r4-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.r4-card {
  background: var(--pitch-white);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--pitch-sky);   /* accent edge: change per column/category if desired */
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* "backwards" (not "both"): with "both", the final keyframe's transform
     is held forever and overrides the :hover lift below. */
  animation: r4-fade-in 0.5s ease backwards;
}
.r4-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

.r4-card__domain {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--pitch-navy);
}
/* The extension (.us, .tv ...) in a lighter color */
.r4-card__tld { color: var(--pitch-sky); }

.r4-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.35rem;
}

/* ---------- 5b. Root card: Race4.us ---------- */
.r4-root {
  max-width: 300px;
  margin-inline: auto;
  text-align: center;
}
.r4-root .r4-card {
  background: var(--pitch-red);
  border-color: var(--pitch-red);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-soft);
}
.r4-root .r4-card__domain { color: var(--pitch-white); font-size: 1.15rem; }
.r4-root .r4-card__tld    { color: var(--pitch-white); }
.r4-root .r4-card__desc   { color: var(--pitch-white-85); }

/* ---------- 5c. Connector lines ---------- */
/* Vertical line from the root card down to the horizontal bus */
.r4-tree__trunk {
  width: var(--r4-line);
  height: var(--r4-drop);
  margin-inline: auto;
  background: var(--r4-line-color);
}

/* ---------- 5d. Columns ---------- */
.r4-tree__cols {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: 1 column */
  gap: 2rem var(--r4-gap);
}
@media (min-width: 640px)  { .r4-tree__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .r4-tree__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1150px) { .r4-tree__cols { grid-template-columns: repeat(6, 1fr); } }

.r4-col { position: relative; }

/* Group heading (square-ish block) */
.r4-col__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  background: var(--pitch-navy);
  color: var(--pitch-white);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
}

/* Stack of cards, with a short connector line above each card */
.r4-col__item {
  position: relative;
  padding-top: var(--r4-drop);
}
.r4-col__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--r4-line);
  height: var(--r4-drop);
  margin-left: calc(var(--r4-line) / -2);
  background: var(--r4-line-color);
}

/* Stagger the fade-in per column */
.r4-col:nth-child(2) .r4-card { animation-delay: 0.08s; }
.r4-col:nth-child(3) .r4-card { animation-delay: 0.16s; }
.r4-col:nth-child(4) .r4-card { animation-delay: 0.24s; }
.r4-col:nth-child(5) .r4-card { animation-delay: 0.32s; }
.r4-col:nth-child(6) .r4-card { animation-delay: 0.40s; }

/* Horizontal "bus" bar + drops into each column.
   Only on the 6-across desktop layout (same breakpoint as the 6 columns). */
@media (min-width: 1150px) {
  .r4-tree__cols { padding-top: var(--r4-drop); }

  /* vertical drop from the bus into each column label */
  .r4-col::before {
    content: '';
    position: absolute;
    top: calc(var(--r4-drop) * -1);
    left: 50%;
    width: var(--r4-line);
    height: var(--r4-drop);
    margin-left: calc(var(--r4-line) / -2);
    background: var(--r4-line-color);
  }
  /* horizontal segment across the top of each column (bridges the gap) */
  .r4-col::after {
    content: '';
    position: absolute;
    top: calc(var(--r4-drop) * -1);
    left: calc(var(--r4-gap) / -2);
    right: calc(var(--r4-gap) / -2);
    height: var(--r4-line);
    background: var(--r4-line-color);
  }
  .r4-col:first-child::after { left: 50%; }   /* bus starts at first column's center */
  .r4-col:last-child::after  { right: 50%; }  /* bus ends at last column's center */
}

/* ---------- 5e. Bonus domains (not part of the Race4.us tree) ---------- */
.r4-bonus { margin-top: clamp(2.5rem, 5vw, 4rem); }
.r4-bonus__title {
  font-size: 1.1rem;
  color: var(--pitch-navy);
  text-align: center;
  margin-top: 1.25rem;
}
.r4-bonus__note {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 1.5rem;
}
.r4-bonus__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--r4-gap);
}
@media (min-width: 640px)  { .r4-bonus__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .r4-bonus__grid { grid-template-columns: repeat(4, 1fr); } }

.r4-card--bonus { border-left-color: var(--pitch-silver); }  /* must follow .r4-card */

/* ---------- 5f. Bottom call-to-action ---------- */
.r4-cta-section {
  background: var(--pitch-navy);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.r4-cta { text-align: center; }
.r4-cta__btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  padding: 1rem 3rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s;
}
.r4-cta__btn:hover {
  background: var(--pitch-red-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}


/* ==========================================================
   6. REDUCED MOTION  (single block)
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .r4-card { animation: none; transition: none; }
  .r4-cta__btn { transition: none; }
  .nav-links a, .mobile-nav { transition: none; }
}