/*
  Shared stylesheet for the static sub-pages: the five service landing pages,
  plus privacy and terms.

  These pages sit outside the React app — they are plain HTML served straight
  from public/ so search engines get real markup without running JavaScript. Each
  one used to carry its own inline copy of this stylesheet. The copies had
  drifted into six different variants of what was meant to be one design, so
  fixing anything meant finding and editing it seven times, and any page that got
  missed silently diverged further. One file, linked by all of them, is the
  actual fix for "make these consistent".

  Typography and colour here deliberately mirror the React app: DM Serif Display
  for headings, DM Sans for text, and the same gold. A visitor moving from the
  homepage to an airport page should not feel they have landed on another site.
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #000;
  --gold: #f5c842;
  /* --gold-dark is only ever used as a TEXT colour: link hovers, the Galveston
     badges, the terminal labels. It was #c9a020, which measures 2.5:1 on white
     and 2.2:1 on the cream background — both far below the 4.5:1 AA floor, so
     every gold label and every hovered link was failing. #7d5f04 measures 6.0:1
     on white and 5.3:1 on cream.

     The bright --gold above is unchanged: it is used for fills and rules, where
     contrast rules do not apply the same way. */
  --gold-dark: #7d5f04;
  --bg: #f1f0ec;
  --surface: #ffffff;
  --text: #0f172a;
  /* Was #64748b, which is 4.17:1 on --bg and fails WCAG AA's 4.5:1 for body
     text. #475569 measures 6.6:1. This is the same fix already applied to the
     React footer; the sub-pages inherited the same failing value. */
  --muted: #475569;
  --border: #e2d9ce;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */

header {
  background: rgba(0,0,0,0.96);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 1rem; }
.brand {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem;
  color: #fff;
  text-decoration: none;
  transition: color .2s;
}
.brand:hover { color: var(--gold); }

nav { display: flex; align-items: center; gap: 1.25rem; }
nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .2s;
  position: relative;
  /* WCAG 2.2 wants a 24px minimum target; these were the text height alone. */
  display: inline-block;
  padding: .45rem 0;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: .3rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  /* scaleX rather than width: width animation runs on the layout thread. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
nav a:hover { color: var(--gold); }
nav a:hover::after { transform: scaleX(1); }

.nav-book {
  background: transparent;
  border: 2px solid #fff;
  color: #fff !important;
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  transition: background .2s, color .2s, border-color .2s !important;
}
.nav-book::after { display: none !important; }
.nav-book:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--black) !important; }

/* Tap-to-call in the header, matching the React nav's gold pill. The static
   pages carried tel: links in the body but nothing in the header. */
.nav-call {
  background: var(--gold);
  border: 2px solid var(--gold);
  color: var(--black) !important;
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.nav-call::after { display: none !important; }
.nav-call:hover { background: #ffd84d; border-color: #ffd84d; }

/* ── Content ─────────────────────────────────────────────────────────────── */

main { padding: 4rem 0; }

/* DM Serif Display ships weight 400 only. Asking for 700/800 makes the browser
   synthesise a bold by smearing the outlines. Negative tracking is likewise
   wrong for a display serif, which is spaced correctly as drawn. */
h1, h2, h3, h4 {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--text);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.005em; margin-bottom: 1.25rem; line-height: 1.15; }
h2 { font-size: 1.65rem; margin: 2.5rem 0 1rem; line-height: 1.25; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }

/* Caps the measure inside the comfortable 45-75 character reading range. The
   sub-pages ran to ~90 characters, the same finding the detector raised for the
   React app's body copy.

   Note the value is 54ch, not 65ch. The `ch` unit is the width of the "0"
   glyph, and in DM Sans that is narrower than the font's average character, so
   65ch measured out at ~89 real characters — no better than before. 54ch lands
   at ~74. The lesson: `ch` is not a character count, it is a glyph width, and
   the ratio differs per typeface. */
p { color: var(--muted); margin-bottom: 1.25rem; font-size: 1.05rem; max-width: 54ch; }

ul { list-style: none; margin-bottom: 1.5rem; }
ul li {
  color: var(--muted);
  padding: .5rem 0 .5rem 1.5rem;
  position: relative;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  max-width: 54ch;
}
ul li:last-child { border-bottom: none; }
ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
ul li strong { color: var(--text); font-weight: 600; }

a { color: var(--text); font-weight: 500; }
a:hover { color: var(--gold-dark); }

.lede { font-size: .95rem; color: var(--muted); margin-bottom: 2rem; }
.prose { max-width: 760px; }
.rule { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.service-link { color: var(--text); text-decoration: none; font-weight: 600; position: relative; }
.service-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.service-link:hover { color: var(--text); }
.service-link:hover::after { transform: scaleX(1); }

/* ── Name / address / phone card ─────────────────────────────────────────── */

.nap {
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.08);
  transition: box-shadow .2s;
}
.nap:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06); }
.nap h3 { font-size: 1rem; margin: 0 0 .75rem; }
.nap p { margin: .25rem 0; font-size: .95rem; color: var(--muted); }
.nap a { color: var(--text); font-weight: 500; text-decoration: underline; }
.nap a:hover { color: var(--gold-dark); }

/* ── Calls to action ─────────────────────────────────────────────────────── */

.cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.cta {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.75rem;
  border-radius: 9999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid var(--black);
  color: var(--black);
  background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.cta:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.cta-primary { background: var(--black); color: #fff; }
.cta-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }

/* ── Map ─────────────────────────────────────────────────────────────────── */

.map-wrap { margin: 2rem 0; border-radius: .75rem; overflow: hidden; border: 1px solid var(--border); }
.map-wrap iframe { display: block; width: 100%; height: 400px; border: 0; }

/* ── Cards used by the Galveston page ────────────────────────────────────── */

.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 2rem 0; }
.route-card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1.5rem; }
.route-card .route-stat { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.1rem; color: var(--text); margin-bottom: .5rem; }
.route-card .badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .5rem; }
.route-card p { margin: 0; font-size: .95rem; }

.terminals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0; }
.terminal-card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; }
.terminal-card h3 { font-size: 1rem; margin: 0 0 .35rem; }
.terminal-card .terminal-name { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); }
.terminal-card p { margin: .35rem 0 0; font-size: .9rem; }

.faq { margin: 2rem 0; }
.faq h3 { margin-top: 1.75rem; }
.faq p { margin-bottom: 1rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--border); padding: 4rem 0 2rem; background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.footer-col h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1rem;
}
.footer-col a, .footer-col p {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  margin-bottom: .5rem;
  transition: color .2s;
  max-width: none;
}
/* 24px minimum target, matching the React footer. */
.footer-col a, .footer-links a { min-height: 24px; padding: .15rem 0; }
.footer-col a:hover { color: var(--gold-dark); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.footer-bottom p { font-size: .85rem; color: var(--muted); margin: 0; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .85rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--gold-dark); }

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

@media (max-width: 768px) {
  /* The nav links collapse on small screens, but the phone must not: it is the
     highest-intent action on the page for a mobile visitor. */
  nav a:not(.nav-call) { display: none; }
  .container { padding: 0 1.25rem; }
  h2 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  nav a::after, .service-link::after { transition: none; }
}