/* Axlegate — first-party garage / MOT template (S114).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking.

   Voice: INDUSTRIAL AND BRIGHT. Petrol blue and safety orange on cool white, condensed uppercase
   headings, 6px radii — against voltway-electrical-studio's near-black dark ground,
   greenfold-landscapes-studio's oat-and-serif and copperline-plumbing-studio's warm-white pills.

   This template's lead magnet is a REAL MOT history lookup (see src/mot.js and server.mjs). The
   registration field is styled as an actual UK plate, because that is the single most recognisable
   object in this trade and it tells the visitor what to do without a word of instruction. */

:root {
  --petrol: #12232e;
  --petrol-mid: #1d3a4c;
  --petrol-soft: #e6edf1;
  --orange: #ff6b1a;
  --orange-deep: #db5410;
  --steel: #dfe5e9;
  --paper: #f7f9fa;
  --card: #ffffff;
  --line: #d3dbe0;
  --ink: #14202a;
  --muted: #56656f;
  --pass: #1f7a45;
  --fail: #b8321f;
  --plate: #f5d312;
  --radius: 6px;
  --condensed: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* text-safe accents (S116): same hue and saturation, darkened only in lightness
     until they meet WCAG AA on white. The bright originals stay for fills and art. */
  --orange-text: #d04900;
  --orange-deep-text: #cc4e0f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 { font-family: var(--condensed); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 12;
  background: var(--orange); color: var(--petrol); padding: 0.55rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.35rem; background: var(--petrol); color: #fff;
  border-bottom: 3px solid var(--orange); position: relative;
}
.wordmark {
  font-family: var(--condensed); font-size: 1.65rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none; color: #fff; white-space: nowrap;
}
.wordmark span[aria-hidden] { color: var(--orange-text); }
.nav-disclosure summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5rem 1rem; border: 1.5px solid rgba(255,255,255,0.35); border-radius: var(--radius); color: #fff;
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--orange); border-color: var(--orange-text); }
.nav-disclosure nav {
  position: absolute; right: 1.35rem; left: 1.35rem; top: calc(100% + 0.4rem); z-index: 9;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--petrol-mid); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius);
  padding: 0.8rem; box-shadow: 0 16px 34px rgba(18, 35, 46, 0.45);
}
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 600; padding: 0.6rem 0.75rem; border-radius: 4px; color: #fff; }
.nav-disclosure nav a:not(.button):hover { background: rgba(255,255,255,0.12); }

/* Desktop inline nav is OPTED INTO by main.js (matchMedia adds .nav-inline and sets [open]).
   A closed <details> does not render its children, so pure CSS cannot inline this menu at desktop
   widths — without JavaScript the summary button stays visible and usable instead. */
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav {
  position: static; flex-direction: row; align-items: center; gap: 0.3rem;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.7rem; }

.header-call { display: none; }
@media (max-width: 799px) {
  .site-header { gap: 0.6rem; }
  .header-call { display: inline-block; margin-left: auto; }
}
@media (max-width: 479px) {
  .site-header { padding: 0.75rem 0.9rem; gap: 0.45rem; }
  .wordmark { font-size: 1.3rem; }
  .header-call { font-size: 0.9rem; }
  .nav-disclosure summary { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--condensed); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--orange); color: var(--petrol);
  border: 1.5px solid var(--orange); border-radius: var(--radius);
  padding: 0.72rem 1.6rem; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.button:hover { background: var(--orange-deep); border-color: var(--orange-deep-text); transform: translateY(-1px); }
.button:disabled { opacity: 0.6; cursor: progress; transform: none; }
.button-small { padding: 0.45rem 1rem; font-size: 0.95rem; }
.button-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.button-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.button-light { background: #fff; color: var(--petrol); border-color: #fff; }
.button-light:hover { background: var(--steel); border-color: var(--steel); }
.call-link { font-weight: 700; color: var(--orange-text); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero, carrying the MOT checker ---------- */
.hero { background: var(--petrol); color: #fff; padding: 3rem 1.35rem 3.25rem; }
.hero-inner {
  max-width: 70rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: start;
}
@media (min-width: 940px) { .hero-inner { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.eyebrow {
  font-family: var(--condensed); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 0.9rem;
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); max-width: 15ch; }
.hero-sub { margin-top: 1rem; font-size: 1.1rem; max-width: 44ch; color: #b9c6ce; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.4rem; }
.hero-badges li { font-size: 0.93rem; font-weight: 600; color: #d3dde3; padding-left: 1.2rem; position: relative; }
.hero-badges li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.6rem; height: 0.6rem; background: var(--orange); border-radius: 2px;
}

/* ---------- The MOT checker — this template's signature tool ---------- */
.mot-tool {
  background: var(--card); color: var(--ink);
  border-radius: var(--radius); border: 1px solid var(--line);
  padding: 1.5rem; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}
.mot-tool h2 { font-size: 1.6rem; }
.mot-tool > p { color: var(--muted); margin-top: 0.4rem; font-size: 0.97rem; }
.mot-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; align-items: stretch; }
.mot-field { flex: 1 1 12rem; }
.mot-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }

/* A real UK plate. The blue EU-style band is deliberately omitted — plates vary and this is a
   demonstration, so it stays a generic yellow plate rather than imitating a specific issue. */
.plate-input {
  width: 100%;
  font-family: var(--condensed); font-size: 1.9rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: #111; background: var(--plate);
  border: 2px solid #111; border-radius: 5px;
  padding: 0.5rem 0.6rem;
}
.plate-input::placeholder { color: rgba(17,17,17,0.42); }
.mot-form .button { align-self: flex-end; flex: 0 0 auto; padding-top: 0.82rem; padding-bottom: 0.82rem; }

.mot-status { margin-top: 0.9rem; font-weight: 600; min-height: 1.4em; }
.mot-status[data-tone="warn"] { color: var(--fail); }
.mot-status[data-tone="busy"] { color: var(--muted); }
.mot-status[data-tone="preview"] { color: var(--petrol-mid); }
.mot-note { margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); }

.mot-result { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.mot-vehicle { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mot-plate {
  font-family: var(--condensed); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.1em;
  background: var(--plate); color: #111; border: 2px solid #111; border-radius: 4px;
  padding: 0.15rem 0.7rem;
}
.mot-vehicle h3 { font-size: 1.4rem; }
.mot-spec { color: var(--muted); font-size: 0.94rem; }
.mot-headline {
  margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius);
  font-family: var(--condensed); font-size: 1.35rem; text-transform: uppercase;
  background: var(--petrol-soft); color: var(--petrol);
}
.mot-headline.is-pass { background: #e4f3ea; color: var(--pass); }
.mot-headline.is-fail { background: #fbe9e6; color: var(--fail); }
.mot-subhead { font-family: var(--condensed); font-size: 1.15rem; text-transform: uppercase; margin-top: 1.4rem; color: var(--muted); }
.mot-tests { margin-top: 0.6rem; }
.mot-test { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.mot-test-head { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: baseline; }
/* The per-test verdict badge. Named .mot-verdict, NOT .mot-result — the container is
   .mot-result, and reusing that name made every child inherit the badge's condensed uppercase,
   bold weight and padding, so the whole panel rendered shouting. A class name collision between
   a container and one of its children is invisible in the source and obvious in innerText. */
.mot-verdict {
  font-family: var(--condensed); font-weight: 700; font-size: 1rem; text-transform: uppercase;
  border-radius: 3px; padding: 0.1rem 0.5rem;
}
.mot-verdict.is-pass { background: #e4f3ea; color: var(--pass); }
.mot-verdict.is-fail { background: #fbe9e6; color: var(--fail); }
.mot-date { font-weight: 600; }
.mot-miles { color: var(--muted); font-size: 0.93rem; }
.mot-defects { margin-top: 0.55rem; padding-left: 0.9rem; border-left: 3px solid var(--line); }
.mot-defects.is-fail { border-left-color: var(--fail); }
.mot-defects.is-advisory { border-left-color: var(--orange-text); }
.mot-defects-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.mot-defects ul { margin-top: 0.2rem; }
.mot-defects li { font-size: 0.93rem; color: var(--ink); padding: 0.12rem 0; }
.mot-source { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- Section frame + filter strip ---------- */
.section { max-width: 70rem; margin: 0 auto; padding: 3rem 1.35rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); }
.section-intro { margin-top: 0.55rem; max-width: 52ch; color: var(--muted); }
.filter-count { font-family: var(--condensed); font-size: 1.15rem; text-transform: uppercase; color: var(--petrol); font-weight: 700; }

.strip { background: var(--steel); padding: 1.35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-form {
  max-width: 70rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: end;
}
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { color: var(--petrol); font-size: 0.88rem; font-weight: 700; }
.filter-form select {
  width: 100%; margin-top: 0.35rem; padding: 0.68rem 0.75rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 4px;
}

/* ---------- Cards ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(18, 35, 46, 0.16); }
.card-body { padding: 1.1rem 1.25rem 1.3rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-size: 1.3rem; }
.card-where { font-family: var(--condensed); font-size: 1.15rem; font-weight: 700; color: var(--orange-deep-text); white-space: nowrap; }
.card-meta { margin-top: 0.4rem; color: var(--muted); font-size: 0.96rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.card-tags li {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--petrol); background: var(--petrol-soft); border-radius: 3px; padding: 0.2rem 0.6rem;
}
.filter-empty { margin-top: 1.75rem; padding: 1.4rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- CSS artwork (all imagery is authored gradients) ----------
   Construction rules, all learned by LOOKING at renders rather than at source:
   1. `background-repeat: no-repeat` on the shared selector — fractional layers tile otherwise.
   2. Parts of an object must TOUCH, or they read as unrelated marks.
   3. Round things are DISCRETE radial-gradients; a repeating radial clipped into a band stacks
      into pillars.
   4. A glow needs a GRADUAL falloff; a hard alpha stop renders as a solid disc.
   5. A layer must reach the thing it sits on, or a strip of bare background shows through. */

.art-mot, .art-tyres, .art-brakes, .art-engine, .art-diagnostics, .art-battery {
  background-repeat: no-repeat;
  background-color: var(--petrol-soft);
}

/* Car raised on a two-post lift: body, cabin, wheels, and the lift arms under the sills. */
/* Wheel and tyre: a black tyre wall, an alloy face and five wheel bolts.
   NO conic gradient. A repeating-conic paints its ENTIRE layer box and is not clipped by the
   circles beneath it, so the first version of this panel rendered as a dark square starburst and
   the brake disc as a sunburst. Every round part here is a discrete radial-gradient.
   Sizes are in PIXELS, not percentages: a percentage-sized "circle" in a non-square box is an
   ellipse, and a wheel that is not round is not a wheel. */
/* Brake disc: a drilled disc with a hat and a caliper clamped over its edge. */
/* Engine bay: a cam cover with ribs, an oil filler cap and the block beneath. */
/* Diagnostics: a handheld reader showing a code and a trace. */
/* Battery: a case with two terminals and the polarity bars. */
/* ---------- Feature grid + bands ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-grid li { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); padding: 1.5rem; }
.feature-grid h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.feature-grid p { color: var(--muted); font-size: 0.97rem; }

.band { background: var(--petrol); color: #fff; padding: 3.5rem 1.35rem; text-align: center; }
.band p { max-width: 50ch; margin: 0.85rem auto 1.6rem; color: #b9c6ce; }

/* ---------- Interior pages ---------- */
.page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.35rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--orange-deep-text); }
.page-hero { padding: 1.5rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.3rem); }
.page-hero p { margin-top: 0.85rem; max-width: 54ch; color: var(--muted); }

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.75rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start;
}
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.75rem;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
}
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--petrol); min-height: 1.4em; }

.panel { background: var(--petrol-soft); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); padding: 1.6rem; align-self: start; }
.panel h2 { font-size: 1.4rem; }
.steps { counter-reset: step; margin-top: 1.1rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.15rem 3rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.05rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--condensed); font-weight: 700; font-size: 1.15rem; color: #fff;
  background: var(--orange); border-radius: 4px;
}
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--muted); font-size: 0.96rem; }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }

/* ---------- Footer ---------- */
footer {
  background: var(--petrol); color: #93a4ae;
  padding: 2.5rem 1.35rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
}
.wordmark-footer { font-family: var(--condensed); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 0.4rem; }
footer .call-link { color: var(--orange); }
.footer-truth { max-width: 34ch; font-size: 0.88rem; color: #61737e; align-self: end; }
/* Build credit — carried by every template in this library, matching the deployed demos. */
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; color: #61737e; }
.footer-powered a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: var(--orange); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover, .card:hover { transform: none; }
}

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* <img> box behaviour for card-art (added with the photography swap). */
.card-art { display: block; width: 100%; object-fit: cover; }