/* ==========================================================================
   CICP Design System — single source of truth, loaded site-wide.
   Approved 2026-09-16. Used by Elementor pages, the child theme, and the
   cicp-migration plugin components (team / studies / resources).
   ========================================================================== */

:root{
  --cicp-navy:#194787;        /* Dark Blue — 2015 brand guidelines */
  --cicp-navy-2:#135e97;      /* transitional (navy -> medium) for gradients */
  --cicp-blue:#0C79B5;        /* Medium Blue — 2015 brand guidelines */
  --cicp-sky:#00AEEF;         /* Cyan accent — 2015 brand guidelines */
  --cicp-green:#7CDA24;         /* border/outline accent ONLY, never a fill or on headings */
  --cicp-ink:#141a2e;
  --cicp-body:#525a6b;
  --cicp-body-2:#555555;
  --cicp-paper:#FAFAFA;
  --cicp-mist:#f3f6fc;
  --cicp-line:#e6e9f2;
  --cicp-footer:#194787;
  --cicp-footer-bar:#194787;
  --cicp-radius-btn:4px;        /* squared, not pills */
  --cicp-radius-card:14px;
  --cicp-shadow:0 8px 22px rgba(0,20,90,.06);
  --cicp-shadow-hi:0 20px 44px rgba(20,26,46,.12);
  --cicp-max:1320px;
  --font-head:'Montserrat',sans-serif;
  --font-body:'Mulish',system-ui,sans-serif;
  --font-label:'Barlow',sans-serif;
}

/* ---- Typography (refined hierarchy, not the old flat 40/40) ---- */
.cicp-scope,.cicp-scope *{box-sizing:border-box}
.cicp-scope{font-family:var(--font-body);color:var(--cicp-body);line-height:1.6}
.cicp-scope h1,.cicp-scope h2,.cicp-scope h3,.cicp-scope h4{font-family:var(--font-head);color:var(--cicp-navy);line-height:1.15;margin:0}
.cicp-h1{font-size:46px;font-weight:800;letter-spacing:-.5px}
.cicp-h2{font-size:34px;font-weight:700}
.cicp-h3{font-size:21px;font-weight:600}
.cicp-eyebrow{font-family:var(--font-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--cicp-blue)}
.cicp-scope a{color:var(--cicp-blue);text-decoration:none}

/* ---- Layout helpers ---- */
.cicp-wrap{max-width:var(--cicp-max);margin:0 auto;padding:0 30px}
.cicp-block{padding:76px 0}
.cicp-sec-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:34px}

/* ---- Buttons (4px radius) ---- */
.cicp-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-weight:600;font-size:14.5px;padding:12px 24px;border-radius:var(--cicp-radius-btn);cursor:pointer;border:0;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.cicp-btn--blue{background:var(--cicp-blue);color:#fff}
.cicp-btn--navy{background:var(--cicp-navy);color:#fff}
.cicp-btn--white{background:#FAFAFA;color:var(--cicp-navy)}
/* green = border/outline accent only */
.cicp-btn--green{background:transparent;color:var(--cicp-navy);border:1px solid var(--cicp-green);padding:11px 23px}
/* Buttons are usually <a>; .cicp-scope a sets a link color that would otherwise
   win on specificity and paint the label blue. Lock the correct label color. */
.cicp-scope a.cicp-btn--blue,.cicp-scope a.cicp-btn--navy{color:#fff}
.cicp-scope a.cicp-btn--white,.cicp-scope a.cicp-btn--green{color:var(--cicp-navy)}
/* One consistent, slight drop shadow on hover for every variant (no colored glow). */
.cicp-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,26,46,.18)}
.cicp-btn--green:hover{background:rgba(124,218,36,.12)}
/* A plugin reset.css forces `button{border:1px solid #cc3366;background:transparent}`
   with !important on every <button>. Re-assert our button styles so <button>-based
   CTAs (Load More, arrows) match the anchor buttons. */
button.cicp-btn{border:0!important}
button.cicp-btn--blue{background:var(--cicp-blue)!important;color:#fff!important}
button.cicp-btn--navy{background:var(--cicp-navy)!important;color:#fff!important}
button.cicp-btn--white{background:#FAFAFA!important;color:var(--cicp-navy)!important}
button.cicp-btn--green{background:transparent!important;border:1px solid var(--cicp-green)!important;color:var(--cicp-navy)!important}

/* ---- Cards ---- */
.cicp-card{display:flex;flex-direction:column;background:#FAFAFA;border:1px solid var(--cicp-line);border-radius:var(--cicp-radius-card);overflow:hidden;transition:transform .2s,box-shadow .2s}
.cicp-card:hover{transform:translateY(-4px);box-shadow:var(--cicp-shadow-hi)}
.cicp-card__body{padding:18px 20px 24px;display:flex;flex-direction:column;flex:1}
.cicp-card__date{font-family:var(--font-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--cicp-blue)}
.cicp-card__foot{margin-top:auto;padding-top:16px}   /* pins CTAs to card bottom, even across a row */

/* ---- Stat blocks (no icons, no border boxes) ---- */
.cicp-stat{background:#FAFAFA;border-radius:var(--cicp-radius-card);padding:26px 24px;box-shadow:var(--cicp-shadow)}
.cicp-stat__n{font-family:var(--font-head);font-weight:800;font-size:52px;color:var(--cicp-blue);line-height:1;letter-spacing:-1px}
.cicp-stat__l{font-family:var(--font-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--cicp-navy);margin-top:10px}

/* ---- Tab bar ---- */
.cicp-tabs{display:flex;background:#FAFAFA;border-bottom:1px solid var(--cicp-line);box-shadow:0 6px 20px rgba(0,20,90,.05)}
.cicp-tabs button{flex:1;font-family:var(--font-head);font-weight:600;font-size:15px;color:#8a93a8;background:none;border:0;padding:22px 10px;cursor:pointer;position:relative;transition:color .18s}
.cicp-tabs button:hover{background:none;color:var(--cicp-navy)}
.cicp-tabs button[aria-selected="true"]{color:var(--cicp-blue)}
.cicp-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;background:var(--cicp-blue);border-radius:3px}

/* ---- Carousel controls ---- */
/* ---------- neutralise hello-elementor's reset.css button styling ----------
   reset.css paints every bare <button> with a #c36 border + text, and flips the
   background to #c36 on :hover/:focus. Our components set their own colours but
   mostly never declared a hover BACKGROUND, so the pink came through there.
   This is the safety net; the components below set their own look. */
.cicp-scope button,.cicp-arrows button,.cicp-tabs button,.cicp-itabs button,.cicp-ptabs button,.cicp-pill{
	border-color:currentColor}
.cicp-scope button:hover,.cicp-scope button:focus,
.cicp-arrows button:hover,.cicp-arrows button:focus,
.cicp-tabs button:hover,.cicp-tabs button:focus,
.cicp-itabs button:hover,.cicp-itabs button:focus,
.cicp-ptabs button:hover,.cicp-ptabs button:focus,
.cicp-pill:hover,.cicp-pill:focus{background-color:transparent;color:inherit}

.cicp-arrows{display:flex;gap:8px}
.cicp-arrows button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--cicp-line);background:#FAFAFA;color:var(--cicp-navy);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.18s}
.cicp-arrows button:hover{background:#FAFAFA;color:var(--cicp-navy);border-color:var(--cicp-navy);transform:translateY(-2px)}
.cicp-prog{width:100px;height:3px;background:var(--cicp-line);border-radius:3px;overflow:hidden}
.cicp-prog i{display:block;height:100%;width:30%;background:var(--cicp-navy);border-radius:3px}

@media(prefers-reduced-motion:reduce){.cicp-scope *{transition:none!important}}

/* ---------- heading font fix ----------
   Elementor's global kit (.elementor-kit-N h1..h6) overrides .cicp-h1/.cicp-h2's
   font-family and renders headings in Roboto. cicpindiana.com uses Montserrat, so
   restore the brand head font with enough specificity to beat the kit.
   NOTE: the eyebrow rule (.cicp-eyebrow.elementor-widget-heading .elementor-heading-title,
   0-3-0) is more specific than this (0-2-1), so eyebrows correctly stay Barlow. */
body .cicp-scope h1,body .cicp-scope h2,body .cicp-scope h3,body .cicp-scope h4,
body .elementor-widget-heading .elementor-heading-title{font-family:var(--font-head)}

/* filter pills (resources) — had no styling, so reset.css rendered them pink */
.cicp-pill{background:#FAFAFA;border:1px solid var(--cicp-line);border-radius:999px;
	padding:8px 16px;font-family:var(--font-label);font-weight:600;font-size:14px;
	color:var(--cicp-navy);cursor:pointer;transition:.18s}
.cicp-pill:hover,.cicp-pill:focus{background:#eef2fb;color:var(--cicp-navy);border-color:var(--cicp-navy)}
.cicp-pill.is-active{background:var(--cicp-blue);border-color:var(--cicp-blue);color:#fff}
.cicp-pill.is-active:hover,.cicp-pill.is-active:focus{background:var(--cicp-blue);color:#fff}