/**
 * @file
 * Subtheme specific CSS.
 */
/* Overschrijf ALLE mogelijke achtergrondklassen van Barrio voor de navigatiebalk */
#navbar-main,
header .navbar,
.bg-primary,
nav.navbar.bg-primary {
  background-color: #23354b !important;
  background-image: none !important; /* Verwijdert eventuele standaard Barrio gradients */
}
.site-name-slogan {
    color: #ffffff !important;
    font-weight: bold; /* Kan ook met de waarde 700 */
    letter-spacing: 1px;      /* Geeft wat meer ademruimte tussen letters */
    padding-left: 15px;       /* Ruimte naast het lijntje */
    margin-bottom: 10px;
}
/* Style voor het specifieke missie-blok */
.site-mission-block {
  border: 2px solid #23354b; /* Een blauwe Bootstrap-achtige rand */
  border-radius: 8px;        /* Subtiele afgeronde hoeken */
  padding: 20px;             /* Ruimte aan de binnenkant (simuleert de tabelcel) */
  background-color: #ffffff; /* Witte achtergrond */
  margin-bottom: 20px;
  }
/* --- Volledige lay-out naar 960px voor desktops --- */
@media (min-width: 992px) {

  /* 1. Inhoud, Layout Builder en highlighted regio strak op 960px */
  .container,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .layout-builder__region,
  .region-highlighted { 
    max-width: 960px !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* 2. De blauwe balk zelf blijft 100% breed over het  scherm lopen */
  #header,
  #navbar-main {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 3. DE FIX: Centreer de totale inhoud van de navigatiebalk */
  #navbar-main {
    display: flex !important;
    justify-content: center !important; /* Zoekt het absolute midden van het scherm */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4. Maak een 'virtuele container' van 960px met de elementen in de balk */
  #navbar-main > .navbar-brand {
    margin-left: calc((100% - 960px) / 2) !important; /* Dringt het logo naar de 960px grens links */
  }

  #navbar-main > #CollapsingNavbar {
    margin-right: calc((100% - 960px) / 2) !important; /* Dringt het menu naar de 960px grens rechts */
  }

  /* Zorg dat de site-naam ("Development") strak naast het logo blijft plakken */
  .site-name-slogan {
    margin-left: 15px !important;
    display: flex !important;
    align-items: center !important;
  }
}  
.site-mission-block {
 margin-top: 30px !important;
}  
/* --- CKEditor Handmatige Stijlen --- */


/* Een extra stijl voor opvallende tekst (bijvoorbeeld voor de eerste regel) */
.lead-text {
  font-size: 1.25rem !important;        /* Maakt de tekst net een slagje groter */
  font-weight: 500 !important;          /* Maakt de tekst iets dikker */
  color: #23354b !important;            /* Geeft het de  mooie nieuwe donkerblauwe kleur */
}
.node__meta,
.submitted,
.feed-icons {
  display: none !important;
}
/* --- Braille Hover Systeem --- */
.braille-wrapper {
  display: block !important;
  background-color: #ffffff !important; /* Maakt de achtergrond mooi wit */
  border: 1px solid #dee2e6 !important;  /* Subtiel lichtgrijs randje rondom het blok */
  border-radius: 6px !important;         /* Mooie afgeronde hoekjes */
  padding: 15px !important;              /* Geeft de gifs wat ademruimte vanaf de rand */
  margin-bottom: 25px !important;       /* Ruimte onder het blok */
  line-height: normal !important;        /* Zorgt dat Bootstrap de regelafstand niet verpest */
}

.braille-swap {
  display: inline-block !important;
  position: relative !important;
  margin-right: 10px !important; /* Ruimte tussen de braille-blokjes onderling */
  margin-bottom: 10px !important;
}

/* Zorg dat de afbeeldingen netjes inline blijven en niet als Bootstrap-blocks reageren */
.braille-swap img {
  display: inline-block !important;
  vertical-align: top !important;
}

/* Verberg de hover-afbeelding standaard */
.braille-swap img.hover {
  display: none !important;
}

/* Wisselwerking tijdens de HOVER */
.braille-swap:hover img.default {
  display: none !important;
}

.braille-swap:hover img.hover {
  display: inline-block !important;
}
/* --- De automatische teasers verzachten naar de D7 stijl --- */
.node--promoted h2.node__title a {
  color: #2c3e50 !important;       /* Prachtig diep, zacht grijsblauw in plaats van hard zwart */
  font-weight: 600 !important;     /* Iets subtieler qua dikte */
  text-decoration: none !important; /* Haalt die harde onderstreping direct weg */
}

/* Subtiele verandering als je met de muis over de titel beweegt */
.node--promoted h2.node__title a:hover {
  color: #34495e !important;
  text-decoration: none !important;
}

/* De 'Read more' linkjes onder de teasers stylen */
.node--promoted .node__links a {
  color: #0056b3 !important;       /* De mooie D7 blauwe linkkleur */
  text-decoration: none !important;
  font-weight: 500 !important;
}

.node--promoted .node__links a:hover {
  text-decoration: underline !important;
}
/* 1. De gewone menulinks (indien nodig extra dwingen op wit) */
.navbar-nav .nav-link {
  color: #ffffff !important;
}

/* 2. HOVER: Als je met de muis over een menulink beweegt */
.navbar-nav .nav-link:hover {
  color: #d1d8e0 !important;       /* Verandert in zacht lichtgrijs bij hover */
  background-color: transparent !important;
}

/* 3. ACTIVE: De link van de pagina waar je NU op bent */
.navbar-nav .nav-link.active,
.nav-item.active .nav-link {
  color: #95afc0 !important;       /* Geeft de actieve pagina een eigen, zachte kleur (bijv. grijsblauw) */
  font-weight: 600 !important;     /* Maakt hem eventueel subtiel iets dikker */
  background-color: transparent !important;
}
/* Algemene body tekst zachter maken */
body {
  color: #555555 !important;
  font-size: 0.95rem !important; /* Iets compacter net als D7 */
}

/* H1 (Paginatitels) en H2 (Subtitels) verzachten */
h1, .page-title {
  color: #2c3e50 !important; /* Rustig diep grijsblauw */
  font-weight: 500 !important;
  font-size: 1.8rem !important;
}

h2 {
  color: #34495e !important;
  font-weight: 500 !important;
  font-size: 1.4rem !important;
}
/* --- STAP 3: Grote zwarte balk onderaan wit maken --- */

/* Dwing de algehele achtergrond en hoofdcontainers naar wit */
html,
body,
#main-wrapper,
#main,
.main-container {
  background-color: #ffffff !important;
}

/* Zorg dat de wrapper waar de footer in zit ook wit is */
footer,
.footer,
#footer-wrapper {
  background-color: #ffffff !important;
  color: #555555 !important; /* Zet eventuele tekst in de footer alvast op grijs in plaats van wit */
}
/* --- STAP 4: Links (welke dan ook) niet onderlijnd --- */

/* Verwijder de standaard onderstreping van alle links op de site */
a,
.node a,
.page-wrapper a,
.book-navigation a,
.breadcrumb a {
  text-decoration: none !important;
}

/* Zorg dat ze ook bij het eroverheen bewegen (hover) niet onderlijnd worden */
a:hover,
.node a:hover,
.page-wrapper a:hover,
.book-navigation a:hover,
.breadcrumb a:hover {
  text-decoration: none !important;
}
/* --- STAP 5a: Breadcrumb scheidingsteken wijzigen --- */

/* Verander de standaard / van Barrio in een zachtgrijze > */
.breadcrumb-item + .breadcrumb-item::before {
  content: ">" !important;
  color: #aaaaaa !important;
  padding-right: 8px !important;
}


/* --- STAP 5b: Book Navigation (Zijbalk) D7 look --- */

/* 1. Slopen van de zwarte list-bolletjes */
.book-navigation ul,
.block-book-navigation ul,
.block-book-navigation ul.menu {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 12px !important;
  margin-left: 0 !important;
}

/* 2. Zorg dat de list-items correct uitlijnen */
.block-book-navigation li {
  position: relative !important;
  padding-left: 15px !important;
  margin-bottom: 5px !important;
}

/* 3. Voeg het open D7-pijltje (▷) toe voor de menu-items */
.block-book-navigation li::before {
  content: "▷" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #7f8c8d !important; /* Zachtgrijs pijltje */
  font-size: 0.8rem !important;
}

/* 4. Als een menu-item 'expanded' (opengeklapt) is, verander het pijltje naar beneden (▼) */
.block-book-navigation li.menu-item--expanded::before {
  content: "▼" !important;
  color: #34495e !important; /* Iets donkerder als het openstaat */
  font-size: 0.7rem !important;
  top: 2px !important; /* Fijnafstelling voor de hoogte */
}  
/* --- STAP 8: Tekst rechts van de afbeelding laten vloeien (Fluid) --- */

/* Zorg dat de afbeelding in een boekpagina links uitlijnt en tekst rechts vloeit */
.node--type-book .field--name-field-image img,
.node--type-book .field--name-body img,
.node-readmore-wrapper img {
  float: left !important;
  margin-right: 25px !important;  /* Ruimte tussen de afbeelding en de tekst */
  margin-bottom: 15px !important; /* Ruimte onder de afbeelding */
  height: auto !important;
  max-width: 100% !important;
}

/* Voorkom dat elementen onder de tekst (zoals readmore links) gaan 'plakken' aan de afbeelding */
.node--type-book .node__content::after,
.field--name-body::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}
/* --- STAP 9: Lokale tabs ombouwen naar Bootstrap-stijl knoppen --- */

/* 1. Verwijder de oude, doorlopende onderlijn van de tabs-container */
.tabs,
nav.tabs,
ul.tabs--primary {
  border-bottom: none !important;
  margin-top: 20px !important;
  margin-bottom: 25px !important;
  padding-left: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important; /* Ruimte tussen de knoppen, net als in het voorbeeld */
  list-style: none !important;
}

/* 2. Reset de lijst-items zodat ze niet meer als ouderwetse tabbladen plakken */
ul.tabs--primary li,
nav.tabs ul li {
  float: none !important;
  display: inline-block !important;
  margin-bottom: 0 !important;
}

/* 3. Basis-styling voor ALLE knoppen (standaard de inactieve status) */
ul.tabs--primary li a,
nav.tabs ul li a {
  display: inline-block !important;
  background-color: #f8f9fa !important;     /* Heel lichtgrijze achtergrond */
  color: #0056b3 !important;                 /* Mooi leesbaar blauw voor de tekst */
  border: 1px solid #dee2e6 !important;       /* Lichtgrijze rand rondom */
  padding: 8px 16px !important;              /* klikruimte */
  border-radius: 6px !important;             /* Mooie afgeronde hoeken */
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* 4. Styling voor de ACTIEVE knop (waar je op dit moment op staat, bijv. 'View') */
ul.tabs--primary li.is-active a,
nav.tabs ul li.active a,
nav.tabs ul li a.is-active {
  background-color: #0056b3 !important;     /* Hetzelfde blauw als achtergrondkleur */
  color: #ffffff !important;                 /* Witte tekst */
  border-color: #0056b3 !important;          /* Blauwe rand */
}

/* 5. Hover-effect: wat er gebeurt als je met de muis over een inactieve knop beweegt */
ul.tabs--primary li a:hover,
nav.tabs ul li a:hover {
  background-color: #e2e6ea !important;     /* Iets donkerder grijs bij hoveren */
  color: #004085 !important;                 /* Iets donkerder blauw voor de tekst */
  border-color: #ced4da !important;
}
/* --- STAP 11: Layout Builder Boektitel verzachten en stylen --- */

.block-field-blocknodebooktitle .field--name-title {
  display: block !important;
  font-size: 1.8rem !important;       /* Teruggebracht van 2.2rem naar 1.8rem */
  font-weight: 500 !important;        /* Een stuk minder sterk/dikgedrukt (Medium in plaats van Bold) */
  color: #2c3e50 !important;          /* Een  rustige diep grijsblauw */
  margin-top: 15px !important;        /* Ruimte onder de breadcrumbs */
  margin-bottom: 20px !important;     /* Ruimte boven de subkop/introductietekst */
  line-height: 1.2 !important;
}

/* De eventuele label boven de titel onzichtbaar houden */
.block-field-blocknodebooktitle .field__label {
  display: none !important;
}
/* --- STAP 12: Footer regio's herstellen (Tekstkleur en Klikbaarheid) --- */

/* Zorg dat alle tekst in de footer-regio's een duidelijke, donkere kleur krijgt */
footer,
.site-footer,
.layout__region--second,
.layout__region--fifth {
  color: #2c3e50 !important; /* het diep grijsblauw */
}

/* Zorg dat alle links in de footer goed zichtbaar zijn en eruitspringen */
footer a,
.site-footer a,
.layout__region--second a,
.layout__region--fifth a {
  color: #0056b3 !important;       /* Een duidelijke blauwe linkkleur */
  text-decoration: underline !important; /* Altijd een streep onder links in de footer */
  pointer-events: auto !important; /* Dwing de browser om de link klikbaar te maken */
  position: relative !important;   /* Zorgt dat de link boven eventuele onzichtbare lagen zweeft */
  z-index: 10 !important;          /* Brengt de link naar de voorgrond zodat je erop kunt klikken */
}

/* Tekst binnen de paragraaf-tags in de footer ook herstellen */
footer p,
.site-footer p {
  color: #2c3e50 !important;
}
/* ==========================================================================
   INPETTO HORIZONTAAL MENU (DRUPAL 10 / BARRIO FIX)
   ========================================================================= */

/* 1. Maak de lijst horizontaal, wis alle opsommingstekens en bullet-points */
.region-primary-menu ul,
.region-header ul,
#navbar-main ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important; /* Ruimte tussen de blokjes */
  align-items: center !important;
}

/* 2. Hardnekkige verborgen list-parameters en achtergronden slopen */
.region-primary-menu ul li,
.region-header ul li,
#navbar-main ul li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  list-style-image: none !important;
}
.region-primary-menu ul li::before,
.region-header ul li::before,
#navbar-main ul li::before {
  content: "" !important; /* Voorkomt dat er ongewenste pijltjes of bullets verschijnen */
}

/* 3. Maak van de links de chique menublokjes */
.region-primary-menu ul li a,
.region-header ul li a,
#navbar-main ul li a {
  display: inline-block !important;
  padding: 8px 16px !important;
  background-color: rgba(255, 255, 255, 0.1) !important; /* Subtiele achtergrond */
  color: #ffffff !important; /* Witte tekst */
  text-decoration: none !important;
  border-radius: 4px !important; /* Licht afgeronde hoekjes */
  font-weight: bold !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 4. HOVER: Wanneer je met de muis over een menublokje beweegt */
.region-primary-menu ul li a:hover,
.region-header ul li a:hover,
#navbar-main ul li a:hover {
  color: #d1d8e0 !important; /* Jouw specifieke zachtgrijze hoverkleur */
  background-color: rgba(255, 255, 255, 0.25) !important; /* Licht iets op */
  text-decoration: none !important;
}

/* 5. ACTIVE: Het blokje van de actieve pagina waar je nu bent */
.region-primary-menu ul li a.is-active,
.region-header ul li a.is-active,
#navbar-main ul li a.is-active,
.region-primary-menu ul li a.active,
.region-header ul li a.active,
#navbar-main ul li a.active {
  color: #95afc0 !important; /* Jouw specifieke actieve grijsblauwe kleur */
  background-color: rgba(255, 255, 255, 0.15) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   DRUPAL 10 STANDAARD CORRECTIES (BREADCRUMB & BOOK NAV)
   ========================================================================== */

/* 1. Sloop de '1.' en de opsommingstekens bij de breadcrumbs (kruimelpad) */
.breadcrumb,
nav.breadcrumb,
ol.breadcrumb,
.breadcrumb ol {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.breadcrumb li,
ol.breadcrumb li {
  list-style-image: none !important;
  list-style-type: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 5px 0 0 !important;
}

/* 2. Vertaling van de Drupal 10 Boeknavigatie (Zijbalk/Inhoud) naar de D7 look */
.book-navigation ul,
.book-navigation ul.menu,
nav.book-navigation ul {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 12px !important;
  margin-left: 0 !important;
}

.book-navigation li {
  position: relative !important;
  padding-left: 15px !important;
  margin-bottom: 5px !important;
  list-style-type: none !important;
  background: none !important;
}

/* Voeg het open D7-pijltje (▷) toe voor de Drupal 10 menu-items */
.book-navigation li::before {
  content: "▷" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #7f8c8d !important;
  font-size: 0.8rem !important;
}

/* Als een menu-item opengeklapt is, verander het pijltje naar beneden (▼) */
.book-navigation li.menu-item--expanded::before {
  content: "▼" !important;
  color: #34495e !important;
  font-size: 0.7rem !important;
  top: 2px !important;
}

/* Haal de witte scheidingslijn/rand weg bij de navigatie-elementen */
#navbar-main,
header .navbar,
.region-primary-menu,
.navbar-nav {
  border-right: none !important;
  border-left: none !important;
}

/* Zorg dat er geen ongewenste randen tussen het logo en de links ontstaan */
#navbar-main > #CollapsingNavbar {
  border-left: none !important;
}

/* Zorg dat Barrio geen extra Bootstrap decoraties tussen logo en menu toestaat */
header .navbar .container,
header .navbar .container-fluid {
  border: none !important;
}  
/* Breid de footer-first regio uit over de volle breedte en centreer alle inhoud */
footer .region-footer-first,
.site-footer .region-footer-first {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  text-align: center !important;
}

/* Zorg dat eventuele paragrafen of links binnen dit blok ook netjes mee-centreren */
footer .region-footer-first p,
footer .region-footer-first div {
  text-align: center !important;
  display: block !important;
}
/* Verwijder de dubbele CSS-pijltjes in de onderste boeknavigatie */
.book-navigation ul li::before,
.book-navigation li::before,
.book-navigation a::before {
  content: "" !important;
  display: none !important;
}
/* Geef de 'What do you need' titel extra ademruimte ten opzichte van de header */
#block-inpetto-barrio-interactive-media-block-4 h2 {
  margin-top: 2.5rem !important; /* Verhoog dit getal als er nog meer marge nodig is */
  margin-bottom: 1.5rem !important;
}