/* ============================================================================
   Sugardad.nl — content.css
   Pagina-specifieke stijlen voor Over ons, Veiligheidscentrum, Support en de
   juridische pagina's (OverOns/Veiligheid/Support/Juridisch.dc.html).
   Geladen via {% block extra_css %} bovenop styles.css (tokens + componenten);
   radii en kleuren volgen het tokensysteem uit styles.css.
   ==========================================================================*/

/* ── Subhero: donkere paginakop (gedeeld door de vier pagina's) ─────────── */
.subhero { background: linear-gradient(160deg, var(--antraciet) 0%, var(--gradient-diep) 100%); color: var(--wit-zacht); padding: 72px 24px; }
.subhero__in { max-width: 760px; margin: 0 auto; text-align: center; }
.subhero .eyebrow { color: var(--goud); margin-bottom: 18px; }
.subhero h1 { font-size: 52px; line-height: 1.06; color: var(--wit-warm); margin-bottom: 20px; }
.subhero__lead { font-size: 17px; line-height: 1.7; color: var(--tekst-donker-3); }
.subhero--compact { padding: 56px 24px; }
.subhero--compact h1 { font-size: 44px; margin-bottom: 12px; }
.subhero--compact .subhero__lead { font-size: 16px; line-height: 1.6; }
.subhero__schild { width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--goud); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--goud); }
.subhero--links { padding: 46px 24px; }
.subhero--links .subhero__in { max-width: 1080px; text-align: left; }
.subhero--links h1 { font-size: 40px; margin-bottom: 8px; }
.subhero--links .subhero__lead { font-size: 15px; }

/* ── Crème contentvlak onder de subhero ─────────────────────────────────── */
.inhoud-vlak { background: var(--creme); }

/* ── Donkere CTA-kaart (Over ons + Veiligheid) ──────────────────────────── */
.cta-kaart { background: linear-gradient(160deg, var(--antraciet), var(--gradient-diep)); border-radius: var(--r-kaart-lg); padding: 52px 40px; text-align: center; color: var(--wit-zacht); }
.cta-kaart h2 { font-size: 32px; color: var(--wit-warm); margin-bottom: 12px; }
.cta-kaart p { font-size: 15.5px; color: var(--tekst-donker-3); margin: 0 auto 26px; max-width: 460px; }
.cta-kaart--compact { padding: 40px; }
.cta-kaart--compact h2 { font-size: 28px; margin-bottom: 10px; }
.cta-kaart--compact p { font-size: 15px; max-width: 480px; margin-bottom: 24px; }
.cta-kaart__acties { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-kaart__acties .btn { font-size: 14.5px; padding: 14px 28px; }

/* ── Over ons ───────────────────────────────────────────────────────────── */
.oo-in { max-width: 1120px; margin: 0 auto; padding: 64px 24px 100px; }

.oo-story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 72px; }
.oo-story h2 { font-size: 34px; color: var(--inkt); margin-bottom: 18px; }
.oo-story p { font-size: 15.5px; line-height: 1.75; color: var(--tekst-3); }
.oo-story p + p { margin-top: 16px; }
.oo-story__beeld { aspect-ratio: 4 / 3; border-radius: var(--r-kaart-lg); overflow: hidden; }
.oo-story__beeld .beeldvlak { height: 100%; }

/* Subtiele bronvermelding van het sfeerbeeldmateriaal, onderaan de pagina. */
.beeldcredit { margin-top: 40px; text-align: center; font-size: 12.5px; color: var(--tekst-5); }
.beeldcredit a { color: inherit; text-decoration: underline; }

.oo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 72px; }
.statkaart { padding: 28px 22px; text-align: center; }
.statkaart__cijfer { font-family: var(--serif); font-size: 42px; font-weight: 700; color: var(--goud); line-height: 1; }
.statkaart__label { font-size: 13.5px; color: var(--tekst-4); margin-top: 8px; }

.oo-kop { text-align: center; }
.oo-kop h2 { font-size: 34px; color: var(--inkt); margin-bottom: 6px; }
.oo-kop p { font-size: 15px; color: var(--tekst-4); margin-bottom: 34px; }
.oo-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 72px; }
.waarde-kaart { padding: 32px; }
.waarde-kaart__icoon { width: 50px; height: 50px; border-radius: var(--r-kaart); background: rgba(198, 169, 104, .12); color: var(--goud-tekst); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; }
.waarde-kaart h3 { font-size: 21px; color: var(--inkt); margin-bottom: 10px; }
.waarde-kaart p { font-size: 14.5px; line-height: 1.65; color: var(--tekst-4); }

/* ── Veiligheidscentrum ─────────────────────────────────────────────────── */
.vg-in { max-width: 1080px; margin: 0 auto; padding: 44px 24px 100px; }

.vg-pijlers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 52px; }
.pijler-kaart { padding: 26px; }
.pijler-kaart__icoon { font-size: 28px; margin-bottom: 12px; }
.pijler-kaart h3 { font-size: 19px; color: var(--inkt); margin-bottom: 8px; }
.pijler-kaart p { font-size: 14px; color: var(--tekst-4); line-height: 1.6; }

.vg-kop h2 { font-size: 28px; color: var(--inkt); margin-bottom: 6px; }
.vg-kop p { font-size: 14.5px; color: var(--tekst-4); margin-bottom: 24px; }
.vg-tips { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; margin: 0 0 52px; }
.tip-kaart { padding: 22px; display: flex; gap: 16px; }
.tip-kaart__nr { width: 34px; height: 34px; border-radius: 50%; background: rgba(198, 169, 104, .15); color: var(--goud-tekst); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tip-kaart__titel { font-size: 15.5px; font-weight: 600; color: var(--inkt); margin-bottom: 4px; }
.tip-kaart p { font-size: 13.5px; color: var(--tekst-4); line-height: 1.6; }

.vlaggenbox { --vlag-sub: #92564F; --vlag-item: #5A2B25; background: var(--rood-bg); border: 1px solid var(--rood-rand); border-radius: var(--r-kaart-lg); padding: 32px; margin-bottom: 44px; }
.vlaggenbox h2 { font-size: 26px; color: var(--rood); margin-bottom: 6px; }
.vlaggenbox__sub { font-size: 14px; color: var(--vlag-sub); margin-bottom: 20px; }
.vlaggenbox__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.vlag { display: flex; gap: 10px; font-size: 14px; color: var(--vlag-item); line-height: 1.5; }
.vlag__vaan { color: var(--rood-fel); flex-shrink: 0; }

/* ── Support ────────────────────────────────────────────────────────────── */
.sup-in { max-width: 1080px; margin: 0 auto; padding: 40px 24px 100px; }

.sup-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 44px; }
.cat-kaart { padding: 22px; text-align: center; }
.cat-kaart__icoon { font-size: 26px; margin-bottom: 10px; }
.cat-kaart__titel { font-size: 15px; font-weight: 600; color: var(--inkt); }
.cat-kaart__aantal { font-size: 12.5px; color: var(--tekst-5); margin-top: 4px; }

.sup-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.sup-grid h2 { font-size: 26px; color: var(--inkt); margin-bottom: 18px; }

.sup-form { padding: 30px; position: sticky; top: 88px; }
.sup-form h3 { font-size: 22px; color: var(--inkt); margin-bottom: 6px; }
.sup-form__sub { font-size: 13.5px; color: var(--tekst-5); margin-bottom: 22px; }
.sup-form .veld { margin-bottom: 14px; }
.sup-form__voet { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--tekst-5); line-height: 1.7; }

/* ── Juridisch (privacy / voorwaarden / cookies) ────────────────────────── */
.jur-grid { max-width: 1080px; margin: 0 auto; padding: 40px 24px 100px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.jur-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 6px; }
.jur-nav__link { text-align: left; white-space: nowrap; font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: var(--r-kaart); border: 1px solid transparent; color: var(--tekst-3); transition: all .18s ease; }
.jur-nav__link:hover { color: var(--goud-tekst); }
.jur-nav__link.is-actief { border-color: var(--goud); background: rgba(198, 169, 104, .12); color: var(--goud-tekst); }

.jur-kaart { --jur-disclaimer-rand: #E7DCC4; border-radius: var(--r-kaart-lg); padding: 40px 44px; min-width: 0; }
.jur-disclaimer { background: var(--creme-tint); border: 1px solid var(--jur-disclaimer-rand); border-radius: var(--r-kaart); padding: 12px 16px; margin-bottom: 30px; font-size: 12.5px; color: var(--goud-tekst); }
.jur-doctitel { font-size: 30px; color: var(--inkt); margin-bottom: 20px; }
.jur-inhoud h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--inkt); margin: 0 0 8px; }
.jur-inhoud p { font-size: 15px; line-height: 1.7; color: var(--tekst-3); margin: 0 0 26px; }

.jur-cookies { margin-top: 30px; border-top: 1px solid var(--rand); padding-top: 24px; }
.jur-cookies h2 { font-size: 19px; color: var(--inkt); margin-bottom: 14px; }
.jur-cookies p { font-size: 15px; line-height: 1.7; color: var(--tekst-3); margin-bottom: 20px; }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .subhero h1 { font-size: 40px; }
  .oo-story { grid-template-columns: 1fr; gap: 32px; }
  .oo-stats { grid-template-columns: 1fr 1fr; }
  .oo-values { grid-template-columns: 1fr; }
  .vg-pijlers { grid-template-columns: 1fr; }
  .vg-tips { grid-template-columns: 1fr; }
  .vlaggenbox__grid { grid-template-columns: 1fr; }
  .sup-cats { grid-template-columns: 1fr 1fr; }
  .sup-grid { grid-template-columns: 1fr; }
  .sup-form { position: static; }
  .jur-grid { grid-template-columns: 1fr; }
  .jur-nav { position: static; flex-direction: row; overflow-x: auto; }
  .jur-kaart { padding: 28px 24px; }
}