/* ============================================================
   DIRECTION B — "BOLD ADVOCATE"
   Evolution of DCAN's existing blue/teal identity — editorial,
   confident, documentary. Feel: credible, urgent. "We win policy fights."
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@1,8..60,400;1,8..60,600&display=swap');

:root{
  /* ---- Type ---- */
  --font-head:'Libre Franklin',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-eyebrow:'Libre Franklin',system-ui,sans-serif;
  --font-nav:'Libre Franklin',system-ui,sans-serif;
  --font-num:'Libre Franklin',system-ui,sans-serif;
  --font-quote:'Source Serif 4',Georgia,serif;
  --body-weight:400;
  --head-weight:800;
  --head-track:-.026em;
  --head-lh:1.06;

  /* ---- Brand palette ---- */
  --navy:#0E2A47;            /* 14.58:1 on white */
  --navy-deep:#081B2F;
  --blue:#1D6FB8;            /* DCAN blue        5.31:1 on white */
  --blue-ink:#175C99;        /* AA text variant  6.68:1 on white */
  --cyan:#39B7C9;            /* logo gradient teal — on-dark text / accents only (6.05:1 on navy) */
  --cyan-ink:#0E7C8C;        /* AA cyan for light backgrounds 4.68:1 on white */
  --dcan-blue:#2D54A3;       /* from the DCAN wordmark — primary CTA, 7.20:1 with white */
  --dcan-blue-hover:#0E2A47;
  --chip-ink:#0E2A47;        /* metadata chips: navy on ice, 12.9:1 */
  --ice:#EFF5F9;
  --ice-deep:#DCE8F1;

  /* ---- Semantic ---- */
  --bg:#FFFFFF;
  --ink:#2B3A4A;
  --ink-strong:var(--navy);
  --ink-soft:#4A5A6B;
  --ink-faint:#64717F;
  --accent:var(--dcan-blue);
  --accent-ink:var(--dcan-blue);
  --on-accent:#FFFFFF;
  --link:var(--blue-ink);
  --link-hover:var(--dcan-blue);
  --focus:var(--dcan-blue);
  --focus-ring:rgba(29,111,184,.3);
  --sel-bg:#BFE4EB;--sel-fg:var(--navy);
  --danger:#C1271D;
  --hairline:#D8E3EC;

  --surface-alt:var(--ice);
  --surface-tint:var(--ice);
  --surface-deep:var(--navy);
  --on-deep:#D3E1EE;
  --on-deep-strong:#FFFFFF;
  --on-deep-eyebrow:var(--cyan);

  /* ---- Shape & motion (crisp, systematic) ---- */
  --r-sm:4px;--r-md:6px;--r-btn:4px;--r-card:6px;--r-media:6px;
  --r-tag:3px;--r-ico:6px;--r-scoop:0px;
  --gap:24px;--card-pad:30px;--sec-pad:92px;
  --t:150ms;--ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-lg:0 18px 46px rgba(14,42,71,.18);
  --shadow-xl:0 30px 76px rgba(14,42,71,.3);

  /* ---- Header ---- */
  --header-bg:#FFFFFF;
  --header-border:var(--hairline);
  --header-shadow:none;
  --nav-ink:var(--navy);--nav-ink-hover:var(--blue-ink);
  --nav-weight:700;--nav-track:.07em;--nav-case:uppercase;
  --nav-underline:var(--cyan);
  --drop-bg:#FFFFFF;--drop-border:var(--hairline);--drop-ink:var(--navy);
  --drop-hover-bg:var(--ice);--drop-hover-ink:var(--blue-ink);

  /* ---- Buttons ---- */
  --btn-bg:var(--dcan-blue);--btn-bg-hover:var(--dcan-blue-hover);--btn-fg:#FFFFFF;
  --btn-shadow:none;--btn-shadow-hover:none;
  --btn-lift:none;
  --btn-track:.09em;--btn-case:uppercase;--btn-border-w:2px;
  --btn2-fg:var(--navy);--btn2-fg-hover:#FFFFFF;
  --btn2-border:var(--navy);--btn2-border-hover:var(--navy);--btn2-bg-hover:var(--navy);
  --btn-onphoto-bg:transparent;--btn-onphoto-fg:#FFFFFF;--btn-onphoto-border:#FFFFFF;
  --btn-onphoto-bg-hover:#FFFFFF;--btn-onphoto-fg-hover:var(--navy);

  /* ---- Hero (dark navy, documentary photo under navy gradient scrim) ---- */
  --hero-bg:var(--navy);
  --hero-pad:148px;
  --hero-ink:#FFFFFF;
  --hero-eyebrow:var(--cyan);
  --hero-lh:1.0;--hero-track:-.035em;
  --hero-scrim:linear-gradient(180deg,rgba(8,27,47,.86) 0%,rgba(8,27,47,.8) 45%,rgba(14,42,71,.93) 100%);
  --hero-media-filter:grayscale(.32) contrast(1.14) brightness(.86);

  /* ---- Cards (flat, crisp border, no shadow) ---- */
  --card-bg:#FFFFFF;--card-bg-hover:#FFFFFF;
  --card-border:var(--hairline);--card-border-w:1px;--card-border-hover:var(--blue);
  --card-shadow:none;
  --card-shadow-hover:0 10px 30px rgba(14,42,71,.12);
  --card-lift:translateY(-3px);
  --card-accent-w:3px;--card-accent-scale:0;
  --pill-bg:var(--ice);--pill-fg:var(--navy);--pill-border:var(--ice-deep);
  --media-shadow:0 20px 48px rgba(14,42,71,.2);
  --tag-bg:var(--ice);--tag-fg:var(--chip-ink);--tag-border:var(--ice-deep);
  --photo-filter:grayscale(.1) contrast(1.06);--photo-filter-hover:grayscale(0) contrast(1.06);

  /* ---- Carousel ---- */
  --cbtn-bg:#FFFFFF;--cbtn-fg:var(--navy);--cbtn-border:var(--navy);
  --logo-filter:none;--logo-filter-hover:saturate(1.04);
  --member-mark:#5A6B7C;--dot:var(--ice-deep);

  /* ---- Fields ---- */
  --field-bg:#FFFFFF;--field-ink:var(--navy);--field-border:#FFFFFF;--field-ph:#6B7A8A;
  --field-bg2:#FFFFFF;--field-border2:#B9CBD9;

  /* ---- Footer (deep navy) ---- */
  --footer-bg:var(--navy-deep);
  --footer-ink:#CFDEEC;
  --footer-head:var(--cyan);
  --footer-link-hover:var(--cyan);
  --footer-hairline:rgba(255,255,255,.15);
  --footer-field-bg:rgba(255,255,255,.09);
  --footer-field-ink:#FFFFFF;
  --footer-field-border:rgba(255,255,255,.34);
  --footer-field-ph:#A9BDD0;
  --footer-logo-plate:#FFFFFF;--footer-logo-pad:9px 13px;

  /* ---- Page header ---- */
  --pagehead-bg:var(--ice);
  --pagehead-pad:80px;
  --pagehead-ink:var(--navy);
  --pagehead-tex:linear-gradient(90deg,rgba(57,183,201,.16) 0 6px,transparent 6px);
  --pagehead-scrim:linear-gradient(90deg,#EFF5F9 0%,#EFF5F9 44%,rgba(239,245,249,.74) 56%,rgba(239,245,249,.30) 74%,rgba(239,245,249,0) 90%);
  --pagehead-media-filter:grayscale(.28) contrast(1.08);
  --crumb:#5A6B7C;

  /* ---- Icons ---- */
  --ico-bg:var(--navy);--ico-fg:var(--cyan);--ico-border:var(--navy);

  --campaign-cap-bg:linear-gradient(to top,rgba(8,27,47,.96) 30%,rgba(8,27,47,.8) 62%,rgba(8,27,47,0));

  /* ---- Filters / tabs (active = navy filled pill + cyan indicator) ---- */
  --filter-fg:#4A5A6B;--filter-bg:#FFFFFF;--filter-border:#C6D6E3;
  --filter-fg-hover:var(--navy);--filter-border-hover:var(--navy);--filter-bg-hover:var(--ice);
  --filter-on-fg:#FFFFFF;--filter-on-bg:var(--navy);--filter-on-border:var(--navy);
  --filter-on-shadow:inset 0 -4px 0 var(--cyan);

  /* ---- Complaint ---- */
  --intro-bg:var(--ice);
  --map-bg:var(--ice);
  --map-state:#DCE8F1;
  --map-state-hover:var(--cyan);
  --map-stroke:#FFFFFF;
  --chip-fg:var(--navy);--chip-bg:#FFFFFF;--chip-border:#B9CBD9;
  --chip-on-bg:var(--dcan-blue);--chip-on-fg:#FFFFFF;--chip-on-border:var(--dcan-blue);

  /* ---- Tiles / numerals (giant ghost-outline numerals in ice blue) ---- */
  --tile-bg:#FFFFFF;--tile-bg-hover:var(--ice);--tile-rule-scale:0;
  --num-ink:#7FB9C8;--num-size:76px;--num-weight:900;--num-track:-.05em;
  --num-stroke:0;

  /* ---- Events ---- */
  --datebox-bg:var(--navy);--datebox-border:var(--navy);--datebox-num:#FFFFFF;--datebox-label:var(--cyan);

  --scrim:rgba(8,27,47,.66);--scrim-blur:blur(4px);

  /* ---- Resource type banners (monochrome blue family, distinct tints) ---- */
  --type-news:#0E2A47;      /* navy       */
  --type-video:#2D54A3;
  --type-papers:#0E7C8C;    /* deep cyan  */
  --type-info:#3F5F86;      /* slate blue */
  --type-social:#5A4A8C;    /* indigo     */
}

/* Direction B signature: all-caps statement headlines, cyan underline hover on
   the navy action cards, coral reserved for primary CTAs only. */
/* All-caps is kept for short statements only. A long uppercase headline is
   markedly harder to read, and this audience includes older patients. */
h2{text-transform:uppercase}
.hero h1{text-transform:none}
.pagehead h1{text-transform:none}
h1{text-transform:none}
.hero h1{max-width:16ch}
.res-body h3,.event-body h3,.action-card h3,.person-name,.value-card h3,.action-row h3,.reach h3,.modal-id h3{text-transform:none;letter-spacing:-.015em}

/* navy action cards with cyan underline hover */
.action-card{background:var(--navy);border-color:var(--navy);color:#D3E1EE}
.action-card h3{color:#FFFFFF}
.action-card p{color:#AFC5D8}
.action-card::before{background:var(--cyan);width:100%;height:3px;top:auto;bottom:0;
  transform:scaleX(0);transform-origin:left}
.action-card:hover::before{transform:scaleX(1)}
.action-card:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.action-card .arw-circle{background:rgba(255,255,255,.1);color:var(--cyan);border-color:rgba(255,255,255,.24)}
.action-card:hover .arw-circle{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}

/* modal gets a navy header band */
.modal{padding:0;overflow:hidden}
.modal-head{background:var(--navy);padding:26px 30px;margin-bottom:0}
.modal-head h3,.modal-head .tag{color:#FFFFFF}
.modal-id h3{color:#FFFFFF}
.modal-head .person-role{color:var(--cyan)}
.modal-head .xbtn{background:rgba(255,255,255,.12);color:#FFFFFF;border-color:rgba(255,255,255,.3)}
.modal-body{padding:30px}

/* big cyan numerals on advocacy action rows */
.action-row .ico{background:var(--navy);color:var(--cyan);border-color:var(--navy);
  font-family:var(--font-num);font-size:24px;font-weight:900}

/* pull quote serif accent */
.pullquote{font-family:var(--font-quote);font-style:italic;font-size:23px;line-height:1.5;
  color:var(--navy);border-left:4px solid var(--cyan);padding-left:24px;margin:30px 0}

/* cyan square bullets on the complaint checklist */
.check{border-radius:0;background:var(--cyan);color:var(--navy)}

/* the navy hero needs a light secondary button — navy-on-navy is invisible */
.hero .btn-ghost{--btn2-fg:#FFFFFF;--btn2-border:#FFFFFF;--btn2-bg-hover:#FFFFFF;--btn2-fg-hover:var(--navy)}

/* generated card icons carry themselves — no pill behind them */
.action-card .arw-circle:has(.ico-img),
.action-card:hover .arw-circle:has(.ico-img){background:none;border-color:transparent;box-shadow:none}

/* generated icons carry themselves — no plate behind them anywhere */
.action-row .ico:has(.ico-img),
.value-card .ico:has(.ico-img){background:none;border:none;box-shadow:none;width:auto;height:auto;border-radius:0}

/* Metadata chips are ice + navy everywhere; role labels are plain secondary text
   and the teal stays an accent (icons, underlines, eyebrows) — never a fill. */
.person-role{color:var(--ink-soft)}
.tile .more,.loadmore button{color:var(--chip-ink)}