/* Brad Mayer-Harman campaign site — shared styles (calm, readable, no animations). */
:root { --navy:#1e3a5f; --deep:#12263f; --gold:#c9a13b; --sage:#4f7a45; --leaf:#45c13e; }
html { font-size: 112.5%; }                       /* 18px base: larger, easier-to-read type everywhere */
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; color: #1c2733; background: transparent; }

/* ---------- Fixed site background photo (stays in place while the page scrolls over it) ---------- */
/* Uses a real position:fixed layer rather than background-attachment:fixed, which iOS Safari
   does not support reliably. Section backgrounds below are given slight transparency so the
   photo shows through at the edges while text stays fully readable. */
.site-bg-fixed {
  position: fixed; inset: 0; z-index: -2;
  background-image: url("site-bg-countryside.jpg");
  background-size: cover; background-position: center 60%; background-repeat: no-repeat;
  filter: saturate(1.05);
  transform: scale(1.03); /* hide the blur's soft edge */
}
section.bg-white, section.bg-cream, section.bg-navy { background-color: transparent; }
/* NOTE: intentionally NOT div.bg-navy — that generic class also matches solid highlight
   boxes/panels nested inside opaque .card containers (pledge form, callout boxes), which must
   stay solid or their white text disappears against the (also-transparent) parent. Only the
   top-level page sections above should reveal the fixed photo. */

/* Text sitting directly on the (now fully visible, unblurred) photo switches to white over a
   dark part of the photo, and to navy over a light part (e.g. white "Reach Brad" heading text
   crossing onto a bright sky/cloud area) - both directions, so native-dark AND native-white
   text stay legible everywhere. See site.js "adaptive text colour" block. */
/* The `*` here matters: a nested <strong>, <a> or <span> (e.g. "managed <strong>with</strong>
   residents") carries its own explicit Tailwind text-color class, which does not inherit from
   the parent - without this it would silently keep its own colour and ignore the override. */
.on-dark-photo, .on-dark-photo *  { color: #fff !important; transition: color .12s ease; }
.on-light-photo, .on-light-photo * { color: var(--navy) !important; transition: color .12s ease; }
/* A tall block (e.g. a multi-line paragraph) whose own text crosses the horizon line gets
   split exactly at that line - navy above, white below - so no single line is ever on the
   wrong side of the cutoff. --split-pct is set per-frame by site.js to the exact crossing
   point within this element. Nested elements must also be forced transparent so the parent's
   clipped gradient shows through them instead of their own explicit text colour. */
.split-photo, .split-photo * { color: transparent !important; -webkit-text-fill-color: transparent !important; }
.split-photo {
  background-image: linear-gradient(to bottom, var(--navy) 0%, var(--navy) var(--split-pct, 50%), #fff var(--split-pct, 50%), #fff 100%);
  -webkit-background-clip: text; background-clip: text;
}
h1, h2, h3, h4 { letter-spacing: -.01em; line-height: 1.15; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 5.5rem; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px; border-radius: .4rem;
}
.skip-link { position:absolute; left:-999px; top:0; z-index:100; background:#fff; color:var(--navy); padding:.75rem 1rem; font-weight:700; }
.skip-link:focus { left:1rem; top:1rem; }

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

.kicker { display:block; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.85rem; color:#8a6d1f; margin-bottom:.6rem; }
.kicker.on-dark { color:#e6c766; }
.rule { width:4rem; height:.3rem; background:var(--gold); border-radius:9999px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:9999px; padding:.95rem 1.7rem; font-size:1.05rem; transition: background-color .15s, color .15s; text-align:center; }
.btn-gold { background:var(--gold); color:var(--deep); }
.btn-gold:hover { background:#e6c766; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--deep); }
.btn-outline { background:#fff; color:var(--navy); border:2px solid var(--navy); }
.btn-outline:hover { background:#f6f2ea; }

.card { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.icon-chip { background:#eef2f8; color:var(--navy); }

.official { display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; font-weight:600; color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.official:hover { color:#8a6d1f; }
.more-link { font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:4px; }
.more-link:hover { color:#8a6d1f; }

.field { width:100%; padding:.85rem 1rem; border-radius:.6rem; border:1px solid #9ca3af; background:#fff; font-size:1rem; }
.field:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(30,58,95,.2); outline:none; }
label.lbl, span.lbl { display:block; font-size:1rem; font-weight:600; color:#334155; margin-bottom:.4rem; }

details.bio > summary { list-style:none; cursor:pointer; }
details.bio > summary::-webkit-details-marker { display:none; }
details.bio[open] > summary .more { display:none; }
details.bio:not([open]) > summary .less { display:none; }
details.faq > summary { list-style:none; cursor:pointer; }
details.faq > summary::-webkit-details-marker { display:none; }
details.faq[open] > summary svg { transform: rotate(180deg); }

video { background:#000; }
ul.prose-calm { list-style:disc; padding-left:1.4rem; }
ul.prose-calm li { margin-bottom:.65rem; padding-left:.2rem; }
ul.prose-calm li::marker { color:#8a6d1f; }

/* ---------- Hero: fluid. The hero is exactly the space between the fixed header and the bottom bar; text scales with the
   screen (vw AND height), and the photo takes whatever height is left, so everything always fits, at any window size. ---------- */
:root { --hdr: 4rem; --nav: 4rem; }
@media (min-width:1024px) { :root { --hdr: 5rem; --nav: 0rem; } }
.hero { display:flex; align-items:stretch; min-height:0; max-height:60rem;
        height: calc(100vh - var(--hdr) - var(--nav));
        height: calc(100svh - var(--hdr) - var(--nav) - env(safe-area-inset-bottom, 0px)); }
.hero-inner { display:flex; flex-direction:column; gap:clamp(.4rem, 1.6svh, 1rem); width:100%; padding-block:clamp(.4rem, 1.6svh, 1.5rem); }
.hero-media { order:1; flex:1 1 0; min-height:3.5rem; position:relative; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 20%; border-radius:1rem; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.hero-text { order:2; flex:0 0 auto; text-align:center; }
.hero-kicker { margin-bottom:.35rem; font-size:clamp(.7rem, .3rem + 1.4svh, .85rem); }
.hero-h1 { font-weight:800; color:var(--navy); line-height:1.1; font-size: clamp(1.45rem, min(8.4vw, calc(.9rem + 3.4svh)), 2.4rem); }
.hero-tag { font-weight:600; color:#1f2937; line-height:1.3; margin-top:clamp(.25rem, 1svh, .8rem); font-size: clamp(1rem, min(4.6vw, calc(.55rem + 1.7svh)), 1.75rem); }
.hero-ask { display:none; color:#374151; margin-top:.8rem; font-size:1.15rem; max-width:34rem; }
.hero-btns { display:flex; flex-direction:column; gap:.6rem; margin-top:clamp(.5rem, 1.8svh, 1.4rem); }
.hero-btns .btn { padding-block:clamp(.55rem, 1.7svh, .95rem); }
@media (max-height:760px) { .hero-kicker { display:none; } }
@media (min-width:640px) { .hero-btns { flex-direction:row; justify-content:center; } }
@media (min-width:1024px), (max-width:1023px) and (orientation:landscape) and (min-width:560px) {
  .hero-inner { flex-direction:row; align-items:center; gap:clamp(1.5rem, 4vw, 3.5rem); }
  .hero-text { order:1; flex:1.1 1 0; text-align:left; }
  .hero-media { order:2; flex:1 1 0; align-self:stretch; min-height:0; }
  .hero-btns { justify-content:flex-start; }
  .hero-h1 { font-size: clamp(1.7rem, min(3.4vw, calc(.8rem + 4.2svh)), 4rem); }
  .hero-tag { font-size: clamp(1.05rem, min(2.2vw, calc(.5rem + 2.2svh)), 1.9rem); }
  .hero-ask { display:block; }
}
@media (min-width:1024px) and (max-height:700px) { .hero-ask { display:none; } .hero-kicker { display:none; } }
@media (max-width:1023px) and (orientation:landscape) { .hero-ask, .hero-kicker { display:none; } }

/* ---------- Plan page: consistent per-priority structure + "THE QUESTION I'LL KEEP ASKING" callout ---------- */
.q-callout { border-radius:1.25rem; padding:1.75rem; background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.q-callout::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(201,161,59,.18), transparent 60%); pointer-events:none; }
.q-callout .q-kicker { position:relative; display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:var(--goldlight, #e6c766); margin-bottom:.6rem; }
.q-callout .q-kicker svg { flex-shrink:0; }
.q-callout p { position:relative; font-size:1.3rem; font-weight:700; line-height:1.35; }
.stewardship-note { border-left:4px solid var(--sage); background:var(--sagelight, #e8efe3); border-radius:.75rem; padding:1.25rem 1.5rem; font-size:1.05rem; color:#233; margin-top:1.5rem; }

/* Bio subsections */
.bio-sub { font-weight:800; color:var(--navy); font-size:1.3rem; margin-top:1.75rem; margin-bottom:.6rem; }
.bio-sub:first-of-type { margin-top:0; }

/* Video card grid (YouTube — thumbnail links, open in new tab, no auto-loaded iframes) */
.yt-card { display:flex; flex-direction:column; border-radius:1rem; overflow:hidden; background:#0b1220; position:relative; border:2px solid var(--gold, #c9a13b); }
.yt-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; opacity:.88; flex-shrink:0; }
.yt-card .yt-play { position:absolute; top:0; left:0; right:0; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.yt-card .yt-play span { width:3.2rem; height:3.2rem; border-radius:9999px; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.yt-card .yt-cap { flex:1; display:flex; align-items:center; min-height:4.3rem; padding:.8rem 1rem; background:#fff; color:#111827; font-weight:700; font-size:.98rem; line-height:1.3; }