@charset "utf-8";
/* ==========================================================================
   Philippine Banana Council, Inc. — map.css
   Page-local additions for index.html + industry.html. Loaded AFTER main.css.
   Token-only colours (var(--…) from main.css :root) — no literals.

   INDEX
   01. Mindanao map — selection state (replaces the removed .map-tip tooltip)
   02. Region table — clickable rows, selected row, region note row
   03. Constituency ledger (index.html "Five constituencies. One council.")
   04. Reduced motion
   ========================================================================== */

/* ------------------------------------ 01. Map selection ----------------- */
/* Hover / focus gold comes from main.css §13. Selection is a separate, more
   deliberate state: it stays gold and reads as pressed. */
.map-region.is-selected {
  fill: var(--gold);
  stroke-width: 2.5;
}

.map-region.is-selected:hover { fill: var(--gold-hover); }

/* ------------------------------------ 02. Region table ------------------ */
.data-table tr[data-region] { cursor: pointer; }

/* The region name is a button so the row is reachable and operable by
   keyboard. Styled as plain text; negative margins pull the 44px hit area
   out to the full cell box. */
.data-table .region-btn {
  display: flex;
  align-items: center;
  width: calc(100% + 32px);
  min-height: 44px;
  margin: -12px -16px;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.data-table .region-btn:hover {
  color: var(--green-leaf);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.data-table .region-btn:focus-visible { outline-offset: -3px; }

/* Selected row: gold left rule + bold, carried across both cells. */
.data-table tr[data-region].is-selected > * {
  background: var(--white-warm);
  font-weight: 700;
}

.section--green .data-table tr[data-region].is-selected > *,
.section--charcoal .data-table tr[data-region].is-selected > *,
.section--dark .data-table tr[data-region].is-selected > * {
  background: var(--overlay-soft);
}

.data-table tr[data-region].is-selected > :first-child {
  box-shadow: inset 4px 0 0 var(--gold);
  padding-left: 20px;
}

.data-table tr[data-region].is-selected .region-btn {
  width: calc(100% + 28px);
  margin-left: -4px;
  font-weight: 700;
}

/* One-line note, directly beneath the row that floated to the top. */
.region-note > td {
  padding-top: 4px;
  padding-bottom: 16px;
  padding-left: 20px;
  box-shadow: inset 4px 0 0 var(--gold);
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: normal;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 46ch;
}

.section--green .region-note > td,
.section--charcoal .region-note > td,
.section--dark .region-note > td { color: var(--white-warm); }

/* ------------------------------------ 03. Constituency ledger ----------- */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-dark);
}

.ledger__row {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
  align-items: baseline;
  padding: 28px 16px;
  margin-inline: -16px;
  border-bottom: 1px solid var(--border-dark);
  transition: background-color 180ms var(--ease);
}

.ledger__row:hover { background: var(--overlay-soft); }

.ledger__num {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  color: var(--gold);
}

.ledger__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  text-wrap: pretty;
}

.ledger__desc {
  grid-column: 2 / -1;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--white-warm);
}

@media (min-width: 900px) {
  .ledger__row {
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 32px;
    row-gap: 0;
    padding: 34px 20px;
    margin-inline: -20px;
  }

  .ledger__num { font-size: 38px; }
  .ledger__name { font-size: 28px; }

  .ledger__desc {
    grid-column: 3;
    padding-top: 4px;
  }
}

/* main.css gives every link on a dark ground `color: var(--gold-light)`
   (0,2,0), which outranks `.btn { color: var(--ink) }` (0,1,0) and would put
   pale gold text on the gold CTA. BUILD_SPEC §1: gold never carries light
   text. Restore --ink for primary buttons on dark grounds. */
.section--green .btn:not(.btn--secondary),
.section--charcoal .btn:not(.btn--secondary),
.section--dark .btn:not(.btn--secondary),
.section--green .btn:not(.btn--secondary):visited,
.section--charcoal .btn:not(.btn--secondary):visited,
.section--dark .btn:not(.btn--secondary):visited { color: var(--ink); }

/* On a light ground the ledger keeps the same shape, darker rules. */
.section:not(.section--green):not(.section--charcoal):not(.section--dark) .ledger,
.section:not(.section--green):not(.section--charcoal):not(.section--dark) .ledger__row {
  border-color: var(--border);
}

.section:not(.section--green):not(.section--charcoal):not(.section--dark) .ledger__desc {
  color: var(--ink-soft);
}

.section:not(.section--green):not(.section--charcoal):not(.section--dark) .ledger__row:hover {
  background: var(--white-warm);
}

/* ------------------------------------ 04. Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .data-table tr[data-region] {
    transition: none !important;
    transform: none !important;
  }
  .ledger__row { transition: none !important; }
}