/* SolarPrograms.com : State page theme layer
   Loaded on every state page after the page's own migrated styles (page.css).
   Purpose: one look and feel on all 50 state pages, matching the homepage:
   same type, palette, spacing, cards and tables; every program detail visible
   without clicking; banners styled the same everywhere.
   No content is hidden or removed here. */

/* ---------- Banners under the hero (data alerts and migrated notices) ---------- */
.alert-bar {
  display: block;
  max-width: var(--maxw);
  margin: var(--sp-4) auto 0;
  width: calc(100% - 2 * var(--gutter));
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left-width: 5px;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  background: var(--bg-2);
}
.alert-bar strong { font-weight: 700; }
.alert-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.alert-bar.alert-red   { background: #fdf1ef; border-color: #f2c9c2; border-left-color: var(--danger); color: #5c1a12; }
.alert-bar.alert-amber { background: var(--sun-pale); border-color: #f1d9a8; border-left-color: var(--sun); color: #5a3a06; }
.alert-bar.alert-green { background: var(--accent-pale); border-color: var(--line); border-left-color: var(--accent); color: var(--accent-dim); }
.alert-bar.alert-blue  { background: var(--bg-2); border-color: var(--line); border-left-color: var(--accent-mid); color: var(--ink); }
.alert-bar + .content-wrap, .alert-bar:last-of-type { margin-bottom: 0; }

/* ---------- Content frame ---------- */
main .content-wrap {
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  padding: clamp(var(--sp-8), 4vw, var(--sp-12)) var(--gutter) clamp(var(--sp-12), 5vw, var(--sp-16)) !important;
  background: var(--bg-2) !important;
  /* full-width light green band behind the centred content (page rhythm, 2026-10-19) */
  box-shadow: 0 0 0 100vmax var(--bg-2);
  clip-path: inset(0 -100vmax);
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--step-0) !important;
  line-height: var(--leading-normal) !important;
}
main .content-wrap *:not(svg):not(svg *):not(code):not(pre):not(kbd) { font-family: var(--font-sans) !important; }

/* ---------- Headings: homepage scale and weight ---------- */
main .content-wrap h1, main .content-wrap h2 {
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
}
main .content-wrap h2 { font-size: var(--step-3) !important; }
main .content-wrap h3 { font-size: var(--step-1) !important; font-weight: 700 !important; letter-spacing: var(--tracking-snug) !important; line-height: var(--leading-snug) !important; }
main .content-wrap h4 { font-size: var(--step-0) !important; font-weight: 700 !important; }
main .content-wrap p, main .content-wrap li, main .content-wrap td, main .content-wrap th { line-height: var(--leading-normal); }

/* ---------- Tables: one style everywhere ---------- */
main .content-wrap table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
main .content-wrap th, main .content-wrap td { padding: var(--sp-3) var(--sp-4); vertical-align: top; }
main .content-wrap thead th { text-transform: none; letter-spacing: 0; font-weight: 600; }
main .content-wrap .table-wrap, main .content-wrap .table-container, main .content-wrap .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Cards and radii consistent with homepage cards ---------- */
main .content-wrap [class*="card"]:not([class*="card-"]):not([class*="-card-"]) { border-radius: var(--r-md); }

/* ---------- Every program's details are visible without clicking ---------- */
main .content-wrap .program-card-body,
main .content-wrap .program-body,
main .content-wrap .card-body,
main .content-wrap .section-body,
main .content-wrap .accordion-body,
main .content-wrap .accordion-content,
main .content-wrap .collapse-body { display: block !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; }
main .content-wrap .program-card-header,
main .content-wrap .card-header,
main .content-wrap .section-header,
main .content-wrap .accordion-header { cursor: default !important; }
main .content-wrap .chevron,
main .content-wrap .toggle-arrow,
main .content-wrap .expand-icon,
main .content-wrap .toggle-icon,
main .content-wrap .accordion-icon,
main .content-wrap .card-chevron { display: none !important; }

/* ---------- Forms and calculators inside content use site controls ---------- */
main .content-wrap input, main .content-wrap select, main .content-wrap textarea {
  font: inherit; font-size: var(--step--1);
  border-radius: var(--r-sm) !important;
}
main .content-wrap button { border-radius: var(--r-sm); font-weight: 700; }

/* ---------- Links ---------- */
main .content-wrap a:not([class*="btn"]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ---------- Mobile: nothing wider than the screen ---------- */
@media (max-width: 860px) {
  main .content-wrap [class*="layout"], main .content-wrap [class*="grid"]:not(table):not([class*="grid-cell"]) { min-width: 0; }
  main .content-wrap table { display: block; overflow-x: auto; }
  main .content-wrap img, main .content-wrap canvas { max-width: 100% !important; height: auto; }
}
main .content-wrap { overflow-wrap: anywhere; }
main .content-wrap td, main .content-wrap th { overflow-wrap: normal; }

/* 2026-10-16: one primary button color site-wide (state sources used orange, blue, purple) */
main .content-wrap form button[type="submit"], main .content-wrap .btn-primary, main .content-wrap .submit-btn {
  background: var(--volt) !important; color: var(--on-volt) !important; border-color: var(--volt) !important; font-weight: 700 !important;
}
@media (hover: hover) {
  main .content-wrap form button[type="submit"]:hover, main .content-wrap .btn-primary:hover, main .content-wrap .submit-btn:hover { background: var(--volt) !important; }
}

/* 2026-10-24: electric green. Every primary action on a state page is volt with ink text. */
main :is(form button[type="submit"], .btn-primary, .submit-btn, .calc-btn, .cta-btn, .cta-button, .est-btn, .lead-mini-btn,
         .lead-submit, .form-submit, .btn-submit, .btn-calc, .hero-cta, .nav-cta),
main :is(form button[type="submit"], .btn-primary, .submit-btn, .calc-btn, .cta-btn, .cta-button, .est-btn, .lead-mini-btn,
         .lead-submit, .form-submit, .btn-submit, .btn-calc, .hero-cta, .nav-cta):is(:hover, :active, :focus) {
  background: var(--volt) !important; color: var(--on-volt) !important; border-color: var(--volt) !important; font-weight: 700 !important;
  box-shadow: none !important; transform: none !important;
}

/* ==== 2026-10-24: every green fill is the electric green, with ink text ==== */
.skip-link, .skip-link:focus,
.program-nav__list a[aria-current="true"], .program-nav__list a[aria-current="true"]:hover,
.content-wrap :is(.comp-table, .data-table) th,
.content-wrap .sidebar-card-head, .content-wrap .sidebar-header,
table thead th, .content-wrap table th {
  background: var(--volt); color: var(--on-volt); border-color: var(--volt);
}
/* buttons that sit on a green panel: white fill, ink border, so they stay visible */
.content-wrap .calc-btn, .content-wrap .calc-btn:hover, .content-wrap .calc-btn:focus-visible {
  background: var(--bg); color: var(--on-volt); border: 2px solid var(--on-volt); font-weight: 700;
}
main .content-wrap .calculator-section :is(button, .calc-btn, button[type="submit"]),
main .content-wrap .calculator-section :is(button, .calc-btn, button[type="submit"]):is(:hover, :active, :focus) {
  background: var(--bg) !important; color: var(--on-volt) !important; border: 2px solid var(--on-volt) !important; font-weight: 700 !important;
}