/* =============================================
   iProv Base CSS
   Shared foundation for all iProv static sites.
   Override custom properties in site.css.
   ============================================= */

/* ---------- Custom Properties ---------- */
:root {
  /* Brand-guide palette (2025 Playbook). site.css re-declares these; kept in
     sync here so the base foundation is compliant on its own. */
  --color-primary: #cf4b04;
  --color-primary-dark: #004473;
  --color-secondary: #004473;
  --color-accent: #ffa300;
  --color-dark: #004473;
  --color-light: #F3F3F3;
  --color-white: #fff;
  --color-border: #E2E6EC;
  --color-text: #1a2733;
  --color-text-body: #4B5563;
  /* CONTRAST (audit 2026-09-15): #6B7280 measured 4.36 on the light-gray
     section background, just under the 4.5 requirement (39 nodes, 13 pages).
     #5f6773 clears every surface we place it on: 5.15 light-gray, 5.72 white,
     4.60 pale-yellow. Mirrored in site.css and worker.js CRITICAL_CSS. */
  --color-text-light: #5f6773;
  --color-footer-bg: #002448;

  /* A11Y focus ring (2026-10-01, WCAG 2.1 AA SC 2.4.7). Navy clears 3:1
     on every ground the form kit lands on: white 10.12, light gray 9.12,
     gold newsletter band 7.08, pale yellow 8.14, amber page head 5.06.
     It FAILS on orange (2.25) and on navy, so any dark or orange panel
     must re-declare this property; .form-border below does. */
  --focus-ring-color: var(--color-secondary);

  --font-base: "Atkinson Hyperlegible Next", -apple-system, system-ui, sans-serif;
  --max-width: 1200px;
  --radius: 12px;
  --section-spacing: 80px;
}

/* ---------- Reset & Defaults ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  /* Base body copy set to 18px to match the WordPress site (altitude-pro body
     is 18px; the vanilla default of 16px + hardcoded 13-15px copy read visibly
     smaller). Unclassed content <p>/<li>/<td> (program, blog, annual pages)
     inherit this; chrome keeps its own explicit smaller sizes. */
  font-size: 1.125rem;
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-base); }

/* ---------- Layout Utilities ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.text-center { text-align: center; }
.items-center { align-items: center; }

/* ---------- Typography ---------- */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); font-weight: 700; margin-bottom: 10px; }

/* CONTRAST (audit 2026-09-15): the orange eyebrow measured 4.06:1 on light-gray
   and 3.62:1 on pale-yellow, under the 4.5 normal-text requirement (264 nodes,
   43 pages). Casey's call was to keep the orange and size up rather than go
   navy. At 19px/700 this is 14.25pt bold, over WCAG's 14pt-bold large-text
   line, so the requirement drops to 3.0 and both surfaces pass.
   DO NOT drop this below 1.1667rem (18.66px) while it stays orange. */
.text-sub {
  font-size: 1.1875rem; /* 19px = 14.25pt bold -> large text, needs 3.0 */
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.text-sm { font-size: 1.25rem; color: var(--color-text-body); line-height: 1.65; }
.text-xs { font-size: 1rem; color: var(--color-text-body); line-height: 1.7; }
.text-label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 2px;
  color: var(--color-text-light);
}
/* Same large-text threshold as .text-sub: orange on the light-gray and
   pale-yellow section backgrounds measures 4.06 and 3.62, under 4.5 for normal
   text but over 3.0 for large. 19px/700 = 14.25pt bold clears it. */
.link-arrow {
  font-size: 1.1875rem; /* 19px; do not drop below 18.66px while orange */
  font-weight: 700;
  color: var(--color-primary);
  text-transform: none;
  letter-spacing: 0.5px;
}
.accent { color: var(--color-primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 14px 32px;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-dark:hover { filter: brightness(1.3); }
.btn-white {
  background: var(--color-white);
  color: var(--color-secondary);
}
.btn-white:hover { opacity: 0.92; }
.btn-outline {
  display: inline-block;
  padding: 13px 24px;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 50px;
  /* 17px orange measured 3.62 on pale-yellow panels; 19px/700 crosses the
     14pt-bold large-text line so the requirement drops to 3.0. */
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1px;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.card-white {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px;
}
.icon-box {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box svg { width: 20px; height: 20px; fill: var(--color-white); }

/* ---------- Sections ---------- */
.section { padding: var(--section-spacing) 0; }
.section-lg { padding: calc(var(--section-spacing) * 1.25) 0; }

/* ---------- Alert Bar ---------- */
.alert-bar {
  background: var(--color-dark, #004473);
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  padding: 9px 24px;
  letter-spacing: 0.2px;
}
.alert-bar a {
  color: var(--color-accent, #ffa300);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.alert-bar a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.logo img { height: 50px; width: auto; max-width: none; object-fit: contain; }
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
}
.nav a {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.nav a:hover { color: var(--color-primary); }
.header-cta {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.header-cta:hover { background: var(--color-primary-dark); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: none;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 24px;
}
.mobile-menu.active { display: block; }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-footer-bg);
  color: var(--color-white);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
.footer-brand img {
  height: 34px;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 16px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.footer-social a:hover { background: var(--color-primary); }
.footer-social svg { width: 15px; height: 15px; fill: var(--color-white); }
.footer-col h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom p { font-size: 1rem; color: rgba(255,255,255,0.65); }
.footer-bottom a {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  margin-left: 14px;
}
.footer-bottom a:hover { color: var(--color-white); }

/* ---------- FAQ Accordion ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
}
.faq-item {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  cursor: pointer;
  background: var(--color-white);
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-base);
  gap: 14px;
  transition: background 0.15s;
}
.faq-btn:hover { background: var(--color-light); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--color-white);
}
.faq-answer-inner {
  padding: 0 22px 18px;
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.8;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 14px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--font-base);
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--color-primary); }
/* A11Y (2026-10-01): the shorthand above carried `outline: none`, which
   also reset outline-style, so the browser ring was suppressed on every
   form on the site and the only focus affordance left was a 1px border
   tint. Restoring outline-COLOR alone does not work; the full
   width/style/color shorthand has to come back. (0,2,0) beats the
   .form-input block's (0,1,0), and nothing else in any loaded sheet sets
   outline on .form-input. */
.form-input:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.form-input::placeholder { color: var(--color-text-light); }
textarea.form-input { resize: vertical; min-height: 90px; }
.form-border {
  background: var(--color-primary);
  border-radius: 16px;
  padding: 36px;
  color: var(--color-white);
  /* Navy measures 2.25:1 on this orange panel and fails SC 1.4.11. White
     measures 4.51:1. No EAS page uses .form-border today (zero HTML
     users, 2026-10-01), so this is the contract for the next one. */
  --focus-ring-color: var(--color-white);
}
.form-border .form-input {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: var(--color-white);
}
.form-border .form-input::placeholder { color: rgba(255,255,255,0.5); }
.form-border .form-input:focus { border-color: var(--color-white); }

/* ---------- Partners ---------- */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 36px;
}
.partners img { height: 30px; width: auto; object-fit: contain; }

/* ---------- Stagger Grid ---------- */
.stagger { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stagger > :nth-child(2),
.stagger > :nth-child(4) { transform: translateY(28px); }
.stagger > :nth-child(2):hover,
.stagger > :nth-child(4):hover { transform: translateY(24px); }

/* ---------- Video Embed ---------- */
.video-wrap {
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
.video-wrap iframe { width: 100%; height: 100%; border: none; }

/* ---------- Background Utilities ---------- */
.bg-white { background: var(--color-white); }
.bg-light { background: var(--color-light); }
.bg-primary { background: var(--color-primary); color: var(--color-white); }
.bg-secondary { background: var(--color-secondary); color: var(--color-white); }
.bg-dark { background: var(--color-dark); color: var(--color-white); }

/* ---------- Spacing Helpers ---------- */
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 48px; }
.mb-6 { margin-bottom: 64px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mt-6 { margin-top: 64px; }

/* ---------- Blog Cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Every .blog-card is one link (#163): <a class="blog-card"> wraps the image,
   the <h3> and the rest, the way .program-card does, on the homepage and Get
   Support latest-posts grids and /blog/. The link
   takes its accessible name from the <h3> (aria-labelledby), the image is
   decorative (alt=""), and "Read More" is a plain <span class="link-arrow">,
   not a second link. This replaced the CD-230 stretched link
   (a.blog-card-img::after over an <article>), which left two links per card
   and put the focus ring on the small image link. */
.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Kept from CD-230 for paint order only: a hovered card's shadow overlaps
     the 28px gap, and positioned siblings keep it stacking as before. */
  position: relative;
  transition: box-shadow 0.3s, transform 0.3s;
}
.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
/* The whole card is the link, so the ring goes on the card: the site's 3px
   --focus-ring-color ring with the same 3px offset as .loc-card. The 28px grid
   gap leaves room for the 6px it draws outside the card. */
.blog-card:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}
.blog-card-img {
  width: 100%;
  height: 200px;
  background: var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-date {
  font-size: 1rem;
  color: var(--color-text-light);
  text-transform: none;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.blog-card-body h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; line-height: 1.35; }
.blog-card-body p {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.65;
  margin-bottom: 16px;
  flex-grow: 1;
}

/* ---------- Article ---------- */
.article { padding: var(--section-spacing) 0; }
.article-header { margin-bottom: 36px; }
.article-header h1 { margin-bottom: 12px; }
.article-meta { font-size: 1rem; color: var(--color-text-light); margin-bottom: 8px; }
.article-meta span { margin-right: 16px; }
.article-body { max-width: 760px; }
.article-body h2 { font-size: 1.625rem; font-weight: 800; margin: 32px 0 12px; color: var(--color-text); }
.article-body p { font-size: 1rem; color: var(--color-text-body); line-height: 1.85; margin-bottom: 18px; }
.article-body ul { list-style: none; margin: 12px 0 18px; }
.article-body li {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.75;
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}
.article-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* ---------- Related Posts ---------- */
.related-posts { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--color-border); }
.related-posts h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.related-card {
  background: var(--color-light);
  border-radius: var(--radius);
  padding: 24px;
}
.related-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.related-card p { font-size: 1rem; color: var(--color-text-body); line-height: 1.6; margin-bottom: 10px; }

/* ---------- CTA Banner ---------- */
.cta-banner {
  padding: 56px 0;
  background: var(--color-secondary);
  color: var(--color-white);
  text-align: center;
}
/* site.css:67 (`h2, h3 { color: var(--color-secondary) }`) loads after this
   file and beats the white inherited from .cta-banner, which painted the
   headline navy on navy on 64 pages. State the color here rather than reaching
   for !important. .cta-banner--soft overrides it again in template-kit.css,
   which loads later still, so the soft variant keeps its navy heading. */
.cta-banner h2 { margin-bottom: 14px; color: var(--color-white); }
.cta-banner p {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* =========== RESPONSIVE: 1024px =========== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}

/* =========== RESPONSIVE: 768px =========== */
@media (max-width: 768px) {
  .nav, .header-cta.desktop { display: none; }
  .hamburger { display: flex; }

  h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 1.875rem); }

  .grid-2,
  .grid-3,
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .grid-4 { grid-template-columns: 1fr; }

  .stagger { grid-template-columns: 1fr; }
  .stagger > :nth-child(2),
  .stagger > :nth-child(4) { transform: none; }
  .stagger > :nth-child(2):hover,
  .stagger > :nth-child(4):hover { transform: translateY(-4px); }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}

/* WebP wrapper (see scripts/apply_webp_markup.py). `display: contents` makes
   the <picture> generate no box, so CSS written against the inner <img> --
   .hero-bg's absolute positioning, card object-fit rules -- keeps working
   exactly as before the wrapper was added. */
.img-webp { display: contents; }