/* ============================================================================
   polish.css — visual consistency layer for anywherecab.com
   Added 2026-09-08. Load AFTER bundle-v2.min.css. Nothing else changes.
   ----------------------------------------------------------------------------
   This is a retouch, not a rebuild. It changes no markup and no layout
   structure. It fixes measured inconsistencies found by auditing the live site:

     - Heading sizes differed by page type for the same role
       (h2 was 32px on the homepage, 19-28px on route pages, 20-24px on
       locality pages). One scale now applies everywhere.
     - Section rhythm ranged from 22px to 84px of vertical padding.
     - 15+ button variants: border-radius 5/6/8/10/50/100/50%,
       padding from "6px 14px" to "16px 20px", weights 400/700/800.
     - 12+ border-radius values and 10+ shadow definitions, no scale.
     - Two navies (#031135 and #012C6D) used interchangeably.
     - Bootstrap's default link blue (#007BFF) leaking through on route pages.
     - MOBILE: the fixed WhatsApp/Call bar covers the last ~66px of every page
       because body has no bottom padding.
     - MOBILE: the hero h1 sits in a container with 0 side padding, so the
       heading touches both screen edges.

   Header, drawer nav, mega-menu, footer and the booking widget are deliberately
   left alone — they already work and are the riskiest things to restyle.
   ========================================================================== */

:root {
  /* Brand colours, taken from what the site already uses most */
  --axc-navy:      #031135;   /* dominant heading / brand navy */
  --axc-navy-deep: #012c6d;   /* secondary navy, kept for CTAs that use it */
  --axc-gold:      #ffb703;   /* brand accent */
  --axc-green:     #00873a;   /* booking / confirm */
  --axc-wa:        #25d366;   /* WhatsApp brand */

  /* Text: #717171 passes AA at 4.89:1, but reads washed out at 15px.
     #37445c is 8.9:1 and keeps the same neutral character. */
  --axc-ink:       #37445c;
  --axc-ink-soft:  #5b6b83;
  --axc-line:      #e3e8f0;
  --axc-surface:   #f7f9fc;

  /* One radius scale instead of twelve */
  --axc-r-sm: 8px;    /* controls, buttons, chips */
  --axc-r-md: 12px;   /* cards, tables, panels */
  --axc-r-pill: 999px;

  /* Two shadows instead of ten */
  --axc-sh-1: 0 1px 2px rgba(3,17,53,.05), 0 6px 18px -10px rgba(3,17,53,.18);
  --axc-sh-2: 0 2px 6px rgba(3,17,53,.06), 0 18px 40px -22px rgba(3,17,53,.30);

  /* Vertical rhythm */
  --axc-sec-y: 56px;
}
@media (min-width: 992px) { :root { --axc-sec-y: 76px; } }

/* ---------------------------------------------------------------- 1. TYPE */
/* One scale for every page type. clamp() keeps it fluid without media queries. */

.page-wrapper h1,
section h1 {
  font-size: clamp(26px, 5.2vw, 38px) !important;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.page-wrapper h2,
section h2 {
  font-size: clamp(21px, 2.6vw, 28px) !important;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.page-wrapper h3,
section h3 {
  font-size: clamp(17px, 1.9vw, 19px) !important;
  line-height: 1.35;
  font-weight: 700;
}
.page-wrapper h4,
section h4 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

/* h1 colour is deliberately left alone: hero h1 is white on a photo.
   Headings share the brand navy. The homepage had h3s in green, purple, blue
   and amber, which read as four unrelated systems on one page. Section
   components that genuinely need their own colour override this below. */
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4,
section h2, section h3, section h4 { color: var(--axc-navy) !important; }

/* Readable body copy. 15.5px at 1.75 with a measure cap — the route pages
   currently run 100+ character lines on desktop. */
section p,
.page-wrapper section p,
.prestige-faq-panel p,
.qa-quick-answer p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--axc-ink);
}
section p { max-width: 72ch; }
section .text-center p,
.qa-quick-answer p { max-width: none; }

section li { line-height: 1.7; color: var(--axc-ink); }

/* Bootstrap's default link blue was showing through on route pages. */
section a:not([class]),
.prestige-faq-panel a,
section a.text-primary,
section .text-primary { color: var(--axc-navy-deep) !important; }
section a:not([class]):hover { color: var(--axc-gold) !important; }

/* ------------------------------------------------------------ 2. RHYTHM */
/* Section padding ranged from 22px to 84px. Normalise the block axis and give
   every section a side gutter so nothing touches the screen edge on mobile. */

.page-wrapper > section,
section.axc2-section,
section.destination-section,
section.axc-related,
section.qa-quick-answer {
  padding-top: var(--axc-sec-y);
  padding-bottom: var(--axc-sec-y);
}
.page-wrapper > section { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.page-wrapper > section > .container,
.page-wrapper > section > .container-fluid { padding-left: 0; padding-right: 0; }

/* The hero banner sits outside .container and had 0 side padding, so the h1
   ran edge to edge on a 375px screen. */
.bg-banner,
section.bg-banner {
  padding-left: 20px;
  padding-right: 20px;
}
.bg-banner h1 { margin-left: auto; margin-right: auto; max-width: 22ch; }

/* ----------------------------------------------------------- 3. CONTROLS */
/* One button system. Colour roles are kept exactly as they are — only the
   geometry and weight are unified. */

.route-cta,
.axc-ft-btn,
a.btn, button.btn, .btn,
.hero-cta, .cta-btn {
  border-radius: var(--axc-r-sm);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  padding: 12px 22px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.route-cta:hover,
.axc-ft-btn:hover,
.btn:hover { transform: translateY(-1px); box-shadow: var(--axc-sh-1); }

/* Do not touch controls inside the header, drawer, footer or booking widget. */
.navigation-wrap .btn,
.drawer-nav-container .btn,
.premium-desktop-footer .btn,
.axc2-booksec .btn,
.input-group .btn,
.anywhere-master-action-container a {
  border-radius: revert; font-size: revert; padding: revert;
  font-weight: revert; transform: none;
}

/* Focus visibility — there was none on most controls. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.prestige-faq-trigger:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(255,183,3,.65);
  outline-offset: 2px;
  border-radius: var(--axc-r-sm);
}

/* -------------------------------------------------------- 4. CARDS/PANELS */
/* One radius, one shadow, one border — instead of twelve radii and ten shadows. */

.prestige-faq-card,
.quick-answer-box,
.route-highlight-box,
.axc-loc-card,
.axc-ft-wrap,
.cnt-card,
.hub-card,
.axc2-card {
  border-radius: var(--axc-r-md);
  border: 1px solid var(--axc-line);
  box-shadow: var(--axc-sh-1);
}
.prestige-faq-card { overflow: hidden; }
.prestige-faq-trigger { font-size: 15.5px; font-weight: 700; }

/* Tables: the fare tables on route pages had no shared treatment. */
section table.fare-table,
section table {
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--axc-r-md);
  overflow: hidden;
}
section table.fare-table th,
section table thead th {
  background: var(--axc-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 16px;
  text-align: left;
  white-space: nowrap;
}
section table.fare-table td,
section table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f4f9;
  font-size: 14.5px;
  color: var(--axc-ink);
}
section table tbody tr:nth-child(even) { background: #fafbfd; }
section table tbody tr:last-child td { border-bottom: none; }
section table.fare-table .price { font-weight: 800; color: var(--axc-green); }

/* Any wide table scrolls in its own box rather than pushing the page sideways. */
section table { display: table; }
@media (max-width: 720px) {
  section table.fare-table,
  .axc-ft-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------- 5. MOBILE FIX */
/* The fixed WhatsApp/Call bar (.anywhere-master-action-container, 46px tall,
   sitting 20px off the bottom) covers the last ~66px of every page, because
   body has padding-bottom: 0. It floats over paragraph text at the end of
   route pages. */

body { padding-bottom: 84px; }
@media (min-width: 992px) { body { padding-bottom: 0; } }

/* Keep the bar clear of the very bottom on notched devices. */
.anywhere-master-action-container {
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  box-shadow: var(--axc-sh-2);
  border-radius: var(--axc-r-pill);
}

/* Images should never push the layout sideways. */
section img { max-width: 100%; height: auto; }

/* Tighter heading rhythm on small screens. */
@media (max-width: 600px) {
  section h2 { margin-bottom: 12px; }
  section p  { font-size: 15px; }
  .qa-quick-answer { padding-left: 18px; padding-right: 18px; }
}

/* ------------------------------------------------------------ 6. MOTION */
@media (prefers-reduced-motion: reduce) {
  .route-cta, .axc-ft-btn, .btn { transition: none; }
  .route-cta:hover, .axc-ft-btn:hover, .btn:hover { transform: none; }
}

/* --------------------------------------------------- 7. NEW COMPONENTS */
/* Align the two components added on 7 Sep to the tokens above, so they inherit
   the same navy, radius and shadow as everything else. */
.axc-ft, .axc-loc { --ft-navy: var(--axc-navy); --l-navy: var(--axc-navy); }
.axc-ft h2, .axc-loc h2 { color: var(--axc-navy); }
.axc-ft-wrap { box-shadow: var(--axc-sh-1); }
.axc-ft thead th { background: var(--axc-navy); }
.axc-loc-faq { border-left-color: var(--axc-gold); }