/* Taxi Lam Ha brand palette V20.4 */
:root {
  --tlh-blue: #087CFB;
  --tlh-navy: #063A91;
  --tlh-yellow: #FFC928;
  --tlh-green: #087C51;
  --tlh-bg: #F4F8FF;
  --tlh-ink: #10233F;
  --tlh-line: #DCE7F5;

  --navy: var(--tlh-navy);
  --green: var(--tlh-green);
  --green2: #066943;
  --mint: #EDF8F3;
  --ink: var(--tlh-ink);
  --muted: #526374;
  --line: var(--tlh-line);
  --bg: var(--tlh-bg);
}

/* Global navigation and brand */
.top,
thead {
  background-color: var(--tlh-navy);
}

.logo {
  background: var(--tlh-blue);
}

.logo img,
.seo-footlogo img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 13px;
}

nav a:hover,
nav a:focus-visible,
.link,
.kicker,
.card .num {
  color: #065FC5;
}

/* Primary actions */
.btn-call {
  background: var(--tlh-blue);
  color: #fff;
}

.btn-green {
  background: var(--tlh-green);
  color: #fff;
}

.btn-call:hover,
.btn-green:hover {
  filter: brightness(.92);
}

/* Hero and highlighted content */
.hero {
  background:
    radial-gradient(circle at 78% 20%, #087CFB35, transparent 42%),
    linear-gradient(135deg, #063A91, #071F48);
}

.hero h1 em {
  color: var(--tlh-yellow);
}

.hero-card > span,
.phone,
.hero-card .phone {
  color: #066943;
}

/* Cards, booking, forms and pricing */
.route-pick,
.areas,
.price-note,
.services-extra {
  border-color: var(--tlh-line);
}

.route-pick:hover,
.area:hover {
  border-color: var(--tlh-blue);
}

.field input:focus-visible,
.field select:focus-visible,
.result textarea:focus-visible {
  outline: 3px solid var(--tlh-yellow);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline-color: #D79A00;
}

/* Legacy pages: override palette tokens without rewriting layout */
body {
  --ink: var(--tlh-ink);
  --muted: #526374;
  --green: var(--tlh-blue);
  --green-deep: var(--tlh-navy);
  --green-ink: var(--tlh-navy);
}

/* Preserve green for explicit booking CTA */
.btn-green {
  background-color: var(--tlh-green);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* V20.5: mobile booking UX; preserve existing desktop layout */
@media (max-width: 900px) {
  .head-actions { min-width: 0; }
  .menu-toggle { cursor: pointer; min-height: 44px; min-width: 60px; justify-content: center; }
  nav[hidden] { display: none !important; }
  nav a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 600px) {
  html, body { max-width: 100%; }
  .head { gap: 8px; }
  .brand { min-width: 0; }
  .brand > span:last-child { min-width: 0; }
  .mobile-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 7px;
    gap: 7px;
    max-width: 520px;
    margin-inline: auto;
  }
  .mobile-dock a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    padding: 10px 6px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mobile-dock a:first-child { background: var(--tlh-blue); color: #fff; }
  .mobile-dock a:last-child { background: var(--tlh-green); color: #fff; }
  footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .table-box, .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .retained-content { min-width: 0; overflow-wrap: anywhere; }
}