/* Coverage Clock — shared navigation.
   Header, States menu, state bar, breadcrumbs, footer navigation, state hub block,
   state selector. Inherits each page's own colour tokens (variant A: --paper/--ink…,
   variant B: --bg/--text…) through fallbacks, so it matches every page and respects
   that page's dark-mode support. Edit here once; every page updates. */

/* ---------- global focus (WCAG 2.4.7) — zero specificity so page rules still win ---------- */
:where(a, button, summary, select, input, textarea):focus-visible {
  outline: 2px solid var(--focus, #2a6f6b);
  outline-offset: 2px;
}

/* ---------- skip link (WCAG 2.4.1) ---------- */
.cc-skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--ink, var(--text, #1e2621));
  color: var(--paper, var(--bg, #e9e6da));
  padding: 12px 18px; font: 600 15px/1.2 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
}
.cc-skip:focus { top: 12px; }

/* ---------- header ---------- */
.cc-header {
  background: var(--paper, var(--bg, #e9e6da));
  border-bottom: 1px solid var(--panel-line, var(--rule, #d9d4c2));
}
.cc-header-inner {
  max-width: 780px; margin: 0 auto; padding: 8px 28px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 18px;
}
.cc-brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Spectral', ui-serif, Georgia, serif; font-weight: 700; font-size: 20px;
  letter-spacing: -0.01em; text-decoration: none;
  color: var(--ink, var(--text, #1e2621));
}
.cc-brand em { font-style: italic; color: var(--accent-strong, var(--accent, #7d5417)); }

.cc-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.cc-nav > ul > li { position: relative; }
.cc-nav a, .cc-nav summary {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px;
  font: 600 14.5px/1 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft, var(--muted, #4c5449));
  text-decoration: none; cursor: pointer;
}
.cc-nav a:hover, .cc-nav summary:hover { color: var(--ink, var(--text, #1e2621)); }
.cc-nav > ul > li > a[aria-current], .cc-nav summary[aria-current] {
  color: var(--ink, var(--text, #1e2621));
  box-shadow: inset 0 -3px 0 var(--accent-strong, var(--accent, #7d5417));
}

/* States menu: native <details>, works with no JavaScript */
.cc-states summary { list-style: none; }
.cc-states summary::-webkit-details-marker { display: none; }
.cc-states summary::after {
  content: ""; width: 7px; height: 7px; margin: -4px 0 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.cc-states[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.cc-states-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 100;
  width: 300px; max-width: calc(100vw - 32px);
  list-style: none; margin: 0; padding: 6px;
  background: var(--panel, var(--panel-bg, #f7f5ec));
  border: 1px solid var(--panel-line, var(--panel-border, #d9d4c2));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.cc-states-menu a {
  min-height: 48px; padding: 6px 12px; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 3px;
  font-weight: 600; color: var(--ink, var(--text, #1e2621));
}
.cc-states-menu a small {
  font: 500 12.5px/1.3 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft, var(--muted, #4c5449));
}
.cc-states-menu a:hover, .cc-states-menu a[aria-current] { background: var(--paper, var(--bg, #e9e6da)); }
.cc-states-menu a[aria-current] { box-shadow: inset 3px 0 0 var(--accent-strong, var(--accent, #7d5417)); }
.cc-states-menu li.cc-all { border-top: 1px solid var(--panel-line, var(--panel-border, #d9d4c2)); margin-top: 4px; padding-top: 4px; }
.cc-states-menu li.cc-all a { min-height: 44px; flex-direction: row; color: var(--accent-strong, var(--accent, #7d5417)); }

/* ---------- state bar ---------- */
.cc-statebar {
  background: var(--panel, var(--panel-bg, #f7f5ec));
  border-bottom: 1px solid var(--panel-line, var(--rule, #d9d4c2));
}
.cc-statebar-inner { max-width: 780px; margin: 0 auto; padding: 10px 28px 0; }
.cc-statebar-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.cc-statebar-kicker {
  font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-soft, var(--muted, #4c5449));
}
.cc-statebar-name {
  font-family: 'Spectral', ui-serif, Georgia, serif; font-weight: 700; font-size: 19px;
  color: var(--ink, var(--text, #1e2621)); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 32px;
}
.cc-statebar-change {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 32px;
  font: 600 13.5px/1 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--accent-strong, var(--accent, #7d5417));
}
.cc-statebar ul {
  list-style: none; margin: 4px -12px 0; padding: 0;
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.cc-statebar li { flex: 0 0 auto; }
.cc-statebar ul a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 500 14.5px/1 'Public Sans', ui-sans-serif, system-ui, sans-serif; white-space: nowrap;
  color: var(--ink-soft, var(--muted, #4c5449)); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.cc-statebar ul a:hover { color: var(--ink, var(--text, #1e2621)); }
.cc-statebar ul a[aria-current] {
  color: var(--ink, var(--text, #1e2621)); font-weight: 700;
  border-bottom-color: var(--accent-strong, var(--accent, #7d5417));
}

/* ---------- breadcrumbs ---------- */
.cc-crumbs { max-width: 780px; margin: 0 auto; padding: 16px 28px 0; }
.cc-crumbs ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center;
  font: 500 12.5px/1.5 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-soft, var(--muted, #4c5449));
}
.cc-crumbs li { display: inline-flex; align-items: center; }
.cc-crumbs li + li::before {
  content: ""; width: 5px; height: 5px; margin: 0 10px 0 7px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.cc-crumbs a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--ink-soft, var(--muted, #4c5449));
  text-decoration: underline; text-decoration-color: var(--panel-line, var(--rule, #d9d4c2));
  text-underline-offset: 3px;
}
.cc-crumbs a:hover { color: var(--accent-strong, var(--accent, #7d5417)); }
.cc-crumbs [aria-current] { color: var(--ink, var(--text, #1e2621)); }

/* ---------- footer navigation ---------- */
.cc-footer-nav {
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--panel-line, var(--rule, #d9d4c2));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.cc-footer-nav h2 {
  margin: 0 0 8px; font: 600 11px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-strong, var(--accent, #7d5417));
}
.cc-footer-nav ul { list-style: none; margin: 0; padding: 0; }
.cc-footer-nav a {
  display: inline-flex; align-items: center; min-height: 32px;
  font: 400 14px/1.35 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft, var(--muted, #4c5449)); text-decoration: none;
}
.cc-footer-nav a:hover { color: var(--accent-strong, var(--accent, #7d5417)); text-decoration: underline; }

/* ---------- related pillar guide (supporting page -> pillar) ---------- */
.cc-related {
  margin: 8px 0 28px; padding: 16px 20px;
  background: var(--panel, var(--panel-bg, #f7f5ec));
  border-left: 3px solid var(--accent-strong, var(--accent, #7d5417));
}
.cc-related-k {
  margin: 0 0 6px; font: 600 11px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-strong, var(--accent, #7d5417));
}
.cc-related ul { list-style: none; margin: 0; padding: 0; }
.cc-related li { margin: 4px 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft, var(--muted, #4c5449)); }
.cc-related a { font-weight: 600; }

/* ---------- state hub block ---------- */
.cc-hub {
  background: var(--panel, var(--panel-bg, #f7f5ec));
  border: 1px solid var(--panel-line, var(--panel-border, #d9d4c2));
  padding: 22px 24px;
}
.cc-hub > h2 {
  font-family: 'Spectral', ui-serif, Georgia, serif; font-weight: 600; font-size: 23px;
  margin: 0; color: var(--ink, var(--text, #1e2621));
}
.cc-hub > p { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft, var(--muted, #4c5449)); }
.cc-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-top: 18px; }
.cc-hub-grid h3 {
  margin: 0 0 8px; font: 600 11px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-strong, var(--accent, #7d5417));
}
.cc-hub-grid ul { list-style: none; margin: 0; padding: 0; }
.cc-hub-grid li { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft, var(--muted, #4c5449)); }
.cc-hub-grid li a { font-weight: 600; }
.cc-hub-fact { display: block; font: 600 22px/1.15 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink, var(--text, #1e2621)); }
.cc-hub-note { font-size: 13px; color: var(--ink-soft, var(--muted, #4c5449)); }

/* ---------- state selector ---------- */
.cc-select { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.cc-select label {
  flex: 1 0 100%; font: 600 14.5px/1.3 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink, var(--text, #1e2621));
}
.cc-select select {
  flex: 1 1 240px; min-height: 48px; padding: 0 14px; font: 500 16px/1 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink, var(--text, #1e2621)); background: var(--panel, var(--panel-bg, #f7f5ec));
  border: 1.5px solid var(--ink-soft, var(--muted, #4c5449)); border-radius: 0;
}
.cc-select button {
  min-height: 48px; padding: 0 24px; cursor: pointer;
  font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper, var(--bg, #e9e6da)); background: var(--ink, var(--text, #1e2621)); border: none;
}
.cc-select button:hover { background: var(--accent-strong, var(--accent, #7d5417)); }

/* ---------- state cards ---------- */
.cc-cards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cc-cards a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 44px; padding: 16px 18px;
  background: var(--panel, var(--panel-bg, #f7f5ec));
  border: 1px solid var(--panel-line, var(--panel-border, #d9d4c2)); text-decoration: none;
}
.cc-cards a:hover { border-color: var(--accent-strong, var(--accent, #7d5417)); }
.cc-cards strong { font-family: 'Spectral', ui-serif, Georgia, serif; font-size: 19px; color: var(--ink, var(--text, #1e2621)); }
.cc-cards .cc-card-fact { font: 600 13px/1.3 'IBM Plex Mono', ui-monospace, monospace; color: var(--urgent, var(--accent, #a83226)); }
.cc-cards .cc-card-line { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft, var(--muted, #4c5449)); }

/* ---------- About submenu: the "About" link still goes to its page; the button next to it
   toggles the submenu (hidden attribute, assets/cc-nav.js). The links are always in the HTML. ---------- */
.cc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-nav > ul > li.cc-has-sub { display: flex; align-items: center; }
.cc-nav > ul > li.cc-has-sub > a { padding-right: 0; }
.cc-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-soft, var(--muted, #4c5449));
}
.cc-sub-toggle:hover { color: var(--ink, var(--text, #1e2621)); }
.cc-sub-toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.cc-sub-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.cc-sub-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
  width: 270px; max-width: calc(100vw - 32px);
  list-style: none; margin: 0; padding: 6px;
  background: var(--panel, var(--panel-bg, #f7f5ec));
  border: 1px solid var(--panel-line, var(--panel-border, #d9d4c2));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.cc-sub-menu[hidden] { display: none; }
.cc-sub-menu a { min-height: 44px; padding: 0 12px; color: var(--ink, var(--text, #1e2621)); line-height: 1.25; }
.cc-sub-menu a:hover, .cc-sub-menu a[aria-current] { background: var(--paper, var(--bg, #e9e6da)); }
.cc-sub-menu a[aria-current] { box-shadow: inset 3px 0 0 var(--accent-strong, var(--accent, #7d5417)); }
/* hover also opens it on devices with a real pointer (the button still works everywhere) */
@media (hover: hover) and (pointer: fine) {
  .cc-has-sub:hover > .cc-sub-menu[hidden] { display: block; }
}

/* ---------- "Follow on Google" block: holds Google's own Preferred Sources button (rendered by publisher.js) ---------- */
.cc-follow { margin: 8px 0 28px; }
.cc-follow-label {
  margin: 0 0 8px; font: 600 14px/1.4 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft, var(--muted, #4c5449));
}
.cc-follow [google-add-preferred-source-btn] { max-width: 100%; }

/* ---------- language switcher + "this link is in English/Spanish" label ---------- */
.cc-lang {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  font: 600 14px/1 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft, var(--muted, #4c5449)); text-decoration: none;
  border: 1px solid var(--panel-line, var(--border, #d9d4c2)); border-radius: 4px;
}
.cc-lang:hover { color: var(--ink, var(--text, #1e2621)); }
.cc-lang:focus-visible { outline: 2px solid var(--accent-strong, var(--accent, #7d5417)); outline-offset: 2px; }
.cc-en-note {
  margin-left: .3em; font-size: .82em; font-weight: 500; white-space: nowrap;
  color: var(--ink-soft, var(--muted, #4c5449));
}

/* Spanish labels run longer: show "Comparar" alone (full name stays accessible) and tighten padding,
   so brand, nav and the English link keep to one row on desktop */
:lang(es) .cc-nav .cc-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 721px) { :lang(es) .cc-nav a, :lang(es) .cc-nav summary { padding: 0 10px; } }

.cc-translation-note {
  margin: 18px 0 0; padding: 10px 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft, var(--muted, #4c5449));
  border-left: 3px solid var(--panel-line, var(--border, #d9d4c2));
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .cc-header-inner { padding: 6px 16px; }
  .cc-nav { width: 100%; order: 2; }
  .cc-lang { order: 1; margin-left: auto; }
  .cc-nav > ul { margin: 0 -10px; }
  .cc-nav a, .cc-nav summary { padding: 0 10px; font-size: 14px; }
  .cc-sub-toggle { width: 44px; }   /* touch target */
  .cc-nav .cc-sub-menu a { padding: 0 12px; }
  /* phones: the About menu opens as a full-width section under the nav, not a narrow popup */
  .cc-nav { position: relative; }
  .cc-nav > ul > li.cc-has-sub { position: static; }
  .cc-sub-menu { left: 0; right: 0; top: 100%; width: auto; max-width: none; }
  .cc-statebar-inner, .cc-crumbs { padding-left: 16px; padding-right: 16px; }
  .cc-statebar ul { margin-left: -16px; margin-right: -16px; padding: 0 4px; }
  .cc-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-hub { padding: 18px 18px; }
  .cc-hub-grid { grid-template-columns: 1fr; }
  .cc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cc-nav > ul { gap: 0; }
  .cc-nav a, .cc-nav summary { padding: 0 7px; font-size: 14px; }
  /* keeps the global nav on one row on phones; text stays in the accessible name */
  .cc-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 340px) {
  .cc-nav a, .cc-nav summary { padding: 0 6px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-states summary::after { transition: none; }
  .cc-sub-toggle::after { transition: none; }
}
@media print {
  .cc-skip, .cc-header nav, .cc-statebar, .cc-footer-nav { display: none; }
}