/* ═══════════════════════════════════════════════════════════════
   YLM Motion System — Sitewide hover/motion effects
   Card lift + border brighten on hover, applied to all panels and stat rows.
   Based on the uni-card hover recipe: 2px lift, border brighten, 200ms ease.
   ═══════════════════════════════════════════════════════════════ */

/* ── PANELS: The dark glass containers (cards, sidebar cards, sections) ── */

/* Resource pages + intent pages: .brief-card already has hover — enhance it */
.brief-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease !important;
}
.brief-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* City pages: .sidebar-card — no hover currently */
.sidebar-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.sidebar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* City pages: .glass-panel — main content container */
.glass-panel {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.glass-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* City pages: .related-card — already has hover, keep it */
.related-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

/* ── GLOBAL: Stop the blinking text-caret from appearing when clicking plain text ──
   Clicking a heading/label/stat text was placing a text-selection caret because
   the browser's default text-select behavior was left on for UI copy. Body copy
   that's meant to be read (not selected/copied) gets user-select:none so no
   caret ever appears. Real inputs, textareas, and contenteditable fields keep
   full text behavior. Long-form paragraphs keep selection enabled for copying. */
button, .tab-btn, [role="button"], a, label,
h1, h2, h3, h4, h5, h6,
.grid-card-title, .leader-category, .leader-winner, .cost-bar-label, .cost-bar-value,
.intel-row, .city-stat, .relo-pp-city-label, .relo-pp-lifestyle-tag,
.relo-wealth-stat-val, .relo-wealth-stat-label, .relo-wealth-col-city,
.tradeoff-vs, .tradeoff-col-title, .tradeoff-item,
.footer-cta-title, .footer-cta-link, .stat-label, .stat-value, .qs-label, .qs-value,
.mini-fact-label, .mini-fact-val, .section-title, .relo-subsection-title, .relo-subsection-sub {
  user-select: none;
  cursor: default;
}
a, button, .tab-btn, [onclick], [role="button"], .footer-cta-link {
  cursor: pointer;
}
input, textarea, [contenteditable="true"], [contenteditable=""] {
  cursor: text;
  user-select: text;
}

/* ═══ COMPARE PAGE (interactive app) ═══ */

/* .grid-card — the main panel containers (Score Breakdown, Category Leaders, Cost, Best Time, etc.) */
.grid-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.grid-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .leader-row — individual category leader rows (Lowest Cost, Best Internet, etc.) */
.leader-row {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.leader-row:hover {
  transform: translateY(-2px);
}

/* .cost-bar-row — cost of living bar rows */
.cost-bar-row {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.cost-bar-row:hover {
  transform: translateY(-2px);
}
.cost-bar-fill {
  transition: width 300ms ease, filter 300ms ease !important;
}
.cost-bar-row:hover .cost-bar-fill {
  filter: brightness(1.1);
}

/* .intel-row — cost intelligence bullet rows */
.intel-row {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.intel-row:hover {
  transform: translateY(-2px);
}

/* .intel-savings-row — savings highlight rows */
.intel-savings-row {
  transition: transform 150ms ease-out !important;
}
.intel-savings-row:hover {
  transform: translateY(-2px);
}

/* .city-stat — individual stat chips on city cards */
.city-stat {
  transition: transform 150ms ease-out !important;
}
.city-stat:hover {
  transform: translateY(-2px);
}

/* .fmc-score-card — Freedom Score cards */
.fmc-score-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.fmc-score-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .fmc-sheet-card — sheet style cards */
.fmc-sheet-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.fmc-sheet-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .footer-cta-card — footer CTA panels */
.footer-cta-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.footer-cta-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .footer-save-card — footer save card */
.footer-save-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.footer-save-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .relo-dest-card — relocation destination cards (already has hover, enhance) */
.relo-dest-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.relo-dest-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* .relo-breakdown-row — relocation breakdown table rows */
.relo-breakdown-row {
  transition: transform 150ms ease-out !important;
}
.relo-breakdown-row:hover {
  transform: translateY(-1px);
}

/* .relo-ai-card — AI recommendation card */
.relo-ai-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.relo-ai-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .ai-bullet — AI insight bullet rows */
.ai-bullet {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.ai-bullet:hover {
  transform: translateY(-2px);
}

/* .calendar-wrap — best time to visit calendar */
.calendar-wrap {
  transition: transform 200ms ease, border-color 200ms ease !important;
}
.calendar-wrap:hover {
  transform: translateY(-1px);
}

/* .tradeoff-card — Trade-Off Analysis panels (YOU GAIN / YOU LOSE) */
.tradeoff-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.tradeoff-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* .tradeoff-item — individual gain/lose bullet rows inside trade-off cards */
.tradeoff-item {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.tradeoff-item:hover {
  transform: translateY(-2px);
}

/* .relo-pp-row — Purchasing Power Comparison bar rows */
.relo-pp-row {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.relo-pp-row:hover {
  transform: translateY(-2px);
}
.relo-pp-bar {
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1), filter 300ms ease !important;
}
.relo-pp-row:hover .relo-pp-bar {
  filter: brightness(1.1);
}

/* .relo-pp-section / .relo-wealth-section — Purchasing Power + Wealth Projection outer panels */
.relo-pp-section, .relo-wealth-section, .relo-lifestyle-section {
  transition: transform 200ms ease, border-color 200ms ease !important;
}
.relo-pp-section:hover, .relo-wealth-section:hover, .relo-lifestyle-section:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.12);
}

/* .relo-wealth-col — STAY IN / MOVE TO comparison cards */
.relo-wealth-col {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.relo-wealth-col:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

/* ═══ COMPARE STATIC PAGES (generate-compare-pages.js) ═══ */

/* .cmp-section — the major content blocks on static compare pages */
.cmp-section {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.cmp-section:hover {
  transform: translateY(-1px);
}

/* .cmp-table tr */
.cmp-table tr {
  transition: transform 150ms ease-out !important;
}
.cmp-table tbody tr:hover {
  transform: translateY(-1px);
}

/* ═══ INTENT/RESOURCE PAGES ═══ */

/* .callout — info/warn/tip boxes */
.callout {
  transition: transform 200ms ease, border-color 200ms ease !important;
}
.callout:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.15) !important;
}

/* .source-strip */
.source-strip {
  transition: transform 200ms ease, border-color 200ms ease !important;
}
.source-strip:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.12);
}

/* .cta-strip */
.cta-strip {
  transition: transform 200ms ease, border-color 200ms ease !important;
}
.cta-strip:hover {
  transform: translateY(-1px);
  border-color: rgba(201,168,76,0.25);
}

/* ── STAT ROWS: Individual data rows inside panels ── */

/* City pages: .stat-row — the horizontal stat bars */
.stat-row {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.stat-row:hover {
  transform: translateY(-2px);
}
.stat-bar-fill {
  transition: width 300ms ease, filter 300ms ease !important;
}
.stat-row:hover .stat-bar-fill {
  filter: brightness(1.1);
}

/* City pages: .mini-fact — key facts rows */
.mini-fact {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.mini-fact:hover {
  transform: translateY(-2px);
}

/* City pages: .qs-chip — quick stat chips (already has hover, enhance) */
.qs-chip {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.qs-chip:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.15) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* Resource + intent pages: .brief-table tr — table rows */
.brief-table tr {
  transition: transform 150ms ease-out !important;
}
.brief-table tbody tr:hover {
  transform: translateY(-1px);
}

/* Intent pages: .faq-item — FAQ rows */
.faq-item {
  transition: transform 150ms ease-out !important;
  border-radius: 6px;
}
.faq-item:hover {
  transform: translateY(-2px);
}

/* Intent pages: .source-link — source pill links */
.source-link {
  transition: transform 200ms ease, background 180ms ease, border-color 180ms ease !important;
}
.source-link:hover {
  transform: translateY(-1px) !important;
}

/* ── REDUCED MOTION: Respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .brief-card:hover, .sidebar-card:hover, .glass-panel:hover,
  .related-card:hover, .grid-card:hover, .cmp-section:hover, .callout:hover,
  .source-strip:hover, .cta-strip:hover, .qs-chip:hover,
  .fmc-score-card:hover, .fmc-sheet-card:hover, .footer-cta-card:hover,
  .footer-save-card:hover, .relo-dest-card:hover, .relo-ai-card:hover,
  .calendar-wrap:hover, .intel-savings-row:hover,
  .tradeoff-card:hover, .relo-pp-section:hover, .relo-wealth-section:hover,
  .relo-lifestyle-section:hover, .relo-wealth-col:hover {
    transform: none !important;
  }
  .stat-row:hover, .mini-fact:hover, .faq-item:hover,
  .leader-row:hover, .cost-bar-row:hover, .intel-row:hover,
  .ai-bullet:hover, .relo-breakdown-row:hover,
  .tradeoff-item:hover, .relo-pp-row:hover,
  .intel-savings-row:hover, .city-stat:hover,
  .brief-table tbody tr:hover, .cmp-table tbody tr:hover {
    transform: none !important;
  }
  .cost-bar-row:hover .cost-bar-fill,
  .stat-row:hover .stat-bar-fill,
  .relo-pp-row:hover .relo-pp-bar {
    filter: none !important;
  }
}

/* ── GAP FILL: elements that had no hover treatment ──
   Same vocabulary as everything above (2px lift / 150-200ms / 6px radius) so a
   city page behaves identically to a resource page. Added because the cost-of-
   living tier cards, remote-work fact boxes, line-item table rows and bullet
   rows were the only interactive-looking blocks with no response at all. */

/* City pages: .tier-card — cost-of-living lifestyle tiers */
.tier-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.tier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* City pages: .fact-box — remote-work / connectivity metric boxes */
.fact-box {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.fact-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* City pages: .vs-link — comparison pills */
.vs-link {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.vs-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* City pages: .agent-box — local real estate partner card */
.agent-box {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.agent-box:hover {
  transform: translateY(-2px);
  border-color: rgba(79,152,163,0.45);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* City pages: .li-table tbody tr — cost-of-living line items.
   Mirrors .brief-table on the resource pages: 1px lift plus a cell tint. */
.li-table tbody tr {
  transition: transform 150ms ease-out !important;
}
.li-table tbody tr td {
  transition: background-color 150ms ease-out, color 150ms ease-out !important;
}
.li-table tbody tr:hover {
  transform: translateY(-1px);
}
.li-table tbody tr:hover td {
  background-color: rgba(255,255,255,0.03);
  color: #fff;
}

/* City pages: .bullets li — "why nomads choose" bullet rows */
.bullets li {
  transition: transform 150ms ease-out, color 150ms ease-out !important;
  border-radius: 6px;
}
.bullets li:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* Reduced motion: hold the gap-fill elements still too. */
@media (prefers-reduced-motion: reduce) {
  .tier-card:hover, .fact-box:hover, .vs-link:hover, .agent-box:hover,
  .li-table tbody tr:hover, .bullets li:hover {
    transform: none !important;
  }
}