/* Serve (serve.html): the organisations that take part-time hours, as one
   swapper over Federal and the eight states and territories. The service
   descriptions are the household guide's own lines; the per-state names,
   figures and links come from each service's own site. The map is baked by
   tools/map/build-au-map.mjs. Chrome comes from system.css. */

/* ---- The Institute's own band: one column, so nothing sits half empty ---- */
.sv-us__inner { max-width: 44rem; }
.sv-us h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em; }
.sv-us__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---- What the two local services are: said once, not per state ---- */
.sv-where__head h2 { max-width: 16em; }
.sv-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; margin-top: 2rem; max-width: 64rem; }
.sv-kinds dt { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.sv-kinds dd { margin-top: 0.4rem; font-family: var(--sans); font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }

/* ---- Map beside the panel ---- */
.sv-board { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: 2.5rem; }
.sv-map { position: sticky; top: 6.5rem; }
.aumap { display: block; width: 100%; height: auto; overflow: visible; }
.aumap__state {
  fill: var(--paper-deep); stroke: var(--paper-light); stroke-width: 2; stroke-linejoin: round;
  cursor: pointer; transition: fill 0.25s ease;
}
@media (hover: hover) { .aumap__state:hover { fill: var(--copper-light); } }
.aumap__state.is-on { fill: var(--copper); }
/* Federal selected: the whole country reads as active, and nothing is clickable-looking. */
.sv-map.is-federal .aumap__state { fill: var(--ink); }
.sv-map.is-federal .aumap__state:hover { fill: var(--ink-soft); }

/* ---- Panels ---- */
.sv-tabs { margin-top: 2.75rem; }
.sv-panels { min-height: 26rem; }
.sv-panel h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.015em; }

.sv-orgs { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.sv-org { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.sv-org__kind { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--copper); margin-bottom: 0.3rem; }
.sv-orgs dt { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; }
.sv-orgs dt a { text-decoration: none; border-bottom: 1.5px solid var(--copper); padding-bottom: 0.08em; }
.sv-orgs dt a:hover { border-color: currentColor; }
.sv-orgs dd { margin-top: 0.45rem; font-family: var(--sans); font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }

.sv-panel__also { margin-top: 1.25rem; font-family: var(--sans); font-size: var(--t-small); color: var(--ink-soft); }
.sv-jump { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; border-bottom: 1.5px solid var(--copper); padding: 0 0 0.1em; cursor: pointer; }
.sv-jump:hover { border-color: currentColor; }

@media (max-width: 900px) {
  .sv-kinds { grid-template-columns: 1fr; gap: 1.25rem; }
  .sv-tabs { grid-template-columns: repeat(3, 1fr); }
  .sv-board { grid-template-columns: 1fr; gap: 2rem; }
  .sv-map { position: static; max-width: 22rem; }
  .sv-panels { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .aumap__state { transition: none; } }