/* Homepage redesign layer. Loaded only by index.html, after styles.css, so the
   booking, account, driver and Express pages keep their existing look.
   Light is the existing design. Dark is html[data-theme="dark"]. */

/* ---------- Theme toggle ---------- */
.theme-toggle {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  flex-shrink: 0;
  transition: background .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle:hover { background: rgba(244,163,0,.16); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.theme-toggle-row {
  width: auto;
  height: auto;
  min-height: 44px;
  justify-content: flex-start;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--card-border);
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 600;
}
.theme-toggle-row:hover { background: transparent; color: var(--amber); }
/* Header toggle on desktop and tablet; the mobile menu carries it on phones. */
@media (max-width: 560px) {
  .header-actions > .theme-toggle { display: none; }
}
@media (min-width: 860px) {
  .theme-toggle-row { display: none; }
}

/* The extra toggle needs room: drop the decorative clock on mid-width screens. */
@media (max-width: 1359px) {
  .live-clock { display: none !important; }
}

/* Tighten the header between the point the full nav appears and wide desktop. */
@media (min-width: 860px) and (max-width: 1059px) {
  .nav-account-link span { display: none; }
  .main-nav a, .nav-dropdown-trigger { padding: 8px 9px; }
  .header-actions { gap: 8px; }
}

/* Dark wordmark on light, light wordmark on dark. */
.wm-on-dark { display: none; }
html[data-theme="dark"] .site-header .wm-on-light,
html[data-theme="dark"] .mobile-nav-menu .wm-on-light { display: none !important; }
/* styles.css hides .brand-wordmark at 400px and below; keep that behaviour. */
@media (min-width: 401px) {
  html[data-theme="dark"] .site-header .wm-on-dark,
  html[data-theme="dark"] .mobile-nav-menu .wm-on-dark { display: block; }
}

/* ---------- Hero: five tiers, bold ---------- */
.hero-family-label {
  margin: 4px 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.hero-chips { gap: 10px; margin: 0 0 24px; }
.hero-chips a {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  border-width: 1.5px;
}
.hero-chips a.chip-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #12123B;
}
.hero-chips a.chip-primary:hover { background: #FFB627; border-color: #FFB627; }

/* ---------- How it works: image steps ---------- */
.how-section { padding-top: 88px; }
.how-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: 40px;
}
.how-head > div { flex: 1 1 460px; min-width: 0; }
.how-head h2 { max-width: 640px; margin: 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; }
.how-head p { flex: 0 1 360px; margin: 0; color: var(--text-muted); font-size: 16px; }
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.how-step {
  flex: 0 0 290px;
  scroll-snap-align: start;
  position: relative;
  min-width: 0;
}
.how-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 860 / 1075;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 40px rgba(18,18,59,.14);
}
.how-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: #12123B;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.how-cap-title { margin: 16px 4px 6px; font-size: 20px; line-height: 1.2; }
.how-cap-body { margin: 0 4px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.how-step-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px 26px;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 28px rgba(18,18,59,.06);
}
.how-step-cta .eyebrow { margin: 0; }
.how-step-cta h3 { margin: 0; font-size: 26px; line-height: 1.18; }
.how-step-cta p { margin: 0; color: var(--text-muted); font-size: 15px; }
.how-step-cta .btn { align-self: flex-start; }
@media (min-width: 720px) {
  .how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding-bottom: 0;
  }
  .how-step { flex: none; }
}

/* ---------- Services polish ---------- */
.service-card h3 { font-size: 20px; }
.service-card-cta { color: var(--amber-text); }

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F3F3FA;
  --title: #FFFFFF;
  --text-muted: #A9ADC9;
  --card-border: rgba(255,255,255,.12);
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.14);
  --primary: #A9C0F5;
  --primary-tint: rgba(255,255,255,.08);
  --amber-text: #F4A300;
}
html[data-theme="dark"] body { background: #0A0C24; }
html[data-theme="dark"] h1 .brand-arrivo,
html[data-theme="dark"] h2 .brand-arrivo { color: var(--amber); }

/* Header and menus */
html[data-theme="dark"] .site-header {
  background: rgba(10,12,36,.62);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 24px rgba(0,0,0,.35);
}
html[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(10,12,36,.5);
  border-color: rgba(255,255,255,.16);
}
html[data-theme="dark"] .mobile-nav-menu {
  background: rgba(10,12,36,.9);
  border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .lang-menu,
html[data-theme="dark"] .nav-dropdown-menu {
  background: #151A40;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
html[data-theme="dark"] .lang-menu .lang-opt:hover,
html[data-theme="dark"] .nav-dropdown-menu a:hover,
html[data-theme="dark"] .lang-trigger:hover,
html[data-theme="dark"] .mobile-nav-close:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .lang-menu .lang-opt.active { background: var(--amber); color: #12123B; }
html[data-theme="dark"] .mobile-nav-backdrop { background: rgba(0,0,0,.55); }

/* Buttons keep dark text on the amber glass */
html[data-theme="dark"] .btn-primary { color: #12123B; }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

/* Surfaces */
html[data-theme="dark"] .section-tint { background: #0E1131; }
html[data-theme="dark"] .card { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px rgba(0,0,0,.35); }
/* The light-mode glass highlight is far too bright on navy; soften it. */
html[data-theme="dark"] .card::before {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.16), rgba(255,255,255,.04) 30%, transparent 55%);
}
html[data-theme="dark"] .how-step img { box-shadow: 0 18px 40px rgba(0,0,0,.5); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .how-step-cta { box-shadow: 0 12px 28px rgba(0,0,0,.35); }
html[data-theme="dark"] .showcase-card,
html[data-theme="dark"] .fleet-photo-frame { box-shadow: 0 14px 34px rgba(0,0,0,.5); }
html[data-theme="dark"] .waitlist-form input {
  background: rgba(255,255,255,.07);
  color: var(--ink);
  border-color: rgba(255,255,255,.2);
}
html[data-theme="dark"] .waitlist-form input::placeholder { color: #8E92B3; }

/* Footer and badges stay deep navy */
html[data-theme="dark"] .site-footer { background: #070919; color: #F5F3EE; }
html[data-theme="dark"] .footer-social-icon { color: #F5F3EE; }
html[data-theme="dark"] .footer-social-icon:hover { background: var(--amber); color: #12123B; }
html[data-theme="dark"] .store-badge { background: #1B1F45; color: #F5F3EE; }
html[data-theme="dark"] .skip-link { background: var(--amber); color: #12123B; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle:active { transition: none; transform: none; }
}

/* ---------- Header: smaller type so every link sits on one line ---------- */
.header-inner { gap: 14px; }
.main-nav { gap: 2px; font-size: 13px; }
.main-nav a,
.nav-dropdown-trigger {
  padding: 8px 11px;
  font-size: 13px;
  white-space: nowrap;
}
.nav-account-link, .nav-account-link span { font-size: 13px; white-space: nowrap; }
.header-actions { gap: 10px; }
@media (min-width: 860px) and (max-width: 1059px) {
  .main-nav a, .nav-dropdown-trigger { padding: 8px 8px; font-size: 12.5px; }
}

/* ---------- Hero: copy on the left, booking form on the right ---------- */
.hero-split-inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) {
  .hero-split-inner { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
}
.hero-copy { max-width: 640px; min-width: 0; }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 10px 0 18px;
}
.hero-copy h1 .brand-ride { color: #fff; }
.hero-copy h1 .brand-arrivo { color: var(--amber); }
.hero-copy .hero-sub { max-width: 520px; font-size: 16.5px; line-height: 1.55; }
.hero-trust {
  margin-top: 44px;
  padding: 16px 24px;
  justify-content: space-between;
  gap: 12px 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(10,12,36,.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-trust li { font-size: 13px; }

.hero-form {
  position: relative;
  min-width: 0;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: rgba(14,16,48,.74);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 28px 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.hf-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.hf-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  padding: 11px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  transition: background .2s ease, color .2s ease;
}
.hf-tab:hover { color: #fff; }
.hf-tab.is-active { background: #fff; color: #12123B; }
.hf-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.hf-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hf-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: 15px;
  color-scheme: dark;
}
.hf-input::placeholder { color: rgba(255,255,255,.55); }
.hf-input:focus { outline: 3px solid rgba(244,163,0,.55); outline-offset: 0; border-color: var(--amber); }
.hf-when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hf-when[hidden] { display: none; }
.hf-error { margin: 12px 0 0; font-size: 13px; color: #FFB4A8; }
.hf-submit { width: 100%; justify-content: center; margin-top: 18px; min-height: 52px; font-size: 15.5px; }
.hf-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.7); }
.pac-container { z-index: 2000; }

/* Flat amber on the hero buttons: the glass sheen was washing out the label. */
.hf-submit,
.hero-ctas .btn-primary {
  background: var(--amber);
  background-image: none;
  color: #12123B;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hf-submit::before,
.hero-ctas .btn-primary::before,
.hf-submit::after,
.hero-ctas .btn-primary::after { display: none; }
.hf-submit:hover,
.hero-ctas .btn-primary:hover { background: #FFB627; }

/* ---------- Shorter header ---------- */
:root { --hdr-h: 52px; }
.header-inner { padding-top: 6px; padding-bottom: 6px; }
.brand { padding: 2px 0; }
.main-nav a, .nav-dropdown-trigger { padding-top: 6px; padding-bottom: 6px; }
.theme-toggle { width: 34px; height: 34px; }
.lang-trigger { min-height: 34px; padding: 6px 12px; }
.btn-sm { min-height: 34px; padding: 8px 18px; }
.mobile-nav-toggle { width: 38px; height: 38px; padding: 8px; }
.nav-account-link { padding-top: 2px; padding-bottom: 2px; }
/* The hero photo runs up behind the header; keep content where it was. */
.hero { margin-top: calc(-1 * var(--hdr-h)); padding-top: calc(100px + var(--hdr-h)); }
@media (min-width: 780px) {
  .hero { padding-top: calc(130px - 74.5px + var(--hdr-h)); }
}

/* ---------- Header: double-click to unpin, drag anywhere ---------- */
@media (min-width: 860px) {
  .site-header:not(.is-floating) .header-inner { cursor: default; }
}
.site-header.is-floating {
  position: fixed;
  right: auto;
  margin: 0;
  z-index: 80;
  border-radius: 999px;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 44px rgba(18,18,59,.28);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.site-header.is-floating { width: max-content; max-width: calc(100vw - 24px); }
.site-header.is-floating .header-inner { max-width: none; width: auto; margin: 0; gap: 16px; padding-left: 18px; padding-right: 18px; }
.site-header.is-floating.is-dragging { cursor: grabbing; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 26px 60px rgba(18,18,59,.38); }
html[data-theme="dark"] .site-header.is-floating {
  background: rgba(14,16,48,.82);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 44px rgba(0,0,0,.6);
}

/* ---------- Audit fixes ---------- */
/* Hero photo: a 960px file for phones and tablets, the full one on desktop. */
.hero-bg { background-image: url("assets/hero-night-960.jpg"); }
@media (min-width: 1000px) { .hero-bg { background-image: url("assets/hero-night-1672.jpg"); } }

/* iOS zooms the page when a field under 16px gets focus. */
@media (max-width: 979px) {
  .hf-input { font-size: 16px; }
}
/* A finger dragging the floating header should move it, not scroll the page. */
.site-header.is-floating { touch-action: none; }

/* Keyboard focus on the new hero controls. */
.hero-chips a:focus-visible,
.hero-ctas .btn:focus-visible,
.hf-submit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hf-input[aria-invalid="true"] { border-color: #FFB4A8; }

/* Contrast: footer and "coming soon" badges (WCAG AA needs 4.5:1 for small text). */
.footer-credit-label { color: #B4B4D6; opacity: 1; }
.footer-legal-entity { color: #B4B4D6; }
.store-badge { opacity: 1; background: #26265C; border: 1px dashed rgba(255,255,255,.28); }
.store-badge-text small { color: #E4E4F4; }
.store-badge-text strong { color: #fff; }
.showcase-strip:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* On the narrowest phones the longer French and Portuguese "Book a ride" label
   pushes the header past the screen edge. The hero has the same button. */
@media (max-width: 359px) {
  .header-actions > .btn-sm { display: none; }
}
/* Double-clicking the header to move it should not select the words under it. */
@media (min-width: 860px) {
  .site-header { -webkit-user-select: none; user-select: none; }
}

/* Address suggestions (our own list; Google only supplies the text). */
.hf-field { position: relative; }
.hf-suggest {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: rgba(14,16,48,.97);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  max-height: 260px;
  overflow-y: auto;
}
.hf-suggest[hidden] { display: none; }
.hf-suggest li {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.35;
  color: #fff;
  cursor: pointer;
}
.hf-suggest li:hover,
.hf-suggest li.is-active { background: rgba(244,163,0,.22); }

/* ---------- Phone menu fixes ---------- */
/* The menu header lost both wordmarks (styles.css hides them at 400px and
   below); show the one that matches the theme. */
.mobile-nav-menu-header .brand-wordmark { display: none; }
html:not([data-theme="dark"]) .mobile-nav-menu-header .wm-on-light { display: block !important; }
html[data-theme="dark"] .mobile-nav-menu-header .wm-on-dark { display: block !important; }
/* The theme row was shrinking to 34px wide and wrapping its label onto the next links. */
.mobile-nav-menu .theme-toggle-row {
  display: flex;
  width: 100%;
  align-self: stretch;
  white-space: nowrap;
  gap: 10px;
}
/* A solid menu panel: the glass blur let the page text show through the links. */
.mobile-nav-menu { background: rgba(247, 244, 236, .98); }
html[data-theme="dark"] .mobile-nav-menu { background: #0E1131; }