/* =====================================================================
   portal.css: circulairterreinbeheer (portal 1) op het thema Bond BS5

   Plakken in: Persona Bar → Settings → Site Settings → Appearance →
   Custom CSS (DNN slaat het op als /Portals/<id>/portal.css).
   DNN laadt dit bestand vóór de stylesheets van het thema.
   ===================================================================== */

/* Citaat (blockquote) uit de teksteditor: een rustig vlak met een beige
   streep links, zoals op de oude site. Bootstrap geeft een blockquote
   alleen een marge. "body" ervoor, zodat dit wint van die marge; staat
   het citaat als laatste in een tekst, dan houdt het thema de ruimte
   eronder op 0. Het vlak is --bond-muted (het thema gebruikt die voor
   citaten): het lichtgrijs van de oude site valt weg tegen de
   paginakleur van dit thema. */
body blockquote {
  margin: 1.875rem 2.5rem;          /* 30px 40px, zoals op de oude site */
  padding: 1rem 1.25rem;
  background-color: var(--bond-muted);
  border-left: 4px solid #CFC7AC;   /* beige van de oude site */
}

body blockquote > :last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  body blockquote {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Binnenpagina's: de inhoud gebruikt de volle breedte van de pagina
   (.container, 1180px) in plaats van de smalle tekstkolom van 760px die
   de container "default" van het thema geeft. "body" ervoor, zodat dit
   wint van de regel in het thema. */
body .bond-rich-text {
  max-width: none;
}

/* Mobiel: tekst en afbeelding van een 2sxc-blok (Tekst en afbeelding, video,
   adres met kaart) komen onder elkaar. Het thema haalt de marge onder het
   laatste tekstblok weg, waardoor de afbeelding tegen de tekst of knop erboven
   plakte. */
@media (max-width: 767.98px) {
  body .row > [class*="order-md-"] + [class*="order-md-"] {
    margin-top: 1.5rem;
  }
}

/* Titelbalk op binnenpagina's (onderdeel van het thema, staat daar standaard
   uit): aan voor CT, in het beige van de oude site. Donkere tekst in plaats
   van het wit van de oude site: wit op dit beige haalt maar 1,69:1, donker
   8,95:1 (WCAG 1.4.3 vraagt minstens 3:1 voor grote tekst). */
:root {
  --bond-page-title-display: block;
  --bond-page-title-bg: #CFC7AC;
  --bond-page-title-color: var(--bond-dark);
}

/* Kleuren van de oude site (Avada, live uitgelezen): groen #7CA135 voor links
   en het menu, olijf #A69765, beige #CFC7AC en knoppen in #A0CE4E (hover
   #96C346). Voor tekst en vlakken met witte tekst dezelfde tinten, maar
   donkerder, zodat ze leesbaar zijn (WCAG 1.4.3 vraagt 4,5:1): #7CA135 haalt op
   de lichtgrijze pagina maar 2,77:1 en met witte tekst 3,00:1, #5C7827 4,66:1 en
   5,03:1; het olijf #80744E met witte tekst 4,64:1. --bond-primary is de
   hoofdkleur van het thema (links, accenten); het thema vraagt om de tokens aan
   te passen. */
:root {
  --ct-groen: #5C7827;
  --ct-olijf: #80744E;
  --ct-knop: #A0CE4E;
  --ct-knop-hover: #96C346;
  --bond-primary: var(--ct-groen);
  --bond-primary-600: #4A6120;
  --bond-primary-soft: #EEF4E2;
}

/* Knoppen in het groen van de oude site, met donkere tekst: wit op #A0CE4E
   haalt maar 1,84:1, donker 8,24:1 (hover 7,35:1). Een gekozen knop, zoals het
   actieve filter bij het nieuws, in het donkere groen met witte tekst (5,03:1).
   De tekstkleur van een knop heeft geen token, vandaar de Bootstrap-variabelen
   hier; "body[data-bs-theme]" wint van de regel in het thema. */
body[data-bs-theme] .btn-primary {
  --bs-btn-color: var(--bond-dark);
  --bs-btn-bg: var(--ct-knop);
  --bs-btn-border-color: var(--ct-knop);
  --bs-btn-hover-color: var(--bond-dark);
  --bs-btn-hover-bg: var(--ct-knop-hover);
  --bs-btn-hover-border-color: var(--ct-knop-hover);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--ct-groen);
  --bs-btn-active-border-color: var(--ct-groen);
  --bs-btn-disabled-color: var(--bond-dark);
  --bs-btn-disabled-bg: var(--ct-knop);
  --bs-btn-disabled-border-color: var(--ct-knop);
  --bs-btn-focus-shadow-rgb: 92, 120, 39;
}

/* Bootstrap kleurt links, de hulpklassen (bg-primary, border-success,
   bg-success) en het open uitklapblok met eigen RGB-variabelen die bij het
   bouwen van het thema vastliggen: blauw en Bootstrap-groen. Het token
   --bond-primary bereikt die niet, dus hier op de kleuren van CT. Links worden
   bij hover donker, zoals het thema bedoelt. */
body[data-bs-theme] {
  --bs-link-color-rgb: 92, 120, 39;
  --bs-link-hover-color-rgb: 28, 39, 51;
  --bs-primary-rgb: 92, 120, 39;
  --bs-success: #5C7827;
  --bs-success-rgb: 92, 120, 39;
  --bs-primary-bg-subtle: #EEF4E2;
  --bs-primary-text-emphasis: #2E3C14;
  --bs-focus-ring-color: rgba(92, 120, 39, 0.25);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(92, 120, 39, 0.25);
}

/* Overgezette blokken (Avada) in een pane over de volle breedte: hun rij staat
   niet in een .container, waardoor de negatieve marges van Bootstrap 12px
   buiten het scherm vielen en de tekst op mobiel tegen de rand stond. Zonder
   die marges, en met de kolom samen 20px ruimte opzij, zoals in een .container. */
body .theme-background-container > .theme-background-container > .DNNModuleContent > .sc-content-block > .row {
  margin-inline: 0;
  padding-inline: 0.5rem;
}

/* Uitklapblokken (zoals de circulaire woordenlijst): de kop in het blok kreeg
   de bovenmarge van een gewone tussenkop (48px), waardoor de term onderaan het
   blok stond. */
body .accordion-item > .accordion-header {
  margin-top: 0;
}

/* Mobiel: een brede tabel (zoals de publicaties van partners) scrolt zijwaarts
   in plaats van rechts uit beeld te vallen. */
@media (max-width: 767.98px) {
  body main .table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Menu, zoals op de oude site: vette items, het actieve item groen met een
   groene streep erboven, en een groen uitklapmenu met witte tekst en olijf
   bij hover en voor de huidige pagina (kleuren hierboven). "body" ervoor,
   zodat dit wint van de regels in het thema. */

body nav#theme-page-navigation .navbar-nav > .nav-item.active > .nav-link {
  color: var(--ct-groen);
}

@media (min-width: 992px) {
  /* Het menu over de volle hoogte van de balk: de streep zit dan bovenaan en
     het uitklapmenu begint direct onder de balk. */
  body nav#theme-page-navigation .offcanvas {
    align-self: stretch;
  }

  body nav#theme-page-navigation .offcanvas .offcanvas-body {
    height: 100%;
    padding: 0;                     /* de mobiele 24px van het thema geldt hier ook op desktop */
    align-items: stretch;
  }

  body nav#theme-page-navigation .offcanvas-body > .d-lg-block > .navbar-nav {
    height: 100%;
  }

  body nav#theme-page-navigation .navbar-nav > .nav-item > .nav-link {
    font-weight: 700;
  }

  body nav#theme-page-navigation .navbar-nav > .nav-item > .nav-link:hover {
    color: var(--ct-groen);
  }

  body nav#theme-page-navigation .navbar-nav > .nav-item.active::after {
    top: 0;
    bottom: auto;
    height: 5px;
    border-radius: 0;
    background-color: var(--ct-groen);
  }

  body nav#theme-page-navigation .navbar-nav .dropdown-menu {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--ct-groen);
  }

  body nav#theme-page-navigation .navbar-nav .dropdown-menu .dropdown-item {
    padding: 0.5625rem 1.25rem;     /* 9px 20px, zoals op de oude site */
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.875rem;
    color: #FFFFFF;
  }

  body nav#theme-page-navigation .navbar-nav .dropdown-menu > li:last-child > .dropdown-item {
    border-bottom: 0;
  }

  body nav#theme-page-navigation .navbar-nav .dropdown-menu .dropdown-item:hover,
  body nav#theme-page-navigation .navbar-nav .dropdown-menu .dropdown-item:focus,
  body nav#theme-page-navigation .navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: var(--ct-olijf);
    color: #FFFFFF;
  }
}

/* Tablet liggend en kleine laptops: de 8 menu-items passen pas vanaf 1400px
   naast het logo. Daaronder een kleiner menu met minder ruimte ertussen, en
   onder 1200px ook het kleinere logo van mobiel. Zonder dit liep "Home" tegen
   het logo en viel "Biomassa Alliantie" rechts buiten beeld (iPad liggend:
   1024 tot 1194px). */
@media (min-width: 992px) and (max-width: 1399.98px) {
  body nav#theme-page-navigation .navbar-nav {
    gap: 1rem;
  }

  body nav#theme-page-navigation .navbar-nav > .nav-item > .nav-link {
    font-size: 0.9375rem;           /* 15px */
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body nav#theme-page-navigation > .container {
    column-gap: 1rem;
  }

  body nav#theme-page-navigation .navbar-brand img.logo {
    height: var(--bond-logo-height-sm);
  }

  body nav#theme-page-navigation .navbar-nav {
    gap: 0.75rem;
  }

  body nav#theme-page-navigation .navbar-nav > .nav-item > .nav-link {
    font-size: 0.8125rem;           /* 13px */
  }
}

@media (max-width: 991.98px) {
  /* Mobiel menu, één stijl: de huidige pagina (en het hoofdstuk waar hij onder
     valt) is vet en groen, net als op desktop. Zonder het streepje links en het
     inspringen van het thema, want dat leek op een citaat of op een subpagina
     van het item erboven. Het submenu is alleen ingesprongen, zonder grijs vlak
     en in de kleur van het menu, en de huidige subpagina ook vet groen in plaats
     van een donker blok. Groen op wit haalt 5,03:1. */
  body nav#theme-page-navigation .offcanvas .navbar-nav > .nav-item.active > .nav-link {
    box-shadow: none;
    padding-left: 0;
  }

  body nav#theme-page-navigation .offcanvas .navbar-nav .dropdown-menu {
    background-color: transparent;
    border-radius: 0;
  }

  body nav#theme-page-navigation .offcanvas .navbar-nav .dropdown-menu .dropdown-item {
    color: var(--bs-nav-link-color);
  }

  body nav#theme-page-navigation .offcanvas .navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: transparent;
    color: var(--ct-groen);
    font-weight: 700;
  }
}

/* Homepage, nieuws (2sxc-app Nieuws, module "Recent"): de kop als beige band
   met pijltje, zoals "Recent toegevoegd" op de oude site en de titelbalk op de
   binnenpagina's (dezelfde tokens). De module staat in de container defaultWide
   (op containerbreedte); de band loopt via border-image toch over de volle
   breedte, zonder horizontale scrollbalk. */
body.page-is-home .app-news5-list > h1 {
  position: relative;
  padding-block: 1.25rem;
  border-image: linear-gradient(var(--bond-page-title-bg) 0 0) fill 0 / / 0 100vmax;
  color: var(--bond-page-title-color);
  font-size: var(--bond-page-title-size, clamp(1.5rem, 1.3rem + 0.8vw, 2rem));
  text-align: center;
}

body.page-is-home .app-news5-list > h1::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 26px solid var(--bond-page-title-bg);
}

/* Ruimte onder het pijltje (26px). Op de kop zelf kan dat niet: de app geeft
   hem mb-3 (1rem met !important); die marge valt samen met deze. */
body.page-is-home .app-news5-list > h1 + .row {
  margin-top: 3.5rem;
}

/* Mobiel en tablet komen de kaarten onder elkaar (of twee naast elkaar), en de
   app zet er geen ruimte tussen: "lees meer" plakte tegen de afbeelding van het
   volgende bericht. */
body.page-is-home .app-news5-list > .row {
  row-gap: 2.5rem;
}

/* Nieuwsoverzicht (homepage en Nieuws): titel, categorie en "lees meer" groen
   zoals de links op de oude site, de titel olijf bij hover (de app kleurt die
   bij hover met --bs-primary). Groen haalt op de lichtgrijze pagina 4,66:1. */
body .app-news5-list {
  --bs-primary: var(--ct-olijf);
}

body .app-news5-list .app-news5-text h3,
body .app-news5.app-news5-list .app-news5-details-link .app-news5-readmore,
body .app-news5.app-news5-list .app-news5-details-link .app-news5-categories a {
  color: var(--ct-groen);
}

/* Nieuwsbericht: foto's in de tekst nooit breder dan de tekstkolom. De app
   geeft de tekst ongewijzigd door, zonder img-fluid, waardoor een foto van
   1200px op mobiel rechts werd afgesneden (de kolom heeft overflow: hidden). */
body .app-news5-detail-body img {
  max-width: 100%;
  height: auto;
}

/* Footer in het beige van de oude site, met het pijltje erboven zoals daar.
   Donkere tekst in plaats van wit: wit op dit beige haalt maar 1,69:1, de
   tekstkleur van het thema 8,95:1 en het grijs van de oude site (#46494A)
   5,37:1. Het logo in zijn eigen kleuren (het thema maakt het wit). */
body footer#theme-page-footer {
  --theme-footer-bg: #CFC7AC;
  --bond-on-dark: var(--bond-dark);
  --bond-on-dark-muted: #46494A;
  --bond-accent-soft: var(--bond-dark);
  --bond-footer-logo-filter: none;
  position: relative;
  margin-top: 1.625rem;             /* ruimte voor het pijltje (26px), anders viel het in de laatste inhoud */
}

body footer#theme-page-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 26px solid #CFC7AC;
}

body footer#theme-page-footer .theme-footer-legal {
  border-top-color: rgba(28, 39, 51, 0.25);
}

/* De link in "Een programma van de Biomassa Alliantie" onderstreept, anders is
   hij niet van de tekst te onderscheiden. */
body footer#theme-page-footer .theme-footer-tagline a {
  text-decoration: underline;
  text-underline-offset: 3px;
}