/* =============================================================
   SM Brief
   Persoonlijke brief naar het King Kong-recept: "Bijgewerkt"-regel,
   korte alinea's, fluor-marker die iets gedraaid staat, onderstreepte
   kernzin (via <u> in de tekst), handtekening in schrijfletter.
   Licht en donker via de band-keuze.
   ============================================================= */

.sm-bf {
  /* licht is de standaard */
  --bf-bg: #f4f6f5;
  --bf-ink: #0d1512;
  --bf-tekst: rgba(13, 21, 18, .75);
  --bf-stil: rgba(13, 21, 18, .62);
  --bf-rand: rgba(13, 21, 18, .13);
  --bf-marker: #d2f65a;
  --bf-marker-ink: #0d1512;
  --bf-streep: #10b981;

  box-sizing: border-box;
  background: var(--bf-bg);
  color: var(--bf-ink);
  border-bottom: 1px solid var(--bf-rand);
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij);
  transition: background .4s ease, color .4s ease;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sm-bf *, .sm-bf *::before, .sm-bf *::after { box-sizing: inherit; }

.sm-bf--donker {
  --bf-bg: #0a0909;
  --bf-ink: #ffffff;
  --bf-tekst: rgba(255, 255, 255, .72);
  --bf-stil: rgba(255, 255, 255, .58);
  --bf-rand: rgba(255, 255, 255, .10);
}

.sm-bf-in { max-width: 640px; margin: 0 auto; }

.sm-bf-datum {
  font-family: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-stil); margin: 0 0 28px;
}

.sm-bf-in p { font-size: 1.125rem; line-height: 1.75; /* 18px: lange verkooptekst leest groter prettiger (Typografie_Systemen_Framework 2B) */ margin: 0 0 18px; color: var(--bf-tekst); }
.sm-bf-in p b, .sm-bf-in p strong { color: var(--bf-ink); font-weight: 600; }

/* de onderstreepte kernzin: gewoon <u> typen in het tekstveld */
.sm-bf-in p u {
  font-weight: 600; color: var(--bf-ink);
  text-decoration: underline; text-decoration-color: var(--bf-streep);
  text-decoration-thickness: 3px; text-underline-offset: 4px;
}

/* de schuine marker-regel uit de bron */
.sm-bf-in .sm-bf-groot {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.45;
  letter-spacing: -.015em; margin: 26px 0; color: var(--bf-ink);
  transform: rotate(-1.4deg);
}
/* de fluor-marker blijft in beide standen lime met donkere inkt:
   dat is juist het stiftje, en het leest op donker en licht */
.sm-bf-marker {
  background: var(--bf-marker); color: var(--bf-marker-ink);
  padding: .08em .3em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.sm-bf-in .sm-bf-groet {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 1.3rem; margin-top: 30px; color: var(--bf-ink);
}


/* De fluor-marker loopt vol zodra de regel in beeld komt, in plaats van
   meteen vol te staan. Het vlak is een achtergrond-afbeelding, want
   alleen de maat daarvan is te animeren. Zonder het script staat hij
   gewoon vol: de starthouding hangt aan de class die het script zet. */
.sm-vs-aan .sm-bf-marker {
  background: linear-gradient(var(--bf-marker), var(--bf-marker)) no-repeat left center;
  background-size: 0% 100%;
  transition-property: background-size;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  transition-delay: .25s;
}
.sm-vs-aan .sm-bf-groot.sm-vs-zicht .sm-bf-marker { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-vs-aan .sm-bf-marker { background-size: 100% 100%; transition-property: none; }
}

/* geen los woord op de laatste regel (de marker-regel houdt zijn eigen balans) */
/* korte alinea's (hooguit 4 regels): gelijk verdelen, geen staartje als "op mijn hart." */
.sm-bf p:not(.sm-bf-groot) { text-wrap: balance; }
.sm-bf-in .sm-bf-groot { text-wrap: balance; }

/* de datum boven de brief houdt zijn eigen maat (anders nam hij de 18px van de brieftekst over en brak hij op mobiel) */
.sm-bf-in p.sm-bf-datum { font-size: 1.05rem; }

/* Contact onder de brief: icoontje plus woord (formulier, WhatsApp, mail).
   Bij hover wordt het rondje lime, net als de marker. */
.sm-bf-contact { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.sm-bf .sm-bf-ct {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 6px; border-radius: 999px;
  border: 1px solid var(--bf-rand); color: var(--bf-ink); text-decoration: none; font-size: .95rem; font-weight: 600; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .25s, color .25s, scale .12s;
}
.sm-bf-ct-ic {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--bf-ink) 8%, transparent); color: var(--bf-ink);
  transition: background-color .25s, color .25s;
}
.sm-bf-ct-ic svg { display: block; width: 18px; height: 18px; }
.sm-bf .sm-bf-ct:active { scale: .97; }
.sm-bf .sm-bf-ct:hover, .sm-bf .sm-bf-ct:focus-visible { color: var(--bf-ink); }
@media (hover: hover) {
  .sm-bf .sm-bf-ct:hover { border-color: var(--bf-marker); }
  .sm-bf .sm-bf-ct:hover .sm-bf-ct-ic { background: var(--bf-marker); color: var(--bf-marker-ink); }
}
.sm-bf .sm-bf-ct:focus-visible { outline: 2px solid var(--bf-marker); outline-offset: 3px; }
/* telefoon: drie gelijke tegels naast elkaar (icoon boven het woord), anders valt er een alleen op een eigen regel */
@media (max-width: 480px) {
  .sm-bf-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sm-bf .sm-bf-ct { flex-direction: column; justify-content: center; gap: 8px; width: 100%; height: auto; padding: 12px 6px; border-radius: 16px; font-size: .85rem; }
}