/* ==========================================================================
   base.css — Hands of Luxury Clean
   --------------------------------------------------------------------------
   Reset, globale typografie, layout primitives.
   Geen componenten, geen pagina-specifieke styling.

   Werkt met zowel het lichte (default) als het donkere (.hol-theme-dark)
   palet uit tokens.css — alle kleuren lezen via custom properties.
   ========================================================================== */

/* --- Reset (modern minimal) --------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* scroll-behavior: smooth — VERWIJDERD: veroorzaakte dubbele smoothing
     in combinatie met Lenis. Anchor smooth-scroll wordt afgehandeld door
     Lenis.scrollTo() of scrollIntoView() in JS. */
  scroll-behavior: auto;
  scroll-padding-top: 5rem; /* Ruimte voor fixed header bij anchor jumps */
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* Modernere eenheid voor mobiel */
  font-family: var(--hol-font-body);
  font-size: var(--hol-fs-base);
  font-weight: var(--hol-fw-regular);
  line-height: var(--hol-lh-normal);
  color: var(--hol-color-ink);
  background: var(--hol-color-bg);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100vw;
}

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

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Text wrapping — beter voor headings en prose */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
  max-width: 72ch;
}

/* --- Globale typografie ------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hol-font-display);
  font-weight: var(--hol-fw-medium);
  line-height: var(--hol-lh-tight);
  letter-spacing: var(--hol-tracking-tight);
  color: var(--hol-color-ink);
}

h1 { font-size: var(--hol-fs-4xl); }
h2 { font-size: var(--hol-fs-3xl); }
h3 { font-size: var(--hol-fs-2xl); }
h4 { font-size: var(--hol-fs-xl); }
h5 { font-size: var(--hol-fs-lg); }
h6 { font-size: var(--hol-fs-md); }

p {
  font-size: var(--hol-fs-base);
  line-height: var(--hol-lh-normal);
  color: var(--hol-color-ink-soft);
}

p + p {
  margin-top: var(--hol-space-sm);
}

strong, b {
  font-weight: var(--hol-fw-semi);
  color: var(--hol-color-ink);
}

::selection {
  background: var(--hol-color-accent);
  color: var(--hol-color-bg);
}

/* --- Focus ring --------------------------------------------------------- */

:focus-visible {
  outline: 1px solid var(--hol-color-accent);
  outline-offset: 3px;
  border-radius: var(--hol-radius-xs);
}

/* --- Layout primitives -------------------------------------------------- */

.hol-container {
  width: 100%;
  max-width: var(--hol-container-max);
  margin-inline: auto;
  padding-inline: var(--hol-container-gutter);
}

.hol-container--narrow {
  max-width: var(--hol-container-narrow);
}

.hol-container--wide {
  max-width: var(--hol-container-wide);
}

.hol-section {
  padding-block: var(--hol-section-py);
}

.hol-section--tight {
  padding-block: var(--hol-section-py-tight);
}

.hol-section--loose {
  padding-block: var(--hol-section-py-loose);
}

.hol-section--bg-alt {
  background: var(--hol-color-bg-alt);
}

.hol-section--bg-deep {
  background: var(--hol-color-bg-deep);
  color: var(--hol-color-on-deep);
}

.hol-section--bg-deep h1,
.hol-section--bg-deep h2,
.hol-section--bg-deep h3,
.hol-section--bg-deep h4,
.hol-section--bg-deep h5,
.hol-section--bg-deep h6 {
  color: var(--hol-color-on-deep);
}

.hol-section--bg-deep p {
  color: var(--hol-color-on-deep-soft);
}

/* Lichte sectie-variant — voor gebruik BINNEN het dark theme.
   Op lichte pagina's is dit de default achtergrond, dus redundant maar
   niet schadelijk. Op dark-theme pagina's flipt het naar crème/parchment. */
.hol-section--bg-light {
  background: #f7f5f1;
  color: #1a1816;
}

.hol-section--bg-light h1,
.hol-section--bg-light h2,
.hol-section--bg-light h3,
.hol-section--bg-light h4,
.hol-section--bg-light h5,
.hol-section--bg-light h6 {
  color: #1a1816;
}

.hol-section--bg-light p {
  color: #4a4641;
}

/* --- Main content — compensatie voor fixed header ------------------------ */

.hol-main--404 {
  padding-top: calc(5rem + var(--hol-space-3xl, 96px));
}

/* 404 pagina styling */
.hol-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: var(--hol-space-3xl) var(--hol-container-gutter);
}

.hol-404__eyebrow {
  font-size: var(--hol-fs-xs);
  font-weight: var(--hol-fw-medium);
  letter-spacing: var(--hol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hol-color-accent);
  margin-bottom: var(--hol-space-md);
}

.hol-404__title {
  font-family: var(--hol-font-display);
  font-size: var(--hol-fs-4xl);
  font-weight: 300;
  line-height: var(--hol-lh-tight);
  color: var(--hol-color-ink);
  margin-bottom: var(--hol-space-md);
  max-width: 16ch;
}

.hol-404__text {
  font-size: var(--hol-fs-md);
  color: var(--hol-color-ink-soft);
  line-height: var(--hol-lh-normal);
  max-width: 48ch;
  margin-bottom: var(--hol-space-xl);
}

.hol-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hol-space-sm);
  justify-content: center;
}

@media (max-width: 640px) {
  .hol-404__title {
    font-size: var(--hol-fs-3xl);
  }

  .hol-404__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Skip link voor a11y */
.hol-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hol-skip-link:focus {
  position: fixed;
  top: var(--hol-space-sm);
  left: var(--hol-space-sm);
  width: auto;
  height: auto;
  padding: var(--hol-space-xs) var(--hol-space-md);
  background: var(--hol-color-accent);
  color: var(--hol-color-bg);
  font-size: var(--hol-fs-sm);
  font-weight: var(--hol-fw-medium);
  border-radius: var(--hol-radius-sm);
  z-index: var(--hol-z-modal);
  text-decoration: none;
}

/* Visually-hidden utility (a11y) */
.hol-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════
   R4D3.5 — Premium inline link-styling voor body copy.

   Scope: `<a>` BINNEN `<p>` in <main>, ZONDER class-attribuut.
   Dat matcht exact de inline-crosslinks uit R4D3 (bv. "Marmerlook"
   binnen werkwijze-kwaliteit-paragrafen). CTA-buttons, nav-links,
   en finish-card-links hebben wél een class en blijven ongemoeid.

   Styling-filosofie: niet schreeuwerig, wel duidelijk klikbaar.
   Subtiele gouden underline met offset, hover-shift naar vol goud.
   ════════════════════════════════════════════════════════════════════ */

main p a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(201, 148, 58, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1),
              text-decoration-color 220ms ease,
              text-decoration-thickness 220ms ease;
}

main p a:not([class]):hover,
main p a:not([class]):focus {
  color: #c9943a;
  text-decoration-color: #c9943a;
  text-decoration-thickness: 2px;
}

main p a:not([class]):focus-visible {
  outline: 2px solid #c9943a;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  main p a:not([class]) {
    transition: none;
  }
}

/* Mobile-nav section-heading — scheidings-label tussen service-groep
   en andere nav-items (R4D3.5 menu-architectuur). */
.hol-mobile-nav__section-heading {
  list-style: none;
  padding: 1.25rem 0 0.35rem;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 148, 58, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}