/* ==========================================================================
   LH Projects — huisstijl stylesheet
   Lettertype: Manrope (Google Fonts). Laad in de <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Merkkleuren */
  --lh-teal:        #2E9A88;
  --lh-teal-dark:   #1F6C60;
  --lh-teal-light:  #3DB5A0;
  --lh-teal-tint:   #E3F2EF;
  --lh-stone:       #8F8B7C;
  --lh-stone-light: #D9D6CC;
  --lh-graphite:    #4E4D46;
  --lh-ink:         #2A2A26;
  --lh-paper:       #F6F5F1;
  --lh-white:       #FFFFFF;

  /* Functioneel */
  --lh-bg:          var(--lh-white);
  --lh-surface:     var(--lh-paper);
  --lh-text:        var(--lh-ink);
  --lh-text-muted:  #6F6D64;
  --lh-border:      var(--lh-stone-light);
  --lh-accent:      var(--lh-teal);

  /* Typografie */
  --lh-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lh-fs-xs:   0.8125rem;  /* 13 */
  --lh-fs-sm:   0.9375rem;  /* 15 */
  --lh-fs-base: 1.0625rem;  /* 17 */
  --lh-fs-lg:   1.25rem;    /* 20 */
  --lh-fs-h3:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --lh-fs-h2:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --lh-fs-h1:   clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --lh-lh-tight: 1.15;
  --lh-lh-body:  1.6;

  /* Ruimte, vormen, beweging */
  --lh-space-1: 0.25rem;
  --lh-space-2: 0.5rem;
  --lh-space-3: 1rem;
  --lh-space-4: 1.5rem;
  --lh-space-5: 2.5rem;
  --lh-space-6: 4rem;
  --lh-space-7: 6rem;
  --lh-radius-sm: 6px;
  --lh-radius:    12px;
  --lh-radius-lg: 20px;
  --lh-shadow: 0 1px 2px rgba(42,42,38,.06), 0 8px 24px rgba(42,42,38,.08);
  --lh-ease: cubic-bezier(.2,.8,.2,1);
  --lh-container: 1160px;
}

/* --- 2. Basis ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--lh-font);
  font-size: var(--lh-fs-base);
  line-height: var(--lh-lh-body);
  color: var(--lh-text);
  background: var(--lh-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--lh-space-3);
  line-height: var(--lh-lh-tight);
  color: var(--lh-graphite);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--lh-fs-h1); font-weight: 800; }
h2 { font-size: var(--lh-fs-h2); font-weight: 700; }
h3 { font-size: var(--lh-fs-h3); font-weight: 700; }
h4 { font-size: var(--lh-fs-lg); font-weight: 600; }

p { margin: 0 0 var(--lh-space-3); }
small, .lh-small { font-size: var(--lh-fs-sm); }

a { color: var(--lh-teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--lh-teal); }

:focus-visible { outline: 3px solid var(--lh-teal-light); outline-offset: 2px; }

img, svg { max-width: 100%; }

/* --- 3. Layout ----------------------------------------------------------- */
.lh-container { max-width: var(--lh-container); margin: 0 auto; padding: 0 var(--lh-space-4); }
.lh-section { padding: var(--lh-space-7) 0; }
.lh-section--paper { background: var(--lh-surface); }
.lh-section--dark  { background: var(--lh-ink); color: #EDECE7; }
.lh-section--dark h1, .lh-section--dark h2, .lh-section--dark h3 { color: var(--lh-white); }
.lh-section--teal  { background: var(--lh-teal); color: var(--lh-white); }
.lh-section--teal h1, .lh-section--teal h2, .lh-section--teal h3 { color: var(--lh-white); }

.lh-grid { display: grid; gap: var(--lh-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- 4. Componenten ------------------------------------------------------ */
.lh-eyebrow {
  display: inline-block;
  font-size: var(--lh-fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lh-teal);
  margin-bottom: var(--lh-space-2);
}

.lh-lead { font-size: var(--lh-fs-lg); color: var(--lh-text-muted); max-width: 40em; }

.lh-btn {
  display: inline-flex; align-items: center; gap: var(--lh-space-2);
  font: 600 var(--lh-fs-sm)/1 var(--lh-font);
  padding: .9em 1.5em;
  border-radius: var(--lh-radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--lh-ease), color .2s var(--lh-ease), border-color .2s var(--lh-ease), transform .2s var(--lh-ease);
}
.lh-btn:active { transform: translateY(1px); }
.lh-btn--primary   { background: var(--lh-teal); color: var(--lh-white); }
.lh-btn--primary:hover { background: var(--lh-teal-dark); color: var(--lh-white); }
.lh-btn--secondary { background: transparent; color: var(--lh-graphite); border-color: var(--lh-stone); }
.lh-btn--secondary:hover { border-color: var(--lh-graphite); color: var(--lh-ink); }
.lh-btn--light     { background: var(--lh-white); color: var(--lh-teal-dark); }
.lh-btn--light:hover { background: var(--lh-teal-tint); color: var(--lh-teal-dark); }

.lh-card {
  background: var(--lh-white);
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  padding: var(--lh-space-4);
  transition: box-shadow .25s var(--lh-ease), transform .25s var(--lh-ease);
}
.lh-card:hover { box-shadow: var(--lh-shadow); transform: translateY(-2px); }
/* Accentlijn verwijst naar de teal balk in het logo */
.lh-card--accent { border-top: 4px solid var(--lh-teal); }

.lh-divider { height: 4px; width: 56px; background: var(--lh-teal); border: 0; margin: var(--lh-space-4) 0; }

/* --- 5. Logo ------------------------------------------------------------- */
.lh-logo { display: inline-block; line-height: 0; }
.lh-logo .lh-floor { fill: var(--lh-logo-floor, var(--lh-stone)); }
.lh-logo .lh-letter { fill: var(--lh-logo-letter, var(--lh-teal)); }
.lh-logo .lh-wm-lh { fill: var(--lh-logo-text, var(--lh-graphite)); font-family: var(--lh-font); font-weight: 700; }
.lh-logo .lh-wm-projects { fill: var(--lh-logo-letter, var(--lh-teal)); font-family: var(--lh-font); font-weight: 500; }

/* Logo-varianten per achtergrond */
.lh-logo--on-dark { --lh-logo-letter: var(--lh-teal-light); --lh-logo-text: var(--lh-white); }
.lh-logo--on-teal { --lh-logo-letter: var(--lh-white); --lh-logo-floor: #7FC3B7; --lh-logo-text: var(--lh-white); }

/* --- 6. Logo-animatie ----------------------------------------------------
   Gebruik: inline SVG met class "lh-logo lh-logo--animate".
   Volgorde: kolommen groeien omhoog → balken van L en H schuiven in →
   grijze verdiepingen vallen op hun plek → woordmerk verschijnt.
   Opnieuw afspelen: class verwijderen en weer toevoegen (zie lh-logo.js). */
.lh-logo--animate .lh-col,
.lh-logo--animate .lh-bar,
.lh-logo--animate .lh-floor,
.lh-logo--animate .lh-wm-lh,
.lh-logo--animate .lh-wm-projects {
  transform-box: fill-box;
  animation-fill-mode: both;
  animation-timing-function: var(--lh-ease);
}
.lh-logo--animate .lh-col {
  transform-origin: 50% 100%;
  animation-name: lh-grow-up;
  animation-duration: .7s;
}
.lh-logo--animate .lh-col--1 { animation-delay: 0s; }
.lh-logo--animate .lh-col--2 { animation-delay: .12s; }
.lh-logo--animate .lh-col--3 { animation-delay: .24s; }

.lh-logo--animate .lh-bar {
  transform-origin: 0% 50%;
  animation-name: lh-grow-right;
  animation-duration: .55s;
}
.lh-logo--animate .lh-bar--l { animation-delay: .5s; }
.lh-logo--animate .lh-bar--h { animation-delay: .62s; }

.lh-logo--animate .lh-floor {
  animation-name: lh-drop-in;
  animation-duration: .6s;
}
.lh-logo--animate .lh-floor--1 { animation-delay: .95s; }
.lh-logo--animate .lh-floor--2 { animation-delay: .85s; }
.lh-logo--animate .lh-floor--3 { animation-delay: 1.0s; }
.lh-logo--animate .lh-floor--4 { animation-delay: .9s; }

.lh-logo--animate .lh-wm-lh       { animation-name: lh-fade-slide; animation-duration: .6s; animation-delay: 1.25s; }
.lh-logo--animate .lh-wm-projects { animation-name: lh-fade-slide; animation-duration: .6s; animation-delay: 1.4s; }

/* Verberg het logo tot de animatie start (alleen als lh-logo.js draait) */
.lh-js [data-lh-animate]:not(.lh-logo--animate) > * { opacity: 0; }

@keyframes lh-grow-up    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lh-grow-right { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lh-drop-in    { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes lh-fade-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lh-logo--animate * { animation: none !important; }
}