/* ==========================================================================
   BTS BLVD — shared chrome for the scrolling content pages
   (partner.html, bts-boulevard.html, directory.html)

   styles.css owns the map app; this file owns everything that is a normal
   document: the wrapper, top nav, hero, prose and footer. Page-specific rules
   live in their own file loaded after this one (e.g. css/partner.css).
   ========================================================================== */

body {
  min-height: 100%;
  background: var(--paper-2);
}

.contentPage {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 80px;
}
/* The directory lists every business, so it earns a wider measure. */
.contentPage--wide { max-width: 1080px; }

/* ── Top nav ───────────────────────────────────────────────────────────── */

.topnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
}
.topnav__brand { text-decoration: none; }
.topnav__mark { margin: 0; }
/* The brand mark is drawn for the purple sidebar, where both words are white.
   These pages are on paper, so BLVD takes the ink colour and BTS keeps its red
   drop shadow against a purple face. */
.topnav__mark .brand__bts { font-size: 22px; color: var(--purple); text-shadow: 2px 2px 0 var(--red); }
.topnav__mark .brand__blvd { font-size: 19px; color: var(--ink); }
.topnav__links { display: flex; flex-wrap: wrap; gap: 14px; }
.topnav__back {
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  text-decoration: none;
}
.topnav__back:hover { color: var(--purple); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.pageHero {
  padding: 40px 32px;
  border-radius: var(--radius);
  color: #fff;
  background: radial-gradient(120% 120% at 0% 0%, #9B4DFF 0%, var(--purple) 42%, var(--purple-deep) 100%);
  box-shadow: var(--shadow-lg);
}
.pageHero h1 {
  margin: 0;
  font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
}
.pageHero__lede {
  margin: 14px 0 0;
  font-size: 16px; line-height: 1.55; font-weight: 500;
  color: rgba(255,255,255,.92);
  max-width: 60ch;
}
.pageHero__cta {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff; color: var(--purple);
  font-size: 14.5px; font-weight: 800; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .13s ease, box-shadow .13s ease;
}
.pageHero__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Prose ─────────────────────────────────────────────────────────────── */

.prose { margin-top: 40px; }
.prose h2 {
  margin: 36px 0 0;
  font-size: 22px; font-weight: 900; letter-spacing: -.01em; color: var(--ink);
}
.prose h3 {
  margin: 24px 0 0;
  font-size: 16px; font-weight: 800; color: var(--ink);
}
.prose p,
.prose li {
  font-size: 15px; line-height: 1.65; color: var(--ink-soft);
}
.prose p { margin: 12px 0 0; max-width: 66ch; }
.prose ul { margin: 12px 0 0; padding-left: 20px; max-width: 66ch; }
.prose li { margin-top: 6px; }
.prose a { font-weight: 700; }
.prose strong { color: var(--ink); }

/* Key facts pulled out of the prose so the "where / when" answer is scannable
   — and so a search engine sees it as a labelled pair, not a sentence. */
.factGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.fact {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fact__label {
  margin: 0;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--purple);
}
.fact__value { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); font-weight: 600; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { margin-top: 16px; }
.faq__item {
  margin-top: 12px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.faq__item h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.faq__item p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

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

.siteFooter--page {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.siteFooter--page p { margin: 0; font-size: 12px; color: var(--ink-soft); }
.siteFooter--page a { color: var(--purple); font-weight: 700; text-decoration: underline; }
.siteFooter--page .siteFooter__nav { margin-bottom: 10px; }
.siteFooter__nav a { margin: 0 8px; }

@media (max-width: 640px) {
  .pageHero { padding: 30px 22px; }
  .pageHero h1 { font-size: 28px; }
}