/*
Theme Name: DIA Now
Theme URI: https://www.diactnow.org
Author: ECC Media Pro, LLC
Description: Custom theme for Democracy in Action Now, a 501(c)(4) organization. Ships the full homepage from the Sep 17, 2026 content and brand handoff, with Customizer controls for photos, the call to action and the contact block, plus Elementor Theme Builder support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: dia-now
*/

:root {
	--dian-navy: #21387C;
	--dian-navy-deep: #1A2C66;
	--dian-red: #D1232C;
	--dian-red-dark: #B31C24;
	--dian-tint: #F4F6FB;
	--dian-text: #22262E;
	--dian-muted: #5B6472;
	--dian-line: #E2E6EF;
	--dian-head: "Archivo", "Arial Narrow", Arial, sans-serif;
	--dian-body: "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;
	--dian-wrap: 1180px;
	--dian-header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* clip, not hidden: overflow-x:hidden breaks the sticky header */
body { margin: 0; overflow-x: clip; background: #fff; color: var(--dian-text); font-family: var(--dian-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dian-navy); }
a:hover { color: var(--dian-red); }
h1, h2, h3, h4 { font-family: var(--dian-head); color: var(--dian-navy); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--dian-red); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dian-skip:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 1000; background: #fff; padding: 10px 14px; }

.dian-wrap { width: 100%; max-width: var(--dian-wrap); margin: 0 auto; padding: 0 24px; }
[id] { scroll-margin-top: calc(var(--dian-header-h) + 16px); }

/* Buttons */
.dian-btn { display: inline-block; font-family: var(--dian-head); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1; padding: 15px 26px; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.dian-btn--red { background: var(--dian-red); color: #fff; border-color: var(--dian-red); }
.dian-btn--red:hover { background: var(--dian-red-dark); border-color: var(--dian-red-dark); color: #fff; }
.dian-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.dian-btn--ghost:hover { border-color: #fff; color: #fff; }
.dian-btn--white { background: #fff; color: var(--dian-navy); border-color: #fff; }
.dian-btn--white:hover { background: var(--dian-navy); border-color: var(--dian-navy); color: #fff; }

/* Header */
.dian-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--dian-line); }
.admin-bar .dian-header { top: 32px; }
.dian-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--dian-header-h); }
.dian-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.dian-logo img { width: auto; height: 48px; max-height: 48px; }
.dian-nav { display: flex; align-items: center; gap: 34px; }
.dian-nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.dian-nav li a { font-weight: 600; font-size: 15px; color: var(--dian-text); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.dian-nav li a:hover, .dian-nav .current-menu-item > a { color: var(--dian-navy); border-bottom-color: var(--dian-red); }
.dian-toggle { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; }
.dian-toggle span { display: block; width: 24px; height: 2px; background: var(--dian-navy); margin: 5px 0; }

/* Section furniture */
.dian-sec { padding: 84px 0; }
.dian-sec--tint { background: var(--dian-tint); }
.dian-eyebrow { font-family: var(--dian-head); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dian-red); margin: 0 0 10px; }
.dian-sec__head { text-align: center; margin-bottom: 52px; }
.dian-sec__head h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; margin: 0; }
.dian-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 24px; }
.dian-label { font-family: var(--dian-head); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--dian-navy); margin: 0 0 8px; }
.dian-desc { font-size: 14.5px; line-height: 1.55; color: var(--dian-muted); margin: 0; }

/* Hero */
.dian-hero { background: linear-gradient(135deg, var(--dian-navy) 0%, var(--dian-navy-deep) 100%); color: #fff; padding: 80px 0 72px; }
.dian-hero__in { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: center; }
.dian-pill { display: inline-block; font-family: var(--dian-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #FF8A91; border: 1px solid var(--dian-red); border-radius: 99px; padding: 6px 14px; margin: 0 0 22px; }
.dian-hero h1 { color: #fff; font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 22px; }
.dian-hero__sub { font-size: 18px; line-height: 1.6; color: #D5DCF0; max-width: 520px; margin: 0 0 30px; }
.dian-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.dian-hero__tags { font-family: var(--dian-head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #F0525B; line-height: 2; margin: 0; }
.dian-hero__tags span { margin: 0 8px; opacity: .8; }
.dian-hero__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 40px rgba(8,16,48,.35); }

/* Mission */
.dian-mission { text-align: center; padding: 76px 0 40px; }
.dian-mission__bold { font-family: var(--dian-head); font-weight: 700; font-size: 17px; color: var(--dian-navy); margin: 0 0 22px; }
.dian-mission__text { font-family: var(--dian-head); font-weight: 500; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.5; color: var(--dian-navy); max-width: 800px; margin: 0 auto; }

/* Approach */
.dian-approach__item { text-align: center; }
/* fixed box so the ring never stretches to an oval */
.dian-approach__item img { width: 56px !important; height: 56px !important; margin: 0 auto 18px; }

/* Values */
.dian-value { border-top: 3px solid var(--dian-red); padding-top: 20px; }

/* Gallery */
.dian-gallery { display: grid; grid-template-columns: repeat(var(--dian-cols, 3), 1fr); gap: 24px; }
.dian-gallery figure { margin: 0; }
.dian-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.dian-gallery figcaption { font-size: 14.5px; color: var(--dian-muted); margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--dian-red); }

/* Who we serve / capacity */
.dian-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dian-panel { background: #fff; border: 1px solid var(--dian-line); border-radius: 8px; overflow: hidden; }
.dian-panel h2 { background: var(--dian-navy); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 16px 20px; margin: 0; }
.dian-panel--red h2 { background: var(--dian-red); }
.dian-panel ul { list-style: none; margin: 0; padding: 10px 28px 14px; }
.dian-panel li { padding: 16px 0; border-bottom: 1px solid var(--dian-line); color: var(--dian-text); }
.dian-panel li:last-child { border-bottom: 0; }
.dian-panel strong { display: block; font-family: var(--dian-head); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--dian-navy); margin-bottom: 2px; }
.dian-panel--red strong { color: var(--dian-red); }

/* Model */
.dian-model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dian-model__card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--dian-line); }
.dian-model__card h3 { background: var(--dian-navy); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 15px; margin: 0; }
.dian-model__card--red h3 { background: var(--dian-red); }
.dian-model__card p { padding: 24px 26px 28px; margin: 0; }

/* Leadership */
.dian-leader { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.dian-leader__photo { position: relative; }
.dian-leader__photo > img.dian-leader__head { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.dian-leader__ph { aspect-ratio: 4 / 5; border-radius: 8px; background: var(--dian-tint); border: 1px dashed #B9C2D8; }
.dian-leader__seal { position: absolute; right: -14px; bottom: -14px; width: 84px !important; height: 84px !important; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 6px 16px rgba(8,16,48,.2); }
.dian-leader h3 { font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.dian-leader__tag { font-family: var(--dian-head); font-style: italic; font-weight: 600; font-size: 18px; color: var(--dian-navy); margin: 26px 0 0; padding-top: 22px; border-top: 3px solid var(--dian-red); display: inline-block; }

/* CTA band */
.dian-cta { background: var(--dian-red); color: #fff; padding: 60px 0; }
.dian-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.dian-cta h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin: 0; max-width: 720px; }

/* Footer */
.dian-footer { background: var(--dian-navy-deep); color: #C9D2EA; padding: 60px 0 0; font-size: 15px; }
.dian-footer__in { display: grid; grid-template-columns: 1.3fr 1.2fr .8fr; gap: 48px; }
.dian-footer__logo { display: inline-block; background: #fff; border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; }
.dian-footer__logo img { width: auto; height: 46px; }
.dian-footer h4 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
.dian-footer a { color: #fff; text-decoration: none; }
.dian-footer a:hover { color: #FF8A91; }
.dian-footer address { font-style: normal; line-height: 1.9; }
.dian-footer address strong { color: #fff; }
.dian-footer ul { list-style: none; margin: 0; padding: 0; line-height: 2.1; }
.dian-footer__copy { margin-top: 48px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; }

/* Inner pages */
.dian-banner { background: linear-gradient(135deg, var(--dian-navy), var(--dian-navy-deep)); padding: 56px 0; }
.dian-banner h1 { color: #fff; font-size: clamp(30px, 4vw, 44px); font-weight: 800; margin: 0; }
.dian-content { padding: 56px 0 72px; max-width: 820px; }
.dian-content h2 { font-size: 28px; margin-top: 1.4em; }
.dian-content h3 { font-size: 21px; margin-top: 1.3em; }

@media (max-width: 1024px) {
	.dian-grid5 { grid-template-columns: repeat(3, 1fr); }
	.dian-hero__in { gap: 36px; }
	.dian-leader { grid-template-columns: 240px 1fr; gap: 40px; }
}
@media (max-width: 782px) {
	.admin-bar .dian-header { top: 46px; }
	:root { --dian-header-h: 64px; }
	.dian-logo img { height: 40px; }
	.dian-toggle { display: block; }
	.dian-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--dian-line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 22px; box-shadow: 0 14px 24px rgba(8,16,48,.08); }
	.dian-nav.is-open { display: flex; }
	.dian-nav ul { flex-direction: column; gap: 0; }
	.dian-nav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--dian-line); }
	.dian-nav .dian-btn { margin-top: 18px; text-align: center; }
	.dian-sec { padding: 60px 0; }
	.dian-sec__head { margin-bottom: 36px; }
	.dian-hero { padding: 52px 0; }
	.dian-hero__in, .dian-two, .dian-model, .dian-leader, .dian-footer__in { grid-template-columns: 1fr; }
	.dian-gallery { grid-template-columns: 1fr; }
	.dian-grid5 { grid-template-columns: repeat(2, 1fr); }
	.dian-leader__photo { max-width: 260px; }
	.dian-footer__in { gap: 32px; }
}
@media (max-width: 480px) {
	.dian-grid5 { grid-template-columns: 1fr; }
	.dian-approach__item { max-width: 300px; margin: 0 auto; }
	.dian-hero__btns .dian-btn { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }