/* Eigen stijlaanpassingen van deze site.
   Wordt automatisch ingeladen door de mu-plugin ssi-custom, met een cache-buster op de
   wijzigingsdatum — je hoeft dus niets te legen na een deploy.
   Houd het klein en gericht: dit laadt op elke pagina. */

/* Taalvlaggen: breedte blijft 18px (zoals het altijd was), maar de hoogte en uitlijning klopten
   niet meer. De site-eigen CSS zet `padding-top: 5px !important` op de vlag terwijl die op de
   tekstbaseline hangt: de vlag zakte daardoor omlaag en het vakje eromheen werd 17px hoog i.p.v.
   12px, wat als een verkeerde hoogte oogt. Padding eraf en netjes op het midden uitlijnen.
   Hogere specificiteit dan `.wpml-ls-flag` is nodig omdat de site-CSS !important gebruikt en ná
   deze regels laadt — een gelijk-specifieke override verloor dus. */
li.wpml-ls-item img.wpml-ls-flag,
.wpml-ls img.wpml-ls-flag,
.tm-header img.wpml-ls-flag,
.tm-toolbar img.wpml-ls-flag,
.tm-header-mobile img.wpml-ls-flag {
	width: 18px;
	height: auto;
	padding-top: 0 !important;
	vertical-align: middle !important;
}

/* Onderste footerbalk met de taalkeuze erbij op één regel. De balk wordt een flexrij zodat de
   copyright-tekst en de vlaggen naast elkaar staan; bij weinig ruimte wrapt hij netjes.
   Let op de dubbele klasse: UIkit zet `display: flow-root` op .uk-panel en die stylesheet laadt ná
   deze, dus een enkelvoudige .ssi-footer-regel verloor het van het thema. */
.uk-panel.ssi-footer-regel {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.uk-panel.ssi-footer-regel > p {
	margin: 0;
}

.uk-panel.ssi-footer-regel .ssi-footer-taalkeuze {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uk-panel.ssi-footer-regel .ssi-footer-taalkeuze li {
	margin: 0;
	padding: 0;
}

/* Boekingsknop in de header: lucht boven en onder in plaats van over de volle balkhoogte.
   De navigatiebalk zet `align-items: stretch`, waardoor het menu-item (en dus de rode knop) tot de
   volle 80px werd uitgerekt — terwijl de knop met `min-height: 48px` als knop van 48px is
   ontworpen. Er stond zelfs al een margin-top van 16px die dat probeerde te compenseren.
   Door het item te laten meecentreren houdt de knop zijn eigen hoogte en blijft er boven en onder
   een strook van de headerbalk zichtbaar. Selector bewust specifiek: de thema-CSS laadt ná deze. */
.tm-header .uk-navbar-nav > li.book-online {
	align-self: center;
}

.tm-header .uk-navbar-nav > li.book-online > a {
	height: auto !important;
	min-height: 48px;
	margin-top: 0;
	margin-bottom: 0;
}