/* site.css — shared base, theme tokens, hover states, responsive rules.
   Loaded after colors_and_type.css. The whole site can switch between Light,
   Neutral, and Dark via html[data-theme] without touching the locked brand colors. */

/* ---------- THEME TOKENS ---------- */
:root {
  --page: var(--paper);        /* base page + default section surface */
  --panel: var(--surface);     /* alternating panel / card-on-page */
  --card-bg: #ffffff;          /* elevated card surface */
  --text: var(--ink);          /* primary heading/text on page */
  --text-soft: var(--ink-70);  /* secondary/body text on page */
  --deep-teal: #0c3a47;        /* darker teal section (e.g. endorsements) */
  --header-bg: rgba(255,255,254,.92);
}
html[data-theme="neutral"] {
  --page: #e8edef;        /* cool light gray — base */
  --panel: #d8e6e8;       /* lightened teal — section B */
  --card-bg: #ffffff;     /* white cards lift off tinted sections */
  --surface: #e2eaeb;     /* mid teal-gray accent */
  --line: #ccd8da;        /* cool hairline */
  --header-bg: rgba(232,237,239,.93);
}
html[data-theme="dark"] {
  --page: #061f27;
  --panel: #0b2c35;
  --card-bg: #0f3742;
  --surface: #16404c;
  --text: #f1f7f8;
  --text-soft: rgba(223,237,239,.72);
  --ink-40: #6f8a90;
  --line: rgba(255,255,255,.13);
  --header-bg: rgba(6,31,39,.9);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
html, body { margin: 0; }
body {
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  transition: background .25s ease;
  overflow-x: clip;            /* safety net — no horizontal page scroll from any overflowing child */
}
a { color: inherit; }
img { max-width: 100%; }

/* Long words / proper nouns can wrap mid-character when narrower than container.
   Keeps headlines and body copy from forcing horizontal overflow on narrow phones. */
h1, h2, h3, h4, h5, h6, p, blockquote, li { overflow-wrap: break-word; word-break: normal; }

/* ---------- BUTTONS ---------- */
.jv-btn:active { transform: translateY(1px); }
.jv-btn--primary:hover { background: #c10018 !important; }
.jv-btn--ink:hover { background: #0a3a47 !important; }
.jv-btn--outline:hover { background: var(--accent-2) !important; color: #fff !important; }
.jv-btn--ghost:hover { color: #c10018 !important; }

/* ---------- NAV + CARDS ---------- */
.jv-navlink { transition: color .15s ease, border-color .15s ease; }
.jv-card { transition: transform .18s ease, box-shadow .18s ease; }
.jv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---------- HERO TEXT LEGIBILITY ----------
   Display headline gets NO blur — a soft halo would round Staatliches' square
   terminals, which the brand never does. Only body/tagline lines carry shadow. */
.jv-herotext h1 { text-shadow: none; }
.jv-herotext p,
.jv-herotext > div:first-child,
.jv-herotext > div > div:first-child {
  text-shadow: 0 1px 12px rgba(4,41,50,.6), 0 1px 2px rgba(4,41,50,.45);
}

/* ---------- SCROLL REVEAL ---------- */
.jv-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.jv-reveal.jv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jv-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- FEATURED QUOTE CAROUSEL ----------
   Rotating band used when a featured-quote spot holds more than one quote
   (FeaturedQuoteCarousel). Horizontal slide: the outgoing quote swipes out to
   the left while the incoming quote slides in from the right (directions flip
   when going backward). The circular prev/next controls lighten on hover.
   Under prefers-reduced-motion the slide is disabled — the outgoing overlay is
   hidden and the new quote simply swaps in. */
@keyframes jvSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes jvSlideInLeft  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes jvSlideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes jvSlideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.jv-slide-in-right { animation: jvSlideInRight .5s ease both; }
.jv-slide-in-left { animation: jvSlideInLeft .5s ease both; }
.jv-slide-out-left { animation: jvSlideOutLeft .5s ease both; }
.jv-slide-out-right { animation: jvSlideOutRight .5s ease both; }
.jv-carousel-arrow { transition: background .2s ease, border-color .2s ease; }
.jv-carousel-arrow:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.65); }
/* Motion-sensitive visitors get an instant swap instead of the horizontal
   slide (the quote still changes; the overlay just doesn't animate across). */
@media (prefers-reduced-motion: reduce) {
  .jv-slide-in-right, .jv-slide-in-left { animation: none; }
  .jv-slide-out-left, .jv-slide-out-right { display: none; }
}

/* ---------- RESPONSIVE ---------- */
.jv-nav-mobile-trigger { display: none; }

@media (max-width: 900px) {
  .jv-grid-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 1000px) {
  .jv-nav-desktop { display: none !important; }
  .jv-nav-mobile-trigger { display: inline-flex !important; }
}
@media (max-width: 860px) {
  .jv-grid-3 { grid-template-columns: 1fr !important; }
  .jv-hero-split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .jv-herosplit-full { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .jv-herosplit-full > div:first-child { height: 440px; }
  .jv-herosplit-full > div:last-child { padding: 40px 28px 52px !important; }
  .jv-hero-photo { object-position: center 18% !important; }
  .jv-about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .jv-featend { grid-template-columns: 1fr !important; gap: 34px !important; }
  .jv-footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .jv-timeline-row { grid-template-columns: 1fr !important; gap: 4px !important; }
}
/* Trust bar now flex-wraps its own values naturally; no column override needed
   (the old rule was scoped to the prior icon+long-text version). */

/* July t-shirt promo banner (staged). Desktop: horizontal scrim, copy left.
   Mobile: shorter, stronger top-to-bottom scrim so copy stays legible over the
   photo and the crop rides a touch higher to keep the supporter in frame. */
.jv-tshirt-banner { min-height: 430px; }
@media (max-width: 760px) {
  .jv-tshirt-banner { min-height: 360px; }
  .jv-tshirt-photo { background-position: center 28% !important; }
  .jv-tshirt-scrim { background: linear-gradient(180deg, rgba(4,41,50,.5) 0%, rgba(4,41,50,.84) 100%) !important; }
  .jv-tshirt-copy { padding: 30px 0 !important; }
}

/* Judicial endorsers grid on the endorsements page collapses 3 → 2 → 1. */
@media (max-width: 860px) {
  .jv-judge-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px) {
  .jv-judge-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .jv-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .jv-record-list { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .jv-grid-4 { grid-template-columns: 1fr !important; }
  .jv-footer-legal { flex-direction: column; }
}

/* Tight mobile — extra breathing room on real phone widths.
   Reduces the hero text section padding so VALENTINE has more room.
   Hero photo height stays generous to keep Judge Valentine's face safely
   inside the crop on portrait phones. */
@media (max-width: 480px) {
  .jv-herosplit-full > div:first-child { height: 400px; }
  .jv-herosplit-full > div:last-child { padding: 32px 18px 44px !important; }
  .jv-herotext { padding-left: 0 !important; padding-right: 0 !important; }
  .jv-hero-photo { object-position: center 22% !important; }
}

/* Visually hidden, but read by screen readers and indexed by search engines.
   Lets us put descriptive keyword-rich text inside short, branded headings
   without changing the visual design. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}