html { scroll-behavior: smooth; }

html.dark { color-scheme: dark; }

/* Kill horizontal scroll on phones/tablets (common culprit: absolute offsets) */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Space for fixed mobile CTA + iOS home indicator */
  --mobile-cta-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.material-symbols-outlined {
  font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

a, button {
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease,
              box-shadow 150ms ease, transform 200ms ease, border-color 150ms ease;
}

img, video { display: block; max-width: 100%; height: auto; }

/* Prevent iOS Safari auto-zoom on form focus (needs >=16px) */
input,
select,
textarea {
  font-size: 16px;
}

::selection { background: rgba(175, 39, 27, 0.15); color: #1c1c1b; }
html.dark ::selection { background: rgba(255, 138, 122, 0.25); color: #fcf9f6; }

/* Custom scrollbar (subtle, brand-tinted) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(45, 106, 127, 0.25); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(45, 106, 127, 0.45); }
  html.dark ::-webkit-scrollbar-thumb { background: rgba(124, 202, 224, 0.20); }
  html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(124, 202, 224, 0.40); }
}

/* Marquee continuity */
.marquee-track { will-change: transform; }

/* Subtle text shimmer for hero accent */
.shimmer {
  background: linear-gradient(90deg, #af271b 0%, #d24030 50%, #af271b 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.4s linear infinite;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-marquee-slow, .animate-marquee-fast, .animate-gradient-pan,
  .animate-float-y, .animate-pulse-ring { animation: none !important; }
}

/* Smooth iframe map look in dark mode */
html.dark iframe[title*="map" i] {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.95);
}

/* Package selection state */
.package-card {
  position: relative;
}
.package-card.is-selected {
  border-color: #af271b !important;
  border-width: 2px !important;
  box-shadow: 0 12px 32px -8px rgba(175, 39, 27, 0.35), 0 0 0 4px rgba(175, 39, 27, 0.12);
  transform: translateY(-4px);
}
html.dark .package-card.is-selected {
  border-color: #ff8a7a !important;
  box-shadow: 0 12px 32px -8px rgba(255, 138, 122, 0.35), 0 0 0 4px rgba(255, 138, 122, 0.15);
}
.package-card.is-selected::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(175, 39, 27, 0.10), transparent 40%, rgba(45, 106, 127, 0.10));
}

/* Hero ticker fade */
#hero-ticker { display: inline-block; min-width: 7ch; }

/* Hero rotating carousel: subtle Ken-Burns zoom on active slide */
.hero-slide { transform: scale(1.04); transition: opacity 1000ms ease, transform 7000ms ease-out; }
.hero-slide.opacity-100 { transform: scale(1); }

/* Pricing tab panels: slide + fade */
.tab-panel { transition: opacity 320ms ease, transform 320ms ease; }
.tab-panel.is-entering {
  opacity: 0;
  transform: translateY(12px);
}
.tab-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}
.tab-panel.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* Slim horizontal scrollbar for tab strip on phones */
.scrollbar-thin {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar { height: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(45,106,127,0.30); border-radius: 999px; }
html.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(124,202,224,0.25); }

/* ── Responsive helpers ─────────────────────────────────────────────── */

/* Sticky mobile CTA with iOS safe area */
.mobile-sticky-cta {
  padding-bottom: calc(0.75rem + var(--safe-bottom));
}

/* Main content clear of sticky CTA on phones */
.page-pad-bottom {
  padding-bottom: calc(var(--mobile-cta-h) + var(--safe-bottom) + 1.5rem);
}
@media (min-width: 1024px) {
  .page-pad-bottom {
    padding-bottom: 0;
  }
}

/* Tables: horizontal scroll instead of page blowout */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  min-width: 480px;
}

/* RepairDesk tracker iframe */
#everest-repair-tracker,
#repair-desk-widget {
  max-width: 100% !important;
  width: 100% !important;
}
#repair-desk-widget {
  min-height: 560px;
  border: 0;
}

/* Mobile menu open: lock body scroll */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Tighter gutters on very small phones */
@media (max-width: 379px) {
  :root {
    --tw-gutter: 16px;
  }
  .px-gutter {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .-mx-gutter {
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
}

/* Hero media: shorter on phones, contain floating badges */
.hero-media {
  isolation: isolate;
}
@media (max-width: 639px) {
  .hero-media {
    height: min(58vw, 320px) !important;
    min-height: 260px;
  }
  .hero-chip-extra {
    display: none !important;
  }
}

/* Hours badge sits in normal flow under hero media — never absolute/clipped */
.hours-pill {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .hours-pill .text-label-bold {
    white-space: normal;
    line-height: 1.25;
  }
}

/* AOS side fades can briefly cause horizontal overflow on phones */
@media (max-width: 767px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: none !important;
  }
}

/* Break long emails / URLs instead of overflowing */
.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ═══════════════ TRACK REPAIR ═══════════════ */

/* Status color tones */
.track-tone-amber  { --tone: #d97706; --tone-bg: rgba(217,119,6,0.10); --tone-border: rgba(217,119,6,0.30); --tone-text: #92400e; }
.track-tone-blue   { --tone: #2563eb; --tone-bg: rgba(37,99,235,0.10);  --tone-border: rgba(37,99,235,0.30);  --tone-text: #1e40af; }
.track-tone-purple { --tone: #7c3aed; --tone-bg: rgba(124,58,237,0.10); --tone-border: rgba(124,58,237,0.30); --tone-text: #5b21b6; }
.track-tone-green  { --tone: #059669; --tone-bg: rgba(5,150,105,0.10);  --tone-border: rgba(5,150,105,0.30);  --tone-text: #065f46; }
.track-tone-teal   { --tone: #0d9488; --tone-bg: rgba(13,148,136,0.10); --tone-border: rgba(13,148,136,0.30); --tone-text: #115e59; }
.track-tone-red    { --tone: #dc2626; --tone-bg: rgba(220,38,38,0.10);  --tone-border: rgba(220,38,38,0.30);  --tone-text: #991b1b; }
.track-tone-slate  { --tone: #64748b; --tone-bg: rgba(100,116,139,0.10);--tone-border: rgba(100,116,139,0.30);--tone-text: #334155; }

/* Dark mode: lighter tones for contrast */
html.dark .track-tone-amber  { --tone: #fbbf24; --tone-bg: rgba(251,191,36,0.12);  --tone-border: rgba(251,191,36,0.30);  --tone-text: #fde68a; }
html.dark .track-tone-blue   { --tone: #60a5fa; --tone-bg: rgba(96,165,250,0.12);  --tone-border: rgba(96,165,250,0.30);  --tone-text: #bfdbfe; }
html.dark .track-tone-purple { --tone: #a78bfa; --tone-bg: rgba(167,139,250,0.12); --tone-border: rgba(167,139,250,0.30); --tone-text: #ddd6fe; }
html.dark .track-tone-green  { --tone: #34d399; --tone-bg: rgba(52,211,153,0.12);  --tone-border: rgba(52,211,153,0.30);  --tone-text: #a7f3d0; }
html.dark .track-tone-teal   { --tone: #2dd4bf; --tone-bg: rgba(45,212,191,0.12);  --tone-border: rgba(45,212,191,0.30);  --tone-text: #99f6e4; }
html.dark .track-tone-red    { --tone: #f87171; --tone-bg: rgba(248,113,113,0.12);  --tone-border: rgba(248,113,113,0.30);  --tone-text: #fecaca; }
html.dark .track-tone-slate  { --tone: #94a3b8; --tone-bg: rgba(148,163,184,0.12); --tone-border: rgba(148,163,184,0.30); --tone-text: #e2e8f0; }

/* Status banner */
.track-status-banner {
  background: var(--tone-bg);
  border: 1px solid var(--tone-border);
  color: var(--tone-text);
}

/* Large status icon ring */
.track-status-icon-ring {
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  color: var(--tone);
}

/* Small inline dot */
.track-status-dot-sm {
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 20%, transparent);
}

/* Badge */
.track-badge {
  background: var(--tone-bg);
  border: 1px solid var(--tone-border);
  color: var(--tone-text);
}

/* Pipeline stepper */
.track-pipeline-step.is-done .track-pipeline-node,
.track-pipeline-step.is-current .track-pipeline-node {
  background: var(--tone);
  border-color: var(--tone);
  color: #fff;
}
.track-pipeline-step.is-current .track-pipeline-node {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 28%, transparent);
  animation: track-pulse 2s ease-in-out infinite;
}
.track-pipeline-line.is-done {
  background: var(--tone);
}
.track-pipeline-step.is-done,
.track-pipeline-step.is-current {
  color: var(--tone-text);
}

@keyframes track-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 28%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone) 12%, transparent); }
}

/* Receipt rows */
.track-receipt-row {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .track-receipt-row {
  border-bottom-color: rgba(255,255,255,0.08);
}

/* Monospace for ticket numbers */
.font-mono {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
}

/* Search hero background */
.track-search-hero {
  background: rgba(252,249,246,0.5);
}
html.dark .track-search-hero {
  background: rgba(21,20,26,0.5);
}

/* Refresh spin */
@keyframes track-spin {
  to { transform: rotate(360deg); }
}
.track-refresh-icon.animate-spin {
  animation: track-spin 0.8s linear infinite;
}

/* ═══════ Print styles ═══════ */
@media print {
  body { padding-top: 0 !important; background: #fff !important; color: #000 !important; }
  header, footer, nav, .track-search-hero, #mobile-menu, #track-refresh-btn, #track-refresh-btn-2,
  [data-aos], button[onclick*="print"], .fixed { display: none !important; }
  main { padding: 0 !important; max-width: 100% !important; }
  #track-result { max-width: 100% !important; }
  .track-status-banner { break-inside: avoid; border: 2px solid #333 !important; }
  .track-detail-section { break-inside: avoid; }
  .track-detail-section[open] > summary { display: none; }
  .track-detail-section:not([open]) > div { display: block !important; }
  details.track-detail-section { display: block !important; }
  details.track-detail-section > div { display: block !important; }
  .shadow-brand-sm, .shadow-brand-md, .shadow-brand-lg, .shadow-brand-xl { box-shadow: none !important; }
  .rounded-2xl { border-radius: 8px !important; }
  a[href]::after { content: none !important; }
}