/*
Theme Name: DCP Theme
Theme URI: https://detroitcreativity.org/
Author: UUDLY
Author URI: https://uudly.com/
Description: Full Site Editing block theme for the Detroit Creativity Project. A Detroit non-profit using improv to teach confidence to young people. Brand colors (orange #F58321 / navy #181A5F), Brandon Grotesque type ramp, and a set of DCP block-style variations and patterns. Pairs with the dcp-content companion plugin for Programs, Team, and Partner content.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dcp
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, non-profit, one-column, two-columns, three-columns
*/

/* =================================================================
   DCP Theme — supplemental styles
   -----------------------------------------------------------------
   theme.json carries the design TOKENS (colors, type ramp, spacing)
   and element defaults (h1–h4, links, buttons). This file carries
   only what theme.json cannot express: block-STYLE-VARIATION CSS,
   ::before/::after decorations (bracket tags, curly quotes), the
   sticky-header backdrop, the hero gradient overlay, and a few
   layout treatments. Loaded on the front end AND in the editor
   (see functions.php) so the site editor previews accurately.
   ================================================================= */

:root {
  --dcp-shadow-sm: 0 1px 2px rgba(24, 26, 95, 0.06);
  --dcp-shadow-md: 0 6px 18px rgba(24, 26, 95, 0.10);
  --dcp-shadow-lg: 0 18px 40px rgba(24, 26, 95, 0.14);
  --dcp-shadow-focus: 0 0 0 3px rgba(245, 131, 33, 0.35);
}

html {
  scroll-behavior: smooth;
}

/* -----------------------------------------------------------------
   Disable WordPress's automatic blockGap between top-level site blocks.
   WP emits `:where(.wp-site-blocks) > * { margin-block-start: <blockGap> }`
   which adds a 24px gap between the header, main, and footer. We control
   section spacing via each section's own padding instead, so the gap is
   unwanted. Selector (0,1,0) beats `:where()` (0,0,0), and using the same
   logical property avoids physical-vs-logical resolution quirks.
   ----------------------------------------------------------------- */
.wp-site-blocks > * { margin-block-start: 0; }

/* -----------------------------------------------------------------
   Accessibility — orange focus ring on every interactive element
   ----------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =================================================================
   SITE HEADER  (parts/header.html → group.dcp-header)
   ================================================================= */
.dcp-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* No backdrop-filter: it creates a stacking context on the header, which
     trapped the mobile nav overlay (a position:fixed descendant) inside the
     header's z-index:30 layer — so even at z-index:100000 the overlay rendered
     BEHIND page Cover blocks. Confirmed via DOM probe: the header was the
     overlay's stacking-context ancestor. Background is ~solid white so the
     frosted blur was barely visible; dropping it fixes the overlay. */
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.dcp-logo-name {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  line-height: 1.15;
}
.dcp-logo-name a { color: inherit; text-decoration: none; }
.dcp-logo-name a:hover { color: var(--wp--preset--color--orange); } 
.dcp-header .wp-block-navigation a,
.dcp-header .wp-block-navigation .wp-block-navigation-item__content {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.dcp-header .wp-block-navigation a:hover { color: var(--wp--preset--color--orange); }
.dcp-header .wp-block-navigation .current-menu-item a {
  color: var(--wp--preset--color--orange);
  box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--orange);
}
/* Submenu dropdown panel (the "Programs" flyout).*/
.dcp-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {

  top: 100%;
  margin-top: 10px;
  padding: 9px;
  min-width: max-content;
  background: #fff;
  border: 1px solid var(--wp--preset--color--orange-soft, #fbd9b7);
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(14, 17, 71, 0.14);
}
/* Each item inside the panel: comfortable click target + rounded hover fill. */
.dcp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 9px 14px;
  white-space: nowrap;
}
.dcp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--canvas-warm, #faf6f1);
  color: var(--wp--preset--color--orange);
}
/* Collapse the main menu to the hamburger at <=900px.
   The core navigation block only collapses at its built-in 600px (overlayMenu
   "mobile") and offers no custom breakpoint. So for the 600–900px band we
   force core's collapsed state ourselves: show the open (hamburger) button and
   hide the inline link container until it's opened (.is-menu-open). Below 600px
   core already does this; this rule simply extends it up to 900px. */
@media (max-width: 900px) {
  .dcp-header .wp-block-navigation__responsive-container-open { display: flex; }
  .dcp-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

/* Mobile nav overlay positioning.
   The header nav uses a CUSTOM overlay template part (parts/navigation-overlay.html),
   so the container gets the `disable-default-overlay` class — which means core
   does NOT apply its usual position:fixed + z-index:100000 fly-out styling and
   expects the theme to position it. Without this the opened menu just expands
   inline in the document flow at the header's stacking level and renders among/
   behind the page. Make it a full-screen fixed layer on open. */
.dcp-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  overflow: auto;
}
/* Lock background scroll while the menu is open (core adds this class to the
   container; mirror it on the body via the nav block's own handling). */
.dcp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  width: 100%;
}

/* =================================================================
   SITE FOOTER  (parts/footer.html → group.dcp-footer)
   ================================================================= */

/* Migrated from block-level "Custom CSS" (Advanced panel) into the theme so
   the DCP Editor role — which can't edit CSS — doesn't strip it on save.
   The Donate Orange band + headline also appear via the dcp/donate-orange
   pattern on Home/Impact/Team, so these are scoped to their own classes. */
.dcp-donate-orange {
  background-size: 50% !important;
  background-repeat: no-repeat;
  background-position: 94% 100%;
}
.dcp-donate-headline {
  -webkit-text-stroke: 2px #181a5f;
  text-shadow: 3px 2px 0px #181a5f;
  font-size: clamp(36px, 3.2vw, 44px);
}
.dcp-footer-contact {
  list-style-type: none;
  padding-left: 0;
}

.dcp-footer { background: var(--wp--preset--color--navy); color: #fff; }
.dcp-footer .wp-block-heading,
.dcp-footer h4 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange);
  font-weight: 800;
}
.dcp-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.dcp-footer a:hover { color: var(--wp--preset--color--orange); }
.dcp-footer p { color: rgba(255, 255, 255, 0.78); }
.dcp-footer-wordmark { font-weight: 900; font-size: 18px; letter-spacing: 0.02em; color: #fff; }
.dcp-socials .wp-block-button__link {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent; color: #fff;
  font-weight: 800; font-size: 11px; border-radius: 4px;
}
.dcp-footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.dcp-footer-legal p { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 0; }
.dcp-footer-legal-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}
.dcp-footer-legal-links a:hover,
.dcp-footer-legal-links a:focus-visible { color: var(--wp--preset--color--orange); }

/* =================================================================
   PAGE HEADS  (group.dcp-page-head + a color variation)
   ================================================================= */
.dcp-page-head { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--70); }
.dcp-page-head .wp-block-heading {
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.dcp-page-head.is-style-dcp-orange .wp-block-heading,
.dcp-page-head.is-style-dcp-orange p,
.dcp-page-head.is-style-dcp-navy .wp-block-heading,
.dcp-page-head.is-style-dcp-navy p { color: #fff; }
.dcp-page-head.is-style-dcp-navy p,
.dcp-page-head.is-style-dcp-orange p { color: rgba(255, 255, 255, 0.92); }

/* =================================================================
   BLOCK STYLE VARIATIONS — backgrounds (core/group)
   ================================================================= */
.wp-block-group.is-style-dcp-warm { background-color: var(--wp--preset--color--canvas-warm); }
.wp-block-group.is-style-dcp-orange { background-color: var(--wp--preset--color--orange); }
.wp-block-group.is-style-dcp-navy { background-color: var(--wp--preset--color--navy); }

/* Light text inside dark/orange section wrappers */
.is-style-dcp-orange :where(h1,h2,h3,h4,h5,h6),
.is-style-dcp-orange :where(p,li),
.is-style-dcp-navy :where(h1,h2,h3,h4,h5,h6),
.is-style-dcp-navy :where(p,li) { color: #fff; }

/* =================================================================
   IMPACT STAT TILES — block style variations on core/group
   ================================================================= */
.is-style-dcp-stat-warm,
.is-style-dcp-stat-orange,
.is-style-dcp-stat-navy {
  padding: var(--wp--preset--spacing--60);
  border-radius: 10px;
  border-top: 4px solid var(--wp--preset--color--orange);
}
.is-style-dcp-stat-warm { background: var(--wp--preset--color--canvas-warm); }
.is-style-dcp-stat-orange { background: var(--wp--preset--color--orange); border-top-color: var(--wp--preset--color--navy); }
.is-style-dcp-stat-navy { background: var(--wp--preset--color--navy); border-top-color: var(--wp--preset--color--orange); }
.is-style-dcp-stat-orange :where(h1,h2,h3,h4,p),
.is-style-dcp-stat-navy :where(h2,h3,h4,p) { color: #fff; }
.is-style-dcp-stat-navy .wp-block-heading { color: #fff; }
/* the big number keeps orange on navy tiles when it is the heading */
.is-style-dcp-stat-navy .dcp-stat-num { color: var(--wp--preset--color--orange); }
/* on the ORANGE tile, white fails (2.6:1) — use navy (6:1). Overrides the
   white set on line 238 for the big number specifically. */
.is-style-dcp-stat-orange .dcp-stat-num { color: var(--wp--preset--color--navy); }
.dcp-stat-num {
  font-weight: 900;
  font-size: clamp(48px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--navy);
}
.dcp-stat-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--ink-2);
}

/* =================================================================
   EYEBROW + BRACKET TAG  (heading/paragraph style variations)
   ================================================================= */
.is-style-dcp-eyebrow {
  font-weight: 800 !important;
  font-size: 12px !important;
  display: inline-block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Default = accessible "Orange Deep" (#A85000, 5.5:1 on white) since most
     eyebrows sit on light backgrounds. On dark surfaces the eyebrow is
     overridden to bright orange below (and inline has-orange-color also wins). */
  color: var(--wp--preset--color--orange-deep);
  margin-bottom: 6px;
}
/* On NAVY / dark surfaces the eyebrow needs the BRIGHT orange (orange-deep is
   too dark on navy: 2.8:1; bright orange on navy = 6:1). Covers the section
   style variations (is-style-dcp-navy), the navy stat card, and dark photo
   covers. `:not(.has-text-color)` defers to any explicit inline color choice. */
.is-style-dcp-navy .is-style-dcp-eyebrow:not(.has-text-color),
.is-style-dcp-stat-navy .is-style-dcp-eyebrow:not(.has-text-color),
.wp-block-cover .is-style-dcp-eyebrow:not(.has-text-color) {
  color: var(--wp--preset--color--orange);
}
/* On ORANGE surfaces the eyebrow needs NAVY (orange-deep on orange is low
   contrast; navy on orange = 6:1). */
.is-style-dcp-orange .is-style-dcp-eyebrow:not(.has-text-color),
.is-style-dcp-stat-orange .is-style-dcp-eyebrow:not(.has-text-color) {
  color: var(--wp--preset--color--navy);
}
.is-style-dcp-display-poster {
  font-family: var(--wp--preset--font-family--brandon-grotesque), "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
}
.is-style-dcp-bracket-tag {
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--wp--preset--color--navy);
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  width: fit-content;
}
.is-style-dcp-bracket-tag::before { content: "["; color: var(--wp--preset--color--orange); font-weight: 900; }
.is-style-dcp-bracket-tag::after { content: "]"; color: var(--wp--preset--color--orange); font-weight: 900; }
/* light variant for dark/orange backgrounds */
.is-style-dcp-navy .is-style-dcp-bracket-tag,
.is-style-dcp-orange .is-style-dcp-bracket-tag,
.is-style-dcp-bracket-tag.has-text-color.has-white-color {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* =================================================================
   BUTTON STYLE VARIATIONS  (core/button → __link)
   theme.json already styles the default (orange) button.
   ================================================================= */
.wp-block-button.is-style-dcp-secondary .wp-block-button__link {
  background-color: var(--wp--preset--color--navy); color: #fff;
}
.wp-block-button.is-style-dcp-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--navy-deep);
}
.wp-block-button.is-style-dcp-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--navy);
  border: 2px solid var(--wp--preset--color--navy);
}
.wp-block-button.is-style-dcp-ghost .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--navy); color: #fff;
}
.wp-block-button.is-style-dcp-onorange .wp-block-button__link {
  background-color: #fff; color: var(--wp--preset--color--orange-deep);
  border: 2px solid #fff;
}
.wp-block-button.is-style-dcp-onorange .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-dcp-ghost-light .wp-block-button__link {
  background-color: transparent; color: #fff; border: 2px solid #fff;
}
.wp-block-button.is-style-dcp-ghost-light .wp-block-button__link:hover {
  background-color: #fff; color: var(--wp--preset--color--navy);
}

/* core/read-more styled as the orange primary button. Used in the Programs
   query loop so the "Learn more" CTA links DYNAMICALLY to each post's
   permalink (a plain core/button can't bind to the current post's URL inside
   a Query Loop; read-more resolves it automatically). Mirrors the theme.json
   button element styling, since read-more renders a bare <a> (no __link). */
a.wp-block-read-more {
  display: inline-block;
  background-color: var(--wp--preset--color--orange);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 14px 28px;
  font-family: var(--wp--preset--font-family--brandon-grotesque);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
a.wp-block-read-more:hover {
  background-color: var(--wp--preset--color--orange-deep);
  color: #fff;
}
a.wp-block-read-more .screen-reader-text {
  /* keep the appended ": Post Title" for a11y, visually hidden */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =================================================================
   TESTIMONIAL  (group.dcp-testimonial) — big centered display quote
   ================================================================= */
.dcp-testimonial { text-align: center; }
.dcp-testimonial .dcp-bigquote {
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}
.dcp-testimonial .dcp-bigquote::before { content: "\201C"; color: var(--wp--preset--color--orange); }
.dcp-testimonial .dcp-bigquote::after { content: "\201D"; color: var(--wp--preset--color--orange); }
.dcp-cite {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-2);
}

/* =================================================================
   PROGRAM CARDS / ROWS
   ================================================================= */
.dcp-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--dcp-shadow-sm);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.dcp-card:hover { transform: translateY(-3px); box-shadow: var(--dcp-shadow-md); }
.dcp-card .wp-block-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.dcp-meta {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--orange); font-weight: 700;
}

/* =================================================================
   RESEARCH PAPER TILES  (group style variations)
   ================================================================= */
.is-style-dcp-paper,
.is-style-dcp-paper-placeholder {
  background: var(--wp--preset--color--canvas-warm);
  border-radius: 10px;
  border-left: 4px solid var(--wp--preset--color--orange);
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.is-style-dcp-paper-placeholder {
  border-left-style: dashed;
  border-left-color: var(--wp--preset--color--ink-3);
  opacity: 0.72;
}
.dcp-paper-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 14px 10px;
  background: var(--wp--preset--color--navy); color: #fff;
  font-weight: 900; font-size: 13px; letter-spacing: 0.16em; border-radius: 4px;
}
.is-style-dcp-paper-placeholder .dcp-paper-badge { background: var(--wp--preset--color--ink-3); }

/* TBD flag for placeholder content (editor + front visible) */
.dcp-tbd {
  display: inline-block;
  padding: 2px 10px;
  border: 1.5px dashed var(--wp--preset--color--orange);
  border-radius: 999px;
  font-weight: 800; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--orange-deep);
  background: var(--wp--preset--color--orange-soft);
}

/* =================================================================
   ANNUAL REPORT CARDS  (core/cover.dcp-report)
   ================================================================= */
.dcp-report { border-radius: 10px; overflow: hidden; }
.dcp-report .wp-block-cover__inner-container { align-self: flex-end; }
.dcp-report .dcp-report-year { font-weight: 900; font-size: 44px; line-height: 1; color: #fff; letter-spacing: -0.02em; }

/* =================================================================
   VOICES — quote style variations
   ================================================================= */
.wp-block-quote.is-style-dcp-voice-teacher {
  background: var(--wp--preset--color--canvas-warm);
  border-left: 4px solid var(--wp--preset--color--orange);
  border-radius: 10px;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.wp-block-quote.is-style-dcp-voice-student {
  background: var(--wp--preset--color--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.is-style-dcp-voice-student p { color: #fff; }
.wp-block-quote.is-style-dcp-instructor-quote {
  background: var(--wp--preset--color--canvas-warm);
  border-left: 4px solid var(--wp--preset--color--orange);
  border-radius: 4px;
  padding: 14px 16px;
  font-style: italic;
}
.is-style-dcp-voice-teacher p::before,
.is-style-dcp-voice-student p::before,
.is-style-dcp-instructor-quote p::before { content: "\201C"; color: var(--wp--preset--color--orange); font-weight: 900; }
.is-style-dcp-voice-teacher p::after,
.is-style-dcp-voice-student p::after,
.is-style-dcp-instructor-quote p::after { content: "\201D"; color: var(--wp--preset--color--orange); font-weight: 900; }
.wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
  font-style: normal; font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-3);
}

/* =================================================================
   DEEP METRICS GRID  (group.dcp-metrics)
   ================================================================= */
.dcp-metric-num {
  font-weight: 900; font-size: clamp(44px, 5vw, 64px); line-height: 1;
  /* orange-deep (#A85000, 5.2:1 on warm) — bright orange was 2.4:1 */
  color: var(--wp--preset--color--orange-deep); letter-spacing: -0.03em;
}
.dcp-metric-label { font-weight: 700; font-size: 16px; color: var(--wp--preset--color--navy); line-height: 1.3; }
/* ink-3 (#8A8A8A) is only 3.2:1 on warm — too light for 12px body text. Use a
   darker grey that clears 4.5:1. */
.dcp-metric-meta { font-size: 12px; color: #6b6b6b; }
.dcp-metric-delta {
  font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--orange-deep);
}

/* =================================================================
   PENDING TILE  (group.dcp-pending) — "+N more" team callout
   ================================================================= */
.dcp-pending {
  background: var(--wp--preset--color--navy); color: #fff;
  border-radius: 10px; text-align: center;
  padding: var(--wp--preset--spacing--60);
}
.dcp-pending .dcp-pending-count { font-weight: 900; font-size: 88px; line-height: 1; color: var(--wp--preset--color--orange); }
.dcp-pending .dcp-pending-label { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }

/* =================================================================
   TEAM GRIDS + BIO CARD  (PHP-query patterns)
   ================================================================= */
.dcp-bio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dcp-instructor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.dcp-bio {
  background: #fff; border-radius: 10px; box-shadow: var(--dcp-shadow-sm);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.dcp-bio:hover { box-shadow: var(--dcp-shadow-md); transform: translateY(-2px); }
.dcp-bio-photo { width: 100%; aspect-ratio: 1/1; background: var(--wp--preset--color--canvas-warm); display: block; }
.dcp-bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcp-bio-photo-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 56px; letter-spacing: 0.04em; color: var(--wp--preset--color--orange);
  background: linear-gradient(135deg, #181A5F 0%, #2a2d80 100%);
}
.dcp-bio-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 4px; }
.dcp-bio-name { font-weight: 800; font-size: 22px; color: var(--wp--preset--color--navy); margin: 0; line-height: 1.15; }
.dcp-bio-role { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--orange); margin-bottom: 8px; }
.dcp-bio-body p { font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--ink-2); margin: 0; }

@media (max-width: 781px) {
  .dcp-bio-grid, .dcp-instructor-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   FORMS (donate + contact) — visual chrome via core/html
   Real payment goes through GiveWP/Donorbox (see INSTRUCTIONS.md)
   ================================================================= */
.dcp-form { background: var(--wp--preset--color--canvas-warm); border-radius: 10px; padding: 36px; }
.dcp-form label { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin-bottom: 8px; }
.dcp-form input, .dcp-form select, .dcp-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  padding: 12px 14px; border: 1.5px solid var(--wp--preset--color--line);
  border-radius: 4px; background: #fff; color: var(--wp--preset--color--ink); margin-bottom: 16px;
}
.dcp-form input:focus, .dcp-form select:focus, .dcp-form textarea:focus {
  outline: none; border-color: var(--wp--preset--color--orange);
  box-shadow: 0 0 0 3px rgba(245,131,33,0.18);
}
.dcp-amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.dcp-amount { padding: 16px 0; border-radius: 6px; border: 1.5px solid var(--wp--preset--color--navy); background: #fff; color: var(--wp--preset--color--navy); font-weight: 800; font-size: 15px; cursor: pointer; text-align: center; }
.dcp-amount:hover { background: var(--wp--preset--color--navy); color: #fff; }
.dcp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* impact-list aside on donate page */
.dcp-impact-list { background: var(--wp--preset--color--navy); color: #fff; border-radius: 10px; padding: 24px 26px; }
.dcp-impact-row { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.15); align-items: baseline; }
.dcp-impact-row:last-child { border-bottom: none; }
.dcp-impact-amt { font-weight: 900; font-size: 22px; color: var(--wp--preset--color--orange); min-width: 70px; }
.dcp-impact-row span:last-child { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.9); }

/* =================================================================
   DONATE PAGE — emotional pitch (hero, reframed stakes, proof band)
   Logo-ticker mechanics ship with the dcp/logo-ticker block; brand
   spacing for it is layered at the bottom of this section.
   ================================================================= */

/* Hero: the featured-image cover keeps faces visible (dimRatio 60), so add a
   subtle text shadow + bottom-weighted scrim for legibility over a busy photo. */
.dcp-donate-hero { text-shadow: 0 1px 18px rgba(10,12,40,0.45); }
.dcp-donate-hero .wp-block-heading,
.dcp-donate-hero p { text-shadow: inherit; }

/* Reframed stakes: three stat tiles instead of a wall-of-text paragraph. */
.dcp-stakes-grid { gap: 18px; }
.dcp-stake {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 28px 26px;
}
.dcp-stake-num { font-weight: 900; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--wp--preset--color--orange); margin: 0 0 10px; }
.dcp-stake-label { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.92); margin: 0; }
.dcp-stakes-pivot { font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; color: #fff; }

/* Proof band: "see the joy" photo trio. */
.dcp-proof-grid .wp-block-column { display: flex; }
.dcp-proof-img { margin: 0; width: 100%; }
.dcp-proof-img img {
  width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 10px; box-shadow: var(--dcp-shadow-md);
}

/* Logo ticker — brand spacing + a hairline top rule to separate it from the
   form section above. (Animation/hover/reduced-motion come from the block.) */
.dcp-logo-ticker { border-top: 1px solid var(--wp--preset--color--line); margin-top: 18px; }
.dcp-logo-ticker__eyebrow { color: var(--wp--preset--color--ink-3); }

/* Trust line under the ticker. */
.dcp-trust-line { text-align: center; font-size: 13px; color: var(--wp--preset--color--ink-3); }

@media (max-width: 781px) {
  .dcp-proof-grid { gap: 14px; }
  .dcp-proof-img img { aspect-ratio: 16/10; }
}

/* =================================================================
   GET INVOLVED PAGE  (hero, volunteer cards, events, social mockup)
   ================================================================= */
.dcp-getinvolved-hero { text-shadow: 0 1px 18px rgba(10,12,40,0.45); }
.dcp-getinvolved-hero .wp-block-heading,
.dcp-getinvolved-hero p { text-shadow: inherit; }

/* Volunteer cards: paper tiles, equal height, CTA pinned at the bottom. */
.dcp-vol-grid .wp-block-column { display: flex; }
.dcp-vol-card { width: 100%; display: flex; flex-direction: column; }
.dcp-vol-card .dcp-vol-cta { margin-top: auto; }
.dcp-vol-cta a {
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--orange); text-decoration: none;
}
.dcp-vol-cta a:hover { color: var(--wp--preset--color--orange-deep); text-decoration: underline; }

/* Events: upcoming rows with a top hairline; compact past-highlight rows. */
.dcp-event-row { padding: 18px 0; border-top: 1px solid var(--wp--preset--color--line); }
.dcp-event-row:first-of-type { border-top: none; }
.dcp-event-date {
  font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--orange); margin: 0;
}
.dcp-event-title { color: var(--wp--preset--color--navy); margin: 2px 0 0; }
.dcp-event-meta { font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--ink-2); margin: 0; }
.dcp-event-row--past { padding: 13px 0; }
.dcp-event-title-sm { color: var(--wp--preset--color--navy); font-size: 15px; margin: 0; }

/* Social mockup grid: square tiles. Photos crop to square; brand tiles center
   their text. (Placeholder for the future Facebook feed.) */
.dcp-social-note { margin-top: 4px; }
.dcp-social-tile { margin: 0; border-radius: 10px; overflow: hidden; }
.dcp-social-tile img,
figure.dcp-social-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 10px;
}
.dcp-social-tile--text {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; border-radius: 10px;
}
.dcp-social-tile--orange { background: var(--wp--preset--color--orange); }
.dcp-social-tile--navy { background: var(--wp--preset--color--navy); }
.dcp-social-tiletext {
  font-weight: 900; font-size: clamp(20px, 2vw, 30px); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0; color: #fff;
}
.dcp-social-links { justify-content: flex-start; }

@media (max-width: 781px) {
  .dcp-social-grid { gap: 12px; }
}

/* =================================================================
   QUERY-DRIVEN GRIDS (Programs + Team, from the dcp-content CPTs)
   ================================================================= */
/* Programs landing — alternating image/text rows */
.dcp-programs-list .wp-block-post-template { gap: 80px; }
.dcp-programs-list .wp-block-post-template > li .wp-block-columns { gap: 56px; align-items: center; }
.dcp-programs-list .wp-block-post-template > li:nth-child(even) .wp-block-columns { flex-direction: row-reverse; }
.dcp-programs-list .wp-block-post-featured-image img { border-radius: 10px; box-shadow: var(--dcp-shadow-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.dcp-programs-list .wp-block-post-title { margin: 10px 0 14px; font-size: clamp(28px, 3vw, 42px); }

/* Bio grid (board + founders) */
.dcp-bio .wp-block-post-featured-image { margin: 0; }
.dcp-bio .wp-block-post-featured-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.dcp-bio .wp-block-post-title { font-weight: 800; font-size: 22px; color: var(--wp--preset--color--navy); margin: 0; line-height: 1.15; }

@media (max-width: 781px) {
  /* Nav collapse is handled by the dedicated <=900px rule above (it shows the
     hamburger and hides the inline links). */
  .dcp-amount-grid { grid-template-columns: repeat(2, 1fr); }
  .dcp-programs-list .wp-block-post-template > li:nth-child(even) .wp-block-columns { flex-direction: column; }
  /* Tighten the image/text gap on mobile (desktop keeps 56px). */
  .dcp-programs-list .wp-block-post-template > li .wp-block-columns { gap: 9px; }
}

/* Video spotlight styles now live inside assets/js/video-spotlight.js — the
   script injects them at runtime so the feature is fully self-contained (the
   CSS only matters when the script runs). See that file for the rules. */

/* =================================================================
   PROGRAM DETAIL PAGES  (single-program.html + dcp/program-* patterns)
   ================================================================= */

/* Hero — image cover w/ navy overlay (reuses hero-collage shape). */
.dcp-program-hero .wp-block-post-title {
  margin: 0;
  color: #fff;
}
.dcp-program-hero .wp-block-post-excerpt,
.dcp-program-hero .wp-block-post-excerpt p {
  color: rgba(255, 255, 255, 0.92);
}
.dcp-program-hero .wp-block-post-excerpt__more-link { display: none; }
.dcp-back-link a {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.dcp-back-link a:hover { color: #fff; }

/* About + Program-details spec box (dcp/program-details).
   The key/value rows are now a native core/table block (.dcp-spec-table) —
   editable as a normal table in the editor, styled here to match the original
   spec-list look: orange uppercase label column, white value column, hairline
   row dividers. (Legacy .dcp-spec-list rules kept below for any old instance.) */
.dcp-spec .dcp-spec-table { margin: 18px 0 0; }
.dcp-spec .dcp-spec-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.dcp-spec .dcp-spec-table td {
  padding: 12px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  vertical-align: baseline;
  word-break: break-word;
}
.dcp-spec .dcp-spec-table tr:first-child td { border-top: none; }
/* First cell = label (orange, uppercase), 40% width. */
.dcp-spec .dcp-spec-table td:first-child {
  width: 40%;
  padding-right: 18px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange);
}
/* Second cell = value (white). */
.dcp-spec .dcp-spec-table td:last-child {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

/* Legacy definition-list version (kept harmless for any unmigrated box). */
.dcp-spec .dcp-spec-list { margin: 18px 0 0; }
.dcp-spec .dcp-spec-row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  align-items: baseline;
}
.dcp-spec .dcp-spec-row:first-child { border-top: none; }
.dcp-spec .dcp-spec-row dt {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange);
}
.dcp-spec .dcp-spec-row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

/* How it works — numbered steps grid (dcp/program-steps). */
.dcp-steps { gap: 18px; }
.dcp-step { box-shadow: var(--dcp-shadow-sm); height: 100%; }
.dcp-step .dcp-step-num {
  font-family: var(--wp--preset--font-family--brandon-grotesque, inherit);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  color: var(--wp--preset--color--orange);
  margin: 0 0 4px;
}
.dcp-step h3 { color: var(--wp--preset--color--navy); margin: 0; }

/* Curriculum — lesson cards (dcp/curriculum-grid). */
.dcp-lessons { gap: 18px; }
.dcp-lesson {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--dcp-shadow-sm);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.dcp-lesson:hover { transform: translateY(-3px); box-shadow: var(--dcp-shadow-md); }
.dcp-lesson-num {
  background: linear-gradient(150deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 100%);
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dcp-lesson-num p {
  margin: 0;
  font-family: var(--wp--preset--font-family--brandon-grotesque, inherit);
  font-weight: 900;
  font-size: 54px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.22);
}
.dcp-lesson-body { flex: 1; }
.dcp-lesson-body h3 { color: var(--wp--preset--color--navy); margin: 0; }
.dcp-lesson-sub {
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--orange);
  margin: 0;
}
.dcp-lesson-cta a {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.dcp-lesson-cta a:hover { color: var(--wp--preset--color--orange); }

/* Program skills list (Improv for Educators — styled core/list). */
.dcp-skills-list { columns: 2; column-gap: 36px; padding-left: 0; list-style: none; }
.dcp-skills-list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-weight: 500;
  color: var(--wp--preset--color--navy);
  break-inside: avoid;
}
.dcp-skills-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--wp--preset--color--orange);
}

@media (max-width: 781px) {
  .dcp-spec .dcp-spec-row { grid-template-columns: 1fr; gap: 2px; }
  /* Table spec box: stack label above value on small screens. */
  .dcp-spec .dcp-spec-table table,
  .dcp-spec .dcp-spec-table tbody,
  .dcp-spec .dcp-spec-table tr { display: block; }
  .dcp-spec .dcp-spec-table td { display: block; padding: 0; border-top: none; }
  .dcp-spec .dcp-spec-table tr { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .dcp-spec .dcp-spec-table tr:first-child { border-top: none; }
  .dcp-spec .dcp-spec-table td:first-child { width: auto; padding: 0 0 2px; }
  .dcp-skills-list { columns: 1; }
  /* Steps grid uses layout:grid columnCount:2 (inline grid-template-columns);
     collapse to one column on small screens. */
  .dcp-steps { grid-template-columns: 1fr !important; }
}

/* ============ TEAM DIRECTORY: section breaks ============
   Client request (Beth, 2026-07): visible separation between the role
   groups on the Everyone tab of the team directory. */
.dcp-team-directory .dcp-everyone .dcp-group-block + .dcp-group-block {
  margin-top: 72px;
}

/* =================================================================
   MIGRATED FROM SITE-EDITOR "ADDITIONAL CSS" (2026-07)
   These rules were authored in the FSE Additional CSS panel (stored in
   the DB) and are moved here so they travel with the theme and survive
   redeploys. Keep them in the stylesheet, not the editor.
   ================================================================= */

/* Constrained layout: neutralize the vertical margins core adds between
   direct children, so blockGap/section padding fully controls rhythm. */
:root :where(.is-layout-constrained) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Click-to-open submenu toggle: breathing room to the right of the label. */
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
  padding-right: 1em;
}

/* Single post: frost the cover background behind the hero. */
.single-post span.wp-block-cover__background {
  backdrop-filter: blur(9px);
}

/* Rounded corners on the video-cover background. */
.dcp_video .wp-block-cover__background {
  border-radius: 9px;
}

/* Donate page (#9) spec-table label column. */
.page-id-9 .dcp-spec-table td:first-child {
  font-size: 27px !important;
  letter-spacing: 1px !important;
  width: 33% !important;
  vertical-align: middle !important;
}

/* Hero: fixed-attachment background + branded focus ring on its button. */
.hero > span {
  background-attachment: fixed !important;
}
.hero .wp-element-button:focus {
  outline-color: #181a5f;
}

/* Scroll-driven parallax on the hero (progressive enhancement: only where
   the browser supports animation-timeline; desktop widths only). */
@media (min-width: 900px) {
  .hero > span,
  .hero > div,
  .hero {
    animation: parallax linear;
    animation-timeline: scroll();
  }
  /* Pull the donate form card up into the hero. */
  .donate_main {
    margin-top: -180px !important;
  }
}

@media (max-width: 900px) {
  /* Reframe the home hero image on small screens. */
  .home .wp-image-142 {
    background-position: 0% 56% !important;
  }
  /* Move the nav below the CTA and push the CTA to the right. */
  nav.wp-block-navigation { order: 4; }
  .dcp-header .dcp-nav-cta { margin-left: auto; }
  /* Donate page spacing on mobile. */
  .donate_quote { padding-bottom: 90px !important; }
  .donate_secondary { padding-top: 0 !important; }
  .donate_secondary > div { margin-top: -45px !important; }
}

@keyframes parallax {
  from { background-position: 50% 55%; }
  to   { background-position: bottom 360px center; }
}

/* NOTE: `move-up` is currently unused by any rule above. Kept from the
   editor CSS with the trailing keyframe corrected (`to:-162px` was invalid
   — a keyframe body needs a property). Remove if it stays unreferenced. */
@keyframes move-up {
  from { top: 0px; }
  to   { top: -162px; }
}

/* ============================================================
   BLOG / GUIDE CARD GRID  (templates/index.html — blog home,
   category, and archive fallback). 3-column responsive cards:
   featured image, category eyebrow, title, "Read tutorial" CTA.
   ============================================================ */

.dcp-archive-title {
  color: var(--wp--preset--color--navy);
}

/* The grid: post-template with layout grid gives the columns; we just
   set the gap and a graceful responsive collapse. */
.dcp-guide-grid.wp-block-post-template {
  gap: 28px;
}
@media (max-width: 900px) {
  .dcp-guide-grid.wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .dcp-guide-grid.wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

.dcp-guide-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ece9e2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(24, 26, 95, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.dcp-guide-card:hover {
  box-shadow: 0 10px 28px rgba(24, 26, 95, 0.12);
  transform: translateY(-3px);
  border-color: #e0dcd2;
}

/* Featured image sits flush at the top; fixed height, cover. */
.dcp-guide-card__media {
  margin: 0;
}
.dcp-guide-card__media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #f4f2ec;
}

/* Body flexes so the CTA can pin to the bottom (margin-top:auto) and all
   cards align regardless of title length. */
.dcp-guide-card__body {
  flex: 1 1 auto;
}

/* Category eyebrow — reuse the eyebrow look, tint orange. */
.dcp-guide-card__cat,
.dcp-guide-card__cat a {
  color: var(--wp--preset--color--orange);
  text-decoration: none;
}

.dcp-guide-card__title,
.dcp-guide-card__title a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.dcp-guide-card__title a:hover {
  color: var(--wp--preset--color--orange);
}

/* Card CTA: the shared read-more button, sized down for the card and
   pinned to the bottom of the flex body. */
.dcp-guide-card__body a.wp-block-read-more {
  margin-top: auto;
  align-self: flex-start;
  padding: 9px 18px;
  font-size: 13px;
}