/* 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. */

/* Header: voorkom overlappende 2-regelige navbar tussen 960px en 1249px.
   De desktop-navbar (logo + menu + vaste-breedte boekingsknop van 220px + social icons)
   past pas comfortabel vanaf ~1250px. Daaronder wrapt UIkit de social icons naar een
   tweede regel, waardoor het logo over de menu-items heen valt (geverifieerd op
   960/1024/1150/1200px). De mobiele header (hamburger + logo, met vlaggen en
   boekingsknop in het uitklapmenu) rendert wel correct op elke breedte, dus in dit
   tussenbereik gebruiken we die i.p.v. de kapotte desktop-rij. */
@media (min-width: 960px) and (max-width: 1249px) {
  .tm-header.uk-visible\@m,
  .tm-toolbar.uk-visible\@m {
    display: none !important;
  }
  .tm-header-mobile.uk-hidden\@m {
    display: block !important;
  }
}

/* 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;
}