/*
Theme Name: FelixPeters Child
Theme URI: https://felixpeters.nl
Description: Child-thema van Astra voor felixpeters.nl. Centraliseert de bestaande merkidentiteit (bosgroen/inkt-navy/crème, EB Garamond + IBM Plex Sans — nu deels via de Customizer ingesteld) als CSS, plus een paar site-brede verfijningen: een subtiele papier-grain achtergrond, standaard scherpe/bordered knoppen (zodat je dat niet per blok hoeft in te stellen), en een bescheidener kop-schaal.
Author: Felix Peters / Canopy Digital
Author URI: https://felixpeters.nl
Template: astra
Version: 1.0.0
Text Domain: felixpeters-child
*/

/* ==========================================================================
   1. Merktokens — pin de huidige Customizer-kleuren als CSS custom properties.
      Dit zijn dezelfde waarden als nu al via Astra > Customizer > Global
      Colors staan (--ast-global-color-0 t/m -8). Hier expliciet vastgelegd
      zodat de huisstijl niet uitsluitend van Customizer-instellingen afhangt.
   ========================================================================== */
:root {
  --fp-forest: #0D8359;
  --fp-forest-bright: #069966;
  --fp-ink: #171E30;
  --fp-cream: #F5F5DE;
  --fp-white: #FFFFFF;
  --fp-line: #E2E8F0;
  --fp-muted: #94A3B8;

  --fp-font-display: "EB Garamond", Georgia, "Iowan Old Style", serif;
  --fp-font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fp-radius: 4px;
}

/* ==========================================================================
   2. Papier-grain — subtiele tactiele textuur over de hele site, zelfde
      aanpak als de ontwerp-demo: nauwelijks zichtbaar, geen extra requests
      (SVG feTurbulence als data-URI), zit los van de content.
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Knoppen — standaard scherp + zichtbare rand, in plaats van per blok
      handmatig radius/rand instellen. Blokken die dit al expliciet zetten
      (bijv. de diensten-CTA's met btnBorderTopLeftRadius: 0) blijven zoals
      ze zijn — die inline block-instellingen wegen zwaarder dan deze regel.
   ========================================================================== */
.wp-block-button__link,
.uagb-button__link {
  border-radius: var(--fp-radius) !important;
}

/* ==========================================================================
   4. Kop-schaal — bescheiden bovengrens op de H1, zelfde les als uit de
      ontwerp-iteratie: een te grote hero-kop oogt al snel bombastisch.
      !important omdat UAGB-koppen hun eigen per-blok CSS meebrengen die
      anders voorrang zou krijgen. Controleer na installatie of dit op alle
      pagina's het gewenste effect heeft — sommige blokken hebben een eigen
      responsive font-size-instelling die hier bovenop kan komen.
   ========================================================================== */
h1,
.uagb-ifb-title-wrap .uagb-ifb-title {
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem) !important;
  line-height: 1.15 !important;
}

/* Uitzondering: "mijn-infoblock" is het compacte label/waarde-patroon
   (bijv. Klant / Rol / Periode op de klantcases) — geen paginakop, dus
   die mag niet meegetrokken worden door de H1-schaal hierboven. */
.mijn-infoblock .uagb-ifb-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   5. Focus-states — zichtbare, merk-consistente focus-ring voor toegankelijkheid.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--fp-forest);
  outline-offset: 2px;
}

/* ==========================================================================
   6. Quote-accent — trekt de bestaande UAGB-blockquotes (klantcases,
      testimonials) visueel gelijk met het bosgroen/EB Garamond-accent van
      de nieuwe homepage: groene rand in plaats van grijs, quote-tekst in
      cursieve EB Garamond in plaats van de standaard sans-serif.
   ========================================================================== */
.uagb-blockquote__skin-border .uagb-blockquote,
.uagb-blockquote__skin-border {
  border-color: var(--fp-forest) !important;
}
.uagb-blockquote__content {
  font-family: var(--fp-font-display) !important;
  font-style: italic;
}

/* ==========================================================================
   7. Amber wash (Global Color 4) — de crème sectie-achtergrond die overal
      op de site voorkomt (paginakop-banden op Over Felix, Cases, Contact,
      Artikelen) wordt door UAGB-blokken getrokken uit Astra Customizer >
      Global Colors > kleur 4 (--ast-global-color-4), nu nog #F5F5DE.
      Overschreven naar de officiële, lichtste tint uit de Canopy-amberramp
      (.claude/skills/canopy-digital-design/tokens/colors.css: amber-50 =
      #FEF6EF) zodat dit overal hetzelfde is als de wash op de nieuwe
      homepage — geen zelfbedachte kleur, en één centrale plek i.p.v. een
      override per pagina.
   ========================================================================== */
:root {
  --ast-global-color-4: #FEF6EF;
}

/* ==========================================================================
   8. Header-knop — Astra's Header Builder-knop ("Neem contact op") heeft
      een eigen, los van Global Colors ingestelde kleur (#2a9d8f, teal).
      Getrokken naar het bosgroen-merkaccent (amber-400 blijft accent-only,
      dus niet hier) zodat de knop overal hetzelfde is als op de nieuwe
      homepage.
   ========================================================================== */
.ast-custom-button {
  background: var(--fp-forest) !important;
  border-color: var(--fp-forest) !important;
}
.ast-custom-button:hover {
  background: var(--fp-forest-bright) !important;
  border-color: var(--fp-forest-bright) !important;
}