/*
 * wandersafe-components.css — WanderSafe destination page component library
 * Depends on: tokens.css, base.css, layout.css (load those first)
 * Do NOT define new tokens here — use only what is defined in tokens.css.
 *
 * Sections:
 *   A. Migrated page-inline styles (formerly in <style> blocks on each destination page)
 *   B. New components (freshness pill, source chip, identity bar, assessment card, etc.)
 *   C. Mobile responsive overrides
 *
 * Token rules enforced throughout:
 *   - NEVER use var(--border) — undefined. Use var(--border-light) or var(--border-dark).
 *   - Saffron text on light backgrounds: use var(--color-saffron-on-cream) (#9A5408)
 *   - Sharp brand radius: var(--radius-sm) (2px). No pill shapes.
 *   - Font stacks: --font-display (DM Serif), --font-ui (Syne), --font-body (Source Serif 4)
 */

/* ============================================================
   A. MIGRATED PAGE-INLINE STYLES
   (moved from destination page <style> blocks)
   ============================================================ */

/* ── Skip link ─────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  z-index: 999;
  background: var(--saffron);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0.5rem;
}


/* ── Destination Hero ──────────────────────────────────────── */

.dest-hero {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  background-color: var(--ink);
  background-image: linear-gradient(135deg, var(--ink) 0%, #1a2040 100%);
  background-size: cover;
  background-position: center;
  color: var(--text-inverse, #fdfaf5);
}

.dest-hero__content {
  padding: clamp(4rem, 8vw, 7rem) 0;
  max-width: 72ch;
}

.dest-hero .eyebrow {
  color: var(--saffron);
  margin-bottom: var(--space-3);
}

.dest-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  color: var(--text-inverse);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.dest-hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dest-hero__summary {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: rgba(245, 242, 236, 0.78);
  max-width: 72ch;
  margin-top: var(--space-5);
}

.dest-hero__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--saffron) 0%, var(--rust) 100%);
}


/* ── Trust Band ─────────────────────────────────────────────── */

.trust-band {
  padding-block: var(--space-5);
  background: var(--sand);
}

.trust-band__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.trust-band__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.trust-band__sources {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}


/* ── Data Layer (numbered content sections) ─────────────────── */

.data-layer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.data-layer:last-child {
  border-bottom: none;
}

.data-layer__number {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  grid-row: 1 / 3;
  padding-top: 0.2em;
}

.data-layer__content h3 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.data-layer__content p,
.data-layer__content ul {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.data-layer__content ul {
  padding-left: 1.25rem;
}

.data-layer__content li {
  margin-bottom: var(--space-2);
}


/* ── WS Callout ─────────────────────────────────────────────── */

.ws-callout {
  border-left: 4px solid var(--saffron);
  padding: var(--space-5) var(--space-6);
  background: var(--sand);
  margin-top: var(--space-7);
}

.ws-callout p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 72ch;
  margin: 0;
}


/* ── WorldPride / Timely Event Callout ──────────────────────── */
/*
 * Note: .worldpride-callout is a reusable "timely alert" callout.
 * The background #fff8f5 is a warm off-white tint — intentional,
 * not a token violation. It provides distinct contrast from --cream
 * and --sand while staying within the warm palette.
 */

.worldpride-callout {
  border-left: 4px solid var(--rust);
  padding: var(--space-6) var(--space-7);
  background: #fff8f5;
  margin-bottom: var(--space-8);
}

.worldpride-callout__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--space-3);
}

.worldpride-callout h2 {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.worldpride-callout p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.worldpride-callout p:last-child {
  margin-bottom: 0;
}


/* ── Table Scroll Wrapper (mobile fix) ──────────────────────── */
/*
 * Wrap all .legal-table and .ratings-table in a .table-scroll div.
 * This is the mobile overflow fix — without this wrapper,
 * tables cause horizontal scroll of the full page on narrow viewports.
 */

.table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ── Legal Table ────────────────────────────────────────────── */
/*
 * Bug fix: original used var(--border) (undefined — renders as nothing).
 * Corrected to var(--border-light) for th border-bottom.
 */

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.legal-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-light); /* was var(--border) — undefined */
}

.legal-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.5;
  color: var(--ink);
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table .status-legal {
  font-weight: 600;
  color: #1a6e3c;
}

.legal-table .status-partial {
  font-weight: 600;
  color: #7a5800;
}

.legal-table .status-banned {
  font-weight: 600;
  color: var(--rust);
}


/* ── Ratings Table ──────────────────────────────────────────── */
/*
 * Bug fix: original used var(--border) (undefined). Corrected to var(--border-light).
 */

.ratings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.ratings-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-light); /* was var(--border) — undefined */
}

.ratings-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.5;
  color: var(--ink);
  vertical-align: top;
}

.ratings-table tr:last-child td {
  border-bottom: none;
}


/* ── Back Link ──────────────────────────────────────────────── */

.back-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: var(--space-6);
}

.back-link:hover {
  color: var(--ink);
}


/* ── Placeholder Box ────────────────────────────────────────── */
/*
 * Bug fix: original used var(--border) (undefined). Corrected to var(--border-light).
 * Background #fafafa is a near-white that approximates --cream but reads as "empty".
 * Kept as a literal value — it is intentionally distinct from tokens.
 */

.placeholder-box {
  border: 2px dashed var(--border-light); /* was var(--border) — undefined */
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  background: #fafafa;
  margin-top: var(--space-4);
}

.placeholder-box p {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}


/* ============================================================
   B. NEW COMPONENTS
   ============================================================ */

/* ── B1. Freshness Pill (.ws-freshness) ─────────────────────── */
/*
 * Shows "Last checked: [date]" with a state-colored pulsing dot.
 * Three states: --fresh (<7 days), --aging (7-30 days), --stale (>30 days).
 * The dot element should have aria-hidden="true" in the HTML template.
 *
 * Usage:
 *   <span class="ws-freshness ws-freshness--fresh">
 *     <span class="ws-freshness__dot" aria-hidden="true"></span>
 *     Last checked: Mar 23, 2026
 *   </span>
 */

@keyframes ws-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
}

.ws-freshness {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--sand);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}

.ws-freshness__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%; /* dot is always round regardless of brand radius */
  flex-shrink: 0;
}

.ws-freshness--fresh .ws-freshness__dot {
  background: var(--sage);
  animation: ws-pulse 2s ease-in-out infinite;
}

.ws-freshness--aging .ws-freshness__dot {
  background: var(--saffron-dark);
  animation: ws-pulse 3s ease-in-out infinite;
}

.ws-freshness--stale .ws-freshness__dot {
  background: var(--text-secondary);
  /* no pulse — stale data should not appear "active" */
}


/* ── B2. Source Attribution Chip (.ws-source-chip) ─────────── */
/*
 * Compact chip showing a named source (e.g. "ACLU State Equality Index 2025").
 * Intended to appear inline in trust-band or next to tier labels.
 *
 * Usage:
 *   <span class="ws-source-chip">ACLU State Equality Index 2025</span>
 */

.ws-source-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--sand);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── B3. Identity Filter Bar (.ws-identity-bar) ─────────────── */
/*
 * Horizontal scrollable pill selector for traveler identity.
 * Shows a "Traveling As:" label followed by identity pills.
 * Active pill uses saffron background (note: dark text on saffron is fine for contrast).
 *
 * Usage:
 *   <div class="ws-identity-bar">
 *     <span class="ws-identity-bar__label">Traveling As:</span>
 *     <div class="ws-identity-bar__pills">
 *       <button class="ws-identity-bar__pill ws-identity-bar__pill--active">Gay Man</button>
 *       <button class="ws-identity-bar__pill">Trans Woman</button>
 *       ...
 *     </div>
 *   </div>
 */

.ws-identity-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-light);
  background: var(--cream);
}

.ws-identity-bar__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-identity-bar__pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px; /* prevent clipping of focus rings */
}

.ws-identity-bar__pills::-webkit-scrollbar {
  display: none;
}

.ws-identity-bar__pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.ws-identity-bar__pill:hover {
  background: var(--sand);
  color: var(--ink);
}

.ws-identity-bar__pill--active {
  background: var(--saffron);
  color: var(--ink);
  border-color: transparent;
  font-weight: 600;
}

.ws-identity-bar__pill--active:hover {
  background: var(--saffron-dark);
  color: var(--ink);
}

/* Focus state — accessible keyboard nav */
.ws-identity-bar__pill:focus-visible {
  outline: 2px solid var(--saffron-dark);
  outline-offset: 2px;
}


/* ── B4. Personal Assessment Card (.ws-assessment) ──────────── */
/*
 * Step-by-step personal risk assessment.
 * One question at a time, options rendered as buttons.
 * Result overlay uses semantic color at 10% opacity tint.
 *
 * Usage:
 *   <div class="ws-assessment">
 *     <div class="ws-assessment__question">Are you traveling alone?</div>
 *     <div class="ws-assessment__options">
 *       <button class="ws-assessment__option">Yes</button>
 *       <button class="ws-assessment__option">No</button>
 *     </div>
 *   </div>
 *
 *   Result (shown by JS after all questions answered):
 *   <div class="ws-assessment__result ws-assessment__result--low">...</div>
 */

.ws-assessment {
  background: var(--sand);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}

.ws-assessment__question {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: var(--space-5);
}

.ws-assessment__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ws-assessment__option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ws-assessment__option:hover {
  background: var(--cream);
  border-color: var(--border-dark);
}

.ws-assessment__option:focus-visible {
  outline: 2px solid var(--saffron-dark);
  outline-offset: 2px;
}

/* Result overlay — base */
.ws-assessment__result {
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
}

.ws-assessment__result-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
}

/* Low risk — sage tint */
.ws-assessment__result--low {
  background: rgba(74, 103, 65, 0.10); /* var(--sage) at 10% */
  border-left: 4px solid var(--sage);
}

.ws-assessment__result--low .ws-assessment__result-label {
  color: var(--sage);
}

/* Medium risk — saffron tint */
.ws-assessment__result--medium {
  background: rgba(232, 160, 32, 0.10); /* var(--saffron) at 10% */
  border-left: 4px solid var(--saffron-dark);
}

.ws-assessment__result--medium .ws-assessment__result-label {
  color: var(--color-saffron-on-cream); /* saffron text on light bg — WCAG safe */
}

/* High risk — rust tint */
.ws-assessment__result--high {
  background: rgba(184, 74, 44, 0.10); /* var(--rust) at 10% */
  border-left: 4px solid var(--rust);
}

.ws-assessment__result--high .ws-assessment__result-label {
  color: var(--rust);
}


/* ── B5. Accordion with Preview (.ws-accordion) ─────────────── */
/*
 * Accordion where the first 2 lines of content (the "preview") are ALWAYS visible.
 * This makes accordion headers informative, not just labels.
 *
 * The chevron rotates on open using CSS transform.
 * The body toggles via aria-expanded on the trigger. We use the :has() selector
 * (baseline-supported in all evergreen browsers as of 2024+) to show/hide body.
 *
 * Usage:
 *   <div class="ws-accordion">
 *     <div class="ws-accordion__item">
 *       <button class="ws-accordion__trigger" aria-expanded="false" aria-controls="acc-1">
 *         Legal Status
 *         <span class="ws-accordion__chevron" aria-hidden="true"></span>
 *       </button>
 *       <div class="ws-accordion__preview">
 *         Marriage equality: recognized statewide since 2015.
 *         No conversion therapy ban for minors.
 *       </div>
 *       <div class="ws-accordion__body" id="acc-1">
 *         ... full content ...
 *       </div>
 *     </div>
 *   </div>
 */

.ws-accordion {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ws-accordion__item {
  border-bottom: 1px solid var(--border-light);
}

.ws-accordion__item:last-child {
  border-bottom: none;
}

.ws-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: none;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: background var(--transition-fast);
  gap: var(--space-4);
}

.ws-accordion__trigger:hover {
  background: var(--sand);
}

.ws-accordion__trigger:focus-visible {
  outline: 2px solid var(--saffron-dark);
  outline-offset: -2px;
}

/* Chevron — CSS only via ::after pseudo-element */
.ws-accordion__chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg); /* points down = collapsed */
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.ws-accordion__trigger[aria-expanded="true"] .ws-accordion__chevron {
  transform: rotate(-135deg); /* points up = expanded */
}

/* Preview — always visible, shows first ~2 lines of content */
.ws-accordion__preview {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 0 var(--space-5) var(--space-4) var(--space-5);
  background: var(--cream);

  /* Clamp to exactly 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Body — hidden when trigger is collapsed, shown when expanded */
.ws-accordion__body {
  display: none;
  padding: var(--space-5);
  background: var(--cream);
  border-top: 1px solid var(--border-light);
}

/*
 * :has() selector: show body when its sibling trigger is expanded.
 * Supported in all evergreen browsers since 2023 (Chrome 105+, Safari 15.4+, Firefox 121+).
 * Fallback: destination-template.js also toggles a .ws-accordion__item--open class
 * for browsers that do not support :has() — see the JS implementation.
 */
.ws-accordion__item:has(.ws-accordion__trigger[aria-expanded="true"]) .ws-accordion__body {
  display: block;
}

/* JS fallback class for :has() unsupported environments */
.ws-accordion__item--open .ws-accordion__body {
  display: block;
}

/* When open: preview is hidden (content is now in body) */
.ws-accordion__item:has(.ws-accordion__trigger[aria-expanded="true"]) .ws-accordion__preview {
  display: none;
}

.ws-accordion__item--open .ws-accordion__preview {
  display: none;
}


/* ── B6. In-Page Jump Nav (.ws-jump-nav) ────────────────────── */
/*
 * Sticky bar below the hero section, above main content.
 * z-index: 50 — below site-nav (z-index: 100) and skip link (z-index: 999).
 *
 * Usage:
 *   <nav class="ws-jump-nav" aria-label="Page sections">
 *     <div class="ws-jump-nav__inner container">
 *       <a href="#legal" class="ws-jump-nav__link ws-jump-nav__link--active">Legal</a>
 *       <a href="#climate" class="ws-jump-nav__link">Climate</a>
 *       <a href="#infrastructure" class="ws-jump-nav__link">Infrastructure</a>
 *       <a href="#emergency" class="ws-jump-nav__link">Emergency</a>
 *       <a href="#assessment" class="ws-jump-nav__link">My Risk</a>
 *     </div>
 *   </nav>
 */

.ws-jump-nav {
  position: sticky;
  top: 81px; /* sits below site-nav (81px tall) */
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.ws-jump-nav__inner {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ws-jump-nav__inner::-webkit-scrollbar {
  display: none;
}

.ws-jump-nav__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ws-jump-nav__link:hover {
  color: var(--ink);
}

.ws-jump-nav__link--active {
  color: var(--saffron-dark);
  border-bottom-color: var(--saffron-dark);
  font-weight: 600;
}

.ws-jump-nav__link:focus-visible {
  outline: 2px solid var(--saffron-dark);
  outline-offset: -2px;
}


/* ── B7. Tier Badge — Enhanced (.ws-tier-badge) ─────────────── */
/*
 * Extends (does NOT replace) the existing .wandersafe-badge system in layout.css.
 * Adds a left-border variant with opacity tint for use in hero/section contexts
 * where a full-width tier indication is needed (not just an inline badge).
 *
 * .ws-tier-badge is a container that can hold a .wandersafe-badge + .ws-source-chip.
 *
 * Usage:
 *   <div class="ws-tier-badge ws-tier-badge--safe">
 *     <span class="wandersafe-badge wandersafe-badge--verified">Safe</span>
 *     <span class="ws-source-chip">ACLU State Equality Index 2025</span>
 *   </div>
 */

.ws-tier-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
}

.ws-tier-badge__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Safe — sage */
.ws-tier-badge--safe {
  border-left: 4px solid var(--sage);
  background: rgba(74, 103, 65, 0.08);
}

.ws-tier-badge--safe .ws-tier-badge__label {
  color: var(--sage);
}

/* Generally Safe — saffron */
.ws-tier-badge--generally-safe {
  border-left: 4px solid var(--saffron);
  background: rgba(232, 160, 32, 0.08);
}

.ws-tier-badge--generally-safe .ws-tier-badge__label {
  color: var(--color-saffron-on-cream); /* WCAG-safe saffron on light bg */
}

/* Caution — rust */
.ws-tier-badge--caution {
  border-left: 4px solid var(--rust);
  background: rgba(184, 74, 44, 0.08);
}

.ws-tier-badge--caution .ws-tier-badge__label {
  color: var(--rust);
}

/* High Risk — rust-dark */
.ws-tier-badge--high-risk {
  border-left: 4px solid var(--rust-dark);
  background: rgba(150, 60, 36, 0.08);
}

.ws-tier-badge--high-risk .ws-tier-badge__label {
  color: var(--rust-dark);
}


/* ── B8. Quiet Monitor State (.ws-quiet-monitor) ────────────── */
/*
 * Shown when live monitoring has found no incidents in the last 30 days.
 * Reassures users that "silence" means "checked, not abandoned."
 * Reuses the ws-freshness__dot pulsing dot visually (green/sage).
 *
 * Usage:
 *   <div class="ws-quiet-monitor">
 *     <span class="ws-quiet-monitor__dot" aria-hidden="true"></span>
 *     No new incidents in the last 30 days — monitoring active
 *   </div>
 */

.ws-quiet-monitor {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(74, 103, 65, 0.08); /* var(--sage) at 8% */
  border-left: 3px solid var(--sage);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.ws-quiet-monitor__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  animation: ws-pulse 2s ease-in-out infinite; /* reuses the freshness pulse keyframe */
}


/* ============================================================
   C. MOBILE RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 640px) {

  /* Hero: reduce min-height on narrow screens */
  .dest-hero {
    min-height: 35vh;
  }

  /* Hero content: reduce padding on mobile */
  .dest-hero__content {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
  }

  /* Trust band: stack items vertically on mobile */
  .trust-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Data layer: single column, number no longer spans rows */
  .data-layer {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .data-layer__number {
    grid-row: auto;
    font-size: var(--text-2xl);
  }

  /* Worldpride callout: reduce padding */
  .worldpride-callout {
    padding: var(--space-5);
  }

  /* Tables: force smaller text on very narrow screens */
  .legal-table,
  .ratings-table {
    font-size: var(--text-xs);
  }

  /* Identity bar: allow label to be on its own line if needed */
  .ws-identity-bar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Jump nav: already scrollable; reduce link padding */
  .ws-jump-nav__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Assessment: reduce padding */
  .ws-assessment {
    padding: var(--space-4);
  }

  /* Accordion trigger: tighten padding */
  .ws-accordion__trigger {
    padding: var(--space-3) var(--space-4);
  }

  .ws-accordion__preview {
    padding: 0 var(--space-4) var(--space-3) var(--space-4);
  }

  .ws-accordion__body {
    padding: var(--space-4);
  }

}

/* Medium breakpoint — retain grid data-layer but reduce number size */
@media (max-width: 768px) {

  .data-layer {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .data-layer__number {
    grid-row: auto;
    font-size: var(--text-2xl);
  }

  .trust-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .worldpride-callout {
    padding: var(--space-5);
  }

  .legal-table,
  .ratings-table {
    font-size: var(--text-xs);
  }

}

/* ============================================================
   D. UTILITIES
   ============================================================ */

/* Screen reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}