/* ==========================================================================
   FIND US — arrival page
   --------------------------------------------------------------------------
   The brief: a guest reads this in a car, on a phone, possibly lost and
   possibly late. So the page is built as wayfinding rather than as an article.
   Everything here serves that: the essentials sit above everything else, the
   three arrival modes are a choice rather than a scroll, and the ground is
   ivory so it is readable in daylight through a windscreen.

   Uses only existing tokens from app.css. No new custom properties, no inline
   styles (Imunify 405s on those), no JS — the mode switcher is CSS-only radios
   so it works keyboard-first and without Alpine.
   ========================================================================== */

.page-find-us { background: var(--cream); }

/* ── The essentials card ────────────────────────────────────────────────────
   Lifted so it overlaps the hero's lower edge. This is the page's one piece of
   deliberate drama, and it is also the single most useful thing on it — the
   flair and the function are the same object.                                */
/* The overlap was -96px, which ate the hero subtitle's last line. Give the hero
   copy room to finish, then lift the card just enough to read as overlapping. */
.page-find-us .hero__content { padding-bottom: var(--space-9); }

.fu-essentials {
  position: relative;
  z-index: 3;
  margin: calc(var(--space-7) * -1) auto var(--space-8);
  max-width: 1060px;
  padding: 0 var(--space-5);
}

.fu-essentials__card {
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.fu-essentials__address {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--charcoal);
  margin: 0 0 var(--space-3);
}

/* The postcode is what people actually type into a sat-nav at speed, so it is
   treated as data, not prose. */
.fu-essentials__postcode {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--pink-dark);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

.fu-essentials__note {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--mid);
  margin: var(--space-4) 0 0;
  max-width: 44ch;
}

.fu-actions { display: flex; flex-direction: column; gap: var(--space-2); }

.fu-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  background: var(--warm-white);
  font-family: var(--sans);
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.fu-action:hover,
.fu-action:focus-visible {
  background: var(--white);
  border-color: var(--pink);
  transform: translateX(3px);
}
.fu-action--primary {
  background: var(--pink-dark);
  border-color: var(--pink-dark);
  color: var(--white);
}
.fu-action--primary:hover,
.fu-action--primary:focus-visible { background: var(--pink); border-color: var(--pink); }

.fu-action__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: none;
}
.fu-action--primary .fu-action__meta { color: rgba(255,255,255,0.72); }

/* ── Map ────────────────────────────────────────────────────────────────────
   Full-bleed, sitting under the essentials card. Previously an unclassed
   <section> carrying inline styles, which meant it could be neither themed nor
   given a brand-asset slot like every other section on the site. */
.fu-map { background: var(--dark); padding: 0; }
.fu-map__frame { position: relative; width: 100%; height: 400px; overflow: hidden; }
.fu-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 620px) { .fu-map__frame { height: 340px; } }

/* ── Arrival mode switcher ──────────────────────────────────────────────────
   Radios, not JS. Every panel is visible when CSS fails, and the labels are
   real <label>s so keyboard and screen readers get it for free.              */
.fu-arrive { max-width: 1060px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-9); }

.fu-arrive__radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.fu-arrive__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
}

.fu-arrive__tab {
  flex: 1;
  cursor: pointer;
  padding: var(--space-5) var(--space-4);
  font-family: var(--sans);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--fast), border-color var(--fast);
}
.fu-arrive__tab:hover { color: var(--ink); }

.fu-arrive__radio:focus-visible + .fu-arrive__tab { outline: 2px solid var(--pink); outline-offset: -4px; }

#fu-mode-car:checked   ~ .fu-arrive__tabs [for="fu-mode-car"],
#fu-mode-train:checked ~ .fu-arrive__tabs [for="fu-mode-train"],
#fu-mode-bus:checked   ~ .fu-arrive__tabs [for="fu-mode-bus"] {
  color: var(--charcoal);
  border-bottom-color: var(--gold);
}

/* Panels are shown by default — if this stylesheet never loads, the guest
   still gets all three sets of directions rather than a blank page. */
#fu-mode-car:checked   ~ .fu-arrive__panels > :not(.fu-panel--car),
#fu-mode-train:checked ~ .fu-arrive__panels > :not(.fu-panel--train),
#fu-mode-bus:checked   ~ .fu-arrive__panels > :not(.fu-panel--bus) { display: none; }

.fu-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.fu-panel__title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 300;
  color: var(--charcoal);
  margin: 0;
}
.fu-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fu-badge {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  border: 1px solid var(--border);
  padding: 5px var(--space-3);
}

/* ── Driving steps — the route line ─────────────────────────────────────────
   A single hairline threads the six steps together, with serif numerals sitting
   on it. It reads as a road, and it is the page's signature.                 */
.fu-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.fu-steps::before {
  content: '';
  position: absolute;
  left: 15px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--stone) 12%, var(--stone) 88%, transparent);
}
.fu-step { position: relative; padding: 0 0 var(--space-6) 56px; }
.fu-step:last-child { padding-bottom: 0; }
.fu-step__num {
  position: absolute;
  left: 0; top: -2px;
  width: 31px; height: 31px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--stone);
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--pink-dark);
}
.fu-step__title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--charcoal);
  margin: 0 0 var(--space-2);
}
.fu-step__detail {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--mid);
  margin: 0;
  max-width: 52ch;
}

.fu-prose p {
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--mid);
  max-width: 62ch;
  margin: 0 0 var(--space-5);
}
.fu-prose strong { color: var(--charcoal); font-weight: 500; }

/* Typical journey times — a quick "is the train realistic from here?" scan. */
/* A callout for the one thing a driver most needs before setting off. */
.fu-note {
  max-width: 62ch;
  margin: var(--space-7) 0 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-left: 2px solid var(--gold);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--mid);
}

/* Journey times / routes. Constrained to the prose measure — left full-width
   the entries stretch into one cramped line detached from the text. */
.fu-origins {
  max-width: 62ch;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-light);
}
.fu-origins__cap {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
.fu-origins__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-7);
}
.fu-origin { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); border-bottom: 1px dotted var(--stone); padding-bottom: var(--space-2); }
.fu-origin__city { font-family: var(--sans); font-size: var(--text-sm); color: var(--mid); }
.fu-origin__time { font-family: var(--serif); font-size: var(--text-md); color: var(--pink-dark); white-space: nowrap; }

.fu-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.fu-link {
  font-family: var(--sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--pink-light);
  padding-bottom: 2px;
  transition: color var(--fast), border-color var(--fast);
}
.fu-link:hover, .fu-link:focus-visible { color: var(--charcoal); border-bottom-color: var(--gold); }
/* Marks the links that leave the site, so the internal one reads as internal. */
.fu-link__ext { font-size: 0.85em; opacity: 0.6; }

.fu-footnote {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

/* Taxi ranks — pulled from the getting-there page, not duplicated. */
.fu-taxis { margin-top: var(--space-7); display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fu-taxi {
  border: 1px solid var(--border-light);
  background: var(--warm-white);
  padding: var(--space-5);
}
.fu-taxi__badge {
  font-family: var(--sans); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: var(--space-2);
}
.fu-taxi__name { font-family: var(--serif); font-size: var(--text-lg); color: var(--charcoal); margin: 0 0 var(--space-2); }
.fu-taxi__tel { font-family: var(--sans); font-size: var(--text-md); color: var(--pink-dark); text-decoration: none; letter-spacing: 0.04em; }
.fu-taxi__tel:hover { color: var(--charcoal); }

/* ── Parking — the one dark band, so the page has rhythm ────────────────────*/
.fu-parking { background: var(--dark); color: var(--stone); }
.fu-parking .fu-prose p { color: var(--light); }
.fu-parking .fu-prose strong { color: var(--white); }

/* The shared editorial header defaults to dark ink, which is invisible on the
   one dark band. Lift it here rather than touching the global component. */
.fu-parking .editorial-section-header__title,
.fu-parking .editorial-section-header__title .hero__title-line { color: var(--warm-white); }
.fu-parking .editorial-section-header__rule { background: var(--gold); opacity: 0.6; }

.fu-parking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}

.fu-parking__note {
  border-left: 2px solid var(--gold);
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--light);
  margin: var(--space-6) 0 0;
}

.fu-carparks { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.fu-carpark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
  transition: padding-left var(--fast);
}
.fu-carpark:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
.fu-carpark:hover, .fu-carpark:focus-visible { padding-left: var(--space-3); }
/* These are spans inside an <a>, so they must be made block-level explicitly —
   left inline they run the name, postcode and note together on one line. */
.fu-carpark__name { display: block; font-family: var(--serif); font-size: var(--text-lg); color: var(--warm-white); margin: 0 0 5px; }
.fu-carpark__meta { display: block; font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.fu-carpark__note { display: block; font-family: var(--sans); font-size: var(--text-sm); line-height: 1.6; color: var(--light); margin: var(--space-2) 0 0; max-width: 44ch; }
.fu-carpark__go { font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }
.fu-carpark:hover .fu-carpark__go { color: var(--gold); }

/* ── Handoff to /getting-there ──────────────────────────────────────────────*/
.fu-onward {
  display: block;
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-8);
  background: var(--white);
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: box-shadow var(--mid-speed), transform var(--mid-speed);
}
.fu-onward:hover, .fu-onward:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Spans inside an <a> again — block or they run together on one line. */
.fu-onward__eyebrow { display: block; font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.fu-onward__title { display: block; font-family: var(--serif); font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 300; line-height: 1.2; color: var(--charcoal); margin: var(--space-3) 0 var(--space-2); }
.fu-onward__sub { display: block; font-family: var(--sans); font-size: var(--text-base); line-height: 1.65; color: var(--mid); margin: 0; max-width: 60ch; }

/* Two cream sections back to back double their vertical padding, leaving a
   dead band between the tips and this card. Close the seam. */
.fu-onward-wrap { padding-top: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  .fu-essentials { margin-top: calc(var(--space-9) * -1); }
  .fu-essentials__card { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
  .fu-parking__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 620px) {
  .fu-arrive__tabs { flex-direction: column; border-bottom: 0; gap: var(--space-2); }
  .fu-arrive__tab { border: 1px solid var(--border); border-bottom-width: 1px; margin-bottom: 0; text-align: left; padding: var(--space-4) var(--space-5); }
  #fu-mode-car:checked   ~ .fu-arrive__tabs [for="fu-mode-car"],
  #fu-mode-train:checked ~ .fu-arrive__tabs [for="fu-mode-train"],
  #fu-mode-bus:checked   ~ .fu-arrive__tabs [for="fu-mode-bus"] {
    border-color: var(--gold);
    background: var(--warm-white);
  }
  .fu-step { padding-left: 46px; }
  .fu-carpark { flex-direction: column; gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .fu-action, .fu-carpark, .fu-onward { transition: none; }
  .fu-action:hover, .fu-carpark:hover, .fu-onward:hover { transform: none; }
}

/* ── LIVE A55 STATUS (car panel) ──────────────────────────────────
   Sits above the driving steps, because a driver's first question is
   whether the road is moving, not which junction to leave at. Tone is
   whatever TransportService decided — this file never re-judges it.  */
.fu-a55 {
  margin: var(--space-6) 0 var(--space-7);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fu-a55-tone);
  background: var(--white);
}
.fu-a55--good { --fu-a55-tone: #5c8a5e; }
.fu-a55--warn { --fu-a55-tone: var(--gold); }
.fu-a55--bad  { --fu-a55-tone: var(--pink-dark); }

.fu-a55__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.fu-a55__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fu-a55-tone);
}
/* A slow pulse says "this is a reading, not a printed claim". */
@media (prefers-reduced-motion: no-preference) {
  .fu-a55__dot { animation: fu-a55-pulse 2.6s ease-in-out infinite; }
}
@keyframes fu-a55-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.45); opacity: 0.5; }
}
.fu-a55__label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
}
.fu-a55__verdict {
  margin-left: auto;
  font-family: var(--serif);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--fu-a55-tone);
}

.fu-a55__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-3);
  border-top: 1px solid var(--border-light);
}
.fu-a55__inc {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}
.fu-a55__inc:last-child { border-bottom: 0; }
.fu-a55__inc-where {
  display: block;
  margin-bottom: 3px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.fu-a55__inc-what {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--charcoal);
}

.fu-a55__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-light);
  background: var(--warm-white);
}
.fu-a55__stamp {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--muted);
}
.fu-a55__more {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-dark);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pink-light);
  transition: color var(--fast), border-color var(--fast);
}
.fu-a55__more:hover,
.fu-a55__more:focus-visible { color: var(--charcoal); border-bottom-color: var(--gold); }

@media (max-width: 600px) {
  .fu-a55__bar { flex-wrap: wrap; }
  .fu-a55__verdict { margin-left: 0; flex-basis: 100%; padding-left: calc(8px + var(--space-3)); }
}

/* The car panel links down to parking; clear the fixed header on the jump. */
#parking { scroll-margin-top: 104px; }

/* The council-charges link under the parking prose. */
.fu-parking__charges { margin: var(--space-5) 0 0; }

/* ── Dark-band corrections ────────────────────────────────────────
   .fu-note and .fu-link are both tuned for the ivory arrival panels
   (--mid ink, --pink-dark link) and go nearly invisible on the one
   dark band. Lift them here rather than weakening the originals.
   The unloading note is the more useful of the two callouts, so it
   sits brighter than the overflow note beneath it.                 */
.fu-parking .fu-note {
  color: var(--warm-white);
  margin-top: var(--space-6);
}
.fu-parking .fu-link {
  color: var(--pink-light);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.fu-parking .fu-link:hover,
.fu-parking .fu-link:focus-visible {
  color: var(--white);
  border-bottom-color: var(--gold);
}