/* ==========================================================================
   Mao Taxi Express — "Night Drive" identity layer.
   Loaded AFTER styles.css: overrides tokens only, so every existing
   component on the home page re-skins without touching its markup.

   Direction: the world of the job. Petrol-black asphalt at night, the amber
   of a sodium streetlight, steel, and the mono numerals of a meter.
   Nothing gold. Nothing cream. Nothing that looks like a template.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root,
:root[data-theme='light'] {
  --bg: #E9EDF0;
  --surface: #ffffff;
  --surface-2: #DFE5EA;
  --surface-3: #CFD8DF;
  --border: rgba(11, 16, 21, 0.13);
  --border-strong: rgba(11, 16, 21, 0.26);
  --text: #0B1015;
  --text-soft: rgba(11, 16, 21, 0.68);
  --text-faint: rgba(11, 16, 21, 0.46);
  --accent: #C4620A;
  --accent-strong: #A75208;
  --accent-ink: #FFF6EA;
  --accent-text: #A75208;
  --teal: #4A6273;
  --live: #0E8A54;
  --shadow: rgba(11, 16, 21, 0.22);
  --map-line: rgba(11, 16, 21, 0.16);
  --map-block: rgba(11, 16, 21, 0.05);
  --scheme: light;

  --font-display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-full: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0B1015;
    --surface: #121A21;
    --surface-2: #18232C;
    --surface-3: #223038;
    --border: rgba(232, 241, 245, 0.10);
    --border-strong: rgba(232, 241, 245, 0.20);
    --text: #E8F1F5;
    --text-soft: rgba(232, 241, 245, 0.70);
    --text-faint: rgba(232, 241, 245, 0.44);
    --accent: #FF9E2C;
    --accent-strong: #FFB65C;
    --accent-ink: #0B1015;
    --accent-text: #FFB65C;
    --teal: #9FB2BF;
    --live: #2FD08A;
    --shadow: rgba(0, 0, 0, 0.7);
    --map-line: rgba(232, 241, 245, 0.16);
    --map-block: rgba(232, 241, 245, 0.06);
    --scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0B1015;
  --surface: #121A21;
  --surface-2: #18232C;
  --surface-3: #223038;
  --border: rgba(232, 241, 245, 0.10);
  --border-strong: rgba(232, 241, 245, 0.20);
  --text: #E8F1F5;
  --text-soft: rgba(232, 241, 245, 0.70);
  --text-faint: rgba(232, 241, 245, 0.44);
  --accent: #FF9E2C;
  --accent-strong: #FFB65C;
  --accent-ink: #0B1015;
  --accent-text: #FFB65C;
  --teal: #9FB2BF;
  --live: #2FD08A;
  --shadow: rgba(0, 0, 0, 0.7);
  --map-line: rgba(232, 241, 245, 0.16);
  --map-block: rgba(232, 241, 245, 0.06);
  --scheme: dark;
}

/* ---- type: the display face does the talking ---- */
h1, h2, h3, .brand-mark, .fare-row-price, .tile-price, .stat-strip strong {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-style: normal;
}
h1 em, h2 em, .page-hero h1 em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent-text);
  position: relative;
}
/* the underline is a road marking, not a highlight */
.page-hero h1 em::after, .hero-copy h1 em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.09em;
  background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 24px);
  opacity: 0.85;
}
.page-hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 0.95; max-width: 15ch; }
.eyebrow, .tile-kicker, .stat-strip span, .crumbs ol, .fare-card-head h2, .toc h4, .footer-cols h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fare-row-price, .tile-price, table.fares td.p, .stat-strip strong {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- kilometre markers: sections are numbered like road distance posts ---- */
.prose h2 { position: relative; padding-top: 0.9rem; }
.prose h2::before {
  content: attr(data-km);
  position: absolute; top: -0.2rem; left: 0;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent-text); opacity: 0.75;
}

/* ---- hazard-tape rule: the one piece of vernacular decoration ---- */
.tape-rule {
  height: 6px; border: none; margin: 0;
  background: repeating-linear-gradient(-45deg,
    var(--accent) 0 8px, transparent 8px 16px);
  opacity: 0.5;
}

/* ---- the signature: fare cards are receipt tape ---- */
.fare-card {
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--surface), var(--surface));
  box-shadow: 0 40px 70px -50px var(--shadow);
}
.fare-card::before {
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 18px);
  height: 4px; opacity: 0.9;
}
/* torn top and bottom edge, like a printed receipt */
.fare-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 8px;
  background:
    radial-gradient(circle at 6px -2px, var(--bg) 6px, transparent 6.5px) repeat-x;
  background-size: 12px 8px;
}
.fare-row { border-radius: 2px; }
.fare-row.is-primary::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.fare-row { position: relative; }
.fare-meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; }

/* ---- buttons: square, mechanical, no soft glow ---- */
.btn {
  border-radius: 3px;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: none;
}
.btn-accent:hover { box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -14px var(--accent); transform: none; }
.btn-whatsapp:hover { transform: none; }

/* ---- tiles: an index card, not a floating rounded box ---- */
.tile { border-radius: 3px; }
.tile:hover { transform: none; border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tile:hover .tile-go { transform: none; }
.tile h3 { font-size: 1.28rem; line-height: 1.1; }

.area-links a { border-radius: 2px; }
.area-links a:hover { transform: none; box-shadow: inset 2px 0 0 var(--accent); }
.zone-tabs a { border-radius: 2px; font-family: var(--font-mono); font-size: 0.74rem; }
.pill { border-radius: 2px; font-family: var(--font-mono); }
.table-wrap, .compare-col, .faq-list details { border-radius: 3px; }
table.fares thead th { font-family: var(--font-mono); }
table.fares td.t { color: var(--text-faint); }

/* ---- ambient: faint asphalt grain, only in dark ---- */
:root[data-theme='dark'] body::after,
:root:not([data-theme='light']) body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- header: a strip, not a floating pill ---- */
.site-header { backdrop-filter: blur(14px) saturate(1.1); }
.site-header .nav-inline a { font-size: 0.83rem; font-weight: 600; letter-spacing: 0; }

/* ---- page hero: the lede sits in a mono column, like dispatch notes ---- */
.page-hero .lede { font-size: 1.12rem; line-height: 1.6; }
.stat-strip { border-top: 2px solid var(--text); padding-top: 1.1rem; }
.stat-strip strong { font-size: 1.9rem; }
.stat-strip span { font-size: 0.66rem; letter-spacing: 0.12em; }

/* ---- prose ---- */
.prose p { font-size: 1.02rem; line-height: 1.78; }
.prose blockquote {
  border-left: 3px solid var(--accent); border-radius: 0;
  font-style: normal; font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; letter-spacing: -0.02em; color: var(--text);
}
.toc a { border-left-width: 2px; font-family: var(--font-mono); font-size: 0.76rem; }

/* ---- the meter strip: a live, scrolling data band under the hero ---- */
.meter-strip {
  border-block: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.meter-strip::before, .meter-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.meter-strip::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.meter-strip::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.meter-track {
  display: flex; gap: 2.6rem; white-space: nowrap;
  padding-block: 0.75rem;
  animation: meter-roll 46s linear infinite;
  width: max-content;
}
.meter-track span {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.5rem;
}
.meter-track b { color: var(--accent-text); font-weight: 700; }
.meter-track span::before { content: "◦"; color: var(--accent); opacity: 0.6; }
@keyframes meter-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .meter-track { animation: none; } }

/* ---- journal / article cards ---- */
.article-card { display: grid; gap: 0; }
.article-card .route-photo { border-radius: 3px 3px 0 0; border-bottom: none; aspect-ratio: 16/9; }
.article-meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--text-faint); text-transform: uppercase; }
.article-body { max-width: 68ch; }
.article-lead { font-size: 1.22rem; line-height: 1.55; color: var(--text); font-weight: 500; margin-top: 1.2rem; }

/* ---- author / trust block ---- */
.by-line {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 1.6rem;
  padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.by-line img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.by-line div { font-size: 0.84rem; color: var(--text-soft); }
.by-line b { display: block; color: var(--text); font-size: 0.9rem; }


/* ==========================================================================
   Vehicle picker — a list, not three cramped squares.
   Silhouette, name, real capacity, price delta, one clear selection state.
   ========================================================================== */
.combo-panel-rich {
  width: 340px;
  max-width: calc(100vw - 2.5rem);
  padding: 0.35rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
}
.vehicle-option-row {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 3px;
  border: 1px solid transparent;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.vehicle-option-row:hover { background: var(--surface-2); }
.vehicle-option-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.vehicle-option-row:has(input:checked)::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 3px 0 0 3px;
}
.vehicle-option-photo {
  position: static;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: auto;
  width: 52px; height: 32px;
  background: transparent;
  color: var(--text-faint);
  transition: color 0.16s var(--ease);
}
.vehicle-option-photo svg { width: 100%; height: auto; }
.vehicle-option-row:hover .vehicle-option-photo { color: var(--text-soft); }
.vehicle-option-row input:checked ~ .vehicle-option-photo { color: var(--accent); }
.vehicle-option-text { text-align: left; padding: 0; min-width: 0; }
.vehicle-option-name {
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); line-height: 1.25; white-space: nowrap;
}
.vehicle-option-note {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--text-faint); margin-top: 0.18rem; white-space: nowrap;
}
.vehicle-option-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.28em 0.55em; border-radius: 2px;
  color: var(--text-faint); background: var(--surface-3);
  white-space: nowrap;
}
.vehicle-option-row input:checked ~ .vehicle-option-tag {
  color: var(--accent-ink); background: var(--accent);
}
.vehicle-option-check {
  position: static;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent; color: transparent;
  opacity: 1; transform: none;
  transition: all 0.16s var(--ease);
}
.vehicle-option-check svg { width: 10px; height: 10px; }
.vehicle-option-row input:checked ~ .vehicle-option-check {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.vehicle-option-row input:focus-visible ~ .vehicle-option-check {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.vehicle-trigger-icon { width: 34px; height: 20px; border-radius: 0; }
.vehicle-trigger-icon svg { width: 34px; height: 20px; color: var(--accent); }
@media (max-width: 430px) {
  .vehicle-option-row { grid-template-columns: 44px 1fr auto; gap: 0.6rem; }
  .vehicle-option-tag { display: none; }
  .vehicle-option-photo { width: 44px; height: 28px; }
}

/* ==========================================================================
   Date + passengers were half a step out of line: the date <input> carries
   0.3em of top padding, the passengers combo row carried none. Match them.
   ========================================================================== */
.ticket-meta { align-items: end; }
.ticket-meta-field { display: flex; flex-direction: column; justify-content: flex-end; }
/* both controls: identical box, identical underline, text centred in both */
.ticket-meta-field > input,
.ticket-meta-field .combo-input-row {
  height: 34px;
  box-sizing: border-box;
  padding: 0 0.1em;
  align-items: center;
  line-height: 1;
}
.combo-input-row input { height: auto; padding: 0; line-height: 1; }
#passengers-dropdown .combo-trigger { padding: 0 0 0 0.2rem; height: 100%; }

/* the address inputs shouldn't shout — one short instruction, that's all */
.ticket-input-row input::placeholder { font-size: 0.85rem; letter-spacing: 0; }

/* ==========================================================================
   FAQ: the home page already draws its own + via .faq-icon. The page-layer
   rule was drawing a second one. Scope it to the pages that need it.
   ========================================================================== */
.faq-list details.faq-item > summary::after { content: none; }

/* ==========================================================================
   Float bar: it's a mobile affordance. On desktop the header already carries
   Call and WhatsApp, so it was just a floating island in the middle of the
   page — and its square buttons sat badly inside a pill container.
   ========================================================================== */
.float-bar {
  border-radius: 4px;
  padding: 0.45rem;
  gap: 0.45rem;
  left: auto;
  right: 1rem;
  bottom: 1rem;
  transform: translateY(140%);
}
.float-bar.is-visible { transform: translateY(0); }
.float-bar .btn { border-radius: 3px; padding: 0.65em 1.05em; }
@media (min-width: 900px) { .float-bar { display: none; } }