/* ============================================================
   ONUS Homeschool — Homeschool State Laws widget
   Warm Earthy. Uses existing tokens only (see custom.css):
   --cream --cream-2 --sand --sage --sage-deep --ink --ink-soft
   --ink-faint --accent --accent-dk --cta --cta-ink --divider
   --radius --shadow-card --font-display --font-body --font-ui
   Loaded ONLY on the State Laws page (conditional enqueue).
   ============================================================ */

/* ---------- Layout shell ----------
   Green (sage) band behind the intro paragraph + map; cream behind the
   state-details results. Sage = the same green used on the About and
   Curriculum pages. */
.statelaws { padding: 0; }
.statelaws .wrap { max-width: var(--maxw); }

/* Intro hero sits on sage so it reads continuously with the map band. */
.subhero--sage { background: var(--sage); }

/* Green band holding the map. */
.statelaws__mapband { background: var(--sage); padding: 24px 0 64px; }

/* Cream band holding the result / details panel. */
.statelaws__results { background: var(--cream); padding: 52px 0 96px; }

/* Intro copy */
.statelaws__intro { max-width: 820px; margin: 0 auto 8px; text-align: center; }
.statelaws__intro .lede { max-width: 70ch; margin-left: auto; margin-right: auto; text-align: left; }
.statelaws__intro p + p { margin-top: 18px; }
.statelaws__cta-line {
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  color: var(--accent-dk); letter-spacing: .01em;
  margin-top: 22px;
}

/* ============================================================
   THE MAP
   ============================================================ */
.usmap { margin: 0 auto; }
.usmap__frame {
  background: var(--cream);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px clamp(12px, 2.4vw, 30px);
}
.usmap__svg {
  display: block; width: 100%; height: auto;
  font-family: var(--font-ui);
  overflow: visible;
}

/* State shapes */
.usmap__states path {
  fill: var(--sand);
  stroke: var(--divider);
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .18s var(--ease), stroke .18s var(--ease);
  outline: none;
}
.usmap__states path:hover,
.usmap__states path.is-hover { fill: var(--accent); }
.usmap__states path:focus-visible {
  stroke: var(--accent-dk); stroke-width: 2.4;
}
.usmap__states path.is-selected {
  fill: var(--cta);
  stroke: var(--ink);
  stroke-width: 1.6;
}
/* Disabled (sample mode / unverified) states */
.usmap__states path.is-disabled {
  fill: var(--cream-2);
  cursor: default;
  opacity: .85;
}
.usmap__states path.is-disabled:hover { fill: var(--cream-2); }

/* Inline 2-letter labels */
.usmap__label {
  font-size: 13px; font-weight: 600;
  fill: var(--ink-soft);
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
  transition: fill .18s var(--ease);
}
.usmap__label.is-selected,
.usmap__label.on-selected { fill: var(--cta-ink); }
.usmap__label.is-disabled { fill: var(--ink-faint); }

/* External leader-line labels (small NE states) */
.usmap__ext { cursor: pointer; outline: none; }
.usmap__leader { stroke: var(--ink-faint); stroke-width: 1; }
.usmap__extbox {
  fill: var(--sand); stroke: var(--divider); stroke-width: 1;
  transition: fill .18s var(--ease), stroke .18s var(--ease);
}
.usmap__extlabel {
  font-size: 13px; font-weight: 600; fill: var(--ink-soft);
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
  transition: fill .18s var(--ease);
}
.usmap__ext:hover .usmap__extbox,
.usmap__ext.is-hover .usmap__extbox { fill: var(--accent); }
.usmap__ext:focus-visible .usmap__extbox { stroke: var(--accent-dk); stroke-width: 2.4; }
.usmap__ext.is-selected .usmap__extbox { fill: var(--cta); stroke: var(--ink); stroke-width: 1.6; }
.usmap__ext.is-selected .usmap__extlabel { fill: var(--cta-ink); }
.usmap__ext.is-disabled { cursor: default; }
.usmap__ext.is-disabled .usmap__extbox { fill: var(--cream-2); }
.usmap__ext.is-disabled .usmap__extlabel { fill: var(--ink-faint); }

/* Hover tooltip (full state name) */
.usmap__tooltip {
  position: fixed; z-index: 60;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -130%);
  background: var(--ink); color: var(--on-dark);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  padding: 6px 11px; border-radius: 6px;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transition: opacity .14s var(--ease);
}
.usmap__tooltip.is-on { opacity: 1; }

/* ============================================================
   DROPDOWN FALLBACK (required, primary control on mobile)
   ============================================================ */
.usmap__fallback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 22px auto 0; max-width: 560px;
}
.usmap__fallback-label {
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  color: var(--ink-soft);
}
.usmap__select {
  flex: 1 1 240px;
  font-family: var(--font-ui); font-weight: 500; font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--divider);
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A6792A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.usmap__select:focus-visible {
  outline: none;
  border-color: var(--accent-dk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ============================================================
   RESULT PANEL
   ============================================================ */
.sl-result {
  margin: 0 auto;
  max-width: 920px;
  background: var(--cream-2);
  border: 1px solid var(--divider);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 4vw, 44px);
}
.sl-result[hidden] { display: none; }

.sl-result__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--divider);
}
.sl-result__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.06;
  color: var(--ink); margin: 0;
}

/* Regulation-level badge */
.sl-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid transparent;
}
.sl-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: currentColor; opacity: .85;
}
.sl-badge--no-notice { background: var(--sage); color: #4A6033; border-color: var(--sage-deep); }
.sl-badge--low       { background: #F4E6C5; color: #8A6A1E; border-color: var(--divider); }
.sl-badge--moderate  { background: color-mix(in srgb, var(--cta) 22%, var(--cream)); color: var(--accent-dk); border-color: color-mix(in srgb, var(--cta) 45%, transparent); }
.sl-badge--high      { background: #EAD5CC; color: #8A3B26; border-color: #D9B5A6; }

/* Summary table */
.sl-summary-wrap { margin-bottom: 34px; }
.sl-subhead {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.sl-summary {
  width: 100%; border-collapse: collapse;
  background: var(--cream);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-ui);
}
.sl-summary caption { display: none; }
.sl-summary thead th {
  text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cta-ink); background: var(--cta);
  padding: 12px 18px;
  border-bottom: 2px solid var(--accent);
}
.sl-summary tbody th {
  text-align: left; vertical-align: top;
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  width: 38%; padding: 13px 18px;
  background: color-mix(in srgb, var(--sand) 36%, var(--cream));
  border-bottom: 1px solid var(--divider);
}
.sl-summary tbody td {
  vertical-align: top;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  padding: 13px 18px;
  border-bottom: 1px solid var(--divider);
}
.sl-summary tbody tr:last-child th,
.sl-summary tbody tr:last-child td { border-bottom: 0; }

/* Full detail subsections */
.sl-details { margin-bottom: 14px; }
.sl-field { padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--divider) 60%, transparent); }
.sl-field:first-child { padding-top: 0; }
.sl-field__label {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--ink); margin: 0 0 8px;
  padding-left: 13px; border-left: 3px solid var(--accent);
}
.sl-field__body { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.62; }

/* Disclaimer + source */
.sl-disclaimer {
  margin-top: 28px;
  background: var(--sand);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.sl-disclaimer__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-dk); margin: 0 0 9px;
}
.sl-disclaimer__title svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sl-disclaimer__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.sl-pending {
  margin-top: 12px; padding: 10px 14px;
  background: #EAD5CC; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: #8A3B26;
}

.sl-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; margin-top: 20px;
}
.sl-source {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  color: var(--cta-ink); background: var(--cta);
  padding: 12px 22px; border-radius: 999px;
  text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease);
  box-shadow: var(--shadow-cta);
}
.sl-source:hover { background: var(--accent-dk); color: var(--cta-ink); transform: translateY(-1px); }
.sl-source svg { width: 16px; height: 16px; }
.sl-reviewed {
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-faint);
}
.sl-reviewed strong { color: var(--ink-soft); font-weight: 600; }

/* Empty / prompt + error states */
.sl-empty {
  margin: 0 auto; max-width: 720px; text-align: center;
  font-family: var(--font-ui); font-size: 16px; color: var(--ink-faint);
}
.sl-error {
  margin: 40px auto 0; max-width: 720px;
  background: #EAD5CC; border: 1px solid #D9B5A6; border-radius: var(--radius);
  padding: 22px 24px; color: #8A3B26;
  font-family: var(--font-ui); font-size: 15.5px; line-height: 1.6;
}
.sl-error a { color: #8A3B26; font-weight: 700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .statelaws__mapband { padding: 16px 0 48px; }
  .statelaws__results { padding: 40px 0 72px; }
  .usmap__frame { padding: 16px 12px; }
}
@media (max-width: 560px) {
  .usmap__frame { padding: 12px 8px; overflow-x: auto; }
  .usmap__svg { min-width: 520px; }            /* map may scroll; dropdown stays the easy path */
  .usmap__fallback { flex-direction: column; align-items: stretch; }
  .usmap__select { flex-basis: auto; }
  .sl-summary tbody th { width: 44%; }
  .sl-summary thead { display: none; }          /* compact: hide header on tiny screens */
  .sl-result__head { gap: 10px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .usmap__states path,
  .usmap__extbox, .usmap__extlabel, .usmap__label,
  .usmap__tooltip, .sl-source, .usmap__select { transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   FULL-BLEED BAND CONTINUITY (live site)
   ------------------------------------------------------------
   WordPress's block layout inserts vertical "block gap" margins
   between the page's top-level sections — and between <main> and
   the footer. On this page the bands are colored (sage intro/map,
   amber CTA), so those margins reveal the cream page background as
   stray strips between the bands. Collapse them so the bands meet
   flush. Scoped to THIS page only via :has(#state-laws); each band
   keeps its own internal padding, so vertical rhythm is preserved.
   ============================================================ */
body:has(#state-laws) .wp-site-blocks > *,
body:has(#state-laws) main.wp-block-group > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}