/*
Theme Name: Civic Passage
Theme URI: https://civicpassage.org
Author: Civic Passage Foundation
Author URI: https://civicpassage.org
Description: A clean, accessible, responsive theme created for Civic Passage Foundation.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: civic-passage
License: GPL-2.0-or-later
*/

:root {
  --cp-navy: #0d1b3d;
  --cp-navy-2: #17365d;
  --cp-teal: #1aa39a;
  --cp-teal-dark: #137b75;
  --cp-ink: #182235;
  --cp-muted: #637083;
  --cp-line: #dbe3ea;
  --cp-paper: #ffffff;
  --cp-soft: #f5f8fa;
  --cp-soft-teal: #eaf8f6;
  --cp-max: 1180px;
  --cp-shadow: 0 18px 50px rgba(13,27,61,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cp-ink);
  background: var(--cp-paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--cp-navy-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cp-teal-dark); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cp-teal); outline-offset: 3px; }
.screen-reader-text {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus {
  position: fixed!important; top: 10px; left: 10px; z-index: 9999; width:auto; height:auto;
  clip:auto; padding:10px 14px; margin:0; background:#fff; color:#000; border:2px solid var(--cp-navy);
}

.cp-container { width: min(calc(100% - 40px), var(--cp-max)); margin-inline: auto; }
.cp-site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(219,227,234,.9);
}
.cp-header-inner {
  min-height: 84px; display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.cp-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--cp-navy); }
.cp-brand img { width:50px; height:50px; border-radius:12px; box-shadow:0 8px 22px rgba(13,27,61,.13); }
.cp-brand-text { display:flex; flex-direction:column; line-height:1.08; }
.cp-brand-name { font-size:18px; font-weight:800; letter-spacing:-.01em; }
.cp-brand-sub { font-size:10px; margin-top:5px; font-weight:800; color:var(--cp-teal-dark); letter-spacing:.13em; text-transform:uppercase; }

.cp-nav { display:flex; align-items:center; gap:22px; }
.cp-nav ul { list-style:none; display:flex; align-items:center; gap:24px; margin:0; padding:0; }
.cp-nav a { text-decoration:none; font-size:14px; font-weight:650; color:#344154; }
.cp-nav a:hover, .cp-nav .current-menu-item > a { color:var(--cp-teal-dark); }
.cp-nav .menu-item:last-child a {
  display:inline-flex; padding:10px 16px; border-radius:999px; color:#fff; background:var(--cp-navy);
}
.cp-nav .menu-item:last-child a:hover { background:var(--cp-teal-dark); }

.cp-menu-toggle { display:none; border:0; background:var(--cp-soft); border-radius:10px; padding:10px 12px; font-weight:700; color:var(--cp-navy); }

main { min-height:60vh; }

.cp-hero {
  position:relative; overflow:hidden;
  padding:100px 0 92px;
  background:
    radial-gradient(circle at 82% 12%, rgba(26,163,154,.15), transparent 28%),
    linear-gradient(135deg, #f9fbfc 0%, #ffffff 58%, #eef8f7 100%);
  border-bottom:1px solid var(--cp-line);
}
.cp-hero::after {
  content:""; position:absolute; right:-150px; bottom:-200px; width:520px; height:520px;
  border:80px solid rgba(13,27,61,.035); border-radius:50%;
}
.cp-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:68px; align-items:center; }
.cp-kicker {
  display:inline-flex; align-items:center; gap:8px; color:var(--cp-teal-dark);
  font-size:12px; font-weight:850; letter-spacing:.13em; text-transform:uppercase;
}
.cp-kicker::before { content:""; width:28px; height:3px; border-radius:3px; background:var(--cp-teal); }
.cp-hero h1, .cp-page-hero h1 {
  margin:16px 0 20px; color:var(--cp-navy);
  font-size:clamp(42px,6vw,74px); line-height:.98; letter-spacing:-.045em;
}
.cp-hero-lede { max-width:760px; font-size:clamp(18px,2vw,22px); color:#46556a; line-height:1.55; }
.cp-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.cp-button, .wp-block-button__link {
  display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:12px 20px; border-radius:999px; text-decoration:none!important;
  background:var(--cp-navy); color:#fff!important; font-weight:750; font-size:14px;
  border:2px solid var(--cp-navy); transition:.2s ease;
}
.cp-button:hover, .wp-block-button__link:hover { transform:translateY(-1px); background:var(--cp-teal-dark); border-color:var(--cp-teal-dark); }
.cp-button--ghost { background:transparent; color:var(--cp-navy)!important; }
.cp-button--ghost:hover { color:#fff!important; }

.cp-hero-mark {
  width:min(100%,310px); margin-inline:auto; padding:25px;
  background:rgba(255,255,255,.78); border:1px solid rgba(219,227,234,.85);
  border-radius:32px; box-shadow:var(--cp-shadow);
}
.cp-hero-mark img { display:block; width:100%; border-radius:24px; }

.cp-section { padding:82px 0; }
.cp-section--soft { background:var(--cp-soft); }
.cp-section--navy { background:var(--cp-navy); color:#fff; }
.cp-section--teal { background:var(--cp-soft-teal); }
.cp-eyebrow { color:var(--cp-teal-dark); font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.cp-section--navy .cp-eyebrow { color:#7ee1d8; }
.cp-section h2 {
  margin:8px 0 18px; color:var(--cp-navy); font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.03em;
}
.cp-section--navy h2 { color:#fff; }
.cp-section-lede { max-width:820px; color:var(--cp-muted); font-size:18px; }
.cp-section--navy .cp-section-lede { color:#d9e3ef; }

.cp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.cp-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.cp-card {
  background:#fff; border:1px solid var(--cp-line); border-radius:20px; padding:26px;
  box-shadow:0 8px 30px rgba(13,27,61,.045);
}
.cp-card h3 { margin:0 0 10px; color:var(--cp-navy); font-size:21px; letter-spacing:-.015em; }
.cp-card p:last-child { margin-bottom:0; }
.cp-number {
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:var(--cp-soft-teal); color:var(--cp-teal-dark); font-weight:850; margin-bottom:16px;
}
.cp-theory-card { border-top:4px solid var(--cp-teal); }
.cp-theory-card strong { display:block; color:var(--cp-teal-dark); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }

.cp-pathway {
  margin-top:36px; padding:24px 26px; border-radius:18px;
  background:var(--cp-navy); color:#fff; font-size:16px; font-weight:750; letter-spacing:.005em;
}
.cp-pathway span { color:#80ddd5; padding:0 7px; }

.cp-page-hero { padding:74px 0 58px; background:linear-gradient(180deg,#f7fafb,#fff); border-bottom:1px solid var(--cp-line); }
.cp-page-hero h1 { font-size:clamp(38px,5vw,62px); }
.cp-page-hero p { max-width:760px; color:var(--cp-muted); font-size:19px; }
.cp-page-content { padding:64px 0 90px; }
.cp-page-content > *:first-child { margin-top:0; }
.cp-page-content h2 { color:var(--cp-navy); margin-top:2em; font-size:32px; letter-spacing:-.025em; }
.cp-page-content h3 { color:var(--cp-navy); margin-top:1.6em; }
.cp-page-content p, .cp-page-content li { max-width:800px; }
.cp-page-content .alignwide { max-width:var(--cp-max); }
.cp-notice {
  padding:22px 24px; border-left:4px solid var(--cp-teal); background:var(--cp-soft-teal);
  border-radius:0 14px 14px 0; margin:28px 0; color:#284c4a;
}
.cp-contact-card {
  max-width:720px; padding:30px; border:1px solid var(--cp-line); border-radius:22px;
  box-shadow:var(--cp-shadow); background:#fff;
}
.cp-contact-row { margin:12px 0; }
.cp-contact-row strong { display:inline-block; width:92px; color:var(--cp-navy); }

.cp-site-footer { background:#08142f; color:#cbd6e3; padding:48px 0 24px; }
.cp-footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:42px; }
.cp-footer-brand { display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; font-size:18px; }
.cp-footer-brand img { width:44px; height:44px; border-radius:10px; }
.cp-site-footer a { color:#dbe7f5; }
.cp-site-footer h3 { color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.12em; }
.cp-footer-bottom { margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13); font-size:12px; color:#91a0b5; }
.cp-values { color:#7ee1d8; font-weight:750; letter-spacing:.06em; }

.wp-block-columns { gap:24px; }
.wp-block-group.cp-callout {
  margin:34px 0; padding:26px; background:var(--cp-soft); border:1px solid var(--cp-line); border-radius:18px;
}
.wp-block-separator { border-color:var(--cp-line); opacity:1; }

@media (max-width: 900px) {
  .cp-hero-grid { grid-template-columns:1fr; gap:38px; }
  .cp-hero-mark { width:200px; margin-left:0; }
  .cp-grid-3, .cp-grid-4 { grid-template-columns:1fr 1fr; }
  .cp-footer-grid { grid-template-columns:1fr 1fr; }
  .cp-footer-grid > :first-child { grid-column:1 / -1; }
  .cp-menu-toggle { display:inline-flex; }
  .cp-nav { display:none; position:absolute; left:20px; right:20px; top:74px; padding:18px; background:#fff; border:1px solid var(--cp-line); border-radius:16px; box-shadow:var(--cp-shadow); }
  .cp-nav.is-open { display:block; }
  .cp-nav ul { flex-direction:column; align-items:stretch; gap:4px; }
  .cp-nav a { display:block; padding:10px 8px; }
}
@media (max-width: 620px) {
  .cp-container { width:min(calc(100% - 28px), var(--cp-max)); }
  .cp-header-inner { min-height:72px; }
  .cp-brand img { width:42px; height:42px; }
  .cp-brand-name { font-size:16px; }
  .cp-brand-sub { display:none; }
  .cp-hero { padding:72px 0 64px; }
  .cp-hero h1 { font-size:44px; }
  .cp-section { padding:62px 0; }
  .cp-grid-3, .cp-grid-4 { grid-template-columns:1fr; }
  .cp-footer-grid { grid-template-columns:1fr; }
  .cp-footer-grid > :first-child { grid-column:auto; }
  .cp-contact-row strong { width:auto; display:block; margin-bottom:3px; }
}