/* Privado shared design system. Used by the regional charter pages. */

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

:root {
  --red: #E34A3F;
  --cream: #FAFAF8;
  --light: #F4F3EF;
  --mid: #E8E6E0;
  --text: #2A2A2A;
  --muted: #7A7A7A;
  --white: #FFFFFF;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 52px;
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
nav.scrolled {
  background: linear-gradient(135deg, rgba(32,33,30,0.97) 0%, rgba(126,97,58,0.97) 100%);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { height: 36px; width: auto; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  transition: color 0.2s;
}
nav.scrolled .nav-links a { color: rgba(255,255,255,0.92); }
.nav-links a:hover { color: var(--red); }
.nav-cta {
  background: var(--red);
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 2px;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  transition: background 0.2s, color 0.2s !important;
}
.nav-cta:hover { background: #c43d33 !important; color: var(--white) !important; }

/* Regional pages open on a solid nav because their hero is shorter. */
nav.solid {
  background: linear-gradient(135deg, rgba(32,33,30,0.97) 0%, rgba(126,97,58,0.97) 100%);
  backdrop-filter: blur(16px);
}

/* ── BUTTONS ── */
.btn-primary {
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  padding: 15px 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
}
.btn-primary:hover { background: #c43d33; transform: translateY(-1px); }
.btn-ghost {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 15px 34px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.7); color: var(--white); }

/* ── REGIONAL PAGE HERO ── */
.region-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 140px 0 80px;
}
.region-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 45%;
  transform: scale(1.04);
}
/* Two-layer scrim. The horizontal layer is weighted to the left so the text
   column always has a dark enough base for white type (WCAG AA), while the
   right side of the photo stays bright. The vertical layer covers the fixed
   nav. Measured against the brightest patch of each hero, not eyeballed. */
.region-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,12,12,0.55) 0%, rgba(12,12,12,0) 22%),
    linear-gradient(to right,
      rgba(12,12,12,0.88) 0%,
      rgba(12,12,12,0.80) 32%,
      rgba(12,12,12,0.55) 52%,
      rgba(12,12,12,0.22) 74%,
      rgba(12,12,12,0.10) 100%);
}
.region-hero-content { position: relative; z-index: 2; padding: 0 52px; max-width: 760px; }
.region-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--white);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}
.region-hero h1 em { font-style: italic; color: rgba(255,255,255,0.85); }
.region-hero p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.82);
  line-height: 1.75;
  margin-bottom: 34px;
  max-width: 560px;
}
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-eyebrow span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--red); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── BREADCRUMB ── */
.crumb {
  background: var(--white);
  border-bottom: 1px solid var(--mid);
  padding: 14px 52px;
  font-size: 12px;
  color: var(--muted);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--red); }
.crumb span { color: var(--text); }

/* ── SECTION SHARED ── */
section { padding: 100px 52px; }
.section-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--red); }
.section-eyebrow span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 20px;
}
.section-subtitle {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 620px;
}
.prose { max-width: 760px; }
.prose p {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.85;
  margin-top: 18px;
}
.prose p strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--red); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* ── AIRPORT TABLE ── */
.airport-wrap { margin-top: 52px; overflow-x: auto; }
.airport-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.airport-table caption {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 14px;
  font-weight: 300;
}
.airport-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 18px 12px 0;
  border-bottom: 1px solid var(--mid);
  white-space: nowrap;
}
.airport-table td {
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--mid);
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  vertical-align: top;
}
.airport-table td.ap-name { color: var(--text); font-weight: 500; }
.airport-table td.ap-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  color: var(--red);
  white-space: nowrap;
}

/* ── TOWN CHIPS ── */
.towns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.town {
  background: var(--white);
  border: 1px solid var(--mid);
  border-radius: 2px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}

/* ── ROUTE CARDS ── */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.route-card {
  background: var(--white);
  border: 1px solid var(--mid);
  border-radius: 4px;
  padding: 30px 28px;
}
.route-pair {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 10px;
}
.route-meta { font-size: 12px; letter-spacing: 0.04em; color: var(--red); margin-bottom: 12px; }
.route-card p { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.7; }

/* ── SPLIT PANEL ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split img { width: 100%; height: 460px; object-fit: cover; border-radius: 4px; display: block; }

/* ── FAQ ── */
.faq-section { background: var(--light); }
.faq-inner { max-width: 820px; }
.faq-grid { margin-top: 48px; display: flex; flex-direction: column; border-top: 1px solid var(--mid); }
.faq-item { border-bottom: 1px solid var(--mid); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--red);
  flex-shrink: 0;
  transition: transform 0.25s;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s; }
.faq-a.open { max-height: 460px; padding-bottom: 20px; }
.faq-a p { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.75; }

/* ── CTA BAND ── */
.cta-band {
  background: var(--light);
  padding: 84px 52px;
  text-align: center;
}
.cta-band h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 18px;
}
.cta-band p {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto 32px;
}

/* ── NEARBY LINKS ── */
.nearby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.nearby a {
  display: block;
  background: var(--white);
  border: 1px solid var(--mid);
  border-radius: 4px;
  padding: 26px 24px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.nearby a:hover { border-color: var(--red); transform: translateY(-2px); }
.nearby strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 6px;
}
.nearby span { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.6; }

/* ── DISCLAIMER ── */
.disclaimer {
  margin-top: 44px;
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 760px;
  border-left: 3px solid var(--mid);
  padding-left: 16px;
}

/* ── FOOTER ── */
footer {
  background: #1A1A1A;
  color: rgba(255,255,255,0.65);
  padding: 64px 52px 32px;
}
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-brand img { height: 48px; width: auto; margin-bottom: 20px; }
.footer-brand p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.45);
  max-width: 260px;
}
.footer-col h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: rgba(255,255,255,0.85); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.3); text-decoration: none; }
.footer-bottom a:hover { color: rgba(255,255,255,0.6); }

/* ── MOBILE ── */
@media (max-width: 900px) {
  nav { padding: 18px 24px; }
  .nav-links { display: none; }
  section { padding: 72px 24px; }
  .region-hero-content { padding: 0 24px; }
  .region-hero { min-height: 460px; padding: 120px 0 64px; }
  .crumb { padding: 12px 24px; }
  .routes { grid-template-columns: 1fr; }
  .nearby { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split img { height: 280px; }
  .cta-band { padding: 64px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  footer { padding: 48px 24px 24px; }
}