/* ===== Omstreeks — merk-override. Laadt NA built/style.css, werkt zonder rebuild. ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{ --font-mono:"Space Mono", ui-monospace, monospace; }

/* 1 — Vermiljoen als accent; knoppen blijven deep (omlijnd, zie onder) */
:root:is([data-theme="Omstreeks"]){
  --accent:#F0481E;
  --btn:var(--base);
  --btn-text:var(--contrast);
  --link:#F0481E;
  /* 5 — ruit-divider i.p.v. sparkle */
  --fancy-icon:"\25C6";
}

/* 3 — Omlijnde pill-knoppen: mono-uppercase, hover vult in */
[data-theme="Omstreeks"] .var-primary{
  background-color:transparent;
  color:var(--color-btn);
  border:1.5px solid var(--color-btn);
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:background-color .16s, color .16s, opacity .16s;
}
[data-theme="Omstreeks"] .var-primary:hover{
  opacity:1;
  background-color:var(--color-btn);
  color:var(--color-btn-text);
}
[data-theme="Omstreeks"] .var-secondary{
  background-color:transparent;
  color:var(--color-text);
  border:1.5px solid color-mix(in srgb, var(--color-text) 45%, transparent);
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
[data-theme="Omstreeks"] .var-secondary:hover{
  opacity:1;
  background-color:var(--color-text);
  color:var(--color-primary);
}
/* Footer-knop: paper-omlijnd op donker, hover vult paper in */
[data-theme="Omstreeks"] .var-footer{
  background-color:transparent;
  color:var(--color-footer-btn-text);
  border:1.5px solid color-mix(in srgb, var(--color-footer-btn-text) 42%, transparent);
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
[data-theme="Omstreeks"] .var-footer:hover{
  opacity:1;
  background-color:var(--color-footer-text);
  color:var(--color-footer-primary);
}

/* 2 — Mono op eyebrows, meta, tags, captions */
[data-theme="Omstreeks"] .fancy-title{ font-family:var(--font-mono); letter-spacing:.16em; }
[data-theme="Omstreeks"] .text-meta{ font-family:var(--font-mono); letter-spacing:.03em; }
[data-theme="Omstreeks"] .figcaption{ font-family:var(--font-mono); letter-spacing:.03em; }

/* 9 — Artikel-typografie: comfortabel lezen in Newsreader */
[data-theme="Omstreeks"] .gh-content{ line-height:1.72; }
[data-theme="Omstreeks"] .gh-content > p,
[data-theme="Omstreeks"] .gh-content > ul,
[data-theme="Omstreeks"] .gh-content > ol,
[data-theme="Omstreeks"] .gh-content > blockquote{ max-width:68ch; }
[data-theme="Omstreeks"] .gh-content figcaption{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
}

/* Contourvelden */
.oms-contour{ position:absolute; pointer-events:none; z-index:0; }
.oms-contour svg{ display:block; overflow:visible; }

/* ===== Omstreeks — typografie & navigatie (klant-input) ===== */

/* Hoofdnavigatie: Space Mono 12px */
[data-theme="Omstreeks"] .navbar nav a,
[data-theme="Omstreeks"] .navbar nav button{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
}

/* Hero-titel: Newsreader ~50px, schaalt mee naar beneden */
[data-theme="Omstreeks"] .oms-hero-title{
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:clamp(2rem, 7vw, 50px);
  line-height:1.1;
}

/* Manifesto: Newsreader ~30px, schaalt mee */
[data-theme="Omstreeks"] .oms-manifesto-text{
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:clamp(1.375rem, 4.5vw, 30px);
  line-height:1.28;
}

/* Footer-CTA: Newsreader ~30px, schaalt mee */
[data-theme="Omstreeks"] .oms-footer-cta{
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:clamp(1.375rem, 4.5vw, 30px);
  line-height:1.28;
}

/* ===== Omstreeks — gewichten & mono-uppercase (klant-input) ===== */

/* Newsreader: overal dikte 400 */
:root:is([data-theme="Omstreeks"]){
  --font-weight-variable:400;
  --font-weight-weight-body:400;
}

/* Bold/strong altijd 700 */
[data-theme="Omstreeks"] b,
[data-theme="Omstreeks"] strong{ font-weight:700; }

/* Alles in Space Mono altijd in kapitalen */
[data-theme="Omstreeks"] .var-primary,
[data-theme="Omstreeks"] .var-secondary,
[data-theme="Omstreeks"] .var-footer,
[data-theme="Omstreeks"] .fancy-title,
[data-theme="Omstreeks"] .text-meta,
[data-theme="Omstreeks"] .figcaption,
[data-theme="Omstreeks"] .navbar nav a,
[data-theme="Omstreeks"] .navbar nav button{
  text-transform:uppercase;
}

/* ===== Omstreeks — sitenaam & mono-formaat (klant-input) ===== */

/* Sitenaam (wordmark): Space Grotesk 500, 20px, brede tracking, hover -> vermiljoen */
[data-theme="Omstreeks"] .oms-sitename{
  font-family:"Space Grotesk", sans-serif;
  font-weight:500;
  font-size:20px;
  letter-spacing:4.8px;
  text-transform:uppercase;
  margin-inline-end:-4.8px; /* compenseert de tracking-spatie na de laatste letter */
}
[data-theme="Omstreeks"] a:hover .oms-sitename,
[data-theme="Omstreeks"] .oms-sitename:hover{
  color:var(--accent);
}

/* Space Mono uitsluitend 12-13px: tekstknoppen 13px, meta 12px
   (nav, eyebrows en bijschriften staan al op 12px) */
[data-theme="Omstreeks"] .btn-lg,
[data-theme="Omstreeks"] .btn-base,
[data-theme="Omstreeks"] .btn-sm,
[data-theme="Omstreeks"] .btn-xs{
  font-size:13px;
}
[data-theme="Omstreeks"] .text-meta{
  font-size:12px;
}

/* ===== Omstreeks — manifest (klant-input) ===== */

/* Manifest 2x breder (was max-w-xs / 20rem) */
[data-theme="Omstreeks"] .oms-manifesto{ max-width:40rem; }

/* Hulpklasse om een woord vermiljoen te maken in het manifest-veld:
   <span class="oms-em">woord</span> */
[data-theme="Omstreeks"] .oms-em{ color:var(--accent); }

/* ===== Omstreeks — artikel-typografie (post & page) + page/tag-titel ===== */

/* Naam-kleuren (pas hier centraal aan). vermiljoen = var(--accent) = #F0481E */
:root:is([data-theme="Omstreeks"]){
  --oms-deep:#2e342c;   /* koppen (H2/H3/H4, quote)            */
  --oms-ink:#383d31;    /* bodytekst                           */
  --oms-moss:#6f7860;   /* metadata + bronregel quote          */
  --oms-mist:#aab0a0;   /* scheidingsstip (·) in metadata      */
  --oms-stone:#8c9282;  /* bijschrift bij beeld (figcaption)   */
}

/* --- Metadata: één centrale regel, Space Mono, moss, items met mist-stip --- */
[data-theme="Omstreeks"] .oms-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oms-moss);
}
[data-theme="Omstreeks"] .oms-meta .oms-meta-item{ color:var(--oms-moss); }
[data-theme="Omstreeks"] .oms-meta a{ color:inherit; }
[data-theme="Omstreeks"] .oms-meta .oms-meta-item:not(:first-child)::before{
  content:"\00B7";            /* · */
  color:var(--oms-mist);
  margin:0 .6em;
  letter-spacing:0;
}

/* --- Koppen in de tekst: Space Grotesk, deep --- */
[data-theme="Omstreeks"] .prose :where(h2):not(:where(.kg-card *)){
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--oms-deep);
}
[data-theme="Omstreeks"] .prose :where(h3):not(:where(.kg-card *)){
  font-family:"Space Grotesk", sans-serif;
  font-weight:500;
  font-size:19px;
  line-height:1.25;
  letter-spacing:0;
  color:var(--oms-deep);
}
[data-theme="Omstreeks"] .prose :where(h4):not(:where(.kg-card *)){
  font-family:"Space Grotesk", sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.3;
  letter-spacing:0;
  color:var(--oms-deep);
}

/* --- Bodytekst: Newsreader, ink --- */
[data-theme="Omstreeks"] .prose :where(p):not(:where(blockquote *)):not(:where(.kg-card *)){
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:21px;
  line-height:1.72;
  color:var(--oms-ink);
}
[data-theme="Omstreeks"] .prose :where(li):not(:where(.kg-card *)){
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:21px;
  line-height:1.72;
  color:var(--oms-ink);
}

/* Links: vermiljoen, dunne onderlijn die bij hover volledig oplicht */
[data-theme="Omstreeks"] .prose :where(a):not(:where(.kg-card *)){
  color:var(--accent);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--accent) 35%, transparent);
  transition:text-decoration-color .16s ease, opacity .16s ease;
}
[data-theme="Omstreeks"] .prose :where(a):not(:where(.kg-card *)):hover{
  opacity:1;
  text-decoration-color:var(--accent);
}

/* Opsommingen: em-dash in vermiljoen; nummers in vermiljoen */
[data-theme="Omstreeks"] .prose :where(ul)>li::marker{
  content:"\2014\00A0\00A0";  /* —   */
  color:var(--accent);
}
[data-theme="Omstreeks"] .prose :where(ol)>li::marker{
  color:var(--accent);
}

/* --- Verticaal ritme: alles via margin-top (geen collapse-verrassingen) --- */
[data-theme="Omstreeks"] .prose>:not(:last-child){ margin-block-end:0; }
[data-theme="Omstreeks"] .prose>*{ margin-top:26px; }            /* 26px tussen alinea's */
[data-theme="Omstreeks"] .prose :where(h2):not(:where(.kg-card *)){ margin-top:48px; }
[data-theme="Omstreeks"] .prose :where(h3):not(:where(.kg-card *)){ margin-top:34px; }
[data-theme="Omstreeks"] .prose :where(h4):not(:where(.kg-card *)){ margin-top:28px; }
[data-theme="Omstreeks"] .prose :where(h2):not(:where(.kg-card *))+*{ margin-top:18px; }  /* ruimte ónder H2 */
[data-theme="Omstreeks"] .prose :where(h3):not(:where(.kg-card *))+*{ margin-top:12px; }  /* ruimte ónder H3 */
[data-theme="Omstreeks"] .prose :where(h4):not(:where(.kg-card *))+*{ margin-top:10px; }
[data-theme="Omstreeks"] .prose>:first-child{ margin-top:0; }

/* --- Quote: Newsreader cursief, gecentreerd, 75% van de bodytekst, vermiljoen ruit erboven.
   Geldt voor zowel de pull-quote (kg-blockquote-alt) als de gewone quote (blockquote). --- */
[data-theme="Omstreeks"] .prose .kg-blockquote-alt,
[data-theme="Omstreeks"] .prose :where(blockquote):not(.kg-blockquote-alt){
  grid-column:regular;        /* in de bodytekst-kolom i.p.v. de bredere wide-kolom */
  width:75%;                  /* 75% van de breedte van de bodytekst */
  margin-inline:auto;         /* gecentreerd */
  border-inline-start-width:0;/* reset de standaard linker-streep van de gewone quote */
  padding-inline-start:0;
  font-family:"Newsreader", serif;
  font-style:italic;
  font-weight:400;
  font-size:30px;
  line-height:1.36;
  color:var(--oms-deep);
  text-align:center;
}
@media (max-width:640px){
  [data-theme="Omstreeks"] .prose .kg-blockquote-alt,
  [data-theme="Omstreeks"] .prose :where(blockquote):not(.kg-blockquote-alt){ font-size:23px; }
}
/* De alinea binnen een gewone quote erft de quote-opmaak (geen body-stijl) */
[data-theme="Omstreeks"] .prose :where(blockquote):not(.kg-blockquote-alt) :where(p){
  font-family:inherit;
  font-style:inherit;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  text-align:inherit;
}
/* Bronregel onder de quote: markeer met <cite> of <span class="oms-quote-source"> */
[data-theme="Omstreeks"] .prose .kg-blockquote-alt cite,
[data-theme="Omstreeks"] .prose blockquote cite,
[data-theme="Omstreeks"] .prose .oms-quote-source{
  display:block;
  margin-top:16px;
  font-family:var(--font-mono);
  font-style:normal;
  font-weight:400;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6f7860;
}
[data-theme="Omstreeks"] .prose .kg-blockquote-alt cite::before,
[data-theme="Omstreeks"] .prose blockquote cite::before,
[data-theme="Omstreeks"] .prose .oms-quote-source::before{ content:"\2014\00A0"; }  /* "— " */

/* --- Bijschrift bij beeld (figcaption in tekst + feature-image) --- */
[data-theme="Omstreeks"] .prose figcaption,
[data-theme="Omstreeks"] .figcaption{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--oms-stone);
  text-align:center;
  margin-top:13px;
}

/* --- Page- en tag-titel in Space Grotesk (post-titel blijft ongewijzigd) --- */
[data-theme="Omstreeks"] .oms-title-grotesk{
  font-family:"Space Grotesk", sans-serif;
}

/* ===== Omstreeks — homepage hero (klant-input) ===== */

/* Hero-tekstblok even breed als het manifest-blok (40rem) */
[data-theme="Omstreeks"] .oms-hero{ max-width:40rem; }

/* Hero-knop in darkmode identiek aan de nieuwsbrief-knop onderaan (var-footer):
   paper-omlijnd op donker, hover vult paper in */
[data-theme="Omstreeks"].dark .oms-hero-cta{
  background-color:transparent;
  color:var(--color-footer-btn-text);
  border:1.5px solid color-mix(in srgb, var(--color-footer-btn-text) 42%, transparent);
}
[data-theme="Omstreeks"].dark .oms-hero-cta:hover{
  opacity:1;
  background-color:var(--color-footer-text);
  color:var(--color-footer-primary);
}

/* ===== Omstreeks — #732F4B vervangen door Vermiljoen (accent) =====
   Deze kleur komt niet voor in de theme-bestanden; ze staat vermoedelijk in
   code-injection of in de inhoud van een bericht. Onderstaande regels vangen
   inline gebruik van #732F4B op en kleuren het naar Vermiljoen (var(--accent)).
   Vervang de kleur bij voorkeur óók bij de bron (code-injection / inhoud). */
[data-theme="Omstreeks"] [style*="color:#732F4B" i],
[data-theme="Omstreeks"] [style*="color: #732F4B" i]{ color:var(--accent) !important; }

[data-theme="Omstreeks"] [style*="background:#732F4B" i],
[data-theme="Omstreeks"] [style*="background: #732F4B" i],
[data-theme="Omstreeks"] [style*="background-color:#732F4B" i],
[data-theme="Omstreeks"] [style*="background-color: #732F4B" i]{ background-color:var(--accent) !important; }

[data-theme="Omstreeks"] [style*="border-color:#732F4B" i],
[data-theme="Omstreeks"] [style*="border-color: #732F4B" i]{ border-color:var(--accent) !important; }

/* ===== Omstreeks — posttitel (klant-input) ===== */
/* Posttitel in Newsreader 50px, op mobiel 34px. Kleur blijft via heading-3xl
   (dus licht in dark mode). */
[data-theme="Omstreeks"] .oms-post-title{
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:50px;
  line-height:1.1;
  letter-spacing:-0.01em;
}
@media (max-width:640px){
  [data-theme="Omstreeks"] .oms-post-title{ font-size:34px; }
}

/* ===== Omstreeks — dark mode: overal de lichte hero-tekstkleur ===== */
/* In dark mode kregen de artikelteksten nog de donkere papier-kleuren mee,
   waardoor ze op de donkere achtergrond nauwelijks leesbaar waren. Hier zetten
   we koppen, bodytekst, quote, metadata en bijschriften op dezelfde lichte
   kleur als de hero-titel: var(--dark-heading). */
[data-theme="Omstreeks"].dark{
  --oms-deep:var(--dark-heading);
  --oms-ink:var(--dark-heading);
  --oms-moss:var(--dark-heading);
  --oms-stone:var(--dark-heading);
  --oms-mist:color-mix(in srgb, var(--dark-heading) 35%, transparent);
}
/* Hardgecodeerde bronregel-kleur onder de quote ook licht in dark mode */
[data-theme="Omstreeks"].dark .prose .kg-blockquote-alt cite,
[data-theme="Omstreeks"].dark .prose blockquote cite,
[data-theme="Omstreeks"].dark .prose .oms-quote-source{
  color:color-mix(in srgb, var(--dark-heading) 75%, transparent);
}

/* ===== Omstreeks — Ghost-accentkleur (paars) naar Vermiljoen =====
   Dwingt de accentkleur die Ghost injecteert (--ghost-accent-color) naar
   Vermiljoen, voor alles in het thema dat die kleur leest. LET OP: de
   members-popup (Portal) haalt zijn accent rechtstreeks uit de Ghost-instelling,
   niet uit deze CSS. Staat daar nog paars? Pas dan de Accentkleur aan in
   Ghost Admin -> Design -> Brand naar #F0481E. */
:root[data-theme="Omstreeks"]{ --ghost-accent-color:#F0481E; }

/* ===== Omstreeks — pagina-titels & journal-posttitel (klant-input) ===== */

/* Alle pagina-koppen (gewone pages + /werk + /journal) standaard 60px */
[data-theme="Omstreeks"] .oms-page-title{
  font-size:60px;
  line-height:1.08;
  letter-spacing:-0.015em;
}
@media (max-width:640px){
  [data-theme="Omstreeks"] .oms-page-title{ font-size:38px; }
}

/* Excerpt onder een pagina-titel: zelfde stijl als de bodytekst van een post */
[data-theme="Omstreeks"] .oms-page-excerpt{
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:19px;
  line-height:1.72;
  color:var(--oms-ink);
  text-align:center;
}

/* Excerpt onder de titel in een journal-kaart: korte, ingetogen teaser */
[data-theme="Omstreeks"] .oms-card-excerpt{
  margin-top:6px;
  font-family:"Newsreader", serif;
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  color:var(--oms-moss);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
[data-theme="Omstreeks"] .oms-card-excerpt:empty{ display:none; }

/* Posts met de tag 'journal': titel in Space Grotesk 60px (mobiel 38px) */
[data-theme="Omstreeks"] .oms-post-title--journal{
  font-family:"Space Grotesk", sans-serif;
  font-weight:500;
  font-size:60px;
  line-height:1.08;
  letter-spacing:-0.015em;
}
@media (max-width:640px){
  [data-theme="Omstreeks"] .oms-post-title--journal{ font-size:38px; }
}