/*********************************************/
/*  theme.css                                */
/*-------------------------------------------*/
/*           This file is part of:           */
/*                  BondBS5                  */
/*   based on 2shine BS5 (2sic, MIT)         */
/*-------------------------------------------*/
/*  De standaardwaarden van het thema: een   */
/*  neutrale, nette stijl die meteen         */
/*  presentabel is.                          */
/*                                           */
/*  PAS DIT BESTAND NIET AAN OP EEN SITE.    */
/*  Bij een nieuwe versie van het thema      */
/*  wordt het overschreven. De huisstijl van */
/*  een site hoort in portal.css:            */
/*  Persona Bar → Settings → Site Settings → */
/*  Appearance → Custom CSS.                 */
/*  Zie docs/huisstijl.md en                 */
/*  docs/portal.css.voorbeeld.               */
/*********************************************/

/*
  Twee blokken, met een reden:

  1. :where(:root) — de tokens (--bond-*). :where() heeft specificiteit 0,
     dus elke :root { ... } in portal.css wint, ook al laadt DNN portal.css
     vóór de stylesheets van het thema.

  2. [data-bs-theme="default-theme"] — de koppeling naar Bootstrap (--bs-*) en
     de knoppen. Staat op <body> (zie controls/body-css-classes.ascx), zodat hij
     wint van Bootstrap's eigen :root. Hier staan alleen verwijzingen naar de
     tokens, dus een site hoeft hier nooit iets te overschrijven.
*/

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:where(:root) {

  /* ============ KLEUREN ============ */
  /* Vier merkkleuren. Dit is meestal het enige dat een site aanpast. */
  --bond-dark: #1C2733;          /* koppen, footer, cijferbalk, omlijnde knop */
  --bond-dark-700: #131C26;      /* donkere secties (resultaten, praktisch, data) */
  --bond-dark-600: #2A3746;      /* hover op donker */
  --bond-dark-100: #C9D1DB;      /* zachte tekst op donker */

  --bond-primary: #2756C5;       /* hoofdknop, accenten, streepjes, cijferaccent */
  --bond-primary-600: #1F469F;   /* hover op de hoofdknop */
  --bond-primary-soft: #E7EDFA;  /* rustig vlak, o.a. achter het inlogscherm */

  --bond-secondary: #3D4B5C;     /* tweede knop, uitgelichte kaart */
  --bond-secondary-600: #2D3846; /* hover op de tweede knop */

  --bond-accent: #8FB0F2;        /* accent op een donker vlak */
  --bond-accent-soft: #B7CCF6;   /* labels en kopjes op donker */

  /* ============ ACHTERGRONDEN ============ */
  --bond-bg: #F5F6F8;            /* paginaachtergrond (sectie "tint") */
  --bond-surface: #FFFFFF;       /* kaarten, witte secties */
  --bond-muted: #EBEEF3;         /* rustige vlakken: FAQ, eerste stap, citaten */
  --bond-muted-soft: #F3F5F8;    /* nog lichter, derde stap */
  --bond-muted-strong: #DDE3EB;  /* actieve tab, geselecteerde chip */

  /* ============ SEMANTISCH ============ */
  /* Componenten gebruiken deze, niet de kleuren hierboven. */
  --bond-text: #2F3640;
  --bond-heading: var(--bond-dark);
  --bond-eyebrow: var(--bond-primary);
  --bond-on-dark: #FFFFFF;
  --bond-on-dark-muted: #D3DAE3;
  --bond-border: rgba(28, 39, 51, 0.14);
  --bond-border-strong: rgba(28, 39, 51, 0.26);
  --bond-border-on-dark: rgba(255, 255, 255, 0.22);
  --bond-focus-ring: rgba(39, 86, 197, 0.25);
  --bond-danger: #B3261E;
  --bond-success: #2E7D4F;

  /* Donkere panelen en het verloop over de achtergrondfoto van Resultaten.
     Dezelfde kleur als --bond-dark-700, met transparantie. */
  --bond-dark-panel: rgba(19, 28, 38, 0.94);
  --bond-overlay-strong: rgba(19, 28, 38, 0.9);
  --bond-overlay-soft: rgba(19, 28, 38, 0.65);

  /* Contrast van de standaardkleuren, nagemeten:
       wit op primary   #2756C5  6,4 : 1
       wit op secondary #3D4B5C  9,0 : 1
       wit op dark      #1C2733  15  : 1
     Kies je een lichtere primary, controleer dan of witte tekst erop nog
     4,5 : 1 haalt (https://webaim.org/resources/contrastchecker/). */

  /* ============ TYPOGRAFIE ============ */
  /* Systeemletter: snel en zonder externe aanvraag. Een webfont: zet de
     URL in de resx (Fonts.WebfontUrl, zie docs/huisstijl.md) en de naam
     vooraan in --bond-font-body. */
  --bond-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bond-font-heading: var(--bond-font-body);

  /* Typeschaal. clamp() = mobiel -> desktop. */
  --bond-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);      /* 36 -> 56, hero */
  --bond-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);      /* 30 -> 48, sectiekoppen */
  --bond-h2-xl: clamp(2.125rem, 1.55rem + 2.5vw, 3.5rem); /* 34 -> 56, grote sectiekop */
  --bond-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);  /* 22 -> 26, kaarten en stappen */
  --bond-h4: 1.25rem;    /* 20 */
  --bond-h5: 1.0625rem;  /* 17 */

  --bond-body: 1.0625rem;         /* 17 */
  --bond-body-lg: 1.1875rem;      /* 19, introtekst in de hero */
  --bond-small: 0.9375rem;        /* 15 */
  --bond-eyebrow-size: 0.8125rem; /* 13, kapitalen */

  --bond-quote-size: clamp(1.125rem, 1rem + 0.7vw, 1.4375rem);
  --bond-quote-size-long: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
  --bond-stat-size: clamp(2.5rem, 1.9rem + 2vw, 3.25rem);

  --bond-line-height-heading: 1.1;
  --bond-line-height-body: 1.6;
  --bond-letter-spacing-heading: -0.015em;  /* gewone koppen */
  --bond-letter-spacing-display: -0.03em;   /* de grote koppen: hero, sectiekoppen, cijfers */

  --bond-weight-heading: 700;
  --bond-weight-body: 400;
  --bond-weight-strong: 700;

  /* ============ VORMEN ============ */
  --bond-radius-card: 12px;    /* kaarten, stappen */
  --bond-radius-media: 16px;   /* foto's */
  --bond-radius-panel: 12px;   /* resultaten, panelen */
  --bond-radius-pill: 999px;   /* labels, chips */
  --bond-radius-button: 8px;   /* knoppen; 999px = pil */
  --bond-radius-input: 8px;    /* formuliervelden */
  /* Onderhoeken van de donkere band Resultaten op foto. 0 = recht;
     bijvoorbeeld 36px / 80px voor een zachte, ronde onderkant. */
  --bond-results-corner: 0;
  --bond-results-corner-lg: 0;

  /* ============ RUIMTE ============ */
  --bond-space-xs: 0.5rem;   /*  8 = spacer 2 */
  --bond-space-sm: 1rem;     /* 16 = spacer 3 */
  --bond-space-md: 1.5rem;   /* 24 = spacer 4 */
  --bond-space-lg: 3rem;     /* 48 = spacer 5 */
  --bond-space-xl: 6rem;     /* 96 = spacer 6 */

  /* Ruimte boven en onder een sectie. */
  --bond-section-space: clamp(3rem, 2.3rem + 2.4vw, 5rem);    /* 48 -> 80 */
  --bond-section-space-lg: clamp(3.5rem, 2.6rem + 3vw, 6rem); /* 56 -> 96, bond-section--roomy */

  /* Kaarten (view Kaarten): minimale hoogte op tablet en groter. 0 = zo
     hoog als de inhoud; bijvoorbeeld 24rem voor gelijke, ruime kaarten. */
  --bond-card-min-height: 0;

  /* De cijferbalk onder de hero kan licht gekanteld staan: bijvoorbeeld
     -1deg. 0deg = recht. */
  --bond-stats-tilt: 0deg;

  /* Losse blokken in een pane (binnenpagina's). */
  --bond-block-space: 2rem;
  --bond-hero-space-after: 0;

  /* ============ NAVIGATIE EN LOGO ============ */
  --bond-nav-height: 4.5rem;    /* 72, mobiel */
  --bond-nav-height-lg: 5.5rem; /* 88, desktop */
  --bond-nav-marker: 3px;       /* streep onder het actieve menu-item */

  /* Het logo komt uit Site Settings → Appearance → Logo. Zonder logo daar
     toont het thema images/logo.svg (een placeholder). De hoogte ligt vast,
     de breedte volgt het logo. */
  --bond-logo-height: 44px;     /* desktop */
  --bond-logo-height-sm: 36px;  /* mobiel */
  --bond-logo-max-width: 220px; /* vangt een heel breed logo op */
  --bond-footer-logo-height: 48px;
  /* Maakt het logo wit op de donkere footer. none = het logo zoals het is
     (bijvoorbeeld als het al licht is). */
  --bond-footer-logo-filter: brightness(0) invert(1);

  /* ============ BEELDMERK ============ */
  /* Decoratie boven kaarten, achter de stappen en bij de citaten. Standaard
     uit. Aanzetten in portal.css:
       --bond-mark: url("/Portals/0/Images/merk.svg");
       --bond-mark-display: block;
     Varianten per kaart (veld Beeldmerk, 1 t/m 8): --bond-mark-1 ... -8.
     Een variant die niet gezet is valt terug op --bond-mark. */
  --bond-mark: none;
  --bond-mark-display: none;
  --bond-mark-size: 4.5rem;

  /* De losse ringen op de splash- en inlogpagina. transparent = uit. */
  --bond-ring-a: var(--bond-primary);
  --bond-ring-b: var(--bond-secondary);

  /* ============ MELDINGEN ============ */
  --bond-message-bar: 4px;

  /* ============ SCHADUWEN ============ */
  /* Het ontwerp is vlak: randen in plaats van schaduw. */
  --bond-shadow-sm: 0 1px 2px rgba(28, 39, 51, 0.06);
  --bond-shadow: 0 8px 24px rgba(28, 39, 51, 0.08);
  --bond-shadow-lg: 0 24px 70px rgba(28, 39, 51, 0.14);
}

/* =====================================================================
   2. KOPPELING NAAR BOOTSTRAP
   Alleen verwijzingen naar de tokens hierboven. Niet overschrijven in
   portal.css: pas de tokens aan.
   ===================================================================== */
[data-bs-theme="default-theme"] {

  --bs-primary: var(--bond-primary);
  --bs-secondary: var(--bond-secondary);
  --bs-body-bg: var(--bond-bg);
  --bs-body-color: var(--bond-text);

  --bs-body-font-family: var(--bond-font-body);
  --bs-body-font-size: var(--bond-body);
  --bs-body-font-weight: var(--bond-weight-body);
  --bs-body-line-height: var(--bond-line-height-body);

  --bs-border-radius: var(--bond-radius-card);
  --bs-border-radius-sm: var(--bond-radius-input);
  --bs-border-radius-lg: var(--bond-radius-card);
  --bs-border-radius-xl: var(--bond-radius-panel);
  --bs-border-radius-xxl: var(--bond-radius-media);
  --bs-border-color: var(--bond-border);

  --bs-link-color: var(--bond-primary);
  --bs-link-hover-color: var(--bond-dark);

  --bs-box-shadow-sm: var(--bond-shadow-sm);
  --bs-box-shadow: var(--bond-shadow);
  --bs-box-shadow-lg: var(--bond-shadow-lg);

  /* Vlakken van het paginaraamwerk */
  --theme-backdrop-bg: var(--bond-bg);
  --theme-page-main-bg: var(--bond-bg);
  --theme-breadcrumb-bg: transparent;
  --theme-nav-bg: var(--bond-surface);
  --theme-footer-bg: var(--bond-dark);
  --theme-font: var(--bond-font-body);
  --theme-font-headlines: var(--bond-font-heading);

  /* ============ COMPONENTEN ============ */
  .breadcrumb {
    --bs-breadcrumb-font-size: var(--bond-small);
    --bs-breadcrumb-divider-color: var(--bond-text);
    --bs-breadcrumb-item-active-color: var(--bond-text);
  }

  .btn {
    --bs-btn-border-radius: var(--bond-radius-button);
  }

  .form-control,
  .form-select {
    --bs-border-radius: var(--bond-radius-input);
  }

  /* Hoofdknop */
  .btn-primary {
    --bs-btn-color: var(--bond-on-dark);
    --bs-btn-bg: var(--bond-primary);
    --bs-btn-border-color: var(--bond-primary);
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-primary-600);
    --bs-btn-hover-border-color: var(--bond-primary-600);
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-primary-600);
    --bs-btn-active-border-color: var(--bond-primary-600);
    --bs-btn-disabled-color: var(--bond-on-dark);
    --bs-btn-disabled-bg: var(--bond-primary);
    --bs-btn-disabled-border-color: var(--bond-primary);
  }

  /* Tweede knop */
  .btn-secondary {
    --bs-btn-color: var(--bond-on-dark);
    --bs-btn-bg: var(--bond-secondary);
    --bs-btn-border-color: var(--bond-secondary);
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-secondary-600);
    --bs-btn-hover-border-color: var(--bond-secondary-600);
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-secondary-600);
    --bs-btn-active-border-color: var(--bond-secondary-600);
    --bs-btn-disabled-color: var(--bond-on-dark);
    --bs-btn-disabled-bg: var(--bond-secondary);
    --bs-btn-disabled-border-color: var(--bond-secondary);
  }

  /* Omlijnde knop in de donkere kleur */
  .btn-outline-primary {
    --bs-btn-color: var(--bond-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bond-dark);
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-dark);
    --bs-btn-hover-border-color: var(--bond-dark);
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-dark);
    --bs-btn-active-border-color: var(--bond-dark);
    --bs-btn-disabled-color: var(--bond-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bond-border);
  }

  /* Witte omlijnde knop op een donker vlak */
  .btn-outline-light {
    --bs-btn-color: var(--bond-on-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bond-on-dark);
    --bs-btn-hover-color: var(--bond-dark);
    --bs-btn-hover-bg: var(--bond-on-dark);
    --bs-btn-hover-border-color: var(--bond-on-dark);
    --bs-btn-active-color: var(--bond-dark);
    --bs-btn-active-bg: var(--bond-on-dark);
    --bs-btn-active-border-color: var(--bond-on-dark);
  }

  .navbar-nav {
    --bs-nav-link-color: var(--bond-text);
    --bs-nav-link-hover-color: var(--bond-primary);
    --bs-navbar-active-color: var(--bond-dark);
  }

  .table {
    --bs-table-bg: var(--bond-surface);
  }
}