/* Bearpath — About / methodology page.

   An ordinary scrolling document, like the booking guide and unlike the
   planner: no map, no panels, no viewport-height layout. One readable column,
   the same spruce header bar both other surfaces use, and nothing that needs
   JavaScript.

   Surfaces, ink, lines, the focus ring and --brand-font come from brand.css,
   which derives them from assets/brand/tokens/bearpath-colors.css. Both are
   linked before this file, so this page shares one palette with the planner
   rather than keeping a copy of it. */

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

:root {
  /* Availability status colours, mirroring the block in style.css so the dots
     beside "Available", "Full" and "Unknown" here are literally the colours the
     map markers use. Written as the same references, not as copied hex values,
     so a palette change reaches both files.

     Walk-up and WIC only have no Bearpath token — they are booking-METHOD
     facts, not points on an availability scale — and keep the same two hues
     style.css declares. scripts/test_brand_integration.py asserts this block
     still agrees with style.css. */
  --status-available: var(--bearpath-available);
  --status-full:      var(--bearpath-full);
  --status-no-data:   var(--bearpath-unknown);
  --status-walkup:    #2F6690;
  --status-wic:       #6B4E8F;
  --status-party-short: var(--bearpath-limited);
}

html {
  /* In-page jumps (#availability, arrived at from the planner's map key) land
     under the header rather than flush against the top of the viewport. */
  scroll-padding-top: 16px;
}

html, body {
  font-family: var(--brand-font);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.6;
}

/* Visually hidden but available to screen readers. Same primitive as the
   planner's; used here for the "(opens in a new tab)" suffixes. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Header ───────────────────────────────────────────
   The same spruce bar as the planner and the booking guide, so arriving here
   from either one does not feel like leaving the product. */

.about-header {
  background: var(--brand-primary);
  color: var(--bearpath-canvas);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  flex-wrap: wrap;
}

.about-home {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* The lockup is the only content of its link, so it needs no trailing clear
   space inside this flex row. */
.about-header .brand-logo {
  flex-shrink: 0;
  height: 22px;
  margin-right: 0;
}

.about-nav a {
  font-size: 0.8rem;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 5px;
  padding: 6px 12px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.about-nav a:hover { background: rgba(255, 255, 255, 0.14); }

.about-home:focus-visible,
.about-nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Document column ──────────────────────────────────
   ~720px of text at the default size: the approved readable measure, and
   comfortably inside the 700-800px target once the side padding is counted. */

.about {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  /* Nothing in this column may widen the page — long URLs and the contact
     address are the realistic offenders. */
  min-width: 0;
  overflow-wrap: break-word;
}

.about h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
}

.lede {
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--text);
}

.about > p { margin-top: 12px; }

.about section { margin-top: 34px; }

.about h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.about h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.about section p { margin-top: 10px; }
.about section h3 { margin-top: 18px; }

.about a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about a:hover { color: var(--brand-deep); }

/* brand.css already gives every focusable thing a ring; this only tightens the
   offset so an inline link in a paragraph does not draw a box over its
   neighbours. */
.about a:focus-visible { outline-offset: 1px; }

/* ── How Bearpath works ───────────────────────────────
   Three compact numbered cards side by side where there is room, stacked on a
   phone. auto-fit rather than a media query: the cards reflow at whatever width
   they stop fitting, which is also what happens at large text sizes. */

.steps {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  /* The numbers are rendered by .step::before below, so the native markers
     would be a second set. */
  list-style: none;
  counter-reset: step;
}

.step {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  min-width: 0;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

/* Scoped to match `.about section h3` above, which would otherwise win. */
.about .step h3 { margin-top: 0; font-size: 0.95rem; }
.about .step p  { font-size: 0.9rem; }

/* ── Availability statuses ────────────────────────────
   A definition list, because that is what it is: a term and what the term
   means. The dot sits inside the term so the pairing survives reflow. */

.statuses { margin-top: 14px; }

.statuses dt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 14px;
  font-weight: 600;
  color: var(--text);
}

.statuses dt:first-of-type { margin-top: 0; }

.statuses dd {
  margin-top: 3px;
  /* Aligns the definition under the term's text rather than under its dot. */
  padding-left: 17px;
  font-size: 0.95rem;
}

/* Same 9px dots the planner's legend, popups and itinerary cards use. */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.available   { background: var(--status-available); }
.status-dot.full        { background: var(--status-full); }
.status-dot.walkup      { background: var(--status-walkup); }
.status-dot.wic         { background: var(--status-wic); }
.status-dot.no-data     { background: var(--status-no-data); }
.status-dot.party-short { background: var(--status-party-short); }

/* The one term that names two channels needs a gap before its second dot. */
.statuses dt .status-dot + .status-dot { margin-left: 8px; }

/* ── Lists ────────────────────────────────────────────── */

.plain-list {
  margin-top: 10px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plain-list li { min-width: 0; }

/* Official-resource links are long. They must wrap inside the column. */
.links a { overflow-wrap: anywhere; }

/* ── Official-information callout ─────────────────────
   Differentiated by surface and a quiet spruce edge, not by an alarm colour.
   This is standing pre-trip advice, not an error. */

.callout {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-primary);
  border-radius: 6px;
  padding: 16px 18px;
}

/* The section rule would draw a line across the tinted panel for no reason. */
.callout h2 { border-bottom: none; padding-bottom: 0; }

/* ── Closing note ─────────────────────────────────────── */

.about-foot {
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Narrow screens ───────────────────────────────────── */

@media (max-width: 480px) {
  .about-header { padding: 10px 12px; }
  .about { padding: 20px 14px 44px; }
  .about h1 { font-size: 1.45rem; }
  .lede { font-size: 1rem; }
  .callout { padding: 13px 14px; }

  /* A header link is a thumb target here, not a pointer target. */
  .about-nav a { min-height: 44px; padding: 6px 14px; }
}