/*
Theme Name: WCDMZ
Author: Mycon
Version: 1.0
*/

/* ============================================================
   Women Cross DMZ — Base Styles
   ============================================================ */

/* Fonts loaded via <link> in header.php */

/* Global baseline: subtle 2px radius on all images. */
img {
    border-radius: 2px;
}


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --color-navy: #2C3E50;
  --color-red: #DC2626;
  --color-pink: #E7A5B0;
  --color-mustard: #E6B85C;
  --color-blue: #7B9CB8;
  --color-cream: #EFE6DA;
  --cream: #efe9de;
  --cream-open: #f5f0e6;
  --color-tan:   #CCB395;
  --color-light-cream: #FDFCFA;
  --font-body: 'Newsreader', serif;
  --font-heading: 'Newsreader', serif;
  --font-subhead: 'Manrope', sans-serif;
}


/* ============================================================
   2. BASE RESET
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #DDD5C8;
}

body {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  font-weight: 300;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-cream);
  color: #1a1a1a;
  line-height: 1.6;
  animation: page-fade-in 1.1s ease-in forwards;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* --- Heading scale (font-size via clamp = mobile → desktop) --- */
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  text-wrap: pretty;
}

body h1 {
  font-size: clamp(2.95rem, 5vw, 4.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -1.28px;
}

/* Home hero h1s keep their own sizing — set inline on front-page.php */

body h2 {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
body h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
body h4 { font-size: 1.25rem; }
body h5 { font-size: 1.125rem; }
body h6 { font-size: 1rem; }

body p {
    font-size: clamp(1.0625rem, 2vw, 1.1875rem);
    font-weight: 300;
    color: #2D2D2D;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 1.35rem;
    text-wrap: pretty;
}

/* --- Font assignments: DM Sans for UI + nav --- */
button,
#donate-tab,
.btn,
.cta {
    font-family: 'DM Sans', sans-serif !important;
}

/* --- Button shape — cut-bl-16 + rounded-sm on 3 clean corners.
       Scoped to .btn / .cta only so nav/menu/icon buttons aren't clipped. --- */
.btn,
.cta {
    border-radius: 2px;
    padding: 12px 8px;
}

/* --- Core block button (wp:button in post content) → site red button style --- */
.wp-block-button__link,
.wp-block-button .wp-block-button__link.wp-element-button {
    background-color: #DC2626 !important; /* wcdmz-red */
    color: #ffffff !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 12px 32px;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 0.15s;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: #B91C1C !important;
    color: #ffffff !important;
}

.tracking-widest,
.tracking-wider {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600 !important;
}

.nav-link {
    position: relative;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}

/* ── At-top nav: white text over hero images ───────────────────────────────
   Applies when body has .at-top (scrollY === 0).
   Scoped to desktop nav only — mega menu, mobile menu unaffected.
   ─────────────────────────────────────────────────────────────────────── */
nav .search-trigger svg { transition: stroke 0.3s ease; }

.mega-menu-section h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem !important;
    font-weight: 400;
}

footer h3.tracking-wider {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
}

/* --- Home mobile nav: dark-mobile-hero = front-page.php only --- */
@media (max-width: 1023px) {
    body.dark-mobile-hero #mobile-menu-btn { color: #000000; }
}

/* --- Hero text (eyebrow / h1 / subhead) --- */
.hero-copy {
    margin-top: 3rem; /* vertical offset of content block within desktop hero panel */
}

.hero-eyebrow {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a4b4b;
    margin-bottom: 0.75rem;
}

@media (max-width: 1023px) {
    .hero-eyebrow {
        margin-bottom: 0.65rem;
    }
}

.hero-sub {
    font-size: clamp(1.1rem, 3vw, 1.15rem);
    font-weight: 300;
    color: #262626;
    line-height: 1.6;
    font-family: var(--font-subhead);
    letter-spacing: 0.007rem;
}

/* ============================================================
   Below-hero subhead / intro statement — SINGLE control point.
   Covers: the mobile (below-hero) subhead on every page
   (.section-body .hero-sub) AND the Our Team intro statement
   (.team-intro). Edit values here to refine the new text style
   for all mobile below-hero subheads site-wide.
   ============================================================ */
.section-body .hero-sub,
.team-intro {
    font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    font-weight: 300;
    color: #262626;
    line-height: 1.45;
    font-family: var(--font-subhead);
}
.team-intro {
    max-width: 100%;
}

.team-member {
    font-size: clamp(1.25rem, 1.75vw, 1.35rem);
    font-weight: 500;
    color: #262626;
    line-height: 1.4;
}

.team-member-role {
    font-size: clamp(1rem, 1.75vw, 1.1rem);
    font-weight: 400;
    color: #666;
    line-height: 1.4;
}

/* --- Text-only hero (News+Media, Resources) — adjust min-height here to resize all at once --- */
.text-hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    padding-top: 74px; /* fixed nav clearance */
}

/* --- Post landing page hero — all content type archives, Donate, FAQs, Newsletter --- */
/* Single control point for spacing across all post landing pages */
.post-landing-hero {
    min-height: 520px;
    display: flex;
    align-items: center;
    padding-top: 74px; /* fixed nav clearance */
}

/* --- Interior page hero — single control point for all standard interior heroes ---
   Adjust min-height here to resize all at once. Override per-page with inline Tailwind. */
.page-hero {
    height: 280px;
}
@media (min-width: 1024px) {
    .page-hero {
        height: auto;
        min-height: 480px;
    }
}

/* Condensed hero for paginated archive pages (page 2+) */
.post-landing-hero-paged {
    min-height: 160px;
    display: flex;
    align-items: center;
    padding-top: 74px; /* fixed nav clearance */
    padding-bottom: 4rem; /* extra air for 45° section cut */
}
.post-landing-hero-paged .hero-sub {
    display: none;
}

/* --- Diagonal layout hero (Advocate, Educate, Organize, Take Action, Events) --- */
/* Edit here to adjust all 5 diagonal pages at once                               */
.diag-hero {
    /* outer section — bg and overflow set per page */
}

/* Mobile nav clearance override for diagonal pages — 34px instead of global 74px.
   Apply .diag-hero-pt to the mobile copy block that uses pt-[34px] lg:pt-[74px] on diag pages. */
.diag-hero-pt {
    padding-top: 34px;
}
@media (min-width: 1024px) {
    .diag-hero-pt {
        padding-top: 74px;
    }
}

/* ── Tan diagonal panel — home hero treatment applied to all interior diag pages ──
   Only width changes at breakpoints — clip-path angle stays fixed at 470px run.
   ─────────────────────────────────────────────────────────────────────────────── */
.hero-tan-panel {
    position: absolute;
    top: -2px; bottom: 0; left: 0;
    width: max(620px, calc((100vw - 1280px) / 2 + 690px));
    clip-path: polygon(0% 0%, calc(100% - 470px) 0%, 100% 100%, 0% 100%);
}
@media (max-width: 1400px) and (min-width: 1081px) {
    .hero-tan-panel { width: max(765px, calc((100vw - 1280px) / 2 + 690px)); }
}
@media (max-width: 1080px) {
    .hero-tan-panel { width: max(720px, calc((100vw - 1280px) / 2 + 690px)); }
}
/* Desktop wrapper height — used by educate/advocate/organize/take-action/events */
.diag-hero-desktop {
    height: 800px;
}

/* Image-hero contrast bar — mirrors the reverse-scroll nav surface, sits behind
   the tan diagonal panel so it only reads as a frosted strip over the image side.
   Real DOM element (injected by JS into .diag-hero-desktop). Toggled by JS in
   the same code path as the nav-item opacity, so timing matches exactly. */
.image-hero-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 74px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
   -webkit-mask-image: linear-gradient(to bottom, white 0%, white 95%, transparent 100%);
            mask-image: linear-gradient(to bottom, white 0%, white 95%, transparent 100%);
    opacity: 1;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.image-hero-bar.is-hidden { opacity: 0; }

/* Eliminate sub-pixel gap between diag-hero and the next section */
.diag-hero + section {
    margin-top: -1px;
}

/* Drop shadow on the diagonal-cut mobile copy block */
.diag-panel-shadow {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25));
}

/* Mobile tan copy block — 60px diagonal cut bottom-right */
.diag-hero-mobile-panel {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
}

/* --- Home mobile hero — bold type-first treatment --- */
/*.home-mobile-hero h1 {
    font-size: clamp(3.5rem, 18vw, 6rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
    font-weight: 900 !important;
}*/
.home-mobile-hero .hero-sub p {
    font-weight: 100;
    font-size: 18px;
}

/* Hide line break in home subhead up to 1080px — avoids awkward 3-line wrap in the tablet/small-desktop range */
@media (max-width: 1080px) {
    .home-hero-sub br { display: none; }
}

/* --- Single post hero — shorter + balanced heading spacing --- */
.single-hero {
    min-height: 520px;
}
@media (max-width: 767px) {
    .single-hero {
        min-height: 282px;
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
}
.single-hero h1 {
    font-size: clamp(1.8rem, 5vw, 3.2rem) !important;
    margin-bottom: 1.5rem !important;
    line-height: 4rem;
}
@media (max-width: 767px) {
    .single-hero h1 {
        line-height: 2.17rem;
        letter-spacing: 0.00045rem;
    }
}

.single-hero .hero-eyebrow {
    margin-bottom: 0.75rem;
}

/* --- Secondary tile sizing — math: (710px featured - 24px gap) / 2 = 343px per tile --- */

/* Media area: image + eyebrow + heading only (no date) = ~113px body → 230px media */
.tile-media-secondary {
    aspect-ratio: 16 / 9;
    max-height: 220px;
    overflow: hidden;
    flex-shrink: 0;
}

.tile-media-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.tile-secondary {
    overflow: hidden;
}

/* lg+ : shrink secondary media + cap total height to bring stacked
   secondaries closer to featured-tile parity on home Latest News. */
@media (min-width: 1024px) {
    .tile-media-secondary {
        max-height: 170px;
    }
    .tile-secondary {
        max-height: 380px;
    }
}

/* No-media tiles: compact 244px, content packed at top */
.tile-no-media {
    height: 244px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    overflow: hidden;
}

/* ── Shared card internals ───────────────────────────────────
   .card-content: inner padding wrapper — image+text cards use this on
                  the content div; flat cards own padding via their type rule.
   .card-meta:    date/label row present on all standard cards.
   ─────────────────────────────────────────────────────────── */
.card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 1.25rem;
}

/* ── Card headings — single control point ────────────────────
   .card-h3 is the canonical class. .card-base h3 aliases it
   so cards without an explicit class are covered automatically.
   Featured tile on homepage gets its own larger value below.
   ─────────────────────────────────────────────────────────── */
.card-base h3, .card-h3 {
    font-size: clamp(1.35rem, 3vw, 1.6rem) !important;
    line-height: 1.25;
    color: #171717;
    transition: color 0.2s ease;
    margin-top: 0;
    font-weight: 400;
    margin-bottom: 0;

}
.card-content p {
    margin-top: 0.4rem;
}
.card-base.group:hover h3 {
    color: #b8442e;
}
.tile-featured.group:hover h3 {
    color: #E6B85C;
}

.featured-tile-wrap .card-base h3 {
    font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
    line-height: 1.25 !important;
}

/* ── Featured section tile ───────────────────────────────────── */
.featured-tile {
    background: #151210;
    border-radius: 0.375rem; /* rounded */
    padding: 2rem;         /* p-10 */
    display: flex;
    flex-direction: column;
}
@media (max-width: 1023px) {
    .featured-tile {
        padding: 1.5rem;  
    }
}
.featured-tile__badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #b8442e;
    color: #fff;
    padding: 0.2rem 0.65rem;
    font-family: 'DM Sans';
}
.featured-tile__date {
    font-size: 0.875rem;
    color: #b3a89a;
}
.featured-tile__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b3a89a;
}
.featured-tile__title {
    color: #fff;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.25 !important;
}
.featured-tile:hover .featured-tile__title {
    color: #E6B85C;
}
.featured-tile__excerpt {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.featured-tile__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #E6B85C;
    font-size: 0.875rem;
    font-weight: 300;
    font-family: var(--font-nav, 'DM Sans', sans-serif);
    transition: gap 0.2s ease;
    letter-spacing: 0.03rem;
}
.featured-tile:hover .featured-tile__cta {
    gap: 0.75rem;
}

/* Media-to-body separator — only fires when a media block sits above the copy div */
.tile-media-secondary + div,
.card-base .aspect-video + div,
.tile-card > div:first-child + div {
    border-top: 1px solid #D1D5DB; /* neutral-300 */
}
.tile-featured > div:first-child + div {
    border-top: none;
}
/* Event blur-backdrop tiles: the bg div is the first child, but the next
   sibling shouldn't get the media-to-body separator line. */
.event-card-bg + div {
    border-top: none !important;
}

.hp-latest-news .tile-card {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12));
}

/* ── Homepage Latest News tiles — larger cut ────────────────
   Overrides .tile-card cut for the hp-latest-news section only.
   Applies to all 3 card variants: featured, secondary media, secondary no-media.
   ─────────────────────────────────────────────────────────── */
.hp-latest-news .tile-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    border-radius: 1px;
}

/* ── Card base — universal foundation for all card types ─────
   Applied to every card element sitewide. Establishes position
   context for absolute overlays and enforces pointer cursor.
   Individual card classes layer cuts, shadows, and borders on top.
   ─────────────────────────────────────────────────────────── */
.card-base {
    position: relative;
    cursor: pointer;
    border-radius: 1px;
}
.newsletter-card,
.doc-card,
.press-release-card,
.tile-no-media:not([style*="background"]) {
    background-color: #fffaf2;
    border-top: 2px solid var(--type-color, var(--accent, #8a3320));
}

/* ── Download icon — bounces down on hover instead of right ──
   Applied to <svg class="icon-download"> on all Download PDF CTAs.
   Parent span/a should NOT use gap-hover — remove group-hover:gap-3.
   ─────────────────────────────────────────────────────────── */
.icon-download {
    transition: transform 0.15s;
}
.group:hover .icon-download,
a:hover .icon-download {
    transform: translateY(3px);
}

/* ── Card shadow wrapper ─────────────────────────────────────
   Separates filter: drop-shadow from clip-path cards so shadows
   render correctly. Wrap any clip-path card with this div.
   ─────────────────────────────────────────────────────────── */
/* Masonry grid layout */
.masonry-grid { position: relative; }
.masonry-sizer,
.masonry-item { width: 100%; margin-bottom: 24px; }
@media (min-width: 640px) {
    .masonry-sizer,
    .masonry-item { width: calc(50% - 12px); }
}
@media (min-width: 1024px) {
    .masonry-sizer,
    .masonry-item { width: calc(33.333% - 16px); }
}

.card-shadow-wrap {
    filter: none;
    transition: filter 0.2s;
}
.card-shadow-wrap:hover {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.card-shadow-static {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.05));
}

.img-shadow-wrap {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 15, 15, 0.82);
    color: #e8e8e8;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.75rem;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(15,15,15,0.82);
    color: #e8e8e8;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.75rem;
}

/* ── Video carousel arrows ─────────────────────────────────── */
.carousel-wrap:not(.is-hovered) .carousel-next,
.carousel-wrap:not(.is-hovered) .carousel-prev {
    visibility: hidden;
}
.carousel-next svg,
.carousel-prev svg {
    transition: color 0.2s ease;
}
.carousel-next:hover svg,
.carousel-prev:hover svg {
    color: #b8442e;
}

@media (max-width: 1023px) {
    .carousel-wrap:not(.is-hovered) .carousel-next,
    .carousel-wrap:not(.is-hovered) .carousel-prev {
        visibility: visible;
    }
    .carousel-next,
    .carousel-prev {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    .carousel-next svg,
    .carousel-prev svg {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }
}

/* ── 2015 DMZ Crossing — story layout (Grid-based, predictable) ──
   Each visual moment is its own row. No floats — no float weirdness.
   Single source of truth — tune here. */
.story-article {
    font-family: var(--font-body);
    color: #2D2D2D;
}
.story-article p {
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

/* Lead paragraph — drop cap + slightly larger measure */
.story-lead {
    max-width: 50rem;
    margin: 0 0 2rem;
    font-size: clamp(1.125rem, 1.6vw, 1.25rem) !important;
}
.story-lead::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 5.25rem;
    line-height: 0.85;
    padding: 0.35rem 0.65rem 0 0;
    font-weight: 400;
    color: #171717;
}

/* Closing paragraphs — narrow readable column for full-width text blocks */
.story-closer {
    max-width: 50rem;
    margin: 0 0 1.25rem;
}

/* 2-column row — image + text, image + quote, etc. */
.story-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 3rem 0;
}
@media (min-width: 768px) {
    .story-row {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}
.story-row__text > p:last-child { margin-bottom: 0; }

/* Figures — full width within their grid cell */
.story-figure {
    margin: 0;
    max-width: 100%;
}
.story-figure img {
    width: 100%;
    height: auto;
    display: block;
}
.story-figure figcaption {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: #737373;
    margin-top: 0.6rem;
    line-height: 1.45;
    margin-bottom: 0;
}

/* Pull quote — standalone full-width dramatic section break */
.story-pullquote {
    border-left: 2px solid #b8442e;
    padding: 1rem 0 1rem 2rem;
    margin: 3rem 0;
    max-width: 50rem;
}
.story-pullquote p {
    font-style: italic;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.25;
    color: #1a1a1a;
    margin: 0;
}
/* Pull quote when paired with a floated image (magazine spread).
   Sits in normal flow next to the float, wraps tight at the gutter. */
.story-pullquote--inline {
    margin: 0.5rem 0 2rem;
    max-width: none;
    padding: 0.5rem 0 0.5rem 1.5rem;
}
.story-pullquote--inline p {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* Media coverage list — clears all floats so it starts full-width below
   the last image and the hairline border isn't undercut by any float. */
.story-media-coverage {
    clear: both;
    margin-top: 2rem;
}
.story-media-coverage .hero-eyebrow {
    margin-bottom: 0.85rem;
}
.story-media-coverage ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    line-height: 1.55;
}
.story-media-coverage ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #ececec;
    color: #525252;
}
.story-media-coverage ul li:last-child {
    border-bottom: 0;
}
.story-media-coverage ul strong {
    color: #1a1a1a;
    font-weight: 500;
    margin-right: 0.25rem;
}
.story-media-coverage ul a {
    color: #b8442e;
    text-decoration: none;
    transition: color 0.15s ease;
}
.story-media-coverage ul a:hover {
    color: #8a3320;
    text-decoration: underline;
}

/* ── Crossings page — kicker, demoted link, press list ────────
   Page-scoped utilities so the PHP can stay semantic (h2/h3/p). */
.crossings-kicker {
    color: #b8442e; /* terra */
}
.card-cta-muted {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.15s ease;
}
.card-cta-muted:hover {
    color: #1a1a1a;
}
/* Press list row — used by .press-list-item on crossings page */
.press-list-item {
    display: block;
    position: relative;
    isolation: isolate;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    transition: padding-left 0.2s ease;
}
.press-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1rem;
    right: -1rem;
    background-color: transparent;
    transition: background-color 0.2s ease;
    z-index: -1;
}
.press-list-item:last-child {
    border-bottom: 0;
}
.press-list-item:hover {
    padding-left: 0.5rem;
}
.press-list-item:hover::before {
    background-color: rgba(0, 0, 0, 0.03);
}
.press-list-item__meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.press-list-item__meta .hero-eyebrow {
    margin-bottom: 0;
}
.crossings-date {
    color: #737373;
}
.press-list-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.press-list-item__row h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #171717;
    margin: 0;
    flex: 1;
    transition: color 0.2s ease;
}
.press-list-item:hover .press-list-item__row h4 {
    color: #8a3320; /* terra */
}
@media (min-width: 1024px) {
    .press-list-item__row h4 { font-size: 1.0625rem; }
    .press-list-item { padding: 1.75rem 0; }
}
.press-list-item__arrow {
    width: 1rem;
    height: 1rem;
    color: #a3a3a3;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}
.press-list-item:hover .press-list-item__arrow {
    color: #b8442e;
    transform: translateX(4px);
}

/* ── Card type color tokens — applied to wrappers (.card-shadow-wrap) on
   Latest Updates so the card's top accent line takes on the type's color.
   Cards on solo landing pages keep their cycling accent untouched. */
.card-type-label {
    color: var(--type-color, #8a4b4b) !important;
}
.card-type-events          { --type-color: #1a1a1a; }  /* ink — works against blurred bg */
.card-type-press-releases  { --type-color: #8a3320; }  /* terra */
.card-type-in-the-media    { --type-color: #7d95a3; }  /* cerulean */
.card-type-newsletter      { --type-color: #b8956a; }  /* mustard-muted */
.card-type-reports,
.card-type-annual-reports  { --type-color: #555555; }  /* graphite */
.card-type-videos          { --type-color: #b8442e; }  /* deep terra */
.card-type-latest-updates  { --type-color: #7a9083; }  /* sage */

/* Card / tile CTA — text-sm at all breakpoints, red with #B91C1C hover.
   Standardized: uppercase, DM Sans, font-medium, tracking-wider across all cards.
   !important on font-weight overrides any inline font-light/font-normal still in markup. */
.card-cta {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px !important;
    line-height: 1.25rem;
    color: #DC2626;
    transition: color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 400 !important;
}
.card-cta:hover,
.group:hover .card-cta {
    color: #B91C1C;
}
.tile-featured .card-cta,
.tile-featured.group:hover .card-cta {
    color: #E6B85C;
}
.featured-tile-wrap .tile-featured img {
    aspect-ratio: 2 / 1;
}

/* ── Press release cards ─────────────────────────────────────
   cut-br-24, white card, shadow lifts on hover
   ─────────────────────────────────────────────────────────── */
.press-release-card {
    display: flex;
    flex-direction: column;
    border-radius: 1px;
    background: #fffaf2;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
}

/* ── Document cards (one-sheets + reports) ───────────────────
   Cut-corner white cards — shadow via card-shadow-wrap wrapper.
   ─────────────────────────────────────────────────────────── */
.doc-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: 1px;
    background: #fffaf2;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
    transition: background-color 0.15s;
}
.doc-card:hover {
    background-color: #FDFAF6;
}

/* ── Newsletter cards ────────────────────────────────────────
   Text-only bordered cards — same visual as doc-card for now,
   own class for independent styling later.
   ─────────────────────────────────────────────────────────── */
.newsletter-card {
    display: flex;
    flex-direction: column;
    border-radius: 1px;
    background: #fffaf2;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
}

/* ── Play button overlay — single control point for ALL video play buttons.
   Used by: .featured-video (videos.php) and .video-card (post grids).
   Sizes via CSS vars — defaults to large; add .play-btn-sm for card size.
   ─────────────────────────────────────────────────────────── */
.play-btn-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.30);
    transition: background-color 0.2s ease;
    pointer-events: none;
}
.group:hover .play-btn-overlay {
    background: rgba(0, 0, 0, 0.40);
}
.play-btn-overlay__circle {
    width: var(--play-btn-size, 80px);
    height: var(--play-btn-size, 80px);
    background: rgba(220, 38, 38, 0.50); /* wcdmz-red / 50 */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.group:hover .play-btn-overlay__circle {
    background: rgba(220, 38, 38, 0.60); /* wcdmz-red / 60 */
}
.play-btn-overlay__icon {
    width: var(--play-icon-size, 48px);
    height: var(--play-icon-size, 48px);
    color: #efe6da; /* cream */
    transform: translateX(2px);
    fill: currentColor;
}
/* Size variant — small (post grid cards). Default = large (featured). */
.play-btn-sm {
    --play-btn-size: 56px;
    --play-icon-size: 28px;
}
/* Mobile: all play buttons render at the small size regardless of variant.
   lg+ keeps the larger default for featured uses. */
@media (max-width: 1023px) {
    .play-btn-overlay {
        --play-btn-size: 56px;
        --play-icon-size: 28px;
    }
}

/* ── Trailer label — Crossings trailer only (crossings.php, 2015-crossing.php)
   cite wraps "Crossings"; bg is inline/under text only, not full-width.
   ─────────────────────────────────────────────────────────── */
.video-trailer-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    margin: 0;
    padding: 0.2rem 0.5rem;
    display: inline;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.52);
    border-radius: 2px;
    line-height: 1.5;
    font-family: 'DM Sans';
}

/* ── Video cards ─────────────────────────────────────────────
   Thumbnail + title card; drop-shadow replaces shadow-sm.
   No cut yet — not discussed.
   ─────────────────────────────────────────────────────────── */
.video-card {
    display: flex;
    flex-direction: column;
    border-radius: 1px;
    background: #fffaf2;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
}

.latest-update-card {
    display: flex;
    flex-direction: column;
    border-radius: 1px;
    background: #fffaf2;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
    border-top: 2px solid var(--type-color, var(--accent, #8a3320));
}

.cta-card-cream {
    background: #fbf4e8 !important;
}
.cta-card {
    background: rgba(0, 0, 0, 0.03);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1px;
}
.card-base h3.cta-card-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem) !important;
    line-height: 1.25;
    font-weight: 400;
}
.accent-terra    { --accent: #b8442e; }
.accent-deep-terra { --accent: #8a3320; }
.accent-clay     { --accent: #c97a4a; }
.accent-ink      { --accent: #0e0a08; }

.cta-card-horizontal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: auto;
}
.cta-card-horizontal .cta-btn {
    margin-top: 0;
    flex-shrink: 0;
    align-self: center;
}

.cta-card .hero-eyebrow {
    color: var(--accent);
}
.cta-btn {
    background-color: var(--accent);
    color: #ffffff;
    transition: filter 0.15s;
    margin-top: auto;
    align-self: flex-start;
}
.cta-btn:hover {
    filter: brightness(0.85);
}

/* ── In the Media cards ──────────────────────────────────────
   cut-br-24, full-bleed image cards
   ─────────────────────────────────────────────────────────── */
.media-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    background: #171717;
    border-radius: 1px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.card-base.media-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    flex: none;
}
.card-base.media-card:hover h3,
.card-base.media-card:hover h3 svg {
    color: #E6B85C;
}

/* ── Event cards (homepage + events landing) ────────────────
   cut-bl-24, shadow-sm swapped for filter:drop-shadow
   ─────────────────────────────────────────────────────────── */
.event-card {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 1px;
    background: #fffaf2;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: none !important;
    overflow: hidden; /* contain blurred backdrop */
}
/* Blurred event poster as ambient backdrop — heavy blur + saturate +
   low opacity so the image color story shows without text fighting. */
.event-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(24px) saturate(1.4);
    opacity: 0.45;
    transform: scale(1.2); /* mask blur edge bleed */
    z-index: 0;
    pointer-events: none;
}
.event-card .card-content {
    position: relative;
    z-index: 1;
}

/* Paneled event card — inset cream panel @ 50% with cut-br-16, taller min-height,
   amped-up backdrop. Used on home, Events landing, and Latest Updates. */
.event-card--paneled {
    min-height: 300px;
}
.event-card--paneled .event-card-bg {
    filter: blur(18px) saturate(1.8);
    opacity: 0.85;
}
.event-card--paneled .card-content {
    margin: 14px;
    padding: 16px 18px;
    background: rgba(255, 250, 242, 0.6);
    border-radius: 1px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
/* CTA arrow nudges right on card hover */
.event-card--paneled .event-card-cta svg {
    transition: transform 0.2s ease;
}
.event-card--paneled.group:hover .event-card-cta svg,
.event-card--paneled:hover .event-card-cta svg {
    transform: translateX(4px);
}

/* Featured-slot event card — bigger min-height + larger panel padding to fill 2-col width. */
.event-card--featured {
    min-height: 520px;
}
.event-card--featured .event-card-excerpt {
    font-size: 1.125rem;
    line-height: 1.5;
}
.event-card--featured .card-content {
    margin: 22px;
    padding: 22px 26px;
}
.event-card--featured .card-meta {
    margin-bottom: 2.5rem;
}
.event-card--featured h3 {
    font-size: 1.625rem;
    line-height: 1.15;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
/* Mobile: shorter min-height + tighter panel margin so naked cards aren't huge on small screens. */
@media (max-width: 1023px) {
    .event-card--featured {
        min-height: 340px;
    }
    .event-card--featured .card-content {
        margin: 14px;
    }
}

/* ── Post tile cards — cut + shadow ─────────────────────────
   Applied to all tile variants (featured, secondary, no-media)
   clip-path replaces box-shadow with filter:drop-shadow
   ─────────────────────────────────────────────────────────── */
.tile-card {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: none !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.09));
}

/* ── Supporter testimonial cards ─────────────────────────────
   .supporter-card  — white quote card, rounded-sm on 3 corners,
                      45° cut bottom-left (32px legs)
   .supporter-img   — float-left thumbnail, rounded-sm
   ───────────────────────────────────────────────────────────── */
.supporter-card {
    margin-bottom: 2rem;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.007));
}

.supporter-card-inner {
    background: #fffaf2;
    padding: 1.5rem;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.supporter-card blockquote {
    font-size: 1.125rem;
}

.supporter-card p:last-child {
    margin-bottom: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

.supporter-name {
    font-weight: 500;
}

.supporter-img {
    width: 7.5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 3px;
    float: left;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* ── 45° bottom-left corner cut system ──────────────────────
   Usage: add .cut-bl-## to any element.
   clip-path overrides border-radius on the cut corner.
   ─────────────────────────────────────────────────────────── */
.cut-bl-12 { clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.cut-bl-16 { clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.cut-bl-18 { clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.cut-bl-24 { clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.cut-bl-32 { clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px)); }
.cut-bl-40 { clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px)); }
.cut-bl-48 { clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 48px)); }
.cut-bl-56 { clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 56px)); }
.cut-bl-64 { clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px)); }

.cut-br-12 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.cut-br-16 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.cut-br-18 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.cut-br-24 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
.cut-br-32 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
.cut-br-40 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
.cut-br-48 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%); }
.cut-br-56 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%); }
.cut-br-64 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%); }

.cut-tr-12 { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.cut-tr-16 { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.cut-tr-18 { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.cut-tr-24 { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.cut-tr-32 { clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.cut-tr-40 { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.cut-tr-48 { clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%); }
.cut-tr-56 { clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%); }
.cut-tr-64 { clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%); }

.cut-tl-12 { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.cut-tl-16 { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }
.cut-tl-18 { clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
.cut-tl-24 { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
.cut-tl-32 { clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px); }

/* Footer override — extend clip 2px past the left edge to overpaint the sub-pixel
   seam where the body cream bg bleeds through Chrome's clip-path rasterization. */
footer.cut-tl-32 { clip-path: polygon(32px 0, 100% 0, 100% 100%, -2px 100%, -2px 32px); }
.cut-tl-40 { clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px); }
.cut-tl-48 { clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px); }
.cut-tl-56 { clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px); }
.cut-tl-64 { clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px); }

/* Card / listing excerpts */
.card-excerpt {
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: #737373;
    line-height: 1.7;
}

/* --- Component text --- */

/* What We Do related card titles — adjust clamp to resize all 6 at once */
.related-card-title {
    font-size: clamp(1.85rem, 2vw, 2.1rem) !important;
    font-weight: 400;
}

/* Advisory Council */
.advisory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .advisory-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .advisory-grid { grid-template-columns: repeat(4, 1fr); }
}

.advisory-name {
    font-family: 'Newsreader', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #171717;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}
.advisory-creds {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: #525252;
    line-height: 1.6;
    font-weight: 300;
}



/* ============================================================
   4. BACKGROUNDS & COLOR UTILITIES
   ============================================================ */
/* Tailwind config provides bg-cream, bg-navy, bg-tan, bg-light-cream, etc. as utilities.
   Only keep bg-red here as a non-Tailwind alias (Tailwind uses bg-wcdmz-red). */
.bg-cream       { background-color: var(--color-cream); }
.bg-red         { background-color: var(--color-red); }

/* Gradient presets */
.gradient-warm         { background: linear-gradient(135deg, #E7A5B0 0%, #E6B85C 50%, #DC2626 100%); }
.gradient-warm-soft    { background: linear-gradient(135deg, #E7A5B0 0%, #E6B85C 100%); }
.gradient-warm-alt     { background: linear-gradient(135deg, #E6B85C 0%, #E7A5B0 100%); }
.gradient-mustard-pink { background: linear-gradient(135deg, #E6B85C 0%, #E7A5B0 50%, #DC2626 100%); }
.gradient-pink-red     { background: linear-gradient(135deg, #E7A5B0 0%, #DC2626 100%); }
.gradient-cta          { background: linear-gradient(135deg, #b8442e 0%, #d99a7c 55%, #E6B85C 100%); }


/* ============================================================
   5. LAYOUT
   ============================================================ */

/* ── Page container — single control point for all content width + gutter.
   Replaces max-w-7xl mx-auto px-4 lg:px-8 everywhere.
   ─────────────────────────────────────────────────────────── */
.page-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 1024px) {
    .page-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ── CTA block — site-wide call-to-action section layout.
   Use with .gradient-cta (or any gradient/bg class) for the background.
   .cta-block controls structure; variations override individual properties.
   ─────────────────────────────────────────────────────────── */
.cta-block {
    overflow: hidden;
    position: relative;
    padding-top: 7rem;
    padding-bottom: 9rem;
}
@media (min-width: 1024px) {
    .cta-block {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
}
.cta-block__inner {
    text-align: center;
    position: relative;
    z-index: 10;
}
.cta-block h2 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 500;
    color: #1e1510;
    line-height: 0.9;
    margin-bottom: 1.5rem;
}
.cta-block .cta {
    color: var(--color-cream);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 1rem 1.5rem;
    min-width: 180px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.cta-block p {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 300;
    color: #3a2a20;
    line-height: 1.5;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .container {
    padding: 0 4rem;
  }
}

.section {
  padding: 4rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 6rem 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 8rem 0;
  }
}


/* ============================================================
   6. BUTTONS & CTAs
   ============================================================ */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}



/* ============================================================
   7. NAVIGATION
   ============================================================ */

/* --- Logo animation --- */
#logo-letters {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
}

@media (max-width: 767px) {
    .logo-wrap {
        height: 34px !important;
    }
    #logo-mark {
        height: 30px !important;
    }
    .logo-letter {
        height: 16px !important;
    }
}

#logo-mark {
    position: relative;
    z-index: 10;
}

.logo-letter:nth-child(1) { transition: transform 0.4s ease 0.2s,  opacity 0.4s ease 0.2s; }
.logo-letter:nth-child(2) { transition: transform 0.4s ease 0.15s, opacity 0.4s ease 0.15s; }
.logo-letter:nth-child(3) { transition: transform 0.4s ease 0.1s,  opacity 0.4s ease 0.1s; }
.logo-letter:nth-child(4) { transition: transform 0.4s ease 0.05s, opacity 0.4s ease 0.05s; }
.logo-letter:nth-child(5) { transition: transform 0.4s ease 0s,    opacity 0.4s ease 0s; }

.logo-scrolled .logo-letter:nth-child(1) { transition-delay: 0s; }
.logo-scrolled .logo-letter:nth-child(2) { transition-delay: 0.05s; }
.logo-scrolled .logo-letter:nth-child(3) { transition-delay: 0.1s; }
.logo-scrolled .logo-letter:nth-child(4) { transition-delay: 0.15s; }
.logo-scrolled .logo-letter:nth-child(5) { transition-delay: 0.2s; }

.logo-scrolled #logo-mark {
    animation: shimmer 0.6s ease forwards;
}

.logo-scrolled .logo-letter {
    transform: translateX(-36px);
    opacity: 0;
}

/* --- Nav links --- */
.nav-link:hover  { color: #DC2626; }
.nav-link.active { color: #DC2626; }

.subnav-link {
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: color 0.2s ease;
}
.subnav-link:hover,
.subnav-link.active {
    color: #DC2626;
}

.mega-menu-trigger button { cursor: pointer; }

/* --- Mega menu --- */
.mega-menu-trigger::after {
    content: '';
    position: absolute;
    top: -28px;     /* covers full nav-box height above the label without reaching viewport top */
    left: -28px;    /* covers half the largest inter-trigger gap (xl gap-14 = 56px) */
    right: -28px;
    bottom: -18px;  /* bridges down to panel */
    pointer-events: auto;
    z-index: 0;
}

/* Smooth nav bg transitions so mega-menu open/close fades with the panel
   instead of snapping to white instantly. */
nav.fixed { transition: background-color 0.3s ease; }

/* Trim outer edges: no overhang on first/last trigger outer edges */
.mega-menu-trigger:first-child::after { left: 0; }
.mega-menu-trigger:last-child::after { right: 0; }

.mega-menu-section {
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease;
    padding-left: 21px;
}

.mega-menu-panel:not(.no-hover) .mega-menu-section        { opacity: 0.5; }
.mega-menu-panel:not(.no-hover) .mega-menu-section.active { opacity: 1; }

.mega-menu-trigger .nav-link {
    padding-left: 9px;
}
.mega-menu-trigger:hover .nav-link,
.mega-menu-trigger.menu-active .nav-link {
    color: #DC2626;
}

#mega-line {
    position: fixed;
    width: 0.5px;
    background: #DC2626;
    pointer-events: none;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* --- Mobile accordion --- */
.mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.mobile-accordion-content.open  { max-height: 400px; }
.mobile-accordion:has(.mobile-accordion-content.open) {
    background-color: var(--cream-open);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
#mobile-menu { background-color: var(--cream); }

/* Desktop nav — inline search slide-out */
.nav-search-input {
    width: 0;
    opacity: 0;
    padding: 0;
    background: #fff;
    border: 1px solid transparent;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    pointer-events: none;
}
.nav-search-input.open {
    width: 420px;
    opacity: 1;
    padding: 0.5rem 0.875rem;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
}
.nav-search-panel {
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-search-panel.open { display: block; }
#nav-search-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9998;
}
#nav-search-area {
    position: absolute;
    z-index: 9999;
}
#nav-search-dim.active {
    opacity: 1;
    pointer-events: auto;
}

#mobile-menu > div:first-child {
    background-color: var(--cream) !important;
    border-bottom-color: transparent;
}
.mobile-accordion-icon::before  { content: '+'; }
.mobile-accordion-icon.open::before { content: '−'; }

/* Mobile menu typography — DM Sans to match desktop nav */
#mobile-menu .mobile-accordion-trigger span {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300 !important;
    transition: color 0.2s ease;
}
#mobile-menu .mobile-accordion-trigger.open span {
    color: #DC2626;
}
#mobile-menu .mobile-accordion-content a {
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.02em;
}
@media (hover: hover) {
    #mobile-menu-close:hover { color: #DC2626; }
}
#mobile-menu .flex-1 > a {
    font-family: 'DM Sans', sans-serif;
}


/* ============================================================
   8. ANIMATIONS
   ============================================================ */

/* --- Page load --- */
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Hero load sequence --- */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-slide-right {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hero-animate { opacity: 0; }

.hero-animate-1 {   /* eyebrow slides in from left */
    animation: hero-slide-right 0.6s ease-out forwards;
    animation-delay: 0.15s;
}
.hero-animate-2 {   /* h1 lifts up */
    animation: hero-fade-up 0.7s ease-out forwards;
    animation-delay: 0.3s;
}
.hero-animate-3 {   /* subhead settles */
    animation: hero-fade-up 0.9s ease-out forwards;
    animation-delay: 0.5s;
}

/* Home page — preserve original longer delays for dramatic reveal */
body.home .hero-animate-1 { animation-delay: 0.5s; }
body.home .hero-animate-2 { animation-delay: 0.85s; }
body.home .hero-animate-3 { animation-delay: 1.2s; }

/* --- Scroll-triggered fade-up --- */
.animate-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.animate-fade-in.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- Scroll-reveal horizontal slides --- */
.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-reveal-right {
    opacity: 0;
    transform: translateX(48px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ============================================================
   ACTION NETWORK FORM OVERRIDES
   Scoped to .an-form-wrap — no styles loaded from AN
   ============================================================ */

/* Hide branding */
.an-form-wrap .can_sponsorship,
.an-form-wrap .can_border,
.an-form-wrap .logo_wrap,
.an-form-wrap [class*="logo"],
.an-form-wrap [class*="sponsor"],
.an-form-wrap .at-markup p:first-child img,
.an-form-wrap h2.at-title { display: none !important; }

/* AN footer, branding, title */
.an-form-wrap .can_thank_you_text + div,
.an-form-wrap [id^="can-form-area"] > div > p:last-child,
.an-form-wrap a[href*="actionnetwork.org"]:not([href*="widgets"]):not([href*="clear_id"]),
.an-form-wrap .action_sidebar h4,
.an-form-wrap h2,
.an-form-wrap h3,
.an-form-wrap #can_main_col { display: none !important; }

/* Strip can_sidebar/action_sidebar wrapper padding */
.an-form-wrap #can_sidebar,
.an-form-wrap .action_sidebar { padding: 0 !important; margin: 0 !important; }
.an-form-wrap .can_embed { background: transparent !important; }
.an-form-wrap #can_embed_form { background: transparent !important; }

/* Labels — hidden, placeholders carry the context */
.an-form-wrap label,
.an-form-wrap .floatlabel-label,
.an-form-wrap label.control-label { display: none !important; }

/* Field list — flex layout, no bullets */
.an-form-wrap ul,
.an-form-wrap ul.core_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
}
.an-form-wrap ul li,
.an-form-wrap ul li.core_field {
    width: 100% !important;
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.an-form-wrap ul li::before { display: none !important; content: '' !important; }
.an-form-wrap ul li::marker,
.an-form-wrap ul li.core_field::marker,
.an-form-wrap ul li.form_builder_output::marker { content: "" !important; }
.an-form-wrap ul li.form_builder_output { display: none !important; }

/* First + last side by side */
.an-form-wrap li:has(#form-first_name),
.an-form-wrap li:has(#form-last_name) {
    width: calc(50% - 0.3rem) !important;
}

/* City + zip side by side */
.an-form-wrap li:has(#form-city),
.an-form-wrap li:has(#form-zip) {
    width: calc(50% - 0.3rem) !important;
}

/* Comments/textarea — 3 lines */
.an-form-wrap textarea {
    height: calc(3 * 1.5rem + 2 * 0.65rem);
    min-height: unset;
    resize: none;
}

/* Recognized user state */
.an-form-wrap #action_welcome_message {
    margin-bottom: 1rem;
}
.an-form-wrap #action_welcome_message_inner .left div:first-child {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: #404040;
    margin-bottom: 0.25rem;
}
.an-form-wrap #action_welcome_message small {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    color: #888;
}
.an-form-wrap #action_welcome_message small a#log-out {
    color: #2C3E50;
    text-decoration: underline;
    font-size: 0.8rem;
}
.an-form-wrap #action_welcome_message small a#log-out:hover {
    color: #DC2626;
}

/* Description text */
.an-form-wrap p {
    font-family: 'Newsreader', serif;
    font-size: 1rem;
    color: #404040;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Inputs + selects */
.an-form-wrap input[type="text"],
.an-form-wrap input[type="email"],
.an-form-wrap input[type="tel"],
.an-form-wrap input[type="number"],
.an-form-wrap .floatlabel-input,
.an-form-wrap select,
.an-form-wrap textarea {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #d4c9b8;
    border-radius: 0;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.6rem;
    outline: none;
    transition: border-color 0.2s ease;
    appearance: none;
}
.an-form-wrap input:focus,
.an-form-wrap select:focus,
.an-form-wrap textarea:focus {
    border-color: #CCB395;
}

/* Submit button */
.an-form-wrap input[type="submit"],
.an-form-wrap button[type="submit"] {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-color: #2C3E50;
    color: white;
    border: none;
    padding: 0.85rem 2rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 0.5rem;
}
.an-form-wrap input[type="submit"]:hover,
.an-form-wrap button[type="submit"]:hover {
    background-color: #1a2633;
}

/* Checkbox row */
.an-form-wrap input[type="checkbox"] {
    accent-color: #2C3E50;
    margin-right: 0.5rem;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

/* Subscription/opt-in block — treat as clean consent text */
.an-form-wrap .js-can-optin-wrap,
.an-form-wrap [class*="optin"] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5ddd0;
}

/* "You may receive email updates..." line */
.an-form-wrap .can_thank_you,
.an-form-wrap [class*="thank_you"],
.an-form-wrap li:has(input[type="checkbox"]) {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: #777;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

/* Subscription preference links — treat as actions */
.an-form-wrap a.js-can-optin,
.an-form-wrap a[class*="subscription"],
.an-form-wrap a[class*="preference"],
.an-form-wrap .subscription_management a,
.an-form-wrap small a {
    display: inline !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: #2C3E50;
    text-decoration: underline;
    cursor: pointer;
}
.an-form-wrap a.js-can-optin:hover,
.an-form-wrap a[class*="subscription"]:hover,
.an-form-wrap a[class*="preference"]:hover,
.an-form-wrap small a:hover {
    color: #DC2626;
}

/* Small print / disclaimer text */
.an-form-wrap small {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: #888;
    line-height: 1.5;
    display: block;
    margin-top: 0.5rem;
}

/* ============================================================
   ACTION NETWORK — FUNDRAISING WIDGET OVERRIDES
   Scoped to .an-fundraising-wrap
   ============================================================ */

/* Hide: title, org block, logo, branding, sponsorship text */
.an-fundraising-wrap h2,
.an-fundraising-wrap h3,
.an-fundraising-wrap .can_sponsorship,
.an-fundraising-wrap .can_border,
.an-fundraising-wrap [class*="logo"],
.an-fundraising-wrap [class*="sponsor"],
.an-fundraising-wrap .at-title,
.an-fundraising-wrap #can_main_col,
.an-fundraising-wrap .action_sidebar h4,
.an-fundraising-wrap a[href*="actionnetwork.org"]:not([href*="clear_id"]) { display: none !important; }

/* Strip wrapper chrome */
.an-fundraising-wrap .can_embed,
.an-fundraising-wrap #can_embed_form { background: transparent !important; }
.an-fundraising-wrap #can_sidebar,
.an-fundraising-wrap .action_sidebar { padding: 0 !important; margin: 0 !important; }

/* ── Amount row: hide radio inputs, make labels look like buttons ── */
.an-fundraising-wrap .fundraiser_amounts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
}
.an-fundraising-wrap .fundraiser_amounts li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 calc(25% - 0.5rem) !important;
    min-width: 60px !important;
}
/* Hide the radio input itself */
.an-fundraising-wrap .fundraiser_amounts input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
/* Style the label as a button */
.an-fundraising-wrap .fundraiser_amounts label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.7rem 0.5rem !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    background: #fff !important;
    border: 1.5px solid #d4c9b8 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    text-align: center !important;
    white-space: nowrap !important;
}
.an-fundraising-wrap .fundraiser_amounts label:hover {
    border-color: #2C3E50 !important;
}
/* Selected state — driven by checked radio */
.an-fundraising-wrap .fundraiser_amounts input[type="radio"]:checked + label {
    background: #2C3E50 !important;
    border-color: #2C3E50 !important;
    color: #fff !important;
}

/* "Other" amount — the text input that follows */
.an-fundraising-wrap .fundraiser_amounts li:last-child label {
    display: none !important;
}
.an-fundraising-wrap input#fundraiser-other-amount,
.an-fundraising-wrap input[name*="other_amount"],
.an-fundraising-wrap .other_amount input {
    width: 100% !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1rem !important;
    color: #1a1a1a !important;
    background: #fff !important;
    border: 1.5px solid #d4c9b8 !important;
    padding: 0.65rem 0.85rem !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    text-align: center !important;
}
.an-fundraising-wrap input#fundraiser-other-amount:focus,
.an-fundraising-wrap input[name*="other_amount"]:focus {
    border-color: #2C3E50 !important;
}

/* ── Recurring toggle ── */
.an-fundraising-wrap .recurring_monthly_checkbox,
.an-fundraising-wrap li:has(input[name*="recurring"]),
.an-fundraising-wrap li:has(input[id*="recurring"]) {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin-bottom: 1.25rem !important;
    padding: 0.75rem 1rem !important;
    background: #f5f0e8 !important;
    border: 1.5px solid #d4c9b8 !important;
    cursor: pointer !important;
    list-style: none !important;
}
.an-fundraising-wrap input[name*="recurring"],
.an-fundraising-wrap input[id*="recurring"] {
    accent-color: #2C3E50 !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
}
.an-fundraising-wrap label[for*="recurring"] {
    display: block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
    cursor: pointer !important;
}

/* ── "Contributions will go to" block — hide it ── */
.an-fundraising-wrap .can_thank_you_text,
.an-fundraising-wrap .fundraiser_org,
.an-fundraising-wrap .fundraiser-org,
.an-fundraising-wrap p:has(img),
.an-fundraising-wrap .can_thank_you_text + * { display: none !important; }

/* ── Recognized user / welcome block ── */
.an-fundraising-wrap #action_welcome_message {
    margin-bottom: 1.25rem !important;
    padding: 0.85rem 1rem !important;
    background: #f5f0e8 !important;
    border-left: 3px solid #CCB395 !important;
}
.an-fundraising-wrap #action_welcome_message_inner { display: flex !important; align-items: flex-start !important; gap: 0.75rem !important; }
.an-fundraising-wrap #action_welcome_message_inner img { display: none !important; }
.an-fundraising-wrap #action_welcome_message_inner .left div:first-child {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
    margin-bottom: 0.2rem !important;
}
.an-fundraising-wrap #action_welcome_message small {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.78rem !important;
    color: #888 !important;
}
.an-fundraising-wrap #action_welcome_message small a#log-out {
    color: #2C3E50 !important;
    text-decoration: underline !important;
}
.an-fundraising-wrap #action_welcome_message small a#log-out:hover { color: #DC2626 !important; }

/* ── Field list — strip bullets, stack vertically ── */
.an-fundraising-wrap ul,
.an-fundraising-wrap ul.core_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
}
.an-fundraising-wrap ul li,
.an-fundraising-wrap ul li.core_field {
    width: 100% !important;
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.an-fundraising-wrap ul li::before,
.an-fundraising-wrap ul li::marker { content: "" !important; display: none !important; }

/* Labels — visible for payment fields (credit card, expiry, cvv) */
.an-fundraising-wrap label {
    display: none !important;
}
.an-fundraising-wrap label[for*="credit"],
.an-fundraising-wrap label[for*="card"],
.an-fundraising-wrap label[for*="month"],
.an-fundraising-wrap label[for*="year"],
.an-fundraising-wrap label[for*="security"],
.an-fundraising-wrap label[for*="cvv"],
.an-fundraising-wrap label[for*="cvc"],
.an-fundraising-wrap label[for*="expir"] {
    display: block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin-bottom: 0.3rem !important;
}

/* ── Inputs ── */
.an-fundraising-wrap input[type="text"],
.an-fundraising-wrap input[type="email"],
.an-fundraising-wrap input[type="tel"],
.an-fundraising-wrap input[type="number"],
.an-fundraising-wrap select,
.an-fundraising-wrap textarea {
    width: 100% !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.95rem !important;
    color: #1a1a1a !important;
    background: #fff !important;
    border: 1.5px solid #d4c9b8 !important;
    padding: 0.7rem 0.85rem !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.an-fundraising-wrap input:focus,
.an-fundraising-wrap select:focus,
.an-fundraising-wrap textarea:focus {
    border-color: #2C3E50 !important;
}

/* Month + Year side by side */
.an-fundraising-wrap li:has(select[name*="month"]),
.an-fundraising-wrap li:has(input[name*="month"]),
.an-fundraising-wrap li:has(select[id*="month"]) {
    width: calc(50% - 0.3rem) !important;
}
.an-fundraising-wrap li:has(select[name*="year"]),
.an-fundraising-wrap li:has(input[name*="year"]),
.an-fundraising-wrap li:has(select[id*="year"]) {
    width: calc(50% - 0.3rem) !important;
}

/* Comments/notes textarea — 3 rows */
.an-fundraising-wrap textarea {
    height: calc(3 * 1.5rem + 2 * 0.7rem) !important;
    min-height: unset !important;
    resize: none !important;
}

/* ── Submit button ── */
.an-fundraising-wrap input[type="submit"],
.an-fundraising-wrap button[type="submit"] {
    width: 100% !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    background-color: #DC2626 !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin-top: 0.75rem !important;
}
.an-fundraising-wrap input[type="submit"]:hover,
.an-fundraising-wrap button[type="submit"]:hover {
    background-color: #b91c1c !important;
}

/* ── Opt-in / subscription block ── */
.an-fundraising-wrap li:has(input[type="checkbox"]) {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    color: #777 !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #e5ddd0 !important;
}
.an-fundraising-wrap input[type="checkbox"] {
    accent-color: #2C3E50 !important;
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
    margin-top: 0.1rem !important;
    cursor: pointer !important;
}
.an-fundraising-wrap small a,
.an-fundraising-wrap a[class*="subscription"],
.an-fundraising-wrap a[class*="preference"] {
    display: inline !important;
    color: #2C3E50 !important;
    text-decoration: underline !important;
    font-size: 0.75rem !important;
}
.an-fundraising-wrap small a:hover,
.an-fundraising-wrap a[class*="subscription"]:hover { color: #DC2626 !important; }

/* --- Logo shimmer --- */
@keyframes shimmer {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(1.8) saturate(1.5); }
    100% { filter: brightness(1); }
}


/* ============================================================
   9. COMPONENTS
   ============================================================ */

/* --- Related pages cards (grayscale hover) --- */
.related-card img {
    filter: grayscale(1);
    transition: filter 0.6s ease, transform 0.6s ease;
}
.related-card:hover img {
    filter: grayscale(0);
    transform: scale(1.05);
}


/* ============================================================
   10. CORNER CUT SYSTEM — see .cut-bl-## classes above
   ============================================================ */


/* Hero sections need explicit z-index to form a stacking context,
   keeping inner z-index values (e.g. z-10) local so they don't
   compete with the content section's z-index: 2 after canvas reflow. */
.post-landing-hero,
.post-landing-hero-paged,
.text-hero {
    z-index: 1;
}

/* ============================================================
   11. SECTION DIAGONAL STEP — hero → section transition
   Left-high → 45° step → right-low, at ~50% across.
   clip-path is on ::before only — section content is never clipped.
   Background is painted by ::before via CSS custom property so
   canvas elements, overflow, and z-index children all render clean.
   ============================================================ */
/* ============================================================
   CTA section — full-width call-to-action over image.
   Styles only the inner content (eyebrow, h2, p, button + spacing).
   Section-level positioning / image / gradient stays inline per page.
   ============================================================ */
.cta-section .hero-eyebrow {
    color: #E6B85C;             /* wcdmz-mustard */
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-section h2 {
    font-size: 2.25rem !important;        /* text-4xl */
    line-height: 1.25 !important;         /* leading-tight */
    color: #ffffff;
    font-weight: 500 !important;
}
@media (min-width: 768px) {
    .cta-section h2 { font-size: 3rem !important; }     /* md:text-5xl */
}
@media (min-width: 1024px) {
    .cta-section h2 { font-size: 3.75rem !important; }  /* lg:text-6xl */
}

.cta-section p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem;        /* text-lg */
    color: #f5f5f5;             /* neutral-100 */
    letter-spacing: 0.025em;    /* tracking-wide */
    line-height: 1.5;           /* leading-normal */
    margin-bottom: 1.5rem;      /* mb-6 */
}
@media (min-width: 768px) {
    .cta-section p {
        font-size: 1.25rem;     /* md:text-xl */
        margin-bottom: 2rem;    /* md:mb-8 */
    }
}

.cta-section .cta {
    background: #DC2626;        /* wcdmz-red */
    color: #ffffff;
    padding: 1rem 2.5rem;       /* py-4 px-10 */
    font-size: 1.125rem;        /* text-lg */
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.15s;
}
.cta-section .cta:hover {
    background: #B91C1C;
}

/* ============================================================
   Section body padding — base for all content sections below hero
   ============================================================ */
.section-body {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
    .section-body {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

.section-tab-top {
    position: relative;
    z-index: 2;
    margin-top: -20px;
    padding-top: calc(5rem + 20px) !important;
    background-color: transparent !important; /* ::before paints the bg */
}

.section-tab-top::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--tab-bg, #EAE0D0); /* fallback: cream */
    clip-path: polygon(
        0 0,
        calc(63% - 10px) 0,
        calc(63% + 10px) 20px,
        100% 20px,
        100% 100%,
        0 100%
    );
}

/* Background map — matches bg- classes used across all section-tab-top pages */
.section-tab-top.bg-cream      { --tab-bg: #EAE0D0; }
.section-tab-top.bg-white      { --tab-bg: #ffffff; }
.section-tab-top.bg-neutral-50 { --tab-bg: #fafafa; }
.section-tab-top.bg-charcoal   { --tab-bg: #262626; }

/* Mirrored direction: right-high → left-low */
.section-tab-top-reverse {
    position: relative;
    z-index: 2;
    margin-top: -20px;
    padding-top: calc(3rem + 20px) !important;
    background-color: transparent !important;
}
@media (min-width: 1024px) {
    .section-tab-top-reverse {
        padding-top: calc(6rem + 20px) !important;
    }
}
.section-tab-top-reverse::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--tab-bg, #E3D4C0 );
    clip-path: polygon(
        0 20px,
        calc(63% - 10px) 20px,
        calc(63% + 10px) 0,
        100% 0,
        100% 100%,
        0 100%
    );
}
.section-tab-top-reverse.bg-cream      { --tab-bg: #E3D4C0; }
.section-tab-top-reverse.bg-white      { --tab-bg: #ffffff; }
.section-tab-top-reverse.bg-neutral-50 { --tab-bg: #fafafa; }
.section-tab-top-reverse.bg-dark       { --tab-bg: #151210; }
/* .bg-dark — wcdmz dark surface token used on sections + cards. */
.bg-dark { background-color: #151210; }

/* Clip canvas grid inside notched sections so lines don't bleed into hero zone.
   Mirrors the ::before clip-path on each variant. */
.section-tab-top .diagonal-grid {
    clip-path: polygon(0 0, calc(50% - 10px) 0, calc(50% + 10px) 20px, 100% 20px, 100% 100%, 0 100%);
}
.section-tab-top-reverse .diagonal-grid {
    clip-path: polygon(0 20px, calc(50% - 10px) 20px, calc(50% + 10px) 0, 100% 0, 100% 100%, 0 100%);
}

/* ── FAQs accordion ──────────────────────────────────────────
   Q weight one notch below semibold; hover turns text red.
   ─────────────────────────────────────────────────────────── */
.faq-toggle span { 
    font-family: 'Newsreader', serif; 
    font-weight: 400; 
    transition: color 0.15s; }
.faq-toggle:hover { opacity: 1 !important; }
@media (hover: hover) { .faq-toggle:hover span { color: #000; } }
.faq-toggle.open span { color: inherit; }
div:has(> .faq-toggle) {
    transition: background-color 0.15s;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 2px;
}
@media (min-width: 1024px) {
    div:has(> .faq-toggle) {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
/* Open state: same width as hover/closed — bg only, no negative margin extension. */
@media (hover: hover) {
    div:has(> .faq-toggle:hover) { background-color: rgba(0, 0, 0, 0.03); }
}
div:has(> .faq-toggle.open) { background-color: rgba(0, 0, 0, 0.03); }
.faq-content p {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 300;
    line-height: 1.6;
}


/* ============================================================
   PAGINATION — used by all paginated archive pages
   (events, newsletter, latest-updates, press-releases, in-the-media)
   Edit here to retune all paginators at once.
   ============================================================ */
.page-numbers {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}
.page-numbers li a,
.page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2C3E50;
    background: transparent;
    border: 1px solid #6b7280; /* neutral-500 */
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.page-numbers li a:hover {
    background: #CCB395; /* tan */
    border-color: #6b7280;
}
.page-numbers li span.current {
    background: #1a1410;
    border-color: #1a1410;
    color: #fffaf2; /* cream */
}
.page-numbers li span.dots {
    border: none;
    background: transparent;
}
.page-numbers li a.prev,
.page-numbers li a.next {
    border-color: transparent;
}
.page-numbers li a.prev:hover,
.page-numbers li a.next:hover {
    border-color: #6b7280;
}


/* ============================================================
   FOOTER COLUMN HELPERS — repeated patterns across the 5 nav columns.
   Bundles font + size + spacing so column markup stays clean.
   ============================================================ */
body .footer-col-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* ~tracking-wider */
    margin-bottom: 1rem;     /* ~mb-4 */
}
@media (max-width: 767px) {
    body .footer-col-heading {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.01em; /* ~tracking-wider */
        margin-bottom: 1rem; 
    }   
}
.footer-col-links {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;        /* ~font-extralight */
    letter-spacing: 0.03em;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;            /* ~space-y-3 */
}
.footer-col-links a {
    display: block;
    color: #d4d4d4;          /* ~text-neutral-300 */
    transition: color 0.15s;
}
.footer-col-links a:hover {
    color: #DC2626;          /* wcdmz-red */
}

/* ============================================================
   FOOTER CTA HEADING — control footer h2 size independently
   ============================================================ */
.footer-cta-heading {
    font-weight: 400;
    color: white;
    line-height: 1;
    font-size: 38px;
    margin-bottom: 1rem;
}
@media (min-width: 960px) {
    .footer-cta-heading {
        font-size: 48px;
        line-height: 1.2;
    }
}

/* ============================================================
   FOOTER SOCIAL ICONS — change size here, applies to all 4
   ============================================================ */
.footer-social-icon {
    width: 2.5rem;
    height: 2.5rem;
}
.footer-social-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
/* Optical centering — Facebook 'f' descender shifts mass down */
.social-icon-fb {
    transform: translateY(-5%);
}

/* ============================================================
   POST CONTENT HR — thin neutral rule with breathing room
   ============================================================ */
.prose hr {
    border: none;
    border-top: 0.5px solid #2D2D2D;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
}

/* ============================================================
   CONTACT FORM 7 — themed to match site
   ============================================================ */
.wcdmz-contact-form .wpcf7 { font-family: 'DM Sans', sans-serif; }

.wcdmz-contact-form .wpcf7-form p {
    margin-bottom: 1.25rem;
}

.wcdmz-contact-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2D2D2D;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.wcdmz-contact-form input[type="text"],
.wcdmz-contact-form input[type="email"],
.wcdmz-contact-form input[type="tel"],
.wcdmz-contact-form input[type="url"],
.wcdmz-contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fbf6ee;
    border: 1px solid #d4c9b5;
    border-radius: 2px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: #1a1a1a;
    transition: border-color 0.2s, background-color 0.2s;
}
.wcdmz-contact-form input:focus,
.wcdmz-contact-form textarea:focus {
    outline: none;
    border-color: #DC2626;
    background: #ffffff;
}
.wcdmz-contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

.wcdmz-contact-form .wpcf7-submit {
    background: #DC2626;
    color: #ffffff;
    padding: 0.9rem 2.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.wcdmz-contact-form .wpcf7-submit:hover {
    background: #B91C1C;
}

.wcdmz-contact-form .wpcf7-not-valid-tip {
    color: #DC2626;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}
.wcdmz-contact-form .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: 2px;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}
.wcdmz-contact-form .wpcf7 form.sent .wpcf7-response-output {
    border-color: #16a34a;
    color: #14532d;
    background: #dcfce7;
}
.wcdmz-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.wcdmz-contact-form .wpcf7 form.failed .wpcf7-response-output {
    border-color: #DC2626;
    color: #7f1d1d;
    background: #fee2e2;
}