/* De aanvraag en de persoonlijke pagina in de stijl van de doelgroep-site (keuze van Melissa, 18 oktober 2026): de kleuren, letters en het logo
   van jogi-doelgroepen (public/css/horeca.css, trouw.css, bouw.css, clubs.css, en sinds 18 oktober ook beauty.css, coaching.css, feesten.css en streek.css). js/doelgroep-stijl.js zet data-doelgroep op <html>.
   Alleen de kleur- en lettervariabelen van de huisstijl veranderen, plus een paar vaste kleuren; zonder data-doelgroep blijft alles de huisstijl. */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-500-cursief.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("/fonts/mulish.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/fonts/nunito-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Bodoni"; src: url("/fonts/libre-bodoni.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "REM"; src: url("/fonts/rem.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("/fonts/baskervville.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("/fonts/baskervville-cursief.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/fonts/karla.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* Horeca: warm donker met goud, Newsreader en Instrument Sans, het accentwoord goud zonder schuin. */
:root[data-doelgroep="horeca"] {
  --nacht: #191815; --omber: #24221e; --blush: #d4b17a; --blush-zacht: #f3ead9; --roze: #85622a; --roze-donker: #6b4f22;
  --tekst: #1d1b18; --zacht: #5a554e; --lijn: #e5e0d8; --wit-zacht: #faf8f5; --taupe: #d6d0c6;
  --serif: "Newsreader", Georgia, serif; --letter: "Instrument Sans", system-ui, sans-serif;
}
/* Trouwlocaties: salie op ivoor, Cormorant Garamond 600 en Mulish. */
:root[data-doelgroep="trouwlocatie"] {
  --nacht: #3a4334; --omber: #46503f; --blush: #dfe8cf; --blush-zacht: #eef1e6; --roze: #526045; --roze-donker: #3f4a35;
  --tekst: #2b2a26; --zacht: #625e56; --lijn: #e2ddd2; --wit-zacht: #f7f4ee; --taupe: #dfe3d6;
  --serif: "Cormorant Garamond", Georgia, serif; --letter: "Mulish", system-ui, sans-serif;
}
/* Bouw: antraciet met bouwgeel, Manrope. Geel als tekst op wit is onleesbaar: daar het donkere geel. */
:root[data-doelgroep="bouw"] {
  --nacht: #11161c; --omber: #1a2129; --blush: #f5b800; --blush-zacht: #fdf3d1; --roze: #7a5800; --roze-donker: #5e4400;
  --tekst: #151a20; --zacht: #535a63; --lijn: #dfe3e8; --wit-zacht: #f4f5f7; --taupe: #c5cbd2;
  --serif: "Manrope", system-ui, sans-serif; --letter: "Manrope", system-ui, sans-serif;
}
/* Clubs: donker veld met grasgroen, Nunito Sans. */
:root[data-doelgroep="club"] {
  --nacht: #0e1613; --omber: #151f1b; --blush: #86c856; --blush-zacht: #e8f3df; --roze: #3f7a1c; --roze-donker: #2f5c15;
  --tekst: #111a16; --zacht: #56625c; --lijn: #e0e5e1; --wit-zacht: #f4f6f3; --taupe: #c2cbc6;
  --serif: "Nunito Sans", system-ui, sans-serif; --letter: "Nunito Sans", system-ui, sans-serif;
}
/* Beauty: ivoor en blush met oudroze, Libre Bodoni en REM. */
:root[data-doelgroep="beauty"] {
  --nacht: #2a1f22; --omber: #3a2b2f; --blush: #e7b3b0; --blush-zacht: #f6e8e4; --roze: #a8585f; --roze-donker: #8d454c;
  --tekst: #2b2124; --zacht: #6b5a5c; --lijn: #ecdcd7; --wit-zacht: #fcf8f5; --taupe: #dcc3bd;
  --serif: "Libre Bodoni", Georgia, serif; --letter: "REM", system-ui, sans-serif;
}
/* Coaching: warm wit en zand met bosgroen, Baskervville en Onest. */
:root[data-doelgroep="coaching"] {
  --nacht: #1d3a2f; --omber: #24463a; --blush: #b4cfbd; --blush-zacht: #efe7da; --roze: #24463a; --roze-donker: #1d3a2f;
  --tekst: #1c2a23; --zacht: #5a645e; --lijn: #e7dfd1; --wit-zacht: #faf7f1; --taupe: #d5c9b6;
  --serif: "Baskervville", Georgia, serif; --letter: "Onest", system-ui, sans-serif;
}
/* Feesten: crème met oudroze en goud (nieuw thema van de feestsite, 18 oktober 2026), Fraunces en Golos Text. */
:root[data-doelgroep="feesten"] {
  --nacht: #3b2430; --omber: #4a2d3c; --blush: #e9c6cf; --blush-zacht: #f3ebe3; --roze: #9c4a63; --roze-donker: #823a51;
  --tekst: #2a2224; --zacht: #6e6260; --lijn: #ece2d8; --wit-zacht: #faf6f1; --taupe: #ddcdbf;
  --serif: "Fraunces", Georgia, serif; --letter: "Golos Text", system-ui, sans-serif;
}
/* Streekwinkels: ivoor en zand met olijfgroen, Fraunces en Karla. */
:root[data-doelgroep="streek"] {
  --nacht: #2c3820; --omber: #3f4d24; --blush: #e4c681; --blush-zacht: #eee5d2; --roze: #4c5a24; --roze-donker: #3f4d24;
  --tekst: #2b2a1f; --zacht: #5c5949; --lijn: #e3d9c5; --wit-zacht: #f7f2e7; --taupe: #cdbfa4;
  --serif: "Fraunces", Georgia, serif; --letter: "Karla", system-ui, sans-serif;
}

/* Koppen: elke letter in zijn eigen gewicht, en alleen de trouwlocaties houden het schuine accentwoord. */
:root:is([data-doelgroep="horeca"], [data-doelgroep="beauty"]) :is(h1, h2, h3, legend) { font-weight: 400; }
:root:is([data-doelgroep="coaching"], [data-doelgroep="streek"]) :is(h1, h2, h3, legend) { font-weight: 500; }
:root[data-doelgroep="feesten"] :is(h1, h2, h3, legend) { font-weight: 500; }
:root[data-doelgroep="trouwlocatie"] :is(h1, h2, h3, legend) { font-weight: 600; }
:root[data-doelgroep="trouwlocatie"] :is(h1, h2) em { font-weight: 500; }
:root:is([data-doelgroep="bouw"], [data-doelgroep="club"]) :is(h1, h2, h3, legend) { font-weight: 700; letter-spacing: -.015em; }
:root:is([data-doelgroep="horeca"], [data-doelgroep="bouw"], [data-doelgroep="club"]) :is(h1, h2) em { font-style: normal; }

/* De vaste roze gloed bij een gekozen of actief veld, in de kleur van de doelgroep. */
:root[data-doelgroep] .veld :is(input, select, textarea):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 18%, transparent); }
:root[data-doelgroep] .site:has(input:checked) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 18%, transparent); }
:root[data-doelgroep] .punt[data-modus="bewerk"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 10%, transparent); }
:root[data-doelgroep] .wijziging[data-status="voorstel"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--roze) 12%, transparent); }

/* Het logo van de doelgroep-site: het woord "Jogi", een streepje en de naam ("Jogi | Horecawebsites"). */
.logo-doelgroep { display: inline-flex; align-items: center; gap: .7rem; }
.logo-doelgroep img { height: 2.4rem; width: auto; }
.logo-doelgroep span { padding-left: .7rem; border-left: 1px solid currentColor; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; white-space: nowrap; }
:root:is([data-doelgroep="bouw"], [data-doelgroep="club"]) .logo-doelgroep span { font-weight: 700; font-size: 1.1rem; }
:root[data-doelgroep="trouwlocatie"] .logo-doelgroep span { font-weight: 600; font-size: 1.4rem; }
@media (max-width: 380px) { .logo-doelgroep img { height: 2rem; } .logo-doelgroep span { font-size: 1.05rem; } }
/* Lange namen staan op twee regels, met "websites" eronder (doelgroep-stijl.js, wens Melissa 18 okt), zoals op de doelgroep-sites. */
.logo-doelgroep .merk-breek { display: block; padding: 0; border: 0; font-size: inherit; }
.logo-doelgroep span:has(> .merk-breek) { line-height: 1.05; }
/* "Streek- en buurtwinkel" is de langste eerste regel (keuze Melissa 18 okt): op de telefoon iets kleiner, zodat het bij twee regels blijft. */
@media (max-width: 440px) { :root[data-doelgroep="streek"] .logo-doelgroep > span { font-size: 1.02rem; } }
@media (max-width: 340px) { :root[data-doelgroep="streek"] .logo-doelgroep > span { font-size: .9rem; } }
/* Tot doelgroep-stijl.js het logo heeft vervangen, het gewone logo niet laten zien (anders flitst "Jogi creative studio" even voorbij). */
:root[data-doelgroep] .kop .logo:not(:has(.logo-doelgroep)) { visibility: hidden; }