/* ==========================================================================
   SCOTT COUNTRY — Base + layout
   Direction B "Specialist System" — approved 2026-08-04
   ========================================================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-surface);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border: 0; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link); }
body.dark a:hover { color: var(--accent-on-dark); }

button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: var(--lh-tight); color: var(--text-primary); }

/* Focus visibility (WCAG) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--accent-on-dark); }

/* Utilities */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); font-weight: var(--fw-body-bold); color: var(--accent-on-dark); }
.dark .eyebrow { color: var(--accent-on-dark); }
.section { padding-block: var(--section-pad); }
.section--muted { background: var(--bg-muted); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-3xl); }
.section-link { font-weight: var(--fw-body-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.section-link:hover { color: var(--accent); }

/* Grids */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }

/* ==========================================================================
   Homepage colour schemes — exact 1:1 with the live Dawn theme:
     scheme-dark  = color-scheme-4 (pure black)
     scheme-navy  = color-scheme-5 (#023364)
     scheme-gray  = color-scheme-3 (#353535)
   ========================================================================== */
.scheme-dark  { background: #000;   color: #fff; }
.scheme-navy  { background: #023364; color: #fff; }
.scheme-gray  { background: #353535; color: #fff; }
.scheme-dark h1, .scheme-dark h2, .scheme-dark h3, .scheme-dark h4, .scheme-dark h5,
.scheme-navy h1, .scheme-navy h2, .scheme-navy h3, .scheme-navy h4, .scheme-navy h5,
.scheme-gray h1, .scheme-gray h2, .scheme-gray h3, .scheme-gray h4, .scheme-gray h5 { color: #fff; }
.scheme-dark p, .scheme-navy p, .scheme-gray p { color: rgba(255,255,255,.85); }
.scheme-dark a, .scheme-navy a, .scheme-gray a { color: inherit; }
.scheme-dark a:hover, .scheme-navy a:hover, .scheme-gray a:hover { color: var(--accent-on-dark); }
.scheme-dark .eyebrow, .scheme-navy .eyebrow, .scheme-gray .eyebrow { color: var(--accent-on-dark); }
.scheme-dark .section-link, .scheme-navy .section-link, .scheme-gray .section-link { color: rgba(255,255,255,.85); }
.scheme-dark .section-link:hover, .scheme-navy .section-link:hover, .scheme-gray .section-link:hover { color: #fff; }
.scheme-dark .section-category__seo, .scheme-dark .collage__subtitle { color: rgba(255,255,255,.78); }

/* Dark cards inside dark homepage sections (live color-scheme-4 cards) */
.scheme-dark .card, .scheme-dark .collage-card, .scheme-dark .tile,
.scheme-gray .card, .scheme-gray .collage-card, .scheme-gray .tile {
  background: #0f0f0f; border-color: rgba(255,255,255,.12);
}
.scheme-dark .card__title a, .scheme-dark .collage-card__title,
.scheme-gray .card__title a, .scheme-gray .collage-card__title { color: #fff; }
.scheme-dark .card .price, .scheme-dark .collage-card__price,
.scheme-gray .card .price, .scheme-gray .collage-card__price { color: #fff; }
.scheme-dark .card .price--exvat, .scheme-dark .card .card__specs .spec-chip,
.scheme-gray .card .price--exvat, .scheme-gray .card .card__specs .spec-chip { color: rgba(255,255,255,.7); }
.scheme-dark .tile__title, .scheme-gray .tile__title { color: #fff; }
.scheme-dark .tile__shop, .scheme-gray .tile__shop { color: var(--accent-on-dark); }
.scheme-dark .brand-card { background: #0f0f0f; border-color: rgba(255,255,255,.12); }
.scheme-dark .brand-card__cta { color: var(--accent-on-dark); }
.scheme-dark .feefo__review, .scheme-gray .feefo__review {
  background: #0f0f0f; border-color: rgba(255,255,255,.12);
}
.scheme-dark .feefo__review-text, .scheme-dark .feefo__review-meta,
.scheme-gray .feefo__review-text, .scheme-gray .feefo__review-meta { color: rgba(255,255,255,.75); }
.scheme-dark .feefo__star--empty, .scheme-gray .feefo__star--empty { color: rgba(255,255,255,.18); }
.scheme-dark .guide-card, .scheme-gray .guide-card { background: #0f0f0f; border-color: rgba(255,255,255,.12); }
.scheme-dark .guide-card__body p, .scheme-gray .guide-card__body p { color: rgba(255,255,255,.72); }

/* Scroll-trigger reveal — live Dawn parity. IntersectionObserver adds
   .is-revealed; slide-in translates 2rem (32px) with a 75ms stagger per
   --reveal-order, exactly matching the live `scroll-trigger animate--slide-in`
   with `--animation-order` cascade. */
[data-reveal] { opacity: .01; transform: translateY(2rem); }
[data-reveal].is-revealed { animation: var(--animation-slide-in); animation-delay: calc(var(--reveal-order, 0) * var(--animation-order-step)); }
[data-reveal][data-reveal-type="fade"].is-revealed { animation: var(--animation-fade-in); animation-delay: calc(var(--reveal-order, 0) * var(--animation-order-step)); }
/* Content that is already on screen on load is visible without animation. */
.no-js [data-reveal], [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes slideIn { 0% { transform: translateY(2rem); opacity: .01; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { 0% { opacity: .01; } 100% { opacity: 1; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}