/****************************************************************************
 * bootstrap-compat.css
 *
 * Overbruggingslaag bij de migratie van Bootstrap 3.3.7 naar 5.3.8.
 * Laadt NA bootstrap.min.css en VOOR teqa.css, zodat teqa.css het laatste
 * woord houdt.
 *
 * Twee soorten regels staan hier, bewust bij elkaar:
 *
 *  1. GRID- EN REBOOT-PARITEIT — Bootstrap 5 tekent dezelfde klassen anders
 *     dan 3 deed (andere containerbreedtes, andere gutter, onderstreepte
 *     links). Zonder deze regels verschuift de hele site een paar procent,
 *     terwijl er inhoudelijk niets veranderd is.
 *
 *  2. LEGACY KLASSEN — klassen die Bootstrap 5 heeft laten vallen maar die
 *     nog in de CKEditor-content van ~700 pagina's staan (.label, .well,
 *     .panel, .img-responsive, .pull-*) of die in de templates puur als
 *     styling-haakje dienen en volledig door teqa.css worden aangekleed
 *     (.media, .page-header, #Steps .panel). Die content herschrijven raakt
 *     100+ DB-rijen in drie talen; deze laag kost tien regels CSS.
 *
 * Nieuwe markup gebruikt gewoon Bootstrap 5: .img-fluid, .float-end,
 * .text-end, .visually-hidden, .card. Dit bestand is er voor wat er al staat.
 ***************************************************************************/


/*==========================================================================
  1. GRID- EN REBOOT-PARITEIT MET BOOTSTRAP 3
==========================================================================*/

/* Bootstrap 3 gaf .row 30px gutter (15px padding per kolomzijde) en .container
   15px padding; Bootstrap 5 gebruikt 1.5rem = 24px. Alle kolombreedtes in
   teqa.css zijn op 30px afgestemd.
   Let op: Bootstrap declareert --bs-gutter-x op .row en .container zelf, dus
   deze waarde op :root zetten doet niets — dat wordt lokaal overschreven. */
.row,
.container,
.container-fluid {
	--bs-gutter-x: 30px;
}

/* Containerbreedtes van Bootstrap 3 aanhouden. Bootstrap 5 introduceert een
   576px- en een 1400px-tier die Bootstrap 3 niet had; zonder deze regels
   springt de container op een breed scherm van 1170px naar 1320px en op een
   telefoon in liggende stand van vloeiend naar 540px. */
.container {
	max-width: none;
}
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* Bootstrap 5 onderstreept links in de reboot, Bootstrap 3 deed dat niet.
   teqa.css zet alleen kleuren en rekende op het oude gedrag. */
a {
	text-decoration: none;
}

/* Bootstrap 5 verwijderde .text-left / .text-right ten gunste van
   .text-start / .text-end. Beide komen nog in de content voor. */
.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* Idem voor de float-helpers (.float-start / .float-end in Bootstrap 5). */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

.center-block { display: block; margin-right: auto; margin-left: auto; }

/* Bootstrap 5 heeft geen .btn-block meer; een knop over de volle breedte is
   daar .d-grid op de ouder. In de content en op de homepage staat .btn-block. */
.btn-block { display: block; width: 100%; }

/* Bootstrap 5 hernoemde .sr-only naar .visually-hidden. */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* De responsive-zichtbaarheidsklassen van Bootstrap 3. In Bootstrap 5 zijn dit
   .d-none / .d-*-block combinaties. Alleen de varianten die daadwerkelijk in
   templates of content voorkomen. */
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px)  { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }


/*==========================================================================
  2. AFBEELDINGEN
==========================================================================*/

/* .img-fluid in Bootstrap 5. Staat nog in de content en wordt door main.js
   op body-afbeeldingen gezet. */
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

/* .rounded / .rounded-circle in Bootstrap 5. .img-rounded draagt de
   taalvlaggen in de header en de footer. */
.img-rounded { border-radius: 6px; }
.img-circle  { border-radius: 50%; }

.thumbnail {
	display: block;
	padding: 4px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.thumbnail > img { display: block; max-width: 100%; height: auto; margin: 0 auto; }


/*==========================================================================
  3. .label  ->  .badge
  71 contentrijen gebruiken <span class="label label-*">, vooral in de
  API-documentatie voor HTTP-methodes en statuscodes.
==========================================================================*/
.label {
	display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
}
.label:empty { display: none; }
a.label:hover, a.label:focus { color: #fff; text-decoration: none; cursor: pointer; }

.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info    { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger  { background-color: #d9534f; }


/*==========================================================================
  4. .well  ->  .card
  Alleen nog voor de content: 11 pagina's hebben een <div class="well"> in de
  bodytekst. De categorieblokken droegen de klasse ook, maar heten inmiddels
  gewoon .documentationCategoryBlock — dat is een eigen component, geen
  Bootstrap-onderdeel.
==========================================================================*/
.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
}


/*==========================================================================
  5. .panel  ->  .accordion / .card
  Alleen nog voor de content: een handvol pagina's heeft een panel in de
  bodytekst staan. De stappen-accordeon op quickstart-page en
  implementation-page draait inmiddels op de echte .accordion van Bootstrap 5.
==========================================================================*/
.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	color: inherit;
}
.panel-title > a { color: inherit; }
.panel-body { padding: 15px; }
.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; border-radius: 4px; }
.panel-group .panel + .panel { margin-top: 5px; }


/*==========================================================================
  6. .media  ->  flex-utilities
  Draagt het infoblok (locatie + modules), de notities, en de blokken met
  gekoppelde rechten en functionele informatie. teqa.css positioneert ze;
  Bootstrap 3 deed de kolomverdeling met display:table-cell. Flexbox geeft
  hetzelfde resultaat en is niet gevoelig voor de 10000px-breedtetruc.
==========================================================================*/
.media {
	display: flex;
	align-items: flex-start;
	margin-top: 15px;
}
.media:first-child { margin-top: 0; }
.media-left  { flex: 0 0 auto; padding-right: 10px; }
.media-right { flex: 0 0 auto; padding-left: 10px; order: 1; }
.media-body  { flex: 1 1 auto; }
.media-heading { margin-top: 0; margin-bottom: 5px; }


/*==========================================================================
  7. .page-header
  Bootstrap 5 liet deze vallen; teqa.css kleurt en schaalt hem, dus hier
  alleen de scheidingslijn en de marges die daaronder lagen.
==========================================================================*/
.page-header {
	padding-bottom: 9px;
	margin: 40px 0 20px;
	border-bottom: 1px solid #eee;
}


/*==========================================================================
  8. .list-group-item-heading / -text
  Bootstrap 5 schrapte deze twee; de zoekresultaten en de kindpagina-lijsten
  gebruiken ze en meili-search.css + teqa.css kleuren ze.
==========================================================================*/
.list-group-item-heading { margin-top: 0; margin-bottom: 5px; }
.list-group-item-text { margin-bottom: 0; line-height: 1.3; }


/*==========================================================================
  9. NAVBAR-TOGGLE
  De hamburgerknop gebruikt drie <span class="icon-bar">-balkjes in plaats
  van het SVG-icoon van Bootstrap 5, zodat de knop er precies zo uitziet als
  altijd. teqa.css zet de kleuren en de afmetingen.
==========================================================================*/
.navbar-toggler .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: #555;
}
.navbar-toggler .icon-bar + .icon-bar { margin-top: 4px; }