/* FAAM Beweging: de knop "Niet op drukken" (0.2.0) en de stijlen die hij over heel faam.be legt.
   De stijlen zijn die van Stel je website samen (kleur, achtergrond, letters, hoeken). Ze werken via de variabelen
   van faam.be (--faam-*, in de extra CSS) en de letters van het thema; html[data-faam-stijl] wint van :root. */

/* ---------- De knop ---------- */
.faam-sk{
  --sk-bg:var(--faam-pagina,#FFFCF6);
  --sk-tekst:var(--faam-groen-diep,#22332A);
  --sk-rand:var(--faam-creme-rand,#E8DCC6);
  --sk-bel:var(--faam-groen-diep,#22332A);
  --sk-beltekst:#FFFFFF;
  position:absolute;right:56px;top:100%;z-index:20;transform:translateY(-50%);
  font-family:var(--wp--preset--font-family--manrope,system-ui,-apple-system,"Segoe UI",sans-serif);line-height:1.2;text-align:left
}
@media (max-width:600px){.faam-sk{right:32px}}
.faam-sk-knop{
  display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;margin:0;padding:4px 11px 4px 8px;
  border:1px solid var(--sk-rand);border-radius:999px;background:var(--sk-bg);color:var(--sk-tekst);
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0;line-height:1.2;text-transform:none;
  cursor:pointer;opacity:.85;box-shadow:none;transition:opacity .2s
}
.faam-sk-knop:hover,.faam-sk-knop:focus-visible{opacity:1}
.faam-sk-knop:focus-visible{outline:2px solid var(--faam-oker,#EEBE75);outline-offset:2px}
.faam-sk-punt{flex:none;width:9px;height:9px;border-radius:50%;background:#D64545;box-shadow:0 0 0 2px rgba(214,69,69,.18)}
.faam-sk-knop:active .faam-sk-punt{transform:scale(.8)}
.faam-sk-knop.is-gedrukt .faam-sk-punt{animation:faam-sk-puls .5s ease-out}
@keyframes faam-sk-puls{50%{box-shadow:0 0 0 7px rgba(214,69,69,0)}}
@media (max-width:600px){.faam-sk-knop{font-size:11px;padding:3px 9px 3px 7px}.faam-sk-punt{width:8px;height:8px}}

.faam-sk-bel{
  position:absolute;right:0;top:calc(100% + 9px);box-sizing:border-box;width:max-content;max-width:min(270px,calc(100vw - 32px));
  padding:9px 12px;border-radius:12px;background:var(--sk-bel);color:var(--sk-beltekst);
  font-size:13px;font-weight:500;line-height:1.4;box-shadow:0 10px 28px rgba(0,0,0,.18)
}
.faam-sk-bel::before{content:"";position:absolute;right:var(--sk-pijl,22px);top:-5px;width:10px;height:10px;background:inherit;transform:rotate(45deg)}
.faam-sk-bel a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.faam-sk-bel small{display:block;margin-top:3px;font-size:11px;opacity:.7}
.faam-sk-bel[hidden]{display:none}
@media print{.faam-sk{display:none}}

/* Even overvloeien bij een wissel (het script zet de klasse 0,7 s). */
html.faam-sk-wissel,html.faam-sk-wissel *{transition:background-color .5s,color .5s,border-color .5s !important}

/* ---------- De stijlen ---------- */
/* Letters: de koppen krijgen de koppenletter van de stijl, de rest de tekstletter (via de variabele van het thema). */
html[data-faam-stijl] body :is(h1,h2,h3,.wp-block-site-title){font-family:var(--sk-kop) !important}
html[data-faam-stijl] body{--wp--preset--font-family--manrope:var(--sk-letter)}

/* Hoeken: recht (Kobalt) en zacht (Nacht, Blush). Rond is zoals faam.be. */
html[data-faam-stijl="kobalt"]{--faam-r:4px;--faam-r-klein:2px;--faam-r-groot:6px}
html[data-faam-stijl="kobalt"] body :is(.wp-element-button,.wp-block-button__link,.faam-header > .alignwide,.faam-aankondiging){border-radius:4px !important}
html[data-faam-stijl="nacht"],html[data-faam-stijl="blush"]{--faam-r:14px;--faam-r-klein:6px;--faam-r-groot:28px}
html[data-faam-stijl="nacht"] body :is(.wp-element-button,.wp-block-button__link),
html[data-faam-stijl="blush"] body :is(.wp-element-button,.wp-block-button__link){border-radius:10px !important}

/* Koppen in een letter met één gewicht: niet nagemaakt vet. */
html[data-faam-stijl="zon"] body :is(h1,h2,h3),
html[data-faam-stijl="blush"] body :is(h1,h2,h3){font-weight:400 !important;letter-spacing:-.01em !important}

/* Kobalt: helder, karakter (Bricolage Grotesque en Plus Jakarta Sans). */
html[data-faam-stijl="kobalt"]{
  --faam-pagina:#FFFFFF;--faam-creme:#EEF1FD;--faam-creme-rand:#D9DEF5;--faam-lijn:#D9DEF5;--faam-mint:#F3F5FE;--faam-grijs-vlak:#F3F5FE;
  --faam-groen:#1D3FE0;--faam-groen-donker:#1D3FE0;--faam-groen-hover:#1631B5;--faam-groen-diep:#111A3A;--faam-groen-zacht:#8EA0F0;--faam-groen-licht:#D9DEF8;
  --faam-oker:#C9D3FB;--faam-zacht:#4A5170;--faam-donker:#111A3A;
  --sk-kop:"FAAM SK Bricolage Grotesque","Bricolage Grotesque",system-ui,sans-serif;--sk-letter:"FAAM SK Plus Jakarta Sans","Plus Jakarta Sans",system-ui,sans-serif
}
/* Abrikoos: studio, karakter. */
html[data-faam-stijl="abrikoos"]{
  --faam-pagina:#FFF3EA;--faam-creme:#FFE3CF;--faam-creme-rand:#F2CFB6;--faam-lijn:#F2CFB6;--faam-mint:#FFEADB;--faam-grijs-vlak:#FFEADB;
  --faam-groen:#C9551F;--faam-groen-donker:#B2481A;--faam-groen-hover:#8F3812;--faam-groen-diep:#3A1D0E;--faam-groen-zacht:#E9A27F;--faam-groen-licht:#F8D9C6;
  --faam-oker:#F6B48E;--faam-zacht:#6B4A3A;--faam-donker:#3A1D0E;
  --sk-kop:"FAAM SK Bricolage Grotesque","Bricolage Grotesque",system-ui,sans-serif;--sk-letter:"FAAM SK Plus Jakarta Sans","Plus Jakarta Sans",system-ui,sans-serif
}
/* Lavendel: speels, eigentijds (Outfit). */
html[data-faam-stijl="lavendel"]{
  --faam-pagina:#F5F2FB;--faam-creme:#E9E2F8;--faam-creme-rand:#D8CEF0;--faam-lijn:#D8CEF0;--faam-mint:#EEE9FA;--faam-grijs-vlak:#EEE9FA;
  --faam-groen:#6A4FC9;--faam-groen-donker:#5640A8;--faam-groen-hover:#43318A;--faam-groen-diep:#2A1F4F;--faam-groen-zacht:#AE9DE6;--faam-groen-licht:#DDD3F5;
  --faam-oker:#CDBEF2;--faam-zacht:#5A5275;--faam-donker:#2A1F4F;
  --sk-kop:"FAAM SK Outfit",Outfit,system-ui,sans-serif;--sk-letter:"FAAM SK Outfit",Outfit,system-ui,sans-serif
}
/* Zon: warm, retro (Young Serif en Plus Jakarta Sans). */
html[data-faam-stijl="zon"]{
  --faam-pagina:#FFF6DA;--faam-creme:#FFE9A8;--faam-creme-rand:#F1DD9C;--faam-lijn:#F1DD9C;--faam-mint:#FFF0C2;--faam-grijs-vlak:#FFF0C2;
  --faam-groen:#22305A;--faam-groen-donker:#22305A;--faam-groen-hover:#17213F;--faam-groen-diep:#22305A;--faam-groen-zacht:#7B86A8;--faam-groen-licht:#F7E3A6;
  --faam-oker:#FFD25E;--faam-zacht:#565E78;--faam-donker:#22305A;
  --sk-kop:"FAAM SK Young Serif","Young Serif",Georgia,serif;--sk-letter:"FAAM SK Plus Jakarta Sans","Plus Jakarta Sans",system-ui,sans-serif
}
/* Blush: salon, magazine (DM Serif Display en Outfit). */
html[data-faam-stijl="blush"]{
  --faam-pagina:#FBEEF0;--faam-creme:#F6DCE2;--faam-creme-rand:#EDC6CE;--faam-lijn:#EDC6CE;--faam-mint:#F8E4E8;--faam-grijs-vlak:#F8E4E8;
  --faam-groen:#8E2C48;--faam-groen-donker:#7A2440;--faam-groen-hover:#5E1B31;--faam-groen-diep:#3B1420;--faam-groen-zacht:#C98A9C;--faam-groen-licht:#F1D0D8;
  --faam-oker:#EDB4C2;--faam-zacht:#6E4E57;--faam-donker:#3B1420;
  --sk-kop:"FAAM SK DM Serif Display","DM Serif Display",Georgia,serif;--sk-letter:"FAAM SK Outfit",Outfit,system-ui,sans-serif
}

/* Nacht: stoer, eigentijds (Outfit), donker.
   Heel de pagina wordt omgekeerd (invert + hue-rotate), zodat ook onderdelen met vaste kleuren leesbaar donker worden.
   De variabelen hieronder zijn vooraf omgerekend: na het omkeren geven ze de kleuren van Nacht
   (achtergrond #121619, accent #8FD3C1). Foto's, video en de knop zelf worden teruggedraaid. */
html[data-faam-stijl="nacht"]{
  filter:invert(1) hue-rotate(180deg);
  --faam-pagina:#E6EAED;--faam-creme:#D8E0E4;--faam-creme-rand:#C2CCD2;--faam-lijn:#C2CCD2;--faam-mint:#D9E2E6;--faam-grijs-vlak:#DBE1E5;
  --faam-groen:#084C3A;--faam-groen-donker:#084C3A;--faam-groen-hover:#033225;--faam-groen-diep:#111D18;--faam-groen-zacht:#4D8D7E;--faam-groen-licht:#B6D1CB;
  --faam-oker:#85C0B4;--faam-zacht:#515E59;--faam-donker:#0D1512;
  --sk-kop:"FAAM SK Outfit",Outfit,system-ui,sans-serif;--sk-letter:"FAAM SK Outfit",Outfit,system-ui,sans-serif
}
html[data-faam-stijl="nacht"] :is(img:not(picture img),picture,video,canvas,iframe,embed,object,[style*="background-image"]),
html[data-faam-stijl="nacht"] .faam-sk{filter:invert(1) hue-rotate(180deg)}
/* Vlakken die al donker waren, blijven zoals ze zijn (het script markeert ze). */
html[data-faam-stijl="nacht"] .faam-sk-donker{filter:invert(1) hue-rotate(180deg)}
html[data-faam-stijl="nacht"] .faam-sk-donker :is(img:not(picture img),picture,video,canvas,iframe,embed,object,[style*="background-image"]){filter:none}
html[data-faam-stijl="nacht"] .faam-sk{--sk-bg:#121619;--sk-tekst:#E6EEEB;--sk-rand:#2C363C;--sk-bel:#E6EEEB;--sk-beltekst:#121619}
html[data-faam-stijl="nacht"] .faam-sk :is(img,picture,video){filter:none}

@media (prefers-reduced-motion:reduce){
  .faam-sk-knop,.faam-sk-knop.is-gedrukt .faam-sk-punt{transition:none;animation:none}
  html.faam-sk-wissel,html.faam-sk-wissel *{transition:none !important}
}