/*
Theme Name: A'DAM Toren
Theme URI: https://adamtoren.nl
Author: A'DAM Toren
Description: Custom theme voor A'DAM Toren — de toren als navigatie. Zwart, grafisch, snel. Gebouwd met ACF-blokken.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: adamtoren
*/

/* ==========================================================================
   FONTS — zelf gehost, geen externe requests
   ========================================================================== */
@font-face {
  font-family: 'HelveticaNeue';
  src: url('assets/fonts/helveticaneuebold.woff2') format('woff2'),
       url('assets/fonts/helveticaneuebold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Canvas — warm antraciet, net niet zwart (zelfde als Madam). */
  --at-bg:       #18181b;
  --at-bg-2:     #131316;
  --at-surface:  #232327;
  --at-surface-2:#2d2d32;

  /* Inkt
     De twee grijstinten stonden op .62 en .34. Dat leest op een groot scherm
     in een donkere kamer prima, maar op een telefoon in daglicht haalde .34
     nog geen 3,5:1 contrast — onder de leesbaarheidsnorm. Ze zijn opgetild
     tot ruim boven AA (nu ~11,6:1 en ~6,9:1) en blijven duidelijk grijs. */
  --at-text:     #fff;
  --at-text-2:   rgba(255, 255, 255, .76);
  --at-text-3:   rgba(255, 255, 255, .56);
  --at-border:   rgba(255, 255, 255, .12);
  --at-border-2: rgba(255, 255, 255, .22);

  /* A'DAM-rood — het merkaccent. Per pagina overschreven door de
     etagekleur van de betreffende afdeling (zie inc/accent.php). */
  --at-red:        #e30613;
  --at-red-deep:   #b30410;
  --at-accent:     var(--at-red);
  --at-accent-deep: var(--at-red-deep);
  --at-accent-ink: #fff;

  /* Vorm — de diagonale hoek is de handtekening van het huis */
  --at-r:        0 14px 0 14px;
  --at-r-sm:     0 10px 0 10px;
  --at-r-lg:     0 22px 0 22px;

  /* Grafisch element: grijze banen onder 45°, zoals in de huisstijl en in
     de torenplaat. Puur CSS, dus scherp op elk scherm en zonder gewicht. */
  --at-hatch-ink:  rgba(255, 255, 255, .085);
  --at-hatch-step: 13px;
  --at-hatch: repeating-linear-gradient(
    45deg,
    var(--at-hatch-ink) 0 5px,
    transparent 5px var(--at-hatch-step)
  );

  /* Beweging */
  --at-ease:     cubic-bezier(.7, 0, .2, 1);
  --at-ease-out: cubic-bezier(.16, 1, .3, 1);
  --at-dur:      .55s;
  --at-dur-2:    .9s;

  /* Ritme */
  --at-pad:      clamp(1.25rem, 4vw, 3.5rem);
  --at-gap:      clamp(1rem, 2.5vw, 2rem);
  --at-max:      1560px;

  /* Typografie */
  --at-font-display: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --at-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --at-ls-label:     .22em;

  /* Chrome */
  --at-header-h: clamp(64px, 8vh, 88px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  color-scheme: dark;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--at-font-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--at-text);
  background: var(--at-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection      { background: var(--at-accent); color: var(--at-accent-ink); }
::-moz-selection { background: var(--at-accent); color: var(--at-accent-ink); }

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--at-font-display);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.at-display {
  font-family: var(--at-font-display);
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: .88;
  letter-spacing: -.035em;
}

.at-label {
  font-size: clamp(.6rem, .72vw, .7rem);
  font-weight: 500;
  letter-spacing: var(--at-ls-label);
  text-transform: uppercase;
  color: var(--at-text-3);
}

/* Introtekst — de redactionele stem: display, vet, licht ingespatieerd.
   Alleen de openingsalinea; lange lappen vette tekst lezen slecht op een
   telefoon. Dezelfde waarden als Madam. */
.at-lead {
  font-family: var(--at-font-display);
  font-weight: 700;
  /* Bovengrens gelijk aan Madam; de ondergrens is opgetrokken zodat de
     introregel op een telefoon niet wegvalt naast de kop. */
  font-size: clamp(1.4rem, 6vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--at-text);
  text-wrap: pretty;
  max-width: 46ch;
}

/* Broodtekst — Inter, vol wit, ruime regelafstand. */
.at-body {
  font-family: var(--at-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--at-text);
  max-width: 60ch;
  text-wrap: pretty;
}
.at-body p { margin: 0; }
.at-body p + p { margin-top: 1.1em; }

/* De display-familie heeft geen cursief; nadruk krijgt daarom gewicht. */
.at-body em,
.at-lead em {
  font-style: normal;
  font-weight: 600;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.at-shell {
  width: 100%;
  max-width: var(--at-max);
  margin-inline: auto;
  padding-inline: var(--at-pad);
}

.at-section { padding-block: clamp(3.5rem, 9vw, 8rem); }

/* Gearceerde baan — vult de resterende ruimte naast een kop of label.
   Gebruik: <span class="at-rule" aria-hidden="true"></span> in een flexrij. */
.at-rule {
  flex: 1;
  min-width: 2rem;
  height: var(--rule-h, 1.5rem);
  background-image: var(--at-hatch);
  border-radius: 2px;
}

/* Skip link — eerste tabstop */
.at-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--at-accent);
  color: var(--at-accent-ink);
  padding: .75rem 1.25rem;
  font-weight: 600;
}
.at-skip:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   FOCUS + TOUCH
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

a, button { -webkit-tap-highlight-color: transparent; }

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

/* ==========================================================================
   KNOPPEN
   ========================================================================== */
/* In rust alleen een lijntje: op een pagina die vooral doorverwijst zouden
   vier volvlakken rood harder schreeuwen dan de toren zelf. Het rood komt bij
   hover van links in beeld vegen. */
.at-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.4em;
  font-family: var(--at-font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Nooit een streepje onder de tekst, ook niet binnen lopende tekst. */
  text-decoration: none;
  color: var(--at-text);
  background: transparent;
  border-radius: var(--at-r-sm);
  box-shadow: inset 0 0 0 1px var(--at-border-2);
  /* Zoals bij Madam: de knop wipt bij hover iets omhoog en naar rechts. */
  transition:
    transform .35s var(--at-ease-out),
    color .3s var(--at-ease-out),
    box-shadow .3s var(--at-ease-out);
}

.at-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--at-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--at-ease);
}

.at-btn:hover,
.at-btn:focus-visible {
  transform: translate(2px, -2px);
  color: var(--at-accent-ink);
  box-shadow: inset 0 0 0 1px var(--at-accent);
}
.at-btn:hover::before,
.at-btn:focus-visible::before { transform: scaleX(1); }

.at-btn:active { transform: translate(1px, -1px) scale(.98); }

/* Bestond al als lichtere variant; nu hetzelfde als de standaardknop, maar
   de klasse blijft werken zodat oude blokken niet omvallen. */
.at-btn--ghost { color: var(--at-text); }

/* Het icoon beweegt mee in dezelfde richting als de knop, en komt daarbij
   op volle sterkte — net als bij Madam. */
.at-btn__arrow,
.at-btn .at-pin {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: currentColor;
  opacity: .7;
  transition:
    transform .35s var(--at-ease-out),
    opacity .3s ease;
}
.at-btn:hover .at-btn__arrow,
.at-btn:hover .at-pin {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* ==========================================================================
   REVEAL — één gedeeld mechanisme voor alle scroll-animaties
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--at-dur-2) var(--at-ease-out),
    transform var(--at-dur-2) var(--at-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}