/**
 * ReRoot global visual unification.
 * Loaded after blue-editorial so typography, cards, buttons, forms,
 * and page shells stay consistent across every production surface.
 */

:root {
  --rr-page-max: 1120px;
  --rr-narrow-max: 760px;
  --rr-section-y: clamp(2.5rem, 5vw, 4.5rem);
  --rr-card-radius: 16px;
  --rr-control-min: 44px;
  --rr-focus: #2457F5;
  --rr-overlay: rgba(11, 24, 44, 0.68);
  --color-elevated: #ffffff;
  --color-secondary-surface: #F4F7FA;
  --color-muted: #46596C;
  --color-primary-action: #19324D;
  --color-primary-action-hover: #10263D;
  --color-secondary-action: #2F6397;
  --color-image-overlay: var(--rr-overlay);
  --color-focus-ring: var(--rr-focus);

  /* ReRoot uses blue-gray only. Semantic success is communicated by icon and text, not green. */
  --color-success: #2F6397;
  --color-teal: #426F9F;
  --color-emerald: #315F8F;
  --rr-sage: #557DA8;
  --rr-accent-secondary: #557DA8;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  color: var(--color-text, #111827);
  background: var(--color-bg, #fff);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3, .ash-hero h1, .editorial-page-hero h1, .city-editorial-hero__title {
  font-family: var(--font-display);
  color: var(--color-text, #111827);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.main-narrow,
.product-tool-page,
.account-main,
.pricing-section,
.quiz-shell,
.destinations-library .content-wrap {
  max-width: var(--rr-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(1.25rem, var(--safe-left));
  padding-right: max(1.25rem, var(--safe-right));
}

.main-narrow,
.product-tool-page {
  padding-top: var(--rr-section-y);
  padding-bottom: calc(var(--rr-section-y) + var(--safe-bottom));
}

.rr-card,
.account-card,
.price-card,
.scenario-card,
.cliff-card,
.glass-card,
.city-detail-card,
.life-fit-panel,
.tradeoff-panel,
.why-not-panel,
.reality-check-panel,
.city-meta-panel,
.tool-section,
.faq-item,
.report-card {
  background: var(--color-elevated);
  color: var(--color-text, #111827);
  border: 1px solid var(--color-border, #CBD5E1);
  border-radius: var(--rr-card-radius);
  box-shadow: none;
}

.btn-primary,
.btn-secondary,
.btn-plan,
.ash-btn,
.nav-cta-btn,
button.option,
.optional-option {
  min-height: var(--rr-control-min);
  min-width: var(--rr-control-min);
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
}

.btn-primary,
.ash-btn--dark,
.btn-plan {
  background: var(--color-primary-action);
  color: #fff !important;
  border: 1px solid var(--color-primary-action);
}

.btn-primary:hover,
.ash-btn--dark:hover,
.btn-plan:hover {
  background: var(--color-primary-action-hover);
  color: #fff !important;
}

.btn-secondary,
.ash-btn:not(.ash-btn--dark) {
  background: #fff;
  color: var(--color-primary-action) !important;
  border: 1px solid #8EA6BC;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.ash-btn:not(.ash-btn--dark):hover,
.ash-btn:not(.ash-btn--dark):focus-visible {
  background: #E8F0F7 !important;
  color: #10263D !important;
  border-color: #557DA8 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.option:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

input,
select,
textarea,
.ash-input,
.quiz-text-input {
  min-height: var(--rr-control-min);
  font-size: 1rem;
  color: var(--color-text, #111827);
  background: #fff;
  border: 1px solid var(--color-border, #CBD5E1);
  border-radius: 12px;
}

input::placeholder,
textarea::placeholder {
  color: #627386 !important;
  opacity: 1 !important;
}

label,
.quiz-input-label,
.account-form label {
  color: var(--color-text, #111827);
  font-weight: 500;
}

.muted,
.price-sub,
.section-lead,
.ash-lead,
.footer-mission,
.footer-copy-note {
  color: var(--color-muted) !important;
}

/* Never rely on ultra-faint footer text. */
.footer-copy,
.footer-copy-note,
.footer-links a,
.footer-group-label {
  opacity: 1 !important;
}

.footer-links a:hover {
  color: #FFFFFF !important;
}

/* Conversion free/paid visibility. */
.conversion-paid-only { display: none !important; }
body.results-has-plan .conversion-free-only { display: none !important; }
body.results-has-plan .conversion-paid-only { display: block !important; }

/* Image text safety. Text shown over photography always receives a dark overlay. */
.rr-city-text-overlay,
.city-detail-hero__overlay,
.ash-hero__copy {
  color: var(--color-text, #111827);
}

.city-detail-hero__content .city-detail-name,
.city-detail-hero__content .city-detail-country,
.city-detail-hero__content .city-detail-lead,
.city-detail-hero__content .city-detail-vibe,
.ash-place h3,
.ash-place span,
.ash-place p,
[data-image-overlay] h1,
[data-image-overlay] h2,
[data-image-overlay] h3,
[data-image-overlay] p {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72) !important;
}

.city-detail-hero__overlay,
.rr-photo-overlay,
.hero-photo-overlay,
[data-image-overlay]::before {
  background: linear-gradient(180deg, rgba(11, 24, 44, 0.28), rgba(11, 24, 44, 0.84)) !important;
}

/* Mobile menu focus trap helpers. */
.site-nav-mobile.is-open {
  visibility: visible;
}
.site-nav-mobile a,
.site-nav-mobile button {
  min-height: var(--rr-control-min);
}

/* Tablet: keep comfortable widths. */
@media (min-width: 768px) and (max-width: 1180px) {
  .main-narrow,
  .product-tool-page {
    max-width: min(960px, 92vw);
  }
}

/* Legal, account, and form surfaces. */
.legal-page,
.legal-content,
.editorial-content-shell,
.account-main,
.account-card,
.auth-panel,
.sim-form,
.tool-section {
  color: var(--color-text, #111827);
}

.legal-page a,
.legal-content a,
.disclaimer-inline a {
  color: #245A8D;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-status,
.auth-status,
#restore-purchases-status,
#account-manage-status {
  min-height: 1.25rem;
  color: var(--color-muted, #46596C);
  font-size: 0.95rem;
}

.sim-form label,
.tool-section label,
.account-form label,
.auth-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  color: var(--color-text, #111827);
}

.sim-form label.rr-check,
.tool-section label.rr-check {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.rr-mobile-panel.rr-open {
  visibility: visible;
}

.rr-mobile-panel a,
.rr-mobile-panel button,
.rr-mobile-close,
.menu-btn.nav-toggle {
  min-height: var(--rr-control-min);
  min-width: var(--rr-control-min);
}

.price-card .price-amount,
.price-card h3,
.scenario-card h2,
.tool-section h2 {
  color: var(--color-text, #111827);
}

.reality-check-table th,
.reality-check-table td {
  color: var(--color-text, #111827);
  border-color: var(--color-border, #CBD5E1);
}

/* Remove legacy green styling everywhere, including status, selection, badges and progress. */
.success,
.success-message,
.status-success,
.is-success,
.notice-success,
.alert-success,
.toast-success,
.purchase-success,
.restore-success,
.complete,
.completed,
.badge-success,
.pill-success,
.tag-success,
.chip-success {
  background: #E7EFF7 !important;
  color: #193F66 !important;
  border-color: #9DB6CD !important;
}

.success *,
.success-message *,
.status-success *,
.is-success *,
.notice-success *,
.alert-success *,
.toast-success *,
.purchase-success *,
.restore-success *,
.complete *,
.completed * {
  color: #193F66 !important;
}

progress {
  accent-color: #426F9F !important;
}

progress::-webkit-progress-value,
.progress-bar-fill,
.progress-fill,
.score-bar-fill,
.life-fit-bar__fill,
.readiness-progress__fill {
  background: #426F9F !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #315F8F !important;
}

.option.selected,
.option[aria-checked="true"],
.optional-option.selected,
.optional-option[aria-pressed="true"],
.is-selected,
.selected-card {
  background: #E7EFF7 !important;
  color: #19324D !important;
  border-color: #557DA8 !important;
}

.option.selected *,
.option[aria-checked="true"] *,
.optional-option.selected *,
.optional-option[aria-pressed="true"] *,
.is-selected *,
.selected-card * {
  color: #19324D !important;
}

/* Strong surface-specific contrast rules. */
:is(.rr-card, .card, .panel, .account-card, .price-card, .scenario-card, .tool-section, .report-card) :is(h1, h2, h3, h4, h5, h6, strong, label) {
  color: #162C43 !important;
}

:is(.rr-card, .card, .panel, .account-card, .price-card, .scenario-card, .tool-section, .report-card) :is(p, li, small, .muted, .help-text, .caption) {
  color: #46596C !important;
}

:is(.reroot-footer, .site-footer-v1, .dark-section, .navy-section, .hero-dark) :is(h1, h2, h3, h4, h5, h6, strong, label) {
  color: #FFFFFF !important;
}

:is(.reroot-footer, .site-footer-v1, .dark-section, .navy-section, .hero-dark) :is(p, li, small, .muted, .help-text, .caption) {
  color: #DCE6EF !important;
}

:is(.reroot-footer, .site-footer-v1, .dark-section, .navy-section, .hero-dark) a {
  color: #F4F8FB !important;
  text-decoration-color: rgba(244, 248, 251, 0.75) !important;
}

:is(.reroot-footer, .site-footer-v1, .dark-section, .navy-section, .hero-dark) a:hover,
:is(.reroot-footer, .site-footer-v1, .dark-section, .navy-section, .hero-dark) a:focus-visible {
  color: #FFFFFF !important;
}

/* Disabled controls remain readable without appearing active. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  color: #56687A !important;
  background: #E9EEF3 !important;
  border-color: #C3CFDA !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Print-friendly report. */
@media print {
  #site-header,
  #site-footer,
  .reroot-offline-banner,
  .no-print,
  .nav-cta-btn,
  .cta-button-group {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #111 !important;
  }
  .rr-card,
  .report-section {
    break-inside: avoid;
    box-shadow: none !important;
    border-color: #ccc !important;
  }
}