/* ==========================================================================
   mobile.css - handgeschreven. Mobielvriendelijkheid van de site (tikdoelen, koppen, footer, formulieren,
   filter, zoek/404, cookiebanner) zonder de desktop te raken.

   Laadvolgorde (inc/assets.php): base.css -> header-footer.css -> site.css -> [archive.css] -> [parts.css] ->
   pages/<slug>.css -> mobile.css (dit bestand, altijd als laatste). Regels met dezelfde specificiteit als de
   gegenereerde .e-<id>-regels winnen daardoor via de cascade.

   Alles hier staat in @media (max-width: 1024px) of (max-width: 767px), behalve het eerste blok: dat zijn de
   bewust toegestane afwijkingen van de pixelgelijke desktop (zie _ebnbreda_migratie/reports/mobiel-fixes-toegepast.md).
   Breekpunten: desktop >= 1025, tablet 768-1024, mobiel <= 767 (zoals base.css en header-footer.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Alle breedtes: bewust toegestane afwijkingen
   -------------------------------------------------------------------------- */
/* (a) Koppen breken nooit meer in een woord (base.css: .h overflow-wrap:normal). Waar het langste woord dan niet meer
   in zijn kolom past, een lettergrootte per klasse; gemeten met tools/heading-fit.js (reports/heading-fit.json):
   - home h2 "Over EBN Veiligheidsdienst" (.e-0e5276d): kolom 336px op 1440, "Veiligheidsdienst" 344px bij 38px ->
     36px (past: 326px); op 1024 (32px in 536px) en 390 (29px in 358px) paste het al, die waarden blijven;
   - home "Tijdelijke beveiligingssystemen" (.e-2b42279): 212px kolom, 220,6px bij 20px -> 19px; tablet 181px kolom,
     187,5px bij 17px -> 16px; mobiel (18px) paste al. */
@media (min-width: 1025px) {
	.e-0e5276d { font-size: 36px; }
	.e-2b42279 { font-size: 19px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.e-2b42279 { font-size: 16px; }
}
/* (c) E-mailadres in de blauwe sectie "Solliciteren?" van een vacature: wit en onderstreept (was #0a84ff op #054695,
   2,5:1) en nooit midden in het adres afgebroken. */
.e-7a6bd89 a[href^="mailto:"] {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: normal;
	word-break: normal;
	white-space: nowrap;
}
/* (e) Formuliermeldingen in Montserrat (de contactpagina zette Raleway, dat niet geladen wordt) */
.ebn-form .form-msg { font-family: Montserrat, sans-serif; }

/* --------------------------------------------------------------------------
   Tablet en mobiel (<= 1024px): uitklapmenu en menuknop
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Tikdoelen van 44px in het uitklapmenu (waren 40 / 36px) */
	.nav--dropdown .menu-link { min-height: 44px; }
	.nav--dropdown .sub-menu .menu-link { min-height: 44px; }
	.nav--dropdown .sub-toggle { height: 44px; }
	/* Menuknop op tablet: 33x33 -> tikvlak 44 met padding, zonder de opmaak te verschuiven (negatieve marge) */
	.menu-toggle--tablet { padding: 11px; margin: -11px; }
}

/* --------------------------------------------------------------------------
   Mobiel (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* ---- Header: iconen mail/telefoon/zoeken blijven 20px, het tikvlak wordt 44px (padding + negatieve marge, dus
	   de rij blijft 26px hoog en de tekst eronder op dezelfde pixel) ---- */
	.hdr-m-icon { padding: 12px; margin: -12px; }
	.hdr-search--m .hdr-search-link { display: inline-block; padding: 12px 12px 11px; margin: -12px -12px -11px; }
	/* Menuknop 40,5x40,5 -> 44x44 (padding 8,5px; de rechtermarge was al -6,5px) */
	.menu-toggle--mobile { padding: 8.5px; margin: -1.75px -8.25px -1.75px -1.75px; }
	/* (g) Zoekveld: over de volle headerbreedte, veld breed genoeg voor de placeholder (was 140px: "Waar bent u n") */
	.hdr--mobile { position: relative; }
	.hdr-search--m { position: static; }
	.hdr-search--m .search-pop { left: 15px; right: 15px; top: 100%; width: auto; }
	.hdr-search--m .search-pop input[type="search"] { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; }
	.hdr-search--m .search-pop button { height: 44px; min-width: 44px; }
	/* Uitklapmenu: hoofditems 44px, subitems 44px */
	.nav--dropdown .menu-link { padding: 10px 16px; }
	.nav--dropdown .sub-menu .menu-link { padding: 12px 16px; }

	/* ---- Zwevende knop "Heeft u dringend beveiliging nodig?" (home, .e-157ada9; stak op 360px 19px buiten beeld) ----
	   Binnen het scherm (16px marge), volle breedte, verborgen zodra het menu open is (body.menu-open, main.js) of de
	   footer in beeld is (body.footer-in-view, IntersectionObserver in main.js). De footer krijgt op home extra ruimte
	   onderaan zodat de knop nooit iets bedekt. */
	.btn-w.fixed {
		left: 16px;
		right: 16px;
		bottom: 12px;
		width: auto;
		max-width: 100%;
		margin: 0;
		white-space: normal;
		text-align: center;
		padding-bottom: env(safe-area-inset-bottom);
		transition: opacity .2s, visibility .2s;
	}
	.btn-w.fixed .btn { display: flex; width: 100%; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
	body.menu-open .btn-w.fixed,
	body.footer-in-view .btn-w.fixed { opacity: 0; visibility: hidden; }
	.home .ftr { padding-bottom: 72px; }

	/* ---- Koppen: hero-h1's waarvan het langste woord bij 36px niet in de kolom (100vw - 40px) past, schalen mee met
	   de schermbreedte tot hun oude 36px (tools/heading-fit.js: woordbreedte / lettergrootte per klasse):
	   .e-5467d44 "Beveiligingsdiensten" 396,6px bij 36px -> factor 0,0898: 360px -> 28,7px, 390px -> 31,4px;
	   .e-290dbf1 "beveiligingssystemen" 411,5px bij 36px -> factor 0,0865: 360px -> 27,7px, 390px -> 30,3px;
	   .e-10b857c (berichttitel) "security-dienstverlening" 332,5px bij 26px -> 0,0775; .e-189a1e0 (organisatiestructuur)
	   "Objectbeveiliging/services" 333,7px bij 24px -> 0,0715; .e-a0c77e2 (retail) "Ondernemersverenigingen:" 347,8px
	   bij 24px -> 0,0685. De overige kopklassen (e-a2a1216, e-d7b83f1, e-b0ea67b, e-317342d, e-99669e3, e-da55c37,
	   e-351724b) passen op 360 en 390 al. Footerkoppen: één kolom (hieronder), dus "Veiligheidsdiensten" past. */
	.e-5467d44 { font-size: min(36px, calc((100vw - 40px) * .0898)); }
	.e-290dbf1 { font-size: min(36px, calc((100vw - 40px) * .0865)); }
	.e-10b857c { font-size: min(26px, calc((100vw - 40px) * .0775)); }
	.e-189a1e0 { font-size: min(24px, calc((100vw - 40px) * .0715)); }
	.e-a0c77e2 { font-size: min(24px, calc((100vw - 40px) * .0685)); }
	.ftr-h, .ftr-cta-title { overflow-wrap: normal; }

	/* ---- Tikdoelen >= 44px ---- */
	/* Knoppen (Lees verder op nieuwskaarten 24px, "Heeft u vragen?" 34px, tags in de vacaturehero 28px, link in het
	   accordeonpaneel 16px): minimaal 44px hoog, tekst gecentreerd */
	.btn-w .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; white-space: normal; }
	/* white-space:normal: de knoppen erven nowrap van hun wrapper (oude custom CSS); "Heeft u vragen? Neem contact met
	   ons op!" werd daardoor op 360px 364px breed en maakte de pagina 380px breed. */
	/* Koppen die een link zijn ("Lees verder" op dienst-/branche-/organisatiekaarten 19px, dienstenlijst op home 22px):
	   tikvlak 44px zonder de kaart hoger te maken (padding + negatieve marge) */
	.h > a { display: inline-block; max-width: 100%; padding: 14px 0; margin: -14px 0; }
	/* Links in lopende tekst (19px hoog): 4px padding boven en onder geeft 27px tikvlak zonder de regelafstand te
	   veranderen (verticale padding op een inline element telt niet mee in de regelhoogte); 44px zou de tikvlakken
	   van opeenvolgende regels laten overlappen, dus dat blijft bewust zo. */
	.txt a, .post-content a, .ib-desc a { padding: 4px 0; }
	/* Icoonlinks (dienstenlijst op home 48x32, contactkaarten 32x32) en titellinks in icon-boxen (25px) */
	.img > a { padding: 6px 0; margin: -6px 0; }
	.ib-icon a.icon { padding: 6px; margin: -6px; }
	.ib-title a { display: inline-block; padding: 10px 0; margin: -10px 0; }
	/* "Privacy statement" in de footer (18px) en de link in de akkoordtekst van de formulieren (18px) */
	.ftr-p a { display: inline-block; padding: 9px 0; margin: -9px 0; }
	.ebn-form .fg-opt label a { display: inline-block; padding: 12px 0; margin: -12px 0; }
	/* Carrouselbolletjes: visueel 8px, tikvlak 40x44 (acht bolletjes moeten in 320px passen: 8 x 40; bij 44 breed
	   zouden ze op 360px over twee regels vallen). De rij staat 18px lager zodat de bolletjes op hun plek blijven. */
	[data-carousel] .car-dots .car-dot { width: 8px; height: 8px; padding: 18px 16px; box-sizing: content-box; background-clip: content-box; margin: 0; }
	.car-dots { bottom: -13px; }
	/* (specificiteit 0,3,0: de paginacss zet background als shorthand op .e-<id> .car-dot en zou background-clip terugzetten) */

	/* ---- Footer: kolommen onder elkaar (twee kolommen naast elkaar braken "Veiligheidsdienste-n" af en maakten de
	   pagina op 360px 367px breed), tikdoelen 44px ---- */
	.ftr-cols { flex-direction: column; gap: 32px; }
	.ftr-col, .ftr-col--services, .ftr-col--links, .ftr-col--legal, .ftr-col--contact { width: 100%; }
	.ftr-col--services .ftr-h, .ftr-h { line-height: 28px; }
	.ftr-totop { padding: 9px 0; }
	.nav--footer .menu > li { margin: 0; }
	.nav--footer .menu-link { min-height: 44px; }
	.fc { min-height: 44px; }
	.ftr-soc { width: 44px; height: 44px; }
	.ftr-bottom { gap: 24px; }

	/* ---- Cookiebanner (Complianz): nooit breder dan het scherm (was 392px op 360px), tekst 14px ---- */
	.cmplz-cookiebanner { max-width: 100vw !important; box-sizing: border-box !important; }
	.cmplz-cookiebanner .cmplz-message,
	.cmplz-cookiebanner .cmplz-btn,
	.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: 14px !important; line-height: 1.5 !important; }
	.cmplz-cookiebanner .cmplz-title { font-size: 16px !important; }

	/* ---- Formulieren ---- */
	.fg-33, .fg-50 { width: 100%; }
	.fld-upload { width: 100%; min-height: 44px; padding: 10px 0; }
	.ebn-form textarea.fld { min-height: 120px; }
	/* Vinkje links, tekst ernaast (op desktop loopt de tekst om het vinkje heen, zoals oud); labelkleur #555 (4,0:1 -> 7,5:1) */
	.ebn-form .fg-opt { display: flex; align-items: flex-start; }
	.ebn-form .fg-opt input[type="checkbox"] { margin: 0 10px 0 0; }
	/* Vinkjes 24px op een telefoon (desktop 20px): het vakje zelf is het tikdoel dat de audit meet (>= 24px) */
	.ebn-form input[type="checkbox"], .filter-group input[type="checkbox"] { width: 24px; height: 24px; flex-basis: 24px; }
	.ebn-form .fg-opt label { color: #555; }
	.ebn-form .form-msg { font-size: 16px; line-height: 1.5; }
	.e-7a6bd89 a[href^="mailto:"] { font-size: 16px; }

	/* ---- Vacaturefilter: groepen starten dichtgeklapt (vacancies.js) met een chevron, rijen van 44px, velden en
	   zoekknop op volle breedte, 16px in de velden (geen inzoomen op iOS) ---- */
	#vacancy-filter-wrapper { gap: 24px; }
	.filter-group { margin-bottom: 4px; }
	.filter-heading { margin: 0 0 12px; }
	.filter-toggle { margin: 0; }
	.filter-toggle-btn { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 0; }
	.filter-chevron {
		display: block;
		flex: 0 0 auto;
		width: 10px;
		height: 10px;
		margin: 0 6px 5px 0;
		border: solid #054695;
		border-width: 0 2px 2px 0;
		transform: rotate(-135deg);
		transition: transform .2s, margin .2s;
	}
	.filter-group.collapsed .filter-chevron { transform: rotate(45deg); margin: -5px 6px 0 0; }
	.filter-content { padding-bottom: 8px; }
	.filter-content br { display: none; }
	.filter-group label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: 16px; line-height: 1.3; }
	.filter-group input[type="checkbox"] { margin: 0; flex: 0 0 24px; }
	.filter-working-area { flex-direction: column; row-gap: 12px; }
	.filter-working-area input, .filter-working-area select { font-size: 16px; height: 44px; }
	.filter-working-area > div:last-child:after { top: 19px; }
	#search_area_btn { min-height: 44px; margin-top: 16px; }
	/* Vacaturekaarten: tags 13px (was 12), knoppen 44px hoog, onder elkaar op smalle schermen */
	.vacancy-tags .tag { font-size: 13px; }
	.btn-outline, .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 1 1 0; }
	/* Tags in de vacaturehero (12px) */
	.e-7d97a5e .btn { font-size: 13px; }

	/* ---- Werkgebied: de zes lijsten met plaatsnamen (8-14 regels van 37px) in twee kolommen, zodat de pagina
	   ruim 1.000px korter wordt ---- */
	.e-feb8b68 .il-item, .e-56fd846 .il-item, .e-8ed63a0 .il-item, .e-afee565 .il-item, .e-5ceda02 .il-item, .e-0e16288 .il-item { break-inside: avoid; }

	/* ---- Berichttekst: zwevende afbeeldingen (alignright/alignleft) op volle breedte ---- */
	.post-content .wp-block-image.alignright, .post-content .wp-block-image .alignright,
	.post-content .wp-block-image.alignleft, .post-content .wp-block-image .alignleft { float: none; margin: 0 0 16px; }
	.post-content .alignright img, .post-content .alignleft img { width: 100%; }

	/* ---- Sectie-witruimte: de blauwe sectie "Solliciteren?" (80px boven en onder) en de kaartensecties op
	   beveiligingsdiensten/securitysystemen/branches/organisatie (80px onder) naar 60px. Geen enkele sectie heeft
	   op <= 767px een padding boven 80px, behalve de vacaturehero (.e-51ef030, 244px), maar die is bewust: de
	   volgende sectie schuift er 184px overheen (negatieve marge). ---- */
	.e-b2d9024 { --padding-top: 60px; --padding-bottom: 60px; }
	.e-96b649e { --padding-bottom: 60px; }

	/* ---- Zoekpagina en 404 (archive.css): zijmarge 16px, kaarten op volle breedte, tekst >= 14px, tikdoelen ---- */
	.arch { font-size: 16px; }
	.arch-head { margin: 1em auto 1.5em; padding: 1.5em 16px; }
	.arch-grid { display: block; }
	.arch-card { width: 100%; padding: 0 16px; }
	.arch-cats a { font-size: 14px; display: inline-block; padding: 11px 0; }
	.arch-card-title a { display: inline-block; padding: 11px 0; margin: -11px 0; }
	.arch-meta { font-size: 13px; margin: 1.25em 0 .75em; }
	.arch-meta a { display: inline-block; padding: 13px 0; }
	.arch-trail a { display: inline-block; padding: 9px 2px; } /* "Home" is 43px breed: 2px extra per kant */
	.arch-pagination { padding: 1.5em 16px; }
	.arch-pagination .page-numbers { min-width: 44px; width: auto; height: 44px; line-height: 41px; margin: 2px; padding: 0 8px; }
	.arch-pagination .prev.page-numbers, .arch-pagination .next.page-numbers { line-height: 44px; }
	.pagination .page-numbers { min-height: 44px; line-height: 26px; }
	.err404 { margin: 2em 16px; }
	.err404-search .srch { max-width: 100%; }
	.srch-field { height: 44px; padding-right: 52px; }
	.srch-btn { right: 0; width: 44px; padding: 0; justify-content: center; }
	.srch-btn svg { width: 18px; height: 18px; margin: 0; }
}
@media (max-width: 400px) {
	.vacancy-buttons { flex-direction: column; row-gap: 10px; }
}
/* Werkgebied: de plaatsnamenlijsten in twee kolommen vanaf 375px (op 360px is een kolom 124px voor de tekst en
   steken "Standdaarbuiten" en "Raamsdonksveer" buiten beeld) */
@media (min-width: 375px) and (max-width: 767px) {
	.e-feb8b68 .il, .e-56fd846 .il, .e-8ed63a0 .il, .e-afee565 .il, .e-5ceda02 .il, .e-0e16288 .il { columns: 2; column-gap: 12px; }
}
/* Nieuwsberichten op de smalste telefoons: tussenkoppen iets kleiner, zodat een lang woord met emoji ervoor
   ("🖥️ Slimme videomanagementsystemen", 339px bij 22,8px) in 320px past */
@media (max-width: 374px) {
	.post-content h2 { font-size: 1.4rem; }
}