/* ==========================================================================
   VaLIN design system -- layout & typography pass (from DESIGN.md, 2026-09-23)

   Every rule is scoped under html.vds. During review the class is added only
   when a visitor opts in with ?design=preview (see valin-site-enhancements.php);
   finalizing = adding the class for everyone. Brand stays VaLIN: Spectral
   (display) + Public Sans (body), logo-blue accent, ink text.

   Spec tokens are namespaced --ds-* because the site's existing tokens already
   use --space-N on a different (4px) scale that older CSS still references.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
html.vds {
  /* Typefaces */
  --ds-font-display: 'Spectral', Georgia, serif;
  --ds-font-body: 'Public Sans', system-ui, sans-serif;

  /* Type scale */
  --ds-text-display: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --ds-text-h2: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --ds-text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --ds-text-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --ds-text-small: 0.875rem;
  --ds-text-label: 0.8125rem;
  --ds-text-button: 0.875rem;  /* tuned down from spec 15px: uppercase + tracking read large */

  --ds-lh-display: 1.1;
  --ds-lh-heading: 1.2;
  --ds-lh-h3: 1.3;
  --ds-lh-body: 1.6;

  --ds-track-display: -0.01em;
  --ds-track-label: 0.1em;
  --ds-track-button: 0.06em;   /* tuned from spec 0.08em */
  --ds-btn-pad: 0.75rem 1.375rem; /* 12 x 22, tuned from spec 14 x 28 */

  --ds-weight-regular: 400;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /* Spacing (8px base) */
  --ds-space-1: 0.5rem;
  --ds-space-2: 1rem;
  --ds-space-3: 1.5rem;
  --ds-space-4: 2rem;
  --ds-space-5: 3rem;
  --ds-space-6: 4rem;
  --ds-space-7: 6rem;
  --ds-space-8: 8rem;
  --ds-section-pad-y: clamp(var(--ds-space-6), 8vw, var(--ds-space-8));

  /* Layout */
  --ds-container-max: 1240px;
  --ds-container-pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --ds-gutter: clamp(1.5rem, 2.5vw, 2rem);
  --ds-measure: 65ch;

  /* Radius */
  --ds-radius-button: 4px;
  --ds-radius-media: 4px;
  --ds-radius-image: 12px;

  /* Color roles (VaLIN brand) */
  --ds-color-text: var(--ink-900, #111213);
  --ds-color-text-body: var(--ink-800, #26282b);
  --ds-color-text-muted: var(--ink-600, #585c62);
  --ds-color-bg: #ffffff;
  --ds-color-bg-inverse: var(--blue-900, #0f3a45);
  --ds-color-accent: var(--blue-600, #1f7690);
  --ds-color-accent-hover: var(--blue-800, #154c5a);
  --ds-color-link: var(--blue-700, #1c6579);
  --ds-color-rule: var(--ink-200, #e0e2e4);
  --ds-rule: 1px solid var(--ds-color-rule);
  --ds-focus: var(--blue-500, #2386a6);

  /* Hand the layout tokens to WordPress's own layout engine, so Regular and
     Wide blocks, root padding and block gap all follow the spec. This also
     supersedes the 760px content-size / measure rules (Additional CSS 11-12). */
  --wp--style--global--content-size: var(--ds-container-max);
  --wp--style--global--wide-size: var(--ds-container-max);
  --wp--style--root--padding-left: var(--ds-container-pad-x);
  --wp--style--root--padding-right: var(--ds-container-pad-x);
  --wp--style--block-gap: var(--ds-space-2);
}

/* 2. BASE TYPOGRAPHY ------------------------------------------------------- */
html.vds body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-color-text-body);
  background: var(--ds-color-bg);
}
html.vds :is(h1, h2, h3, h4) { color: var(--ds-color-text); text-transform: none; }
html.vds h1,
html.vds .wp-block-post-content h2.is-style-text-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  line-height: var(--ds-lh-display);
  letter-spacing: var(--ds-track-display);
}
html.vds h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-h2);
  line-height: var(--ds-lh-heading);
  letter-spacing: var(--ds-track-display);
}
html.vds h3 {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-h3);
  line-height: var(--ds-lh-h3);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}
html.vds h3 strong { font-weight: inherit; }
html.vds .meta { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
html.vds .label {
  font-size: var(--ds-text-label);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
}

/* Body text measure: 65ch, left-aligned to the 1240px container edge (not
   centered), unless the block is explicitly centered. */
html.vds .wp-block-post-content .is-layout-constrained > :is(p, ul, ol):not(.has-text-align-center),
html.vds .wp-block-post-content.is-layout-constrained > :is(p, ul, ol):not(.has-text-align-center) {
  max-width: var(--ds-measure);
  margin-left: max(0px, (100% - var(--ds-container-max)) / 2) !important;
  margin-right: auto !important;
}
html.vds .wp-block-column > :is(p, ul, ol) { max-width: var(--ds-measure); }

/* 3. VERTICAL RHYTHM ------------------------------------------------------- */
/* One source of truth: block-gap (16px, paragraph to paragraph) plus these
   relationship rules. Replaces the older "spacing refresh" margins. */
html.vds .wp-block-post-content h2 { margin-top: var(--ds-space-6); margin-bottom: 0; }
html.vds .wp-block-post-content h3 { margin-top: var(--ds-space-4); margin-bottom: 0; }
html.vds .wp-block-post-content :is(h2, h3):first-child { margin-top: 0; }
html.vds .wp-block-post-content :is(h1, h2, h3) + * { margin-top: var(--ds-space-3) !important; }
html.vds .wp-block-post-content * + .wp-block-buttons { margin-top: var(--ds-space-4) !important; }
html.vds .wp-block-post-content .label + :is(h1, h2, h3) { margin-top: var(--ds-space-1) !important; }
html.vds .wp-block-post-content .wp-block-image { margin-top: var(--ds-space-4); margin-bottom: 0; }
html.vds .wp-block-post-content li { margin-bottom: var(--ds-space-1); line-height: var(--ds-lh-body); }
html.vds .wp-block-post-content .wp-block-separator { margin: var(--ds-space-5) 0; border: 0; border-top: var(--ds-rule); opacity: 1; }
html.vds .wp-block-columns { gap: var(--ds-gutter); }

/* Full-width sections: the same padding everywhere, overriding one-off inline
   padding so sections don't stack their own extra spacing. The hero keeps its
   own dedicated sizing. */
html.vds .wp-block-post-content > .alignfull.has-background:not(.valin-hero) {
  padding-top: var(--ds-section-pad-y) !important;
  padding-bottom: var(--ds-section-pad-y) !important;
}
/* Plain (no background) groups are layout wrappers, not sections: drop any
   per-page horizontal padding so their content aligns to the container edge
   instead of being inset. Groups with a background (callouts, bands) keep
   their inner padding. */
html.vds .wp-block-post-content .wp-block-group:not(.has-background):not(.alignfull):not(.valin-hero):not([class*="is-style-section"]):not(.valin-card):not(.valin-hero-inner):not(.valin-section-head) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Inline callouts (a background group sitting in the text flow) follow the
   reading measure too, left-aligned with the text around them. */
html.vds .wp-block-post-content .is-layout-constrained > .wp-block-group.has-background:not(.alignfull):not(.alignwide),
html.vds .wp-block-post-content .is-layout-constrained > .wp-block-group[class*="is-style-section"]:not(.alignfull):not(.alignwide) {
  max-width: calc(var(--ds-measure) + 4rem);
  margin-left: max(0px, (100% - var(--ds-container-max)) / 2) !important;
  margin-right: auto !important;
}
/* Stacked column rows (e.g. two rows of cards) get a real row gap. */
html.vds .wp-block-post-content .wp-block-columns + .wp-block-columns { margin-top: var(--ds-space-5) !important; }

/* 4. BUTTONS & TEXT LINKS -------------------------------------------------- */
/* Primary button (.btn): every filled button on the site. */
html.vds .wp-block-button .wp-block-button__link,
html.vds .valin-btn,
html.vds .vc-resource-submit-btn,
html.vds .vc-resource-form button[type="submit"],
html.vds .wp-block-post-content form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  min-height: 44px;
  padding: var(--ds-btn-pad) !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-button) !important;
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-track-button);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: #ffffff !important;
  background: var(--ds-color-accent) !important;
  border: 0;
  border-radius: var(--ds-radius-button) !important;
  box-shadow: none;
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 150ms ease, color 150ms ease;
}
html.vds .wp-block-button .wp-block-button__link:hover,
html.vds .valin-btn:hover,
html.vds .vc-resource-submit-btn:hover,
html.vds .vc-resource-form button[type="submit"]:hover,
html.vds .wp-block-post-content form button[type="submit"]:hover {
  color: #ffffff !important;
  background: var(--ds-color-accent-hover) !important;
  box-shadow: none;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.vds .vc-resources-toolbar .vc-resource-submit-btn { height: 44px; min-height: 44px; padding: 0 1.25rem !important; white-space: nowrap; flex: 0 0 auto; }
html.vds .vc-resource-submit-btn svg { display: none; }

@media (max-width: 599px) {
  html.vds .wp-block-button .wp-block-button__link, html.vds .valin-btn { white-space: normal; text-align: center; }
}

/* Primary on the dark hero: white fill, dark text. */
html.vds .valin-hero .valin-btn.valin-btn--primary { background: #ffffff !important; color: var(--ds-color-bg-inverse) !important; }
html.vds .valin-hero .valin-btn.valin-btn--primary:hover { background: var(--blue-100, #e2f0f5) !important; color: var(--ds-color-bg-inverse) !important; }

/* Text link CTA (.btn-text): secondary / outline buttons and "Visit"-style
   repeats. One primary per section; everything else reads as a link. */
html.vds .btn-text,
html.vds .valin-btn.valin-btn--secondary,
html.vds .valin-btn.valin-btn--ghost,
html.vds .wp-block-button[class*="is-style-outline"] .wp-block-button__link,
html.vds .vc-resource-card__open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-button) !important;
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-track-button);
  text-transform: uppercase;
  color: var(--ds-color-link) !important;
  background: none !important;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--blue-300, #84bfd4);
  text-underline-offset: 6px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
html.vds .btn-text:hover,
html.vds .valin-btn.valin-btn--secondary:hover,
html.vds .valin-btn.valin-btn--ghost:hover,
html.vds .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover,
html.vds .vc-resource-card__open:hover {
  color: var(--ds-color-accent-hover) !important;
  background: none !important;
  text-decoration-color: currentColor;
  box-shadow: none;
}
html.vds .valin-btn.valin-btn--on-dark,
html.vds .wp-block-button[class*="is-style-outline"] .wp-block-button__link.valin-btn--on-dark { color: #ffffff !important; text-decoration-color: rgba(255,255,255,0.5); }
html.vds .valin-btn.valin-btn--on-dark:hover,
html.vds .wp-block-button[class*="is-style-outline"] .wp-block-button__link.valin-btn--on-dark:hover { color: #ffffff !important; text-decoration-color: #ffffff; }
html.vds .vc-resource-card__open svg { display: none; }

/* 5. FOCUS ----------------------------------------------------------------- */
html.vds :focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; }
html.vds .valin-hero :focus-visible { outline-color: #ffffff; }

/* 6. HERO ------------------------------------------------------------------ */
/* Two-line statement / response headline, then a 1px rule, then body. */
html.vds .valin-hero-inner { max-width: 760px; }
html.vds .valin-hero-heading {
  padding-bottom: var(--ds-space-4);
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
html.vds .valin-hero-heading,
html.vds .valin-hero-heading em { color: #ffffff; }
html.vds .valin-hero-heading em { color: var(--blue-200, #bcdce8); }
html.vds .valin-hero-sub { margin-top: var(--ds-space-4) !important; font-size: var(--ds-text-body); max-width: var(--ds-measure); }
html.vds .valin-hero .wp-block-buttons { margin-top: var(--ds-space-4) !important; gap: var(--ds-space-4); align-items: center; }

/* 7. SECTION HEADER (title left, text-link CTA right, baseline aligned) ---- */
html.vds .valin-section-head { align-items: baseline !important; gap: var(--ds-space-2) var(--ds-space-4); }
html.vds .wp-block-post-content .valin-section-head > * { margin-top: 0 !important; }
html.vds .valin-section-head + * { margin-top: var(--ds-space-5) !important; }
@media (max-width: 767px) {
  html.vds .valin-section-head { flex-direction: column; align-items: flex-start !important; }
}

/* 8. COHORT CARDS (home, row of 3): article-card pattern -------------------- */
/* 16:9 media, title link, excerpt; the whole card is clickable through one
   stretched link (the title), and there is no arrow glyph on the link. */
html.vds .valin-cohort-col { position: relative; display: flex; flex-direction: column; }
html.vds .valin-cohort-col .wp-block-image { margin: 0 0 var(--ds-space-3); }
html.vds .valin-cohort-col .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: var(--ds-radius-image); }
html.vds .valin-cohort-col h3 { margin-top: 0 !important; }
html.vds .valin-cohort-col h3 + p { margin-top: var(--ds-space-2) !important; color: var(--ds-color-text-muted); }
html.vds .valin-cohort-col h3 a { color: var(--ds-color-text); text-decoration: none; }
html.vds .valin-cohort-col h3 a::after { content: ""; position: absolute; inset: 0; margin: 0; transform: none; }
html.vds .valin-cohort-col:hover h3 a { color: var(--ds-color-link); text-decoration: underline; text-decoration-color: var(--blue-300, #84bfd4); text-underline-offset: 4px; }
html.vds .valin-cohort-col h3 a:focus-visible { outline: none; }
html.vds .valin-cohort-col:has(h3 a:focus-visible) { outline: 2px solid var(--ds-focus); outline-offset: 6px; border-radius: var(--ds-radius-media); }
/* 3 -> 2 -> 1 */
@media (min-width: 600px) and (max-width: 1023px) {
  html.vds .wp-block-columns:has(> .valin-cohort-col) { flex-wrap: wrap !important; }
  html.vds .wp-block-columns:has(> .valin-cohort-col) > .valin-cohort-col { flex-basis: calc(50% - var(--ds-gutter) / 2) !important; flex-grow: 0; }
}
@media (max-width: 599px) {
  html.vds .wp-block-columns:has(> .valin-cohort-col) > .valin-cohort-col { flex-basis: 100% !important; }
}

/* 9. RESOURCE CARDS: article cards, hierarchy from type and spacing --------- */
/* No lift or drop shadow; a quiet border, 4px corners, CTA pinned to bottom. */
html.vds .vc-resources { --vc-line: var(--ds-color-rule); }
html.vds .vc-resource-items { gap: var(--ds-gutter); }
html.vds .vc-resource-card { border-radius: var(--ds-radius-media); padding: var(--ds-space-3); gap: var(--ds-space-2); box-shadow: none; }
html.vds .vc-resource-card:hover { transform: none; box-shadow: none; border-color: var(--blue-300, #84bfd4); }
html.vds .vc-resource-card__title { font-size: var(--ds-text-h3); line-height: var(--ds-lh-h3); font-weight: var(--ds-weight-semibold); margin-top: 0 !important; }
html.vds .vc-resource-card__desc { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
html.vds .vc-resource-card__open { margin-top: auto; font-size: var(--ds-text-label); }
html.vds .vc-tag-type { font-size: var(--ds-text-label); letter-spacing: var(--ds-track-label); color: var(--ds-color-text-muted); }
html.vds .vc-resources-toolbar { border-radius: var(--ds-radius-media); box-shadow: none; }
html.vds .vc-resources-toolbar :is(input[type="search"], select) { border-radius: var(--ds-radius-button); }
html.vds .vc-resource-group__title { font-family: var(--ds-font-display); font-size: var(--ds-text-h3); font-weight: var(--ds-weight-semibold); border-bottom: var(--ds-rule); }
html.vds .vc-resource-group { margin-top: var(--ds-space-6); }
@media (max-width: 767px) {
  html.vds .vc-resources-toolbar .vc-resource-submit-btn { box-sizing: border-box; width: 100%; flex: 1 1 100%; margin-left: 0; }
}

/* 10. LOGO STRIP (home "Our Partners"): small label heading, grayscale, ---- */
/* equal visual height, single row that wraps on mobile. */
html.vds .wp-block-post-content h2:has(+ .wp-block-columns .wp-block-image.size-thumbnail) {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-label);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-color-text-muted);
}
html.vds .wp-block-post-content h2:has(+ .wp-block-columns .wp-block-image.size-thumbnail) strong { font-weight: inherit; }
html.vds .wp-block-columns:has(.wp-block-image.size-thumbnail) {
  display: flex; flex-wrap: wrap !important; align-items: center; gap: var(--ds-space-5);
}
html.vds .wp-block-columns:has(.wp-block-image.size-thumbnail) > .wp-block-column { flex: 0 0 auto !important; width: auto; }
html.vds .wp-block-columns:has(.wp-block-image.size-thumbnail) .wp-block-image { margin: 0; }
html.vds .wp-block-columns:has(.wp-block-image.size-thumbnail) img {
  height: 48px; width: auto; max-width: 180px; object-fit: contain;
  filter: grayscale(1); opacity: 0.75; transition: filter 150ms ease, opacity 150ms ease;
}
html.vds .wp-block-columns:has(.wp-block-image.size-thumbnail) img:hover { filter: none; opacity: 1; }

/* Program Description row: text left, video right. */
html.vds .valin-program-row .wp-block-embed { margin: 0; }
html.vds .valin-program-row .wp-block-embed iframe { border-radius: var(--ds-radius-media); }
html.vds .valin-program-row > .wp-block-column > h2:first-child { margin-top: 0; }

/* 11. MEDIA ---------------------------------------------------------------- */
html.vds .wp-block-post-content .wp-block-image img { border-radius: var(--ds-radius-image); }

/* 12. MOTION --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.vds *, html.vds *::before, html.vds *::after { transition: none !important; animation: none !important; }
}

/* 13. PREVIEW TAG (review only; removed on finalize) ----------------------- */
.vds-preview-tag {
  position: fixed; left: 16px; bottom: 16px; z-index: 100000;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 4px;
  background: #111213; color: #fff;
  font: 600 13px/1.2 'Public Sans', system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.vds-preview-tag a { color: #bcdce8; text-decoration: underline; text-underline-offset: 3px; }

/* 14. IMPACT STATS (page 11, /impact) -------------------------------------- */
/* Big-number callouts: 3 across on desktop, 2 on tablet, 1 on phone. */
html.vds .valin-impact-intro { font-size: calc(var(--ds-text-body) * 1.08); max-width: var(--ds-measure); }
html.vds .valin-impact-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-gutter); margin-top: var(--ds-space-5) !important;
}
html.vds .valin-impact-stats > .valin-stat {
  margin: 0 !important; padding-top: var(--ds-space-4);
  border-top: 3px solid var(--ds-color-accent);
}
html.vds .valin-stat__num {
  margin: 0 !important; font-family: var(--ds-font-display);
  font-size: var(--ds-text-display); line-height: var(--ds-lh-display);
  letter-spacing: var(--ds-track-display); font-weight: var(--ds-weight-semibold);
  color: var(--ds-color-accent);
}
html.vds .valin-stat__label {
  margin: var(--ds-space-1) 0 0 !important; color: var(--ds-color-text-body);
  font-size: var(--ds-text-small); line-height: 1.45;
}
html.vds .valin-impact-source {
  margin-top: var(--ds-space-4) !important;
  font-size: var(--ds-text-label); color: var(--ds-color-text-muted);
}
html.vds .valin-impact-stats + h2 { margin-top: var(--ds-space-6) !important; }
@media (max-width: 900px) { html.vds .valin-impact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { html.vds .valin-impact-stats { grid-template-columns: 1fr; } }