/* ─────────────────────────────────────────────────────────────
   hub.css — additions for the multi-page version.
   Loaded after base.css and style.css. Uses the existing
   design tokens only, so light/dark mode both work.
   ───────────────────────────────────────────────────────────── */

/* ── Skip link (accessibility + crawlable landmark) ── */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ── Breadcrumb ── */
.breadcrumb {
  padding: var(--space-4) 0 0;
  background: var(--color-bg);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.breadcrumb li { max-width: none; }
.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--color-text-faint);
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text-muted); }

/* ── Hub card grid (homepage) ── */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }

.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.hub-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.hub-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
  flex-grow: 1;
}
.hub-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-2);
}
.hub-card:hover .hub-card-cta { color: var(--color-primary-hover); }

/* ── A card with subpages listed beneath it ── */
.hub-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hub-card-stack .hub-card { flex: 1 1 auto; }
.hub-card-sub-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: var(--space-2) 0 0 var(--space-2);
}
.hub-card-sub-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  margin-left: calc(var(--space-2) * -1 + var(--space-2));
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-divider);
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive);
}
.hub-card-sub-link:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* ── Quick answers definition list (homepage) ── */
.quick-facts { margin: 0; }
.quick-facts dt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.quick-facts dt:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.quick-facts dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 68ch;
}
.quick-facts dd a { color: var(--color-primary); font-weight: 500; }

/* ── "Explore the rest of the hub" internal link block ── */
.related-section { border-top: 1px solid var(--color-divider); }
.related-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) { .related-list { grid-template-columns: repeat(2, 1fr); } }

.related-list li { max-width: none; }
.related-list a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  text-decoration: none;
  /* Set explicitly: without it the anchor keeps the browser default
     #0000ee underneath, which its child strong/span only happen to mask. */
  color: var(--color-text);
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive);
}
.related-list a:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-offset);
}
.related-list strong {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.related-list span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ── Multi-page fix: page-view is always visible now ── */
main.page-view,
main.page-view.active { display: block; }

/* ── Header nav ─────────────────────────────────────────────────────────
   Seven top-level items, because the three waste pages live inside one
   "Waste" disclosure menu. That fits the 1080px content container, so the
   header aligns with the content again and needs no width override. */
.header-inner { flex-wrap: nowrap; }
.site-nav { flex-wrap: nowrap; min-width: 0; }

/* ── Grouped nav item ── */
.nav-group { position: relative; }

.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}
.nav-group-btn .nav-caret {
  transition: transform var(--transition-fast, 160ms) ease;
  opacity: 0.9;
}
.nav-group-btn[aria-expanded="true"] {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 70;
  min-width: 272px;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  /* An elevated surface, not the page background: in dark mode the two are
     otherwise identical and the panel would rely on its shadow alone. */
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.nav-menu-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.nav-menu-link:hover,
.nav-menu-link:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.nav-menu-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
}
.nav-menu-blurb {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.4;
  margin-top: 1px;
}
.nav-menu-link.current .nav-menu-title { color: var(--color-primary); }

/* Switch to the hamburger before the bar can overflow */
@media (max-width: 1099px) {
  .site-nav { display: none; }
  .mobile-nav-toggle { display: flex; }

  .site-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    padding: var(--space-3) var(--space-5);
    gap: var(--space-1);
    box-shadow: var(--shadow-md);
    align-items: stretch;
    z-index: 60;
  }
  .site-nav.open .nav-link { padding: var(--space-3) var(--space-4); }

  /* No dropdown on the stacked panel: the group becomes a labelled section
     with its pages listed beneath, so every destination stays one tap away. */
  .site-nav.open .nav-group { width: 100%; }
  .site-nav.open .nav-group-btn {
    width: 100%;
    justify-content: flex-start;
    pointer-events: none;
    font-size: var(--text-2xs, 0.6875rem);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    background: none;
    padding: var(--space-3) var(--space-4) var(--space-1);
  }
  .site-nav.open .nav-group-btn .nav-caret { display: none; }
  .site-nav.open .nav-menu[hidden] { display: block; }
  .site-nav.open .nav-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-2);
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav.open .nav-menu-link { padding: var(--space-2) var(--space-4); }
  .site-nav.open .nav-menu-blurb { display: none; }
}

/* ── Table caption on the water page ── */
.guide-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--space-3);
}

/* ── Accessibility: the faint text token failed WCAG AA contrast ──
   Old value #9ba5a5 measured 2.5:1 on white and 2.2:1 on the cream
   background. These values clear 4.5:1 on both.                     */
:root {
  --color-text-faint: #5f6a6a;
}
[data-theme="dark"],
html[data-theme="dark"] {
  --color-text-faint: #93a3a3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-faint: #93a3a3;
  }
}

/* ── Compact hours table: stop "Monday – Thursday" wrapping in a
   narrow three-up card column ── */
.info-card .hours-table td {
  white-space: nowrap;
  font-size: var(--text-xs);
}

/* ── Footer byline links inherited the browser default blue (#0000ee),
   which drops to 1.8:1 against the dark footer. Match surrounding text. ── */
.footer-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-text a:hover {
  color: var(--color-primary);
}

/* ── "Do not" lists: a green check glyph is the wrong signal.
   .cross-icon reuses .check-icon geometry with the accent color. ── */
.check-icon.cross-icon {
  color: var(--color-accent);
}

/* ── Body-text hyperlinks had no rule at all, so they fell back to the
   browser default #0000ee. Scoped to prose containers so the card
   wrappers and nav links keep their own treatment. ── */
.prose a,
.intro-text a,
.section-intro a,
.callout-warning a,
.check-card a,
.tip-card a,
.step-content a,
.finding-card a,
.quick-facts a,
.accepted-note a,
.resource-links a:not(.btn-primary):not(.btn-secondary) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.prose a:hover,
.intro-text a:hover,
.section-intro a:hover,
.callout-warning a:hover,
.check-card a:hover,
.tip-card a:hover,
.step-content a:hover,
.finding-card a:hover,
.quick-facts a:hover,
.accepted-note a:hover {
  color: var(--color-accent);
}