/* ==========================================================================
   AGS Houtkruis 2026 — base styles, component classes & custom utilities
   Companion to assets/js/tailwind.config.js

   Everything Tailwind can express is written as utilities in the markup.
   This file holds only:
     1. the token mirror as CSS custom properties
     2. base/reset beyond Tailwind Preflight
     3. the handful of components that would be unreadable as long
        utility chains (buttons, placeholders, TBC markers, the crossbeam rule)
     4. motion + focus behaviour
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token mirror — identical values to tailwind.config.js
   -------------------------------------------------------------------------- */
:root {
  --bark-50:  #FBF4F0;
  --bark-100: #F5E4DB;
  --bark-200: #E9C6B4;
  --bark-300: #DAA187;
  --bark-400: #C87551;
  --bark-500: #B8592E;
  --bark-600: #AA471F;
  --bark-700: #8E3A18;
  --bark-800: #702E14;
  --bark-900: #4E2110;

  --olive-50:  #F7F7F4;
  --olive-100: #EDECE6;
  --olive-200: #D9D7CB;
  --olive-300: #BFBCAB;
  --olive-400: #9C9887;
  --olive-500: #7A7666;
  --olive-600: #5C5A4A;
  --olive-700: #474538;
  --olive-800: #33322A;
  --olive-900: #1C1C18;
  --olive-950: #0F0F0C;

  --sand:    #FAF8F4;
  --surface: #FFFFFF;
  --ink:     #1A1A17;
  --sage:    #5F7A5A;

  --header-h: 5rem;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--sand);
  color: var(--ink);
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;         /* 17px — §2.3 */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--olive-700);
  text-wrap: balance;
}

/* Reversed type inside dark bands */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

::selection { background: var(--bark-200); color: var(--bark-900); }

/* A Tailwind display utility (.grid, .flex, .btn …) outranks Preflight's
   [hidden] rule, so el.hidden = true silently does nothing on those elements.
   This makes the hidden attribute authoritative everywhere. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Focus — one visible treatment everywhere (§5)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--bark-600);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible,
[data-variant='transparent'] :focus-visible {
  outline-color: var(--bark-300);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--bark-600);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
  transition: top 180ms ease-out;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   4. The crossbeam rule — §2.4 motif, once per section
   -------------------------------------------------------------------------- */
.crossbeam {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--bark-600);
  border-radius: 2px;
}
.crossbeam--center { margin-inline: auto; }
.on-dark .crossbeam { background: var(--bark-400); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 180ms ease-out, color 180ms ease-out,
              border-color 180ms ease-out, transform 180ms ease-out;
}
.btn:active { transform: translateY(1px); }
.btn--sm { font-size: 0.875rem; padding: 0.625rem 1.125rem; }

.btn--primary { background: var(--bark-600); color: #fff; }
.btn--primary:hover { background: var(--bark-700); }

.btn--secondary { background: transparent; color: var(--olive-700); border-color: var(--olive-300); }
.btn--secondary:hover { background: var(--olive-100); border-color: var(--olive-400); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--olive-200);
  color: var(--olive-400);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* Text link with an underline that grows on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bark-600);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 180ms ease-out, color 180ms ease-out;
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; }
.on-dark .link { color: var(--bark-300); }

/* Inline prose links */
.prose-link {
  color: var(--bark-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose-link:hover { color: var(--bark-700); }

/* --------------------------------------------------------------------------
   6. Navigation link states
   -------------------------------------------------------------------------- */
.nav-link {
  position: relative;
  font-family: Montserrat, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--olive-700);
  transition: color 180ms ease-out, background-color 180ms ease-out;
  white-space: nowrap;
}
.nav-link:hover { color: var(--bark-600); background: var(--bark-50); }
.nav-link[aria-current='page'] { color: var(--bark-600); }
.nav-link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.125rem;
  height: 2px;
  background: var(--bark-600);
  border-radius: 2px;
}

/* Header floating transparent over the hero */
#site-header[data-variant='transparent'].is-top { background: transparent; box-shadow: none; }
#site-header[data-variant='transparent'].is-top .nav-link { color: rgba(255,255,255,.92); }
#site-header[data-variant='transparent'].is-top .nav-link:hover { color: #fff; background: rgba(255,255,255,.14); }
#site-header[data-variant='transparent'].is-top .nav-link[aria-current='page'] { color: #fff; }
#site-header[data-variant='transparent'].is-top .nav-link[aria-current='page']::after { background: #fff; }
#site-header[data-variant='transparent'].is-top .site-logo { filter: brightness(0) invert(1); }
#site-header[data-variant='transparent'].is-top .nav-toggle { color: #fff; border-color: rgba(255,255,255,.4); }

/* --------------------------------------------------------------------------
   7. "To be confirmed" markers — §8, nothing may read as real content
   -------------------------------------------------------------------------- */
[data-tbc] {
  border-bottom: 1px dashed var(--bark-500);
  padding-bottom: 1px;
}
[data-tbc]::after {
  content: 'TBC';
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.3em;
  padding: 2px 4px;
  border-radius: 9999px;
  color: var(--bark-800);
  background: var(--bark-100);
  border-bottom: 0;
}
.on-dark [data-tbc] { border-bottom-color: var(--bark-300); }
.on-dark [data-tbc]::after { color: var(--bark-50); background: rgba(200,117,81,.38); }

/* --------------------------------------------------------------------------
   8. Image placeholders — §2.4, duotone block + cross mark, never stock photos
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--olive-100);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(71, 69, 56, 0.045) 0 10px,
    rgba(71, 69, 56, 0) 10px 20px
  );
  border: 1px dashed var(--olive-300);
}
.ph--bark {
  background-color: var(--bark-50);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(170, 71, 31, 0.05) 0 10px,
    rgba(170, 71, 31, 0) 10px 20px
  );
  border-color: var(--bark-200);
}
.ph--dark {
  background-color: var(--olive-800);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.04) 0 10px,
    rgba(255, 255, 255, 0) 10px 20px
  );
  border-color: var(--olive-600);
}
.ph__mark {
  position: absolute;
  width: 42%;
  max-width: 180px;
  color: var(--olive-700);
  opacity: 0.06;
  pointer-events: none;
}
.ph--dark .ph__mark { color: #fff; opacity: 0.08; }
.ph__label {
  position: relative;
  max-width: 24ch;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  color: var(--olive-600);
  padding: 0.75rem 1rem;
}
.ph--dark .ph__label { color: var(--olive-300); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--olive-200);
  border-radius: 0.5rem;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(26,26,23,.05), 0 18px 40px -22px rgba(26,26,23,.38);
  border-color: var(--bark-200);
}
/* Whole card clickable via a stretched link, keyboard focus stays on the link */
.card--link { position: relative; }
.card--link .stretched::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   10. Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3125rem 0.625rem;
  border-radius: 9999px;
}
.badge--free   { background: rgba(95,122,90,.14); color: #3F5A3B; }
.badge--priced { background: var(--bark-100);     color: var(--bark-800); }
.badge--series { background: var(--olive-100);    color: var(--olive-700); }
.badge--new    { background: var(--olive-700);    color: #fff; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.field-label {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--olive-700);
  margin-bottom: 0.375rem;
}
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--olive-300);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.field::placeholder { color: var(--olive-500); }
.field:hover { border-color: var(--olive-400); }
.field:focus { border-color: var(--bark-600); outline: none; box-shadow: 0 0 0 3px rgba(170,71,31,.15); }
.field[aria-invalid='true'] { border-color: #B3261E; }
.field-hint  { font-size: 0.8125rem; color: var(--olive-600); margin-top: 0.375rem; }
.field-error { font-size: 0.8125rem; color: #B3261E; margin-top: 0.375rem; font-weight: 600; }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.125rem;
  padding-right: 2.5rem;
}

/* --------------------------------------------------------------------------
   12. Accordion
   -------------------------------------------------------------------------- */
.acc-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--olive-700);
  padding: 1.125rem 0;
  cursor: pointer;
  transition: color 180ms ease-out;
}
.acc-trigger:hover { color: var(--bark-600); }
.acc-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; transition: transform 180ms ease-out; }
.acc-trigger[aria-expanded='true'] .acc-icon { transform: rotate(45deg); }
.acc-panel { padding-bottom: 1.25rem; max-width: 68ch; }

/* --------------------------------------------------------------------------
   13. Prose block
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.125rem; }
.prose h3 { font-size: 1.375rem; font-weight: 600; margin-top: 2.25rem; }
.prose ul { list-style: none; padding: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li + li { margin-top: 0.625rem; }
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 2px;
  background: var(--bark-600);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   14. Motion — §2.4, gated on prefers-reduced-motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   15. Mobile drawer
   -------------------------------------------------------------------------- */
body.nav-open { overflow: hidden; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--olive-300);
  border-radius: 0.5rem;
  color: var(--olive-700);
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
.nav-toggle:hover { background: var(--olive-100); }

/* --------------------------------------------------------------------------
   16. YouTube player facade
   Nothing is requested from YouTube until someone chooses to play — the
   thumbnail and button are ours, the iframe only appears on click.
   -------------------------------------------------------------------------- */
.yt-shell {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--olive-900);
}

.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--olive-900);
  overflow: hidden;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease-out, opacity 180ms ease-out;
}
.yt-facade:hover img { transform: scale(1.03); opacity: 0.9; }

.yt-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: var(--bark-600);
  color: #fff;
  box-shadow: 0 8px 28px -8px rgba(15, 15, 12, 0.7);
  transition: background-color 180ms ease-out, transform 180ms ease-out;
}
.yt-facade__play svg { width: 1.75rem; height: 1.75rem; margin-left: 0.2rem; }
.yt-facade:hover .yt-facade__play { background: var(--bark-700); transform: translate(-50%, -50%) scale(1.06); }

.yt-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.5rem;
  background: var(--olive-950);
}

.yt-duration {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(15, 15, 12, 0.82);
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
}

/* Skeleton shown while the list loads */
.sk {
  background: linear-gradient(90deg, var(--olive-100) 25%, var(--olive-200) 37%, var(--olive-100) 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease-in-out infinite;
  border-radius: 0.5rem;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* --------------------------------------------------------------------------
   17. Print — visitors do print service times and directions
   -------------------------------------------------------------------------- */
@media print {
  #mockup-bar, #site-header, #mobile-nav, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .reveal { opacity: 1; transform: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}