/* ============================================================
   GOVERNMENT PAGE, local styles
   ============================================================
   Prefix: g-
   ============================================================ */

/* ===== Two-product split (reused pattern from home) ===== */
.g-product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 40px;
}
.g-product-col {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.g-product-col--interview { background: var(--navy); }
.g-product-col--transcription { background: var(--navy-mid); }
.g-product-col__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.g-product-col__headline {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
  margin: 0;
}
.g-product-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.g-product-col__list li {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.g-product-col__list li svg { color: var(--teal); flex-shrink: 0; margin-top: 1px; }
.g-product-unifier {
  background: rgba(2,51,102,0.06);
  border: 1px solid rgba(2,51,102,0.14);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-mid);
  text-align: center;
  line-height: 1.55;
}
@media (max-width: 768px) {
  .g-product-split { grid-template-columns: 1fr; }
  .g-product-col { padding: 28px 24px; }
}

/* ===== Compliance obligations table ===== */
.g-obligations-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: 14px;
}
.g-obligations-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-light);
  border-bottom: 2px solid var(--border);
}
.g-obligations-table td {
  padding: 16px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.6;
  color: var(--ink-mid);
}
.g-obligations-table td:first-child {
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
  width: 24%;
  white-space: nowrap;
}
.g-obligations-table td:nth-child(2) {
  width: 28%;
  color: var(--ink);
}
.g-obligations-table td:last-child { width: 48%; }
.g-obligations-table tr:last-child td { border-bottom: none; }
.g-obligations-table tr:hover td { background: rgba(2,51,102,0.02); }
@media (max-width: 900px) {
  .g-obligations-table td:first-child { white-space: normal; width: auto; }
  .g-obligations-table th:nth-child(2),
  .g-obligations-table td:nth-child(2) { display: none; }
}
@media (max-width: 600px) {
  .g-obligations-table { font-size: 13px; }
  .g-obligations-table td { padding: 12px; }
}

/* ===== Risk callout (tools comparison) ===== */
.g-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.g-risk-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-risk-card__tool {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.g-risk-card__headline {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
}
.g-risk-card__body {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.g-risk-card__question {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  line-height: 1.5;
  font-style: italic;
}
@media (max-width: 900px) {
  .g-risk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .g-risk-grid { grid-template-columns: 1fr; }
}

/* ===== How it works steps ===== */
.g-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  position: relative;
}
.g-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 16px);
  right: calc(12.5% + 16px);
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.g-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.g-step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.g-step__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.g-step__body {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .g-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .g-steps::before { display: none; }
}
@media (max-width: 480px) {
  .g-steps { grid-template-columns: 1fr; }
}

/* ===== Compliance dashboard ===== */
.g-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.g-dashboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.g-dashboard-item__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.g-dashboard-item__sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-light);
  display: block;
  margin-top: 2px;
}
.g-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.g-badge--pass { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.g-badge--progress,
.g-badge--planned {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-light);
}
@media (max-width: 640px) {
  .g-dashboard { grid-template-columns: 1fr; }
}

/* ===== Hero stat strip ===== */
.g-stat-strip {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.g-stat {
  flex: 1;
  padding: 24px 28px;
  background: rgba(255,255,255,0.07);
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.g-stat:last-child { border-right: none; }
.g-stat__number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.02em;
}
.g-stat__label {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  line-height: 1.4;
}
.g-stat__source {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .g-stat-strip { flex-direction: column; }
  .g-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .g-stat:last-child { border-bottom: none; }
}

.g-badge--fail {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
.g-obligations-table .g-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
}
/* ==========================================================================
   NGUMA — CSS ADDITIONS, BLOCK 4
   --------------------------------------------------------------------------
   APPEND to css/page-government.css (at the end, after Block 3).
   Nothing here modifies an existing rule.
   ========================================================================== */


/* ===== Module list with icons (solution section) ===========================
   The default .g-dashboard-item pushes its two children apart to seat a badge
   on the right. The module list has no badges, so this variant packs the icon
   and text together on the left instead.
   ========================================================================== */
.g-dashboard--modules .g-dashboard-item {
  justify-content: flex-start;
  gap: 14px;
  align-items: flex-start;
}
.g-dashboard-item__icon {
  color: var(--teal-deep);
  flex-shrink: 0;
  margin-top: 2px;
}


/* ===== Jurisdiction lists inside the compliance table ======================
   Third column carries a bulleted instrument list per jurisdiction.
   ========================================================================== */
.g-obligations-table ul {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
}
.g-obligations-table li {
  margin-bottom: 6px;
  line-height: 1.45;
}
.g-obligations-table li:last-child {
  margin-bottom: 0;
}
.g-obligations-table li strong {
  font-weight: 600;
  color: var(--ink);
}
.g-obligations-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}
/* ===== 2x2 card grid ===== */
.g-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.g-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Header band: bleeds to top, left and right via overflow:hidden on the card */
.g-card__head {
  margin: 0;
  padding: 14px 20px;
  background: var(--teal-pale);
  border-bottom: 1px solid rgba(63,122,107,0.18);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}

/* Small section labels inside the card */
.g-card__label {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-light);
}

/* Nguma approach: white background */
.g-card__list + .g-card__label { margin-top: 0; }
.g-card__body {
  flex: 1;
  padding: 16px 20px 18px;
}
.g-card__list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.g-card__list li {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin-bottom: 8px;
}
.g-card__list li:last-child { margin-bottom: 0; }

/* Act band: bleeds to bottom, left and right */
.g-card__act {
  padding: 14px 20px;
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.g-card__act-line {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mid);
}
.g-card__act-line:last-child { margin-bottom: 0; }
.g-card__act-line strong { color: var(--navy); font-weight: 700; }

.g-card__act-line--always { visibility: visible; }

/* Constant-height swap.
   All jurisdiction variants occupy the same grid cell, so the panel is always
   as tall as the tallest option and the card never jumps when the selection
   changes. visibility (not display) keeps every variant in the layout. */
.g-card__act-stack { display: grid; }
.g-card__act-stack > .g-card__act-line {
  grid-area: 1 / 1;
  visibility: hidden;
  margin-bottom: 0;
}
#ngj-cth:checked ~ .g-card-grid .g-card__act-line[data-j="cth"],
#ngj-nsw:checked ~ .g-card-grid .g-card__act-line[data-j="nsw"],
#ngj-vic:checked ~ .g-card-grid .g-card__act-line[data-j="vic"],
#ngj-qld:checked ~ .g-card-grid .g-card__act-line[data-j="qld"],
#ngj-sa:checked ~ .g-card-grid .g-card__act-line[data-j="sa"],
#ngj-wa:checked ~ .g-card-grid .g-card__act-line[data-j="wa"],
#ngj-tas:checked ~ .g-card-grid .g-card__act-line[data-j="tas"],
#ngj-nt:checked ~ .g-card-grid .g-card__act-line[data-j="nt"],
#ngj-act:checked ~ .g-card-grid .g-card__act-line[data-j="act"] {
  visibility: visible;
}

@media (max-width: 820px) {
  .g-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .g-juris__bar { gap: 8px; }
  .g-juris__pill { font-size: 12px; padding: 6px 12px; }
}
/* ==========================================================================
   NGUMA — CSS ADDITIONS, BLOCK 7
   --------------------------------------------------------------------------
   APPEND to css/page-government.css, after Block 6.

   1. A six-stage variant of the journey strip, with four stages inside the gap.
      Scoped with --wide-gap so the eight-stage version on other pages is
      unaffected.
   2. The illustration band that replaces the red burden panel.
   ========================================================================== */



/* ==========================================================================
   NGUMA — COMPLIANCE SECTION, theme tabs (replaces the old jurisdiction
   picker). Pure-CSS radio-driven tabs: one radio+label per theme, one panel
   per theme. Same accessible-radio-group technique as the block this
   replaces.
   ========================================================================== */
.g-theme-switcher { margin-top: 32px; }

.g-theme-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.g-theme-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 28px;
}
.g-theme-tab {
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mid);
  transition: color var(--transition, 0.2s ease), background var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease);
}
.g-theme-tab:hover { border-color: var(--teal-deep); color: var(--teal-deep); }

.g-theme-panel { display: none; }

.g-theme-panel__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.g-theme-panel__approach .g-card__list { margin-top: 12px; }

.g-policy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.g-policy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.g-policy-row:last-child { padding-bottom: 0; border-bottom: none; }
.g-policy-row__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mid);
}
.g-policy-row__text strong { color: var(--navy); font-weight: 700; }
.g-policy-row .g-badge { flex-shrink: 0; }

/* Wire each radio to its own tab + panel, 1-indexed */
#g-theme-1:checked ~ .g-theme-tabs label[for="g-theme-1"],
#g-theme-2:checked ~ .g-theme-tabs label[for="g-theme-2"],
#g-theme-3:checked ~ .g-theme-tabs label[for="g-theme-3"],
#g-theme-4:checked ~ .g-theme-tabs label[for="g-theme-4"] {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
}
#g-theme-1:checked ~ .g-theme-panels #g-theme-panel-1,
#g-theme-2:checked ~ .g-theme-panels #g-theme-panel-2,
#g-theme-3:checked ~ .g-theme-panels #g-theme-panel-3,
#g-theme-4:checked ~ .g-theme-panels #g-theme-panel-4,
#g-theme-5:checked ~ .g-theme-panels #g-theme-panel-5 {
  display: block;
}

@media (max-width: 768px) {
  .g-theme-panel__body { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .g-theme-tab { font-size: 12.5px; padding: 8px 4px; }
}