/* ============================================================================
   Base — reset, document defaults, typography, focus, utilities.
   Depends on tokens.css.
   ========================================================================= */

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header height, so in-page anchors do not land under it. */
  scroll-padding-top: 6rem;
  -moz-tab-size: 4;
  tab-size: 4;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background: var(--backdrop);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;

  /* Guards against a stray pixel of sideways scroll from the hero's inset
     blocks.
     `hidden` first as a fallback, then `clip`. They look identical, but
     `hidden` turns the body into a scroll container, which stops
     `position: sticky` working on descendants in several browsers — and the
     site header is sticky. `clip` gives the same visual result without
     creating that scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  /* A supplied photo of the wrong ratio crops rather than distorts. */
  object-fit: cover;
  background-color: var(--sky-100);
}

svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

hr {
  height: 1px;
  border: 0;
  background: var(--line);
}

:target { scroll-margin-top: 7rem; }


/* ── Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }

h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h5, h6 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: var(--leading-normal);
}

p { text-wrap: pretty; }

a {
  color: var(--action);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover { color: var(--action-hover); }

strong, b { font-weight: var(--weight-semibold); color: var(--ink); }

small { font-size: var(--text-sm); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

::selection {
  background: var(--navy-900);
  color: var(--on-dark);
}


/* ── Focus ─────────────────────────────────────────────────────────────────
   Visible on keyboard navigation, absent on mouse click. Never removed —
   an invisible focus ring makes the booking flow unusable by keyboard.
   ----------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* On navy surfaces the blue ring disappears, so switch to white. */
.on-dark :focus-visible,
.site-footer :focus-visible,
.band--dark :focus-visible {
  outline-color: var(--on-dark);
}


/* ── Skip link ─────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-toast);
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--navy-900);
  color: var(--on-dark);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--on-dark);
}


/* ── Long-form copy ────────────────────────────────────────────────────────
   Applied to admin-authored HTML (service descriptions, FAQ answers), which
   arrives as a sanitised subset of tags with no classes of its own.
   ----------------------------------------------------------------------- */

.prose {
  color: var(--ink-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  max-width: var(--container-text);
}

.prose > * + * { margin-top: var(--space-4); }

.prose h2, .prose h3, .prose h4 { margin-top: var(--space-8); }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; }

.prose ul, .prose ol {
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--action); }

.prose a { font-weight: var(--weight-medium); }

.prose strong { color: var(--ink); }

.prose blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--sky-100);
  color: var(--ink-muted);
  font-style: normal;
}


/* ── Utilities ─────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-scroll { overflow: hidden; }

/* Uppercase micro-label. Used for booking-bar field labels and eyebrows. */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.2;
}

.label--on-dark { color: var(--on-dark-muted); }

/* Booking references and vehicle registrations only. */
.mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  font-variant-ligatures: none;
}

.text-muted  { color: var(--ink-muted); }
.text-center { text-align: center; }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-muted);
  max-width: 56ch;
}

/* Tabular figures keep price columns from jittering as digits change. */
.tnum { font-variant-numeric: tabular-nums; }


/* ── Touch targets ─────────────────────────────────────────────────────────
   Scoped to `pointer: coarse`, so this affects phones and tablets only and the
   mouse-driven desktop layout is visually unchanged.

   The guideline is roughly 44x44px. Several controls sat at 32–36px, which is
   fine to click and fiddly to tap: the small buttons, the footer's social
   icons, admin icon buttons and pagination.
   ------------------------------------------------------------------------ */

@media (pointer: coarse) {
  .btn--sm { min-height: 2.75rem; padding-inline: var(--space-5); }

  .social-row a,
  .icon-btn,
  .pagination__link,
  .accordion__chevron { min-width: 2.75rem; min-height: 2.75rem; }

  /* Footer and nav links are text, so they need vertical padding rather than
     a height — without it consecutive links are ~22px apart and easy to
     mis-tap. */
  .footer-col__list a,
  .site-footer__legal a { display: inline-block; padding-block: var(--space-2); }

  .footer-col__list { gap: var(--space-1); }

  /* Native controls should never be smaller than a fingertip. */
  input[type="checkbox"],
  input[type="radio"] { min-width: 1.35rem; min-height: 1.35rem; }
}

/* iOS Safari zooms the whole page in when a focused field's text is under
   16px. Every public form already sits at 16px; these admin controls were at
   15px and caused a jarring zoom on tap. */
@media (max-width: 48rem) {
  .filter-bar .input,
  .filter-bar .select,
  .input, .select, .textarea { font-size: max(1rem, var(--text-md)); }
}


/* ── Long values ───────────────────────────────────────────────────────────
   Email addresses and booking references have no spaces to break at, so on a
   narrow screen they push their container wider than the viewport.
   ------------------------------------------------------------------------ */

.summary-row__value,
.detail-list__value,
.review-card__meta,
.footer-contact a { overflow-wrap: anywhere; }


/* ── Print ─────────────────────────────────────────────────────────────────
   Customers print booking confirmations. Strip the furniture and keep the
   details legible on paper.
   ----------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .booking-bar,
  .skip-link,
  .cta-band { display: none !important; }

  body { background: #fff; color: #000; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }
}