/*
Theme Name:  CVF Editorial
Theme URI:   https://clinicallyvulnerable.org
Description: Clinically Vulnerable Families visual system — editorial child theme for GeneratePress. Colour tokens, typography, buttons, cards, header, footer, scroll-reveal, card bounce and parallax.
Author:      Clinically Vulnerable Families
Template:    generatepress
Version:     1.0.0
Text Domain: cvf-editorial
*/

/* =============================================================================
   0. FONTS (self-hosted, variable)
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-latin.woff2") format("woff2-variations"),
       url("fonts/PlusJakartaSans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-latin-italic.woff2") format("woff2-variations"),
       url("fonts/PlusJakartaSans-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSerif4-latin.woff2") format("woff2-variations"),
       url("fonts/SourceSerif4-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSerif4-latin-italic.woff2") format("woff2-variations"),
       url("fonts/SourceSerif4-latin-italic.woff2") format("woff2");
}

/* =============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette */
  --cvf-mauve:        #E0B9E3;
  --cvf-mauve-soft:   #F3E6F4;   /* tint for large calm surfaces */
  --cvf-mauve-ink:    #8A4690;   /* mauve family dark enough for text on white (6:1) */
  --cvf-pink:         #B957B8;   /* CVF pink — Donate actions (white text ~4.1:1; borderline AA for normal text, passes for bold/large) */
  --cvf-pink-dark:    #9A3F9B;   /* Donate hover: darker pink, white text stays ~5.1:1 */
  --cvf-plum:         #4A254A;
  --cvf-plum-deep:    #35193A;   /* footer bottom bar */
  --cvf-navy:         #17304A;
  --cvf-navy-deep:    #0F2236;
  --cvf-warm-white:   #FAF9F6;
  --cvf-white:        #FFFFFF;
  --cvf-grey:         #E8E6EB;
  --cvf-grey-tint:    #F2F0F4;
  --cvf-ink-2:        #4B5563;   /* secondary body text on light surfaces */

  /* Typography */
  --cvf-font-sans:  "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cvf-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --cvf-text-display: clamp(2.5rem, 1.6rem + 3vw, 4rem);          /* 40 → 64 */
  --cvf-text-h1:      clamp(2.125rem, 1.6rem + 1.8vw, 3rem);      /* 34 → 48 */
  --cvf-text-h2:      clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);    /* 28 → 36 */
  --cvf-text-h3:      clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);    /* 20 → 24 */
  --cvf-text-h4:      clamp(1.1rem,  1rem + 0.4vw,   1.3rem);
  --cvf-text-body:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 → 19 */
  --cvf-text-small:   0.875rem;                                    /* 14 */
  --cvf-text-eyebrow: 0.75rem;                                     /* 12 */
  --cvf-leading-tight: 1.05;
  --cvf-leading-body:  1.6;
  --cvf-tracking-tight: -0.025em;
  --cvf-tracking-caps:  0.14em;

  /* Spacing */
  --cvf-space-1: 0.25rem;
  --cvf-space-2: 0.5rem;
  --cvf-space-3: 0.75rem;
  --cvf-space-4: 1rem;
  --cvf-space-5: 1.5rem;
  --cvf-space-6: 2rem;
  --cvf-space-7: 3rem;
  --cvf-space-8: 4rem;
  --cvf-space-9: 6rem;
  --cvf-section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --cvf-gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* Layout */
  --cvf-container:      1200px;
  --cvf-container-wide: 1320px;
  --cvf-measure:        66ch;
  --cvf-measure-wide:   760px;

  /* Shape */
  --cvf-radius-sm: 6px;
  --cvf-radius:    12px;
  --cvf-radius-lg: 20px;
  --cvf-radius-pill: 999px;
  --cvf-border:    1px solid var(--cvf-grey);

  /* Elevation */
  --cvf-shadow-sm: 0 1px 2px rgba(23, 48, 74, 0.06), 0 2px 8px rgba(23, 48, 74, 0.05);
  --cvf-shadow:    0 6px 18px rgba(23, 48, 74, 0.10), 0 2px 6px rgba(23, 48, 74, 0.06);
  --cvf-shadow-lg: 0 24px 48px rgba(23, 48, 74, 0.16), 0 6px 14px rgba(23, 48, 74, 0.08);

  /* Motion */
  --cvf-dur-fast:   180ms;
  --cvf-dur:        320ms;
  --cvf-dur-reveal: 780ms;
  --cvf-ease:        cubic-bezier(0.22, 1, 0.36, 1);      /* smooth, natural settle */
  --cvf-ease-bounce: cubic-bezier(0.34, 1.45, 0.64, 1);   /* slight overshoot */
  --cvf-reveal-y:    40px;
  --cvf-stagger:     90ms;
  --cvf-parallax:    0.28;   /* relative movement of parallax images (0–1) */

  /* Breakpoints (reference only — CSS can't use vars in @media)
     375 / 390 / 430 / 768 / 1024 / 1280 / 1440 */

  /* Map GeneratePress global colours onto the palette so existing
     block colour classes (has-contrast-background-color etc.) pick it up. */
  --contrast:   var(--cvf-navy);
  --contrast-2: var(--cvf-ink-2);
  --contrast-3: #8B8F9A;
  --base:       var(--cvf-warm-white);
  --base-2:     var(--cvf-mauve);
  --base-3:     var(--cvf-white);
  --base-4:     var(--cvf-grey-tint);
  --accent:     var(--cvf-plum);
  --accent-2:   var(--cvf-mauve-ink);
}

/* Force the same values on WP's preset variables (GP writes these inline). */
html:root {
  --wp--preset--color--contrast: var(--cvf-navy);
  --wp--preset--color--contrast-2: var(--cvf-ink-2);
  --wp--preset--color--base: var(--cvf-warm-white);
  --wp--preset--color--base-2: var(--cvf-mauve);
  --wp--preset--color--base-3: var(--cvf-white);
  --wp--preset--color--base-4: var(--cvf-grey-tint);
  --wp--preset--color--accent: var(--cvf-plum);
  --wp--preset--color--accent-2: var(--cvf-mauve-ink);
}
:root .has-contrast-background-color { background-color: var(--cvf-navy); }
:root .has-base-2-background-color   { background-color: var(--cvf-mauve); }
:root .has-base-4-background-color   { background-color: var(--cvf-grey-tint); }
:root .has-accent-background-color   { background-color: var(--cvf-plum); }
:root .has-base-color   { color: var(--cvf-warm-white); }
:root .has-accent-color { color: var(--cvf-plum); }

/* =============================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--cvf-warm-white);
  color: var(--cvf-navy);
  font-family: var(--cvf-font-sans);
  font-size: var(--cvf-text-body);
  line-height: var(--cvf-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body, p, li, a, input, textarea, button, select, figcaption, .site-logo, .wp-block-buttons {
  font-family: var(--cvf-font-sans);
}

h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title {
  font-family: var(--cvf-font-sans);
  color: var(--cvf-navy);
  font-weight: 700;
  line-height: var(--cvf-leading-tight);
  letter-spacing: var(--cvf-tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--cvf-text-h1); font-weight: 800; }
h2 { font-size: var(--cvf-text-h2); font-weight: 800; }
h3 { font-size: var(--cvf-text-h3); line-height: 1.15; }
h4 { font-size: var(--cvf-text-h4); line-height: 1.25; letter-spacing: -0.01em; }
h5, h6 { font-size: 1rem; letter-spacing: 0; }

.cvf-display, h1.cvf-display { font-size: var(--cvf-text-display); font-weight: 800; line-height: 1.0; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cvf-plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(74, 37, 74, 0.45); transition: color var(--cvf-dur-fast) ease, text-decoration-color var(--cvf-dur-fast) ease; }
a:hover, a:focus { color: var(--cvf-navy); text-decoration-color: var(--cvf-mauve-ink); }
.entry-title a, .site-branding a, a.button, .wp-block-button__link, .main-navigation a, .wp-block-post-title a { text-decoration: none; }

strong, b { font-weight: 700; }
small, .cvf-small { font-size: var(--cvf-text-small); }

::selection { background: var(--cvf-mauve); color: var(--cvf-navy); }

/* Editorial helpers */
.cvf-eyebrow {
  display: block;
  font-size: var(--cvf-text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--cvf-tracking-caps);
  text-transform: uppercase;
  color: var(--cvf-mauve-ink);
  margin: 0 0 var(--cvf-space-4);
}
.cvf-dark .cvf-eyebrow, .cvf-plum .cvf-eyebrow, .has-contrast-background-color .cvf-eyebrow { color: var(--cvf-mauve); }
.cvf-lead, .cvf-lead p { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); line-height: 1.45; font-weight: 400; color: var(--cvf-navy); }
.cvf-muted, .cvf-meta { color: var(--cvf-ink-2); }
.cvf-meta { font-size: var(--cvf-text-small); font-weight: 500; letter-spacing: 0.01em; }
.cvf-rule { width: 56px; height: 4px; background: var(--cvf-mauve-ink); border-radius: 2px; border: 0; margin: var(--cvf-space-5) 0; }
.cvf-dark .cvf-rule, .cvf-plum .cvf-rule { background: var(--cvf-mauve); }

/* Reading measure for flowing content (editorial line-length) */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > .wp-block-buttons,
.wp-block-group__inner-container > p,
.wp-block-group__inner-container > ul,
.wp-block-group__inner-container > ol,
.wp-block-group__inner-container > h2,
.wp-block-group__inner-container > h3 {
  max-width: var(--cvf-measure-wide);
}
.entry-content > .wp-block-buttons p { max-width: none; }
.entry-content > h2 { margin-top: 1.6em; }
.entry-content > h3 { margin-top: 1.3em; }
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content li { margin-bottom: 0.45em; }
.entry-content li::marker { color: var(--cvf-mauve-ink); }

/* Pull quotes — serif italic, mauve panel */
.wp-block-quote, .wp-block-pullquote, .cvf-quote {
  font-family: var(--cvf-font-serif);
  font-style: italic;
  font-weight: 450;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.4;
  color: var(--cvf-navy);
  background: var(--cvf-mauve);
  border: 0;
  border-left: 0;
  border-radius: var(--cvf-radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin: var(--cvf-space-7) 0;
  position: relative;
}
.wp-block-quote::before, .wp-block-pullquote::before, .cvf-quote::before {
  content: "\201C";
  position: absolute;
  top: 0.35em; left: 0.55em;
  font-family: var(--cvf-font-serif);
  font-size: 3em;
  line-height: 1;
  color: var(--cvf-mauve-ink);
  opacity: 0.55;
}
.wp-block-quote p, .wp-block-pullquote p, .cvf-quote p { margin: 0 0 0.6em; padding-left: 1.2em; }
.wp-block-quote cite, .wp-block-pullquote cite, .cvf-quote cite, .wp-block-quote .wp-block-quote__citation {
  display: block;
  font-family: var(--cvf-font-sans);
  font-style: normal;
  font-size: var(--cvf-text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cvf-plum);
  padding-left: 1.2em;
  margin-top: 0.4em;
}
.wp-block-quote cite::before { content: "\2014\00a0"; }
.cvf-dark .wp-block-quote, .cvf-plum .wp-block-quote { background: rgba(224,185,227,0.14); color: var(--cvf-white); }
.cvf-dark .wp-block-quote cite, .cvf-plum .wp-block-quote cite { color: var(--cvf-mauve); }

/* =============================================================================
   3. LAYOUT / CONTAINERS / SECTIONS
   ========================================================================== */
.grid-container, .wp-block-group__inner-container, .wp-block-group.is-layout-constrained > * {
  max-width: var(--cvf-container);
}
.site-content { padding-top: 0; }
.one-container .site-content { padding: 0; }
.separate-containers .inside-article, .one-container .inside-article { padding: 0; }
.one-container.no-sidebar .site-main { margin: 0; }
.entry-content { margin-top: 0; }

/* Non-full-width children get the standard gutter so alignfull blocks can bleed */
.entry-content > :not(.alignfull) {
  max-width: var(--cvf-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cvf-gutter);
  padding-right: var(--cvf-gutter);
  box-sizing: border-box;
}
.entry-content > .alignwide { max-width: var(--cvf-container-wide); }
.entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > blockquote, .entry-content > .wp-block-buttons {
  /* keep the measure but left-align to the container edge */
  margin-left: auto; margin-right: auto;
  max-width: var(--cvf-container);
}
.entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > blockquote {
  /* inner measure via padding trick: constrain text width inside the container */
  --measure-pad: max(var(--cvf-gutter), calc(100% - var(--cvf-measure-wide) - var(--cvf-gutter)));
  padding-right: var(--measure-pad);
}
.entry-content > .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry-content > .alignfull > .wp-block-group__inner-container { padding-left: var(--cvf-gutter); padding-right: var(--cvf-gutter); }

/* Quote / pullquote blocks carry their own background, so align their box (not their padding) with the container */
.entry-content > blockquote.wp-block-quote, .entry-content > .wp-block-pullquote {
  width: min(calc(100% - 2 * var(--cvf-gutter)), calc(var(--cvf-container) - 2 * var(--cvf-gutter)));
  max-width: var(--cvf-measure-wide);
  margin-left: auto; margin-right: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (min-width: 1024px) {
  .entry-content > blockquote.wp-block-quote, .entry-content > .wp-block-pullquote { margin-left: max(var(--cvf-gutter), calc((100% - var(--cvf-container)) / 2 + var(--cvf-gutter))); }
}

/* Section rhythm utilities (add as "Additional CSS class" on Group blocks) */
.cvf-section { padding-top: var(--cvf-section-y); padding-bottom: var(--cvf-section-y); }
.cvf-section-sm { padding-top: calc(var(--cvf-section-y) * 0.6); padding-bottom: calc(var(--cvf-section-y) * 0.6); }
.cvf-section-flush { padding-top: 0; padding-bottom: 0; }
.entry-content > .cvf-section + .cvf-section { margin-top: 0; }
.entry-content > .alignfull + .alignfull { margin-top: 0; }

/* Coloured surfaces */
.cvf-mauve { background-color: var(--cvf-mauve); color: var(--cvf-navy); }
.cvf-mauve-soft { background-color: var(--cvf-mauve-soft); color: var(--cvf-navy); }
.cvf-warm { background-color: var(--cvf-warm-white); color: var(--cvf-navy); }
.cvf-white { background-color: var(--cvf-white); color: var(--cvf-navy); }
.cvf-grey { background-color: var(--cvf-grey-tint); color: var(--cvf-navy); }
.cvf-dark { background-color: var(--cvf-navy) !important; color: var(--cvf-warm-white); }
.has-contrast-background-color { color: var(--cvf-warm-white); }
.cvf-plum { background-color: var(--cvf-plum) !important; color: var(--cvf-warm-white); }
.cvf-mauve, .cvf-mauve-soft, .cvf-warm, .cvf-white, .cvf-grey { background-color: var(--surface) !important; }
.cvf-mauve { --surface: var(--cvf-mauve); } .cvf-mauve-soft { --surface: var(--cvf-mauve-soft); } .cvf-warm { --surface: var(--cvf-warm-white); } .cvf-white { --surface: var(--cvf-white); } .cvf-grey { --surface: var(--cvf-grey-tint); }
.cvf-mauve.has-text-color, .cvf-mauve-soft.has-text-color, .cvf-warm.has-text-color, .cvf-white.has-text-color, .cvf-grey.has-text-color { color: var(--cvf-navy) !important; }
.cvf-dark.has-text-color, .cvf-plum.has-text-color { color: var(--cvf-warm-white) !important; }

.cvf-dark h1, .cvf-dark h2, .cvf-dark h3, .cvf-dark h4,
.cvf-plum h1, .cvf-plum h2, .cvf-plum h3, .cvf-plum h4,
.has-contrast-background-color h1, .has-contrast-background-color h2, .has-contrast-background-color h3, .has-contrast-background-color h4 { color: var(--cvf-white); }
.cvf-dark p, .cvf-plum p, .has-contrast-background-color p { color: rgba(250, 249, 246, 0.9); }
.cvf-dark a:not(.wp-block-button__link), .cvf-plum a:not(.wp-block-button__link), .has-contrast-background-color a:not(.wp-block-button__link) { color: var(--cvf-mauve); text-decoration-color: rgba(224,185,227,0.5); }
.cvf-dark a:not(.wp-block-button__link):hover, .cvf-plum a:not(.wp-block-button__link):hover { color: var(--cvf-white); }
.cvf-dark li::marker, .cvf-plum li::marker { color: var(--cvf-mauve); }

/* Decorative mauve shape (add to a Group block: cvf-shape-tr / cvf-shape-bl) */
.cvf-shape-tr, .cvf-shape-bl { position: relative; overflow: hidden; isolation: isolate; }
.cvf-shape-tr::before, .cvf-shape-bl::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(220px, 34vw, 520px);
  aspect-ratio: 1;
  background: var(--cvf-mauve);
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
  opacity: 0.9;
  pointer-events: none;
}
.cvf-shape-tr::before { top: -18%; right: -10%; transform: rotate(-12deg); }
.cvf-shape-bl::before { bottom: -22%; left: -10%; transform: rotate(18deg); }
.cvf-dark.cvf-shape-tr::before, .cvf-dark.cvf-shape-bl::before, .cvf-plum.cvf-shape-tr::before, .cvf-plum.cvf-shape-bl::before { opacity: 0.22; }

/* Diagonal brush edge on a mauve/plum panel */
.cvf-brush { position: relative; }
.cvf-brush::after {
  content: "";
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 14%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
  transform: translateX(99%);
  pointer-events: none;
}

/* =============================================================================
   4. BUTTONS
   ========================================================================== */
.wp-block-button__link,
.cvf-btn,
a.button, button.button, input[type="submit"], input[type="button"],
.wp-block-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--cvf-font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  min-height: 48px;
  padding: 0.85em 1.6em;
  border-radius: var(--cvf-radius-sm);
  border: 2px solid transparent;
  background-color: var(--cvf-mauve);
  color: var(--cvf-navy) !important;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--cvf-dur-fast) var(--cvf-ease), box-shadow var(--cvf-dur-fast) var(--cvf-ease), background-color var(--cvf-dur-fast) ease, color var(--cvf-dur-fast) ease, border-color var(--cvf-dur-fast) ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--cvf-mauve);
  color: var(--cvf-navy) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.cvf-btn:hover, a.button:hover, button.button:hover, input[type="submit"]:hover {
  background-color: #D4A6D8;
  transform: translateY(-2px);
  box-shadow: var(--cvf-shadow);
}
.wp-block-button__link:active, .cvf-btn:active { transform: translateY(0); box-shadow: var(--cvf-shadow-sm); }

/* Secondary / outline */
.wp-block-button.is-style-outline .wp-block-button__link,
.cvf-btn-secondary {
  background-color: transparent;
  border-color: var(--cvf-navy);
  color: var(--cvf-navy) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.cvf-btn-secondary:hover {
  background-color: var(--cvf-navy);
  color: var(--cvf-white) !important;
  transform: translateY(-2px);
  box-shadow: var(--cvf-shadow);
}
/* Outline on dark surfaces */
.cvf-dark .wp-block-button.is-style-outline .wp-block-button__link,
.cvf-plum .wp-block-button.is-style-outline .wp-block-button__link,
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255,255,255,0.85);
  color: var(--cvf-white) !important;
  background: transparent;
}
.cvf-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cvf-plum .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--cvf-white);
  color: var(--cvf-navy) !important;
}
/* Plum (tertiary, for Donate-type emphasis) */
.cvf-btn-plum, .wp-block-button.is-style-cvf-plum .wp-block-button__link { background-color: var(--cvf-plum) !important; color: var(--cvf-white) !important; }
.cvf-btn-plum:hover, .wp-block-button.is-style-cvf-plum .wp-block-button__link:hover { background-color: var(--cvf-navy) !important; }

.wp-block-buttons { gap: 0.75rem; }
.wp-block-button__link::after, .cvf-btn::after { content: "\2192"; font-weight: 700; margin-left: 0.2em; transition: transform var(--cvf-dur-fast) var(--cvf-ease); }
.wp-block-button__link:hover::after, .cvf-btn:hover::after { transform: translateX(3px); }
.wp-block-button.cvf-no-arrow .wp-block-button__link::after { content: none; }

/* Text link with arrow */
.cvf-link, .cvf-arrow-link, .entry-content > p > a:only-child {
  font-weight: 700;
  color: var(--cvf-mauve-ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35em;
}
.cvf-link:hover, .cvf-arrow-link:hover, .entry-content > p > a:only-child:hover { color: var(--cvf-navy); text-decoration: underline; }

/* Focus */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cvf-mauve-ink);
  outline-offset: 3px;
  border-radius: var(--cvf-radius-sm);
}
.cvf-dark :focus-visible, .cvf-plum :focus-visible, .has-contrast-background-color :focus-visible { outline-color: var(--cvf-mauve); }

/* =============================================================================
   5. FORMS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select {
  font-family: var(--cvf-font-sans);
  font-size: 1rem;
  color: var(--cvf-navy);
  background: var(--cvf-white);
  border: 1.5px solid var(--cvf-grey);
  border-radius: var(--cvf-radius-sm);
  padding: 0.8em 1em;
  min-height: 48px;
  transition: border-color var(--cvf-dur-fast) ease, box-shadow var(--cvf-dur-fast) ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--cvf-mauve-ink); box-shadow: 0 0 0 4px rgba(224,185,227,0.45); outline: none; }
label { font-weight: 600; font-size: var(--cvf-text-small); color: var(--cvf-navy); }

/* =============================================================================
   6. CARDS
   ========================================================================== */
.cvf-card,
.wp-block-post,
.entry-content .wp-block-columns.cvf-cards > .wp-block-column,
.wp-block-columns .wp-block-column.cvf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cvf-white);
  border: var(--cvf-border);
  border-radius: var(--cvf-radius);
  box-shadow: var(--cvf-shadow-sm);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform var(--cvf-dur) var(--cvf-ease), box-shadow var(--cvf-dur) var(--cvf-ease), border-color var(--cvf-dur) ease;
}
.cvf-card:hover, .wp-block-post:hover, .entry-content .wp-block-columns.cvf-cards > .wp-block-column:hover, .wp-block-column.cvf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cvf-shadow);
  border-color: var(--cvf-mauve);
}
.cvf-card:focus-within, .wp-block-post:focus-within { border-color: var(--cvf-mauve-ink); }
.cvf-card h3, .wp-block-post h3, .cvf-cards h3 { font-size: var(--cvf-text-h3); margin: 0 0 0.5em; }
.cvf-card h3 a, .wp-block-post-title a, .cvf-cards h3 a { color: var(--cvf-navy); text-decoration: none; }
.cvf-card h3 a:hover, .wp-block-post-title a:hover, .cvf-cards h3 a:hover { color: var(--cvf-mauve-ink); }
.cvf-card p, .wp-block-post p, .cvf-cards p { color: var(--cvf-ink-2); font-size: 1rem; max-width: none; }
.cvf-card img, .wp-block-post img { width: 100%; height: auto; border-radius: var(--cvf-radius-sm); margin: 0 0 1rem; object-fit: cover; }
.cvf-card > :last-child, .wp-block-post > :last-child { margin-bottom: 0; }
.cvf-card .cvf-eyebrow, .wp-block-post .cvf-eyebrow, .cvf-cards .cvf-eyebrow { margin-bottom: 0.6rem; }
/* mauve accent tab at top of card */
.cvf-card::before, .wp-block-post::before, .entry-content .wp-block-columns.cvf-cards > .wp-block-column::before {
  content: "";
  position: absolute;
  top: -1px; left: 1.5rem;
  width: 44px; height: 4px;
  background: var(--cvf-mauve);
  border-radius: 0 0 3px 3px;
  transition: width var(--cvf-dur) var(--cvf-ease), background-color var(--cvf-dur) ease;
}
.cvf-card:hover::before, .wp-block-post:hover::before, .cvf-cards > .wp-block-column:hover::before { width: 72px; background: var(--cvf-mauve-ink); }
/* Card without the tab */
.cvf-card-plain::before { content: none; }

/* Whole-card link affordance when the card has a "cvf-card-link" class: the heading link covers the card */
.cvf-card-link h3 a::after { content: ""; position: absolute; inset: 0; }

/* Post grid (Query Loop) */
.wp-block-post-template.is-layout-grid, ul.wp-block-post-template.columns-3 { gap: 1.5rem; }
.entry-content .wp-block-post-template, .entry-content ul.wp-block-post-template { padding-left: 0; margin: 0; list-style: none; }
.wp-block-post-template > li { margin-bottom: 0; }
.wp-block-post-date { font-size: var(--cvf-text-small); font-weight: 600; color: var(--cvf-mauve-ink); letter-spacing: 0.02em; order: -1; margin-bottom: 0.6rem; }
.wp-block-post-excerpt__excerpt { font-size: 1rem; color: var(--cvf-ink-2); }
.wp-block-post-excerpt__more-text a { font-weight: 700; color: var(--cvf-mauve-ink); text-decoration: none; }
.wp-block-post-title { font-size: var(--cvf-text-h3); }

/* Reports: a Group block with class "cvf-report" becomes a report card */
.cvf-report {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  background: var(--cvf-white);
  border: var(--cvf-border);
  border-left: 6px solid var(--cvf-mauve);
  border-radius: var(--cvf-radius);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--cvf-shadow-sm);
  transition: transform var(--cvf-dur) var(--cvf-ease), box-shadow var(--cvf-dur) var(--cvf-ease);
}
.cvf-report:hover { transform: translateY(-3px); box-shadow: var(--cvf-shadow); }
.cvf-report h2, .cvf-report h3 { font-size: var(--cvf-text-h3); margin: 0 0 0.4em; }
.cvf-report p { margin: 0; color: var(--cvf-ink-2); font-size: 1rem; max-width: none; }
.cvf-report .cvf-meta { margin-bottom: 0.4rem; }
.cvf-report .wp-block-buttons { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
@media (max-width: 767px) { .cvf-report { grid-template-columns: 1fr; } .cvf-report .wp-block-buttons { grid-column: 1; grid-row: auto; } }

/* Stat tiles (Columns block with class "cvf-stats") */
.cvf-stats .wp-block-column { text-align: left; padding: 1.5rem; background: var(--cvf-white); border: var(--cvf-border); border-radius: var(--cvf-radius); }
.cvf-stats .wp-block-column > :first-child, .cvf-stat-number { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--cvf-mauve-ink); margin: 0 0 0.35em; max-width: none; }
.cvf-stats .wp-block-column p { max-width: none; }
.cvf-dark .cvf-stats .wp-block-column, .cvf-plum .cvf-stats .wp-block-column { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.cvf-dark .cvf-stat-number, .cvf-dark .cvf-stats .wp-block-column > :first-child { color: var(--cvf-mauve); }

/* =============================================================================
   7. IMAGES
   ========================================================================== */
.entry-content img { max-width: 100%; height: auto; }
.wp-block-image img, .cvf-photo img { border-radius: var(--cvf-radius); }
.wp-block-image.is-style-rounded img { border-radius: var(--cvf-radius-lg); }
.wp-block-image figcaption { font-size: var(--cvf-text-small); color: var(--cvf-ink-2); margin-top: 0.6rem; text-align: left; }
.wp-block-cover, .wp-block-cover img { border-radius: 0; }
.wp-block-image.alignfull img, .wp-block-image.alignwide img { border-radius: 0; }
.entry-content .wp-block-image.alignwide img { border-radius: var(--cvf-radius-lg); }
/* Editorial aspect ratios (add class to Image block) */
.cvf-ratio-wide img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cvf-ratio-editorial img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.cvf-ratio-square img { aspect-ratio: 1; object-fit: cover; width: 100%; }
/* Image bleeding out of the grid (Columns with class cvf-bleed-right / cvf-bleed-left) */
@media (min-width: 1024px) {
  .cvf-bleed-right > .wp-block-column:last-child { margin-right: calc(var(--cvf-gutter) * -2.5); }
  .cvf-bleed-left  > .wp-block-column:first-child { margin-left: calc(var(--cvf-gutter) * -2.5); }
}
/* Image + text overlap (Columns block class cvf-overlap): text column rides over the image */
@media (min-width: 782px) {
  .cvf-overlap { align-items: center; }
  .cvf-overlap > .wp-block-column:first-child { z-index: 2; margin-right: -3rem; background: var(--cvf-white); padding: 2.5rem; border-radius: var(--cvf-radius); box-shadow: var(--cvf-shadow-lg); }
  .cvf-overlap.cvf-overlap-mauve > .wp-block-column:first-child { background: var(--cvf-mauve); }
  .cvf-overlap > .wp-block-column:last-child img { border-radius: var(--cvf-radius-lg); }
}

/* Parallax wrapper: image moves slower than content (JS drives transform) */
.cvf-parallax { position: relative; overflow: hidden; }
.cvf-parallax .wp-block-cover__image-background,
.cvf-parallax > img,
.cvf-parallax .cvf-parallax-layer {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.18);
  transform-origin: center;
}

/* =============================================================================
   8. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: rgba(250, 249, 246, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--cvf-dur) var(--cvf-ease), border-color var(--cvf-dur) ease, background-color var(--cvf-dur) ease;
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
.site-header.is-scrolled { border-bottom-color: var(--cvf-grey); box-shadow: 0 6px 24px rgba(23, 48, 74, 0.08); background-color: rgba(250, 249, 246, 0.97); }
.inside-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem var(--cvf-gutter); transition: padding var(--cvf-dur) var(--cvf-ease); }
.site-header.is-scrolled .inside-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.site-logo { margin: 0; }
.site-logo img, .header-image { max-height: 60px; width: auto; transition: max-height var(--cvf-dur) var(--cvf-ease); }
.site-header.is-scrolled .site-logo img { max-height: 46px; }
.main-title { margin-left: 0.85em; }

.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
  font-family: var(--cvf-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cvf-navy);
  line-height: 56px;
  padding: 0 0.9rem;
  position: relative;
  transition: color var(--cvf-dur-fast) ease;
}
.main-navigation .main-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 12px;
  height: 2px;
  background: var(--cvf-mauve-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cvf-dur) var(--cvf-ease);
}
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.sfHover > a {
  color: var(--cvf-mauve-ink);
  background: transparent;
}
.main-navigation .main-nav ul li a:hover::after, .main-navigation .main-nav ul li.current-menu-item > a::after, .main-navigation .main-nav ul li.current-menu-ancestor > a::after { transform: scaleX(1); }
.main-navigation .main-nav ul li a .dropdown-menu-toggle { padding-left: 0.3em; }
/* dropdowns */
.main-navigation ul ul {
  background: var(--cvf-white);
  border: var(--cvf-border);
  border-radius: var(--cvf-radius);
  box-shadow: var(--cvf-shadow-lg);
  padding: 0.5rem;
  min-width: 260px;
  top: auto;
  margin-top: -6px;
}
.main-navigation .main-nav ul ul li a { line-height: 1.35; padding: 0.7rem 0.9rem; font-size: 0.95rem; border-radius: var(--cvf-radius-sm); font-weight: 500; }
.main-navigation .main-nav ul ul li a::after { content: none; }
.main-navigation .main-nav ul ul li a:hover, .main-navigation .main-nav ul ul li.current-menu-item > a { background: var(--cvf-mauve-soft); color: var(--cvf-navy); }

/* Donate — distinct action (last menu item or item with class cvf-donate) */
.main-navigation .main-nav > ul > li.cvf-donate > a,
.main-navigation .main-nav > ul > li:last-child > a {
  background-color: var(--cvf-pink);
  color: var(--cvf-white) !important;
  line-height: 1.2;
  padding: 0.7em 1.4em;
  margin-left: 0.75rem;
  border-radius: var(--cvf-radius-pill);
  font-weight: 700;
  transition: background-color var(--cvf-dur-fast) ease, transform var(--cvf-dur-fast) var(--cvf-ease), box-shadow var(--cvf-dur-fast) ease;
}
.main-navigation .main-nav > ul > li.cvf-donate > a::after,
.main-navigation .main-nav > ul > li:last-child > a::after { content: none; }
.main-navigation .main-nav > ul > li.cvf-donate > a:hover,
.main-navigation .main-nav > ul > li:last-child > a:hover { background-color: var(--cvf-pink-dark); color: var(--cvf-white) !important; transform: translateY(-1px); box-shadow: var(--cvf-shadow); }
.main-navigation .main-nav > ul > li.cvf-donate, .main-navigation .main-nav > ul > li:last-child { display: flex; align-items: center; }

/* Mobile nav */
.menu-toggle { color: var(--cvf-navy); padding: 0.5rem; }
.menu-toggle .mobile-menu { font-weight: 700; }
.main-navigation.toggled .main-nav { background: var(--cvf-white); border-top: 1px solid var(--cvf-grey); box-shadow: var(--cvf-shadow-lg); }
.main-navigation.toggled .main-nav > ul { padding: 0.75rem var(--cvf-gutter) 1.25rem; }
.main-navigation.toggled .main-nav ul li a { line-height: 1.3; padding: 0.9rem 0.25rem; font-size: 1.05rem; border-bottom: 1px solid var(--cvf-grey-tint); }
.main-navigation.toggled .main-nav ul li a::after { content: none; }
.main-navigation.toggled .main-nav ul ul { position: static; box-shadow: none; border: 0; background: var(--cvf-grey-tint); border-radius: var(--cvf-radius-sm); margin: 0.25rem 0 0.5rem; }
.main-navigation.toggled .main-nav > ul > li:last-child { display: block; padding-top: 0.75rem; }
.main-navigation.toggled .main-nav > ul > li:last-child > a { display: inline-flex; margin-left: 0; text-align: center; border-bottom: 0; }
.main-navigation.toggled .main-nav > ul > li:last-child > a { padding: 0.9em 1.6em; }

/* =============================================================================
   9. PAGE HEADERS (all non-home pages)
   ========================================================================== */
.home .entry-header, .home .page-header { display: none; }
.entry-header, .page-header { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--cvf-gutter) clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: var(--cvf-container); margin: 0 auto; }
.entry-header .entry-title, .page-header h1, .page-header .page-title, .archive-title {
  font-size: var(--cvf-text-h1);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cvf-navy);
  margin: 0;
  position: relative;
  padding-bottom: 1.25rem;
}
.entry-header .entry-title::after, .page-header h1::after, .archive-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 72px; height: 6px;
  background: var(--cvf-mauve);
  border-radius: 3px;
}
.entry-meta { font-size: var(--cvf-text-small); color: var(--cvf-ink-2); }
.single .entry-header { padding-bottom: 1rem; }
.single .entry-header .entry-title { font-size: var(--cvf-text-h1); }
.single .entry-meta { margin-top: 1rem; font-weight: 600; color: var(--cvf-mauve-ink); }
.single .entry-meta a { color: inherit; }
.page .entry-content, .single .entry-content { padding-bottom: var(--cvf-section-y); }
/* Featured image on posts: editorial crop */
.single .post-image, .single .featured-image { max-width: var(--cvf-container); margin: 0 auto 2rem; padding: 0 var(--cvf-gutter); }
.single .post-image img, .single .featured-image img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--cvf-radius-lg); }

/* Standard Group with base-2 (mauve) used as a page CTA panel */
.entry-content > .wp-block-group.has-base-2-background-color:not(.alignfull),
.entry-content > .wp-block-group.cvf-panel {
  border-radius: var(--cvf-radius-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
.entry-content > .wp-block-group.alignfull.has-base-2-background-color { padding-top: var(--cvf-section-y); padding-bottom: var(--cvf-section-y); }
.entry-content > .wp-block-group.alignfull.has-contrast-background-color { padding-top: var(--cvf-section-y); padding-bottom: var(--cvf-section-y); }

/* =============================================================================
   10. HOMEPAGE
   ========================================================================== */

/* ---- Hero: Cover block with class "cvf-hero" ---- */
.cvf-hero.wp-block-cover {
  min-height: min(88vh, 820px);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-items: center;
  background: var(--cvf-warm-white);
  isolation: isolate;
  overflow: hidden;
}
.cvf-hero .wp-block-cover__background { display: none; }          /* no dim overlay */
.cvf-hero .wp-block-cover__image-background {
  left: auto; right: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* No diagonal clip-path here: a hard-edged polygon clip cuts the photo cleanly regardless of any
     mask fade laid on top of it, which is what was producing the visible diagonal line. The left
     edge is instead entirely defined by the mask fade below, so there is exactly one boundary and
     it is soft everywhere along its height — also matches "horizontal, not diagonal" fade feedback. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, rgba(0,0,0,0.15) 10%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.85) 32%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, rgba(0,0,0,0.15) 10%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.85) 32%, #000 44%);
  z-index: 0;
}
/* warm-white fade so text always sits on a clean surface — one continuous curve, no plateau/edge */
.cvf-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--cvf-warm-white) 0%,
    rgba(250,249,246,0.985) 8%,
    rgba(250,249,246,0.93) 18%,
    rgba(250,249,246,0.82) 28%,
    rgba(250,249,246,0.64) 38%,
    rgba(250,249,246,0.44) 48%,
    rgba(250,249,246,0.26) 58%,
    rgba(250,249,246,0.12) 68%,
    rgba(250,249,246,0.03) 78%,
    rgba(250,249,246,0) 86%);
  z-index: 1;
  pointer-events: none;
}
/* mauve brush shape sweeping under the text and into the photo */
.cvf-hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -6%;
  bottom: -14%;
  width: 62%;
  height: 34%;
  background: var(--cvf-mauve);
  clip-path: polygon(0 55%, 22% 22%, 100% 0, 92% 70%, 60% 100%, 0 100%);
  opacity: 0.95;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}
.cvf-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--cvf-container);
  margin: 0 auto;
  padding: clamp(4rem, 3rem + 6vw, 8rem) var(--cvf-gutter);
  text-align: left;
  align-items: flex-start;
}
.cvf-hero h1 {
  font-size: var(--cvf-text-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--cvf-navy);
  text-align: left;
  max-width: 11ch;
  margin: 0 0 1.25rem;
}
.cvf-hero .cvf-eyebrow { color: var(--cvf-mauve-ink); }
.cvf-hero p {
  color: var(--cvf-navy);
  text-align: left;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0 0 2rem;
}
.cvf-hero .wp-block-buttons, .cvf-hero .wp-block-buttons.is-content-justification-center { justify-content: flex-start !important; }
.cvf-hero .has-text-align-center { text-align: left !important; }
.cvf-hero .wp-block-cover__inner-container > * { margin-left: 0; }
.cvf-hero .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--cvf-navy); color: var(--cvf-navy) !important; }
.cvf-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cvf-navy); color: var(--cvf-white) !important; }

/* All three hero buttons: navy outline, regardless of style/colour */
.cvf-hero .wp-block-buttons .wp-block-button .wp-block-button__link {
  border-width: 2px;
  border-style: solid;
  border-color: var(--cvf-navy) !important;
}

/* "Get involved" — midpoint pink between Donate and the default mauve button, navy text/border kept */
.cvf-hero .wp-block-buttons .wp-block-button .wp-block-button__link[href*="/get-involved"] {
  background-color: #C991C6 !important;
  color: var(--cvf-navy) !important;
}
.cvf-hero .wp-block-buttons .wp-block-button .wp-block-button__link[href*="/get-involved"]:hover {
  background-color: var(--cvf-navy) !important;
  color: var(--cvf-white) !important;
}

/* "Donate" — pink fill, white text (overrides the outline-style navy text it also carries) */
.cvf-hero .wp-block-buttons .wp-block-button .wp-block-button__link[href*="/donate"] {
  background-color: var(--cvf-pink) !important;
  color: var(--cvf-white) !important;
}
.cvf-hero .wp-block-buttons .wp-block-button .wp-block-button__link[href*="/donate"]:hover {
  background-color: var(--cvf-pink-dark) !important;
  color: var(--cvf-white) !important;
}

@media (max-width: 1023px) {
  .cvf-hero .wp-block-cover__image-background { width: 50%; }
  .cvf-hero::after { background: linear-gradient(90deg, var(--cvf-warm-white) 0%, rgba(250,249,246,0.98) 10%, rgba(250,249,246,0.9) 22%, rgba(250,249,246,0.76) 34%, rgba(250,249,246,0.56) 46%, rgba(250,249,246,0.36) 58%, rgba(250,249,246,0.18) 70%, rgba(250,249,246,0.05) 82%, rgba(250,249,246,0) 90%); }
}
@media (max-width: 767px) {
  .cvf-hero.wp-block-cover { min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; display: block; }
  .cvf-hero .wp-block-cover__image-background { position: relative; width: 100%; height: 58vw; max-height: 380px; clip-path: none; -webkit-mask-image: none; mask-image: none; display: block; transform: none !important; }
  .cvf-hero::after { content: none; }
  .cvf-hero::before { left: auto; right: -10%; bottom: auto; top: calc(58vw - 40px); max-height: none; height: 70px; width: 60%; clip-path: polygon(0 40%, 100% 0, 100% 100%, 8% 100%); }
  .cvf-hero .wp-block-cover__inner-container { padding: 2.5rem var(--cvf-gutter) 3rem; }
  .cvf-hero h1 { max-width: none; }
  .cvf-hero p { max-width: none; }
}

/* ---- Section headers on the home page ---- */
.cvf-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cvf-section-head h2 { margin: 0; }
.cvf-section-head p { margin: 0; }

/* ---- Campaign feature (Columns block with class "cvf-feature") ----
   Column 1: text (eyebrow, h2/h3, p, button). Column 2: image.
   The whole thing sits on a mauve panel with the image pushed to the edge. */
.cvf-feature { background: var(--cvf-mauve); border-radius: var(--cvf-radius-lg); overflow: hidden; gap: 0 !important; margin-top: 0; }
.cvf-feature > .wp-block-column:first-child { padding: clamp(2rem, 1.5rem + 3vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.cvf-feature > .wp-block-column:last-child { position: relative; min-height: 320px; padding: 0; }
.cvf-feature > .wp-block-column:last-child img, .cvf-feature > .wp-block-column:last-child .wp-block-image, .cvf-feature > .wp-block-column:last-child figure { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.cvf-feature > .wp-block-column:last-child img { object-fit: cover; border-radius: 0; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.cvf-feature h2, .cvf-feature h3 { font-size: var(--cvf-text-h2); max-width: 14ch; }
.cvf-feature p { max-width: 42ch; }
.cvf-feature.cvf-dark { background: var(--cvf-navy); }
.cvf-feature.cvf-plum { background: var(--cvf-plum); }
@media (max-width: 781px) {
  .cvf-feature > .wp-block-column:last-child { min-height: 240px; order: -1; }
  .cvf-feature > .wp-block-column:last-child img { clip-path: none; }
}

/* ---- Campaign cards: the 3-col Columns block on the home page ---- */
.home .entry-content > .wp-block-columns:not(.cvf-feature):not(.cvf-stats):not(.cvf-split) > .wp-block-column,
.cvf-cards > .wp-block-column {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--cvf-white);
  border: var(--cvf-border);
  border-radius: var(--cvf-radius);
  box-shadow: var(--cvf-shadow-sm);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform var(--cvf-dur) var(--cvf-ease), box-shadow var(--cvf-dur) var(--cvf-ease), border-color var(--cvf-dur) ease;
}
.home .entry-content > .wp-block-columns:not(.cvf-feature):not(.cvf-stats):not(.cvf-split) > .wp-block-column:hover { transform: translateY(-4px); box-shadow: var(--cvf-shadow); border-color: var(--cvf-mauve); }
.home .entry-content > .wp-block-columns:not(.cvf-feature):not(.cvf-stats):not(.cvf-split) > .wp-block-column::before { content: ""; position: absolute; top: -1px; left: 1.5rem; width: 44px; height: 4px; background: var(--cvf-mauve); border-radius: 0 0 3px 3px; transition: width var(--cvf-dur) var(--cvf-ease), background-color var(--cvf-dur) ease; }
.home .entry-content > .wp-block-columns:not(.cvf-feature):not(.cvf-stats):not(.cvf-split) > .wp-block-column:hover::before { width: 72px; background: var(--cvf-mauve-ink); }
.home .entry-content > .wp-block-columns > .wp-block-column h3 { font-size: var(--cvf-text-h3); margin: 0 0 0.5em; }
.home .entry-content > .wp-block-columns > .wp-block-column h3 a { color: var(--cvf-navy); text-decoration: none; }
.home .entry-content > .wp-block-columns > .wp-block-column h3 a:hover { color: var(--cvf-mauve-ink); }
.home .entry-content > .wp-block-columns > .wp-block-column h3 a::after { content: ""; position: absolute; inset: 0; }
.home .entry-content > .wp-block-columns > .wp-block-column p { color: var(--cvf-ink-2); font-size: 1rem; max-width: none; }
.home .entry-content > .wp-block-columns > .wp-block-column img { border-radius: var(--cvf-radius-sm); margin-bottom: 1rem; }
.wp-block-columns { gap: 1.5rem; }

/* ---- Split editorial section (Columns with class "cvf-split"): text | image, image can bleed ---- */
.cvf-split { align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem) !important; }
.cvf-split > .wp-block-column img { border-radius: var(--cvf-radius-lg); box-shadow: var(--cvf-shadow-lg); }
.cvf-split h2 { max-width: 16ch; }
.cvf-split p { max-width: 52ch; }

/* ---- Stories: Query Loop grid with class "cvf-stories": first item large ---- */
@media (min-width: 782px) {
  .cvf-stories .wp-block-post-template.is-layout-grid,
  .cvf-stories ul.wp-block-post-template { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
  .cvf-stories .wp-block-post-template.is-layout-grid, .cvf-stories ul.wp-block-post-template { grid-template-columns: 1.6fr 1fr 1fr !important; }
  .cvf-stories .wp-block-post:first-child {
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    /* Pink-to-blue brand gradient, pink corner leading so the card still reads as the
       "mauve" featured slot at a glance, deepening to navy for contrast under the text. */
    background: linear-gradient(135deg, var(--cvf-mauve) 0%, var(--cvf-plum) 58%, var(--cvf-navy) 100%);
    border-color: var(--cvf-mauve);
  }
  /* justify-content:flex-end + a tall min-height only make sense when a photo fills the space
     above the text. Without a featured image (the common case right now) that combination
     just reserves a big empty gap above the date, making this card balloon to roughly twice
     the others' height for no visible reason — so the plain-text card stays top-aligned and
     sized like its siblings, and only the photo variant below gets the taller treatment. */
  .cvf-stories .wp-block-post:first-child:not(:has(.wp-block-post-featured-image)) { justify-content: flex-start; }
  .cvf-stories .wp-block-post:first-child:has(.wp-block-post-featured-image) { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 480px; justify-content: flex-end; }
  .cvf-stories .wp-block-post-template:has(> .wp-block-post:first-child .wp-block-post-featured-image) { grid-template-columns: repeat(3, 1fr) !important; }
  .cvf-stories .wp-block-post:first-child::before { background: var(--cvf-mauve); }
  .cvf-stories .wp-block-post:first-child .wp-block-post-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); max-width: 18ch; }
  /* Gradient runs light-pink to dark-navy, so title/date/excerpt need to hold up across the
     whole card rather than the flat-navy-on-pale-mauve pairing the solid background used. */
  .cvf-stories .wp-block-post:first-child .wp-block-post-title a { color: var(--cvf-white); }
  .cvf-stories .wp-block-post:first-child .wp-block-post-title a:hover { color: var(--cvf-mauve); }
  .cvf-stories .wp-block-post:first-child .wp-block-post-date { color: var(--cvf-white); }
  .cvf-stories .wp-block-post:first-child .wp-block-post-excerpt__excerpt { color: rgba(255,255,255,0.92); font-size: 1.05rem; }
  .cvf-stories .wp-block-post:first-child .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
  .cvf-stories .wp-block-post:first-child .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--cvf-radius); }
  .cvf-stories .wp-block-post:first-child:has(.wp-block-post-featured-image)::after { content: ""; position: absolute; inset: 0; border-radius: var(--cvf-radius); background: linear-gradient(180deg, rgba(23,48,74,0) 30%, rgba(23,48,74,0.88) 100%); }
  .cvf-stories .wp-block-post:first-child:has(.wp-block-post-featured-image) > :not(.wp-block-post-featured-image) { position: relative; z-index: 1; }
  .cvf-stories .wp-block-post:first-child:has(.wp-block-post-featured-image) .wp-block-post-title a,
  .cvf-stories .wp-block-post:first-child:has(.wp-block-post-featured-image) .wp-block-post-excerpt__excerpt { color: var(--cvf-white); }
  .cvf-stories .wp-block-post:first-child:has(.wp-block-post-featured-image) .wp-block-post-date { color: var(--cvf-mauve); }
}

/* ---- Get involved / support CTA (the full-width contrast group on home) ---- */
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color,
.cvf-cta {
  --wp--preset--color--contrast: var(--cvf-mauve);   /* core applies preset classes with !important */
  --wp--preset--color--base: var(--cvf-navy);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cvf-mauve) !important;
  color: var(--cvf-navy);
  padding-top: var(--cvf-section-y); padding-bottom: var(--cvf-section-y);
}
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color h2, .cvf-cta h2 { color: var(--cvf-navy); font-size: var(--cvf-text-h2); max-width: 20ch; margin-left: auto; margin-right: auto; }
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color p, .cvf-cta p { color: var(--cvf-navy); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); max-width: 56ch; margin-left: auto; margin-right: auto; }
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link, .cvf-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--cvf-plum); color: var(--cvf-white) !important; }
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .cvf-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--cvf-navy); }
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link, .cvf-cta .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--cvf-navy); color: var(--cvf-navy) !important; }
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover, .cvf-cta .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cvf-navy); color: var(--cvf-white) !important; }
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color::before, .cvf-cta::before {
  content: ""; position: absolute; z-index: -1; right: -8%; top: -30%; width: clamp(260px, 36vw, 560px); aspect-ratio: 1;
  background: var(--cvf-plum); opacity: 0.08; border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; transform: rotate(-12deg);
}
.home .entry-content > .wp-block-group.alignfull.has-contrast-background-color::after, .cvf-cta::after {
  content: ""; position: absolute; z-index: -1; left: -6%; bottom: -40%; width: clamp(200px, 26vw, 420px); aspect-ratio: 1;
  background: var(--cvf-white); opacity: 0.35; border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%;
}

/* Survey/notice panel (mauve group on home) becomes a plum editorial note */
.home .entry-content > .wp-block-group.alignwide.has-base-2-background-color {
  --wp--preset--color--base-2: var(--cvf-plum);
  background: var(--cvf-plum) !important;
  color: var(--cvf-warm-white);
  border-radius: var(--cvf-radius-lg);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  position: relative; overflow: hidden; isolation: isolate;
}
.home .entry-content > .wp-block-group.alignwide.has-base-2-background-color h2,
.home .entry-content > .wp-block-group.alignwide.has-base-2-background-color h3 { color: var(--cvf-white); max-width: 20ch; }
.home .entry-content > .wp-block-group.alignwide.has-base-2-background-color p { color: rgba(250,249,246,0.9); max-width: 60ch; }
.home .entry-content > .wp-block-group.alignwide.has-base-2-background-color::before {
  content: ""; position: absolute; z-index: -1; right: -6%; top: -40%; width: clamp(220px, 30vw, 460px); aspect-ratio: 1;
  background: var(--cvf-mauve); opacity: 0.22; border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; transform: rotate(-12deg);
}

/* ---- Eyebrow + heading pairs on the home page ---- */
.home .entry-content > .cvf-eyebrow + h2, .home .entry-content > .cvf-eyebrow + .wp-block-heading { margin-top: 0 !important; }
.home .entry-content > .cvf-eyebrow { margin-bottom: 0.75rem; }
.home .entry-content > .cvf-feature + .cvf-cards { margin-top: 1.5rem; }
.cvf-focus-face img, img.cvf-focus-face { object-position: center 62% !important; }

/* ---- Evidence section (dark group) ---- */
.entry-content > .wp-block-group.cvf-dark h2 { font-size: var(--cvf-text-h2); max-width: 20ch; }
.entry-content > .wp-block-group.cvf-dark .cvf-lead { max-width: 58ch; }
.entry-content > .wp-block-group.cvf-dark .cvf-stats { margin: 2.5rem 0; gap: 1.25rem; }
.cvf-stats .cvf-stat-number, .cvf-stats p.cvf-stat-number { font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3rem) !important; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0 0 0.5rem; }
.cvf-dark .cvf-stats .wp-block-column p:not(.cvf-stat-number) { font-size: 1rem; }

/* ---- UK Covid-19 Inquiry (Cover with class cvf-inquiry): the real, unedited photo of the room
   and her giving evidence, shown at its true scale and position — no cut-out, no compositing.
   A navy wash fades in from the left so the text stays readable, thinning out to nothing over
   her side of the frame so the photo itself is seen honestly. ---- */
.cvf-inquiry.wp-block-cover { min-height: min(80vh, 640px) !important; padding: 0; overflow: hidden; isolation: isolate; align-items: center; }
/* A true continuous fade rather than a dark block that stops dead partway across — every stop's
   alpha decreases smoothly left to right, so there's no visible edge/band where the wash "ends",
   just steadily more of the room showing through as you move away from the text. */
.cvf-inquiry .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(90deg,
    rgba(23,48,74,0.94) 0%,
    rgba(23,48,74,0.86) 20%,
    rgba(23,48,74,0.66) 38%,
    rgba(23,48,74,0.4) 56%,
    rgba(23,48,74,0.2) 76%,
    rgba(23,48,74,0.08) 100%) !important;
}
.cvf-inquiry::after { content: none; }
.cvf-inquiry .wp-block-cover__inner-container { position: relative; z-index: 3; width: 100%; max-width: var(--cvf-container) !important; margin: 0 auto; padding: clamp(4rem, 3rem + 5vw, 7rem) var(--cvf-gutter); color: var(--cvf-white); }
.cvf-inquiry .wp-block-cover__inner-container > * { max-width: 560px; margin-left: 0 !important; }
.cvf-inquiry h2 { color: var(--cvf-white); font-size: var(--cvf-text-h2); line-height: 1.08; max-width: 16ch; }
.cvf-inquiry p { color: rgba(250,249,246,0.92); font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); }
.cvf-inquiry .cvf-eyebrow { color: var(--cvf-mauve); }
@media (max-width: 767px) {
  .cvf-inquiry .wp-block-cover__inner-container > * { max-width: 100%; }
  /* Same idea, top-down: a continuous fade so the text has solid ground at the top of the card
     without a visible line where it lets go of the photo. */
  .cvf-inquiry .wp-block-cover__background {
    opacity: 1 !important;
    background: linear-gradient(180deg,
      rgba(23,48,74,0.92) 0%,
      rgba(23,48,74,0.82) 22%,
      rgba(23,48,74,0.6) 42%,
      rgba(23,48,74,0.32) 62%,
      rgba(23,48,74,0.14) 82%,
      rgba(23,48,74,0.08) 100%) !important;
  }
}

/* ---- Who we are split ---- */
.cvf-split .cvf-lead { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); font-weight: 500; line-height: 1.35; margin-bottom: 1rem; }
.cvf-split .wp-block-image img { box-shadow: none; }
@media (min-width: 782px) { .cvf-split > .wp-block-column:last-child { position: relative; } .cvf-split > .wp-block-column:last-child::before { content: ""; position: absolute; inset: 8% -4% -6% 10%; background: var(--cvf-mauve); border-radius: var(--cvf-radius-lg); z-index: -1; transform: rotate(2deg); } .cvf-split { isolation: isolate; } }

/* ---- Campaign cards: eyebrow sits above the title ---- */
.cvf-cards .cvf-eyebrow { font-size: 0.7rem; margin-bottom: 0.5rem; }

/* ---- Fixes after first live review ---- */
/* page shell: warm white everywhere, no white wrapper */
#page, .site, .site-content, .content-area, .site-main, .inside-article, .one-container .site-content, .separate-containers .inside-article { background: transparent !important; }
body { background-color: var(--cvf-warm-white) !important; }
/* GP's .entry-content:not(:first-child) margin collapses up and leaves a strip under the header */
.home .entry-content, .entry-content:not(:first-child) { margin-top: 0 !important; }
.home .entry-header + .entry-content { margin-top: 0 !important; }
/* back-to-back full-width sections touch */
.home .entry-content > .alignfull + .alignfull { margin-top: 0 !important; }
/* no sideways scroll from 100vw full-width blocks / decorative shapes */
html, body { overflow-x: clip; }
/* boxed panels with their own background: inset by margin, not padding, so the colour doesn't bleed to the screen edge */
.entry-content > .cvf-newsletter-placeholder,
.entry-content > .cvf-feature,
.entry-content > .wp-block-group.has-background:not(.alignfull),
.entry-content > .cvf-panel {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--cvf-gutter));
  max-width: calc(var(--cvf-container) - 2 * var(--cvf-gutter));
  margin-left: auto !important; margin-right: auto !important;
}
.entry-content > .cvf-feature { padding: 0 !important; }
/* feature: readable text + visible button on mauve */
.cvf-feature .wp-block-column p { color: var(--cvf-navy) !important; }
.cvf-feature .cvf-eyebrow, .home .entry-content > .cvf-feature > .wp-block-column p.cvf-eyebrow { color: var(--cvf-plum) !important; }
.cvf-feature .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.cvf-mauve .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--cvf-plum) !important; color: var(--cvf-white) !important; }
.cvf-feature .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.cvf-mauve .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--cvf-navy) !important; }
.cvf-feature .wp-block-buttons { margin-top: 1.5rem; }
.cvf-focus-face img, img.cvf-focus-face { object-position: center 100% !important; }
/* card eyebrows in mauve ink, not body grey */
.home .entry-content > .wp-block-columns > .wp-block-column p.cvf-eyebrow, .cvf-cards p.cvf-eyebrow { color: var(--cvf-mauve-ink) !important; }

/* ---- Mobile polish ---- */
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }
.cvf-inquiry p.cvf-eyebrow { font-size: var(--cvf-text-eyebrow) !important; }
@media (max-width: 781px) {
  .home .entry-content > .wp-block-group.alignwide.has-base-2-background-color { padding: 1.75rem 1.25rem !important; }
  .home .entry-content > .wp-block-group.alignwide.has-base-2-background-color > .wp-block-group__inner-container { padding: 0 !important; }
}

/* ---- Donate buttons: CVF pink everywhere ---- */
.wp-block-button .wp-block-button__link[href*="/donate"],
.wp-block-button.is-style-cvf-pink .wp-block-button__link,
.cvf-btn-pink {
  background-color: var(--cvf-pink) !important;
  border-color: var(--cvf-pink) !important;
  color: var(--cvf-white) !important;
}
.wp-block-button .wp-block-button__link[href*="/donate"]:hover,
.wp-block-button.is-style-cvf-pink .wp-block-button__link:hover,
.cvf-btn-pink:hover { background-color: var(--cvf-pink-dark) !important; border-color: var(--cvf-pink-dark) !important; color: var(--cvf-white) !important; }

/* ---- Campaigns: automatic Query Loop of child pages of "Our Campaigns" (class cvf-campaigns).
   First campaign (lowest Page Order) becomes the large feature; the rest are cards. ---- */
.cvf-campaigns .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem; padding: 0; margin: 0; list-style: none; }
.cvf-campaigns .wp-block-post { gap: 0; display: flex; flex-direction: column; height: 100%; }
.cvf-campaigns .wp-block-post .cvf-eyebrow { color: var(--cvf-mauve-ink); font-size: 0.7rem; margin: 0 0 0.5rem; }
.cvf-campaigns .wp-block-post-title { font-size: var(--cvf-text-h3); margin: 0 0 0.5rem; }
.cvf-campaigns .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
.cvf-campaigns .wp-block-post-excerpt { margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cvf-campaigns .wp-block-post-excerpt__more-text { margin-top: auto; padding-top: 1rem; }
.cvf-campaigns .wp-block-post-excerpt__more-link { font-weight: 700; color: var(--cvf-mauve-ink); text-decoration: none; position: relative; z-index: 1; }
.cvf-campaigns .wp-block-post-featured-image { margin: calc(-1 * clamp(1.25rem, 1rem + 1vw, 1.75rem)) calc(-1 * clamp(1.25rem, 1rem + 1vw, 1.75rem)) 1.25rem; overflow: hidden; border-radius: var(--cvf-radius) var(--cvf-radius) 0 0; }
.cvf-campaigns .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; margin: 0; display: block; }

/* Icon watermarks: cards with no photo (Voting Accessibility, Clean Air, Schools & Attendance)
   get a large, faint brand icon tucked behind the text so the card doesn't read as empty.
   Kept very low-opacity and positioned off in a corner so title/excerpt text stays fully readable. */
.cvf-campaigns .wp-block-post.post-12,
.cvf-campaigns .wp-block-post.post-14,
.cvf-campaigns .wp-block-post.post-15 { position: relative; overflow: hidden; }
.cvf-campaigns .wp-block-post.post-12::after,
.cvf-campaigns .wp-block-post.post-14::after,
.cvf-campaigns .wp-block-post.post-15::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right -4% bottom -8%;
  background-size: 52% auto;
  opacity: 0.16;
  border-radius: 0;
  transition: none;
}
.cvf-campaigns .wp-block-post.post-12::after { background-image: url("assets/icons/icon-ballot.png"); }
.cvf-campaigns .wp-block-post.post-14::after { background-image: url("assets/icons/icon-wind.png"); }
.cvf-campaigns .wp-block-post.post-15::after { background-image: url("assets/icons/icon-checklist.png"); }
.cvf-campaigns .wp-block-post.post-12 > *,
.cvf-campaigns .wp-block-post.post-14 > *,
.cvf-campaigns .wp-block-post.post-15 > * { position: relative; z-index: 1; }

/* feature */
.cvf-campaigns .wp-block-post:first-child {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.1fr 0.9fr; grid-auto-rows: auto; align-content: center;
  column-gap: 0; padding: 0; overflow: hidden;
  background: var(--cvf-mauve); border-color: var(--cvf-mauve); border-radius: var(--cvf-radius-lg);
  min-height: 360px;
}
.cvf-campaigns .wp-block-post:first-child::before { background: var(--cvf-plum); left: clamp(2rem, 1.5rem + 3vw, 4rem); }
.cvf-campaigns .wp-block-post:first-child > :not(.wp-block-post-featured-image) { grid-column: 1; padding-left: clamp(2rem, 1.5rem + 3vw, 4rem); padding-right: clamp(1.5rem, 1rem + 2vw, 3rem); }
.cvf-campaigns .wp-block-post:first-child > :first-child:not(.wp-block-post-featured-image),
.cvf-campaigns .wp-block-post:first-child > .wp-block-post-featured-image + * { padding-top: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.cvf-campaigns .wp-block-post:first-child > :last-child { padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.cvf-campaigns .wp-block-post:first-child { position: relative; }
.cvf-campaigns .wp-block-post:first-child .wp-block-post-featured-image { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; margin: 0; border-radius: 0; }
.cvf-campaigns .wp-block-post:first-child .wp-block-post-featured-image a { display: block; height: 100%; }
.cvf-campaigns .wp-block-post:first-child .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); object-position: center 85%; }
/* This feature card currently shows a portrait photo with the subject's head near the top of the
   frame, so it needs a top-weighted crop instead of the 85%-from-top default above (which was
   calibrated for a different, wider photo and was cropping her head off). Scoped to this post so a
   future photo swap can be recalibrated without touching the shared rule. */
.cvf-campaigns .wp-block-post.post-13 .wp-block-post-featured-image img { object-position: center 15%; }
.cvf-campaigns .wp-block-post:first-child:has(.wp-block-post-featured-image) > :not(.wp-block-post-featured-image) { max-width: 55%; }
.cvf-campaigns .wp-block-post:first-child { grid-template-columns: 1fr; align-content: center; }
.cvf-campaigns .wp-block-post:first-child .wp-block-post-title { font-size: var(--cvf-text-h2); max-width: 16ch; }
.cvf-campaigns .wp-block-post:first-child .cvf-eyebrow { color: var(--cvf-plum); }
.cvf-campaigns .wp-block-post:first-child .wp-block-post-excerpt__excerpt { color: var(--cvf-navy); font-size: 1.05rem; max-width: 44ch; }
.cvf-campaigns .wp-block-post:first-child .wp-block-post-excerpt__more-link {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.5rem;
  background: var(--cvf-plum); color: var(--cvf-white); padding: 0.8em 1.5em; border-radius: var(--cvf-radius-sm); min-height: 48px;
  transition: background-color var(--cvf-dur-fast) ease, transform var(--cvf-dur-fast) var(--cvf-ease);
}
.cvf-campaigns .wp-block-post:first-child .wp-block-post-excerpt__more-link:hover { background: var(--cvf-navy); transform: translateY(-2px); }
.cvf-campaigns .wp-block-post:first-child:hover { transform: none; }
@media (max-width: 1023px) { .cvf-campaigns .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 781px) {
  .cvf-campaigns .wp-block-post-template { grid-template-columns: 1fr !important; }
  .cvf-campaigns .wp-block-post:first-child { grid-template-columns: 1fr; }
  .cvf-campaigns .wp-block-post:first-child .wp-block-post-featured-image { position: relative; width: 100%; height: 220px; order: -1; }
  .cvf-campaigns .wp-block-post:first-child .wp-block-post-featured-image img { clip-path: none; }
  /* At this fixed 220px strip height the image is cropped hard; keep the top of the frame
     (where this photo's subject is) fully in view and let any excess be cropped from below. */
  .cvf-campaigns .wp-block-post.post-13 .wp-block-post-featured-image img { object-position: center top; }
  .cvf-campaigns .wp-block-post:first-child:has(.wp-block-post-featured-image) > :not(.wp-block-post-featured-image) { max-width: none; }
  .cvf-campaigns .wp-block-post:first-child { display: flex; flex-direction: column; }
  .cvf-campaigns .wp-block-post:first-child > :not(.wp-block-post-featured-image) { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Newsletter placeholder */
.cvf-newsletter-placeholder { padding: 2rem !important; background: var(--cvf-white); border: 1.5px dashed var(--cvf-grey); border-radius: var(--cvf-radius); padding: 2rem; color: var(--cvf-ink-2); }

/* Home spacing: give each top-level block room */
.home .entry-content > * + * { margin-top: var(--cvf-space-8); }
.home .entry-content > h2 + *, .home .entry-content > .cvf-section-head + * { margin-top: var(--cvf-space-6); }
.home .entry-content > .wp-block-columns + p { margin-top: var(--cvf-space-5); }
.home .entry-content > .cvf-hero + * { margin-top: var(--cvf-section-y); }
.home .entry-content > .alignfull + * { margin-top: var(--cvf-section-y); }
.home .entry-content > * + .alignfull { margin-top: var(--cvf-section-y); }
.home .entry-content > :last-child { margin-bottom: var(--cvf-section-y); }
.home .entry-content > .alignfull:last-child { margin-bottom: 0; }
/* The Inquiry photo already ends on a strong dark edge, so the full section-y gap before
   "Latest from CVF" reads as a stray blank strip rather than intentional breathing room —
   pull it in to a tighter, still-deliberate gap. */
.home .entry-content > .cvf-inquiry.alignfull + .cvf-eyebrow { margin-top: var(--cvf-space-6); }

/* =============================================================================
   11. FOOTER
   ========================================================================== */
.site-footer { background: var(--cvf-plum); color: rgba(250,249,246,0.85); }
.site-footer .footer-widgets {
  background: var(--cvf-plum);
  color: rgba(250,249,246,0.85);
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0 2.5rem;
  border-top: 6px solid var(--cvf-mauve);
}
.footer-widgets .inside-footer-widgets { padding: 0 var(--cvf-gutter); gap: 2.5rem; }
.footer-widgets h3, .footer-widgets h3.wp-block-heading, .footer-widgets .widget-title {
  color: var(--cvf-white);
  font-size: var(--cvf-text-small);
  font-weight: 700;
  letter-spacing: var(--cvf-tracking-caps);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-widgets p { font-size: 0.95rem; line-height: 1.65; color: rgba(250,249,246,0.85); max-width: 40ch; }
.footer-widgets a { color: var(--cvf-white); text-decoration: none; }
.footer-widgets a:hover { color: var(--cvf-mauve); text-decoration: underline; }
.footer-widgets .widget { margin-bottom: 1.5rem; }
.footer-widgets img { max-height: 60px; width: auto; }
.footer-widgets .wp-block-social-links { gap: 0.6rem; }
.footer-widgets .wp-block-social-link { background: rgba(255,255,255,0.1) !important; border-radius: 50%; transition: background-color var(--cvf-dur-fast) ease, transform var(--cvf-dur-fast) var(--cvf-ease); }
.footer-widgets .wp-block-social-link:hover { background: var(--cvf-mauve) !important; transform: translateY(-2px); }
.footer-widgets .wp-block-social-link a { color: var(--cvf-white) !important; padding: 0.55em; }
.footer-widgets .wp-block-social-link:hover a { color: var(--cvf-navy) !important; }
.site-info { background: var(--cvf-plum-deep); color: rgba(250,249,246,0.7); font-size: var(--cvf-text-small); }
.site-info .inside-site-info { padding: 1.1rem var(--cvf-gutter); }
.site-info .copyright-bar { display: block; }
.site-info a { color: var(--cvf-white); }
.site-info .copyright-bar a[href*="generatepress"] { display: none; }

/* =============================================================================
   12. MOTION — scroll reveal, bounce, parallax
   (JS adds .cvf-js to <html>, .cvf-reveal to targets, .is-visible when in view.)
   ========================================================================== */
.cvf-js .cvf-reveal {
  opacity: 0;
  transform: translate3d(0, var(--cvf-reveal-y), 0);
  transition: opacity var(--cvf-dur-reveal) var(--cvf-ease), transform var(--cvf-dur-reveal) var(--cvf-ease);
  transition-delay: var(--cvf-delay, 0ms);
  will-change: opacity, transform;
}
.cvf-js .cvf-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.cvf-js .cvf-reveal-bounce { transition-timing-function: var(--cvf-ease-bounce), var(--cvf-ease-bounce); transition-duration: calc(var(--cvf-dur-reveal) + 80ms); }
.cvf-js .cvf-reveal-bounce:not(.is-visible) { transform: translate3d(0, calc(var(--cvf-reveal-y) + 12px), 0) scale(0.985); }
.cvf-js .cvf-reveal-fade:not(.is-visible) { transform: none; }
.cvf-js .cvf-reveal-left:not(.is-visible) { transform: translate3d(-40px, 0, 0); }
.cvf-js .cvf-reveal-right:not(.is-visible) { transform: translate3d(40px, 0, 0); }
/* Hover lift shouldn't fight the reveal transition once visible */
.cvf-js .cvf-reveal.is-visible.wp-block-column, .cvf-js .cvf-reveal.is-visible.wp-block-post, .cvf-js .cvf-reveal.is-visible.cvf-card { transition: transform var(--cvf-dur) var(--cvf-ease), box-shadow var(--cvf-dur) var(--cvf-ease), border-color var(--cvf-dur) ease; }

/* Hero entrance (no observer needed) */
.cvf-js .cvf-hero .wp-block-cover__inner-container > * { animation: cvfRise 900ms var(--cvf-ease) both; }
.cvf-js .cvf-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 110ms; }
.cvf-js .cvf-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 200ms; }
.cvf-js .cvf-hero .wp-block-cover__inner-container > :nth-child(4) { animation-delay: 280ms; }
.cvf-js .cvf-hero::before { animation: cvfSweep 1100ms var(--cvf-ease) 250ms both; }
.cvf-js .cvf-hero .wp-block-cover__image-background { animation: cvfPhoto 1300ms var(--cvf-ease) both; }
@keyframes cvfRise { from { opacity: 0; transform: translate3d(0, 36px, 0); } to { opacity: 1; transform: none; } }
@keyframes cvfSweep { from { opacity: 0; transform: translate3d(-40px, 30px, 0); } to { opacity: 0.95; transform: translate3d(0,0,0); } }
@keyframes cvfPhoto { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================================
   13. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cvf-js .cvf-reveal, .cvf-js .cvf-reveal-bounce, .cvf-js .cvf-reveal:not(.is-visible) { opacity: 1; transform: none; transition: none; }
  .cvf-js .cvf-hero .wp-block-cover__inner-container > *, .cvf-js .cvf-hero::before, .cvf-js .cvf-hero .wp-block-cover__image-background { animation: none; }
  .cvf-parallax .wp-block-cover__image-background, .cvf-parallax > img, .cvf-parallax .cvf-parallax-layer { transform: none !important; }
  .wp-block-button__link, .cvf-card, .wp-block-post, .wp-block-column, .site-header, .main-navigation a, .main-navigation a::after { transition-duration: 1ms !important; }
  .wp-block-button__link:hover, .cvf-card:hover, .wp-block-post:hover, .home .entry-content > .wp-block-columns > .wp-block-column:hover { transform: none; }
}

/* =============================================================================
   14. RESPONSIVE REFINEMENTS
   ========================================================================== */
@media (max-width: 1023px) {
  .footer-widgets .inside-footer-widgets { gap: 2rem; }
}
@media (max-width: 781px) {
  :root { --cvf-reveal-y: 28px; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
  .wp-block-columns { gap: 1rem; }
  .wp-block-post-template.is-layout-grid, ul.wp-block-post-template.columns-3 { grid-template-columns: 1fr !important; }
  .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > blockquote { padding-right: var(--cvf-gutter); }
  .home .entry-content > * + * { margin-top: var(--cvf-space-7); }
  .wp-block-buttons > .wp-block-button { width: auto; }
}
@media (max-width: 430px) {
  .wp-block-button__link, .cvf-btn { width: 100%; }
  .wp-block-buttons > .wp-block-button { width: 100%; }
  .site-logo img, .header-image { max-height: 44px; }
  .entry-header .entry-title, .page-header h1 { font-size: 2.125rem; }
}
@media (min-width: 1440px) {
  :root { --cvf-container: 1240px; --cvf-container-wide: 1400px; }
}

/* =============================================================================
   15. UTILITIES
   ========================================================================== */
.cvf-center { text-align: center; }
.cvf-center h2, .cvf-center p, .cvf-center .cvf-eyebrow { margin-left: auto; margin-right: auto; }
.cvf-center .wp-block-buttons { justify-content: center; }
.cvf-max-narrow { max-width: 62ch; }
.cvf-max-narrow.cvf-center { margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.cg-ga { display: none !important; }

/* =============================================================================
   16. PER-POST HEADER IMAGE ADJUSTMENTS
   ========================================================================== */
/* "Covid Inquiry Module 3" (post 256): the source photo has a "#OneOfTheTwo"
   caption baked into the top of the frame — shift the crop window down so the
   header only ever shows the two witnesses, never the caption text. */
.postid-256 .page-header-image-single img { object-position: 50% 100%; }