/* =====================================================================
   mobiel.css - telefoon- en tabletopmaak voor het thema Custommate

   Wordt geladen NA style.css en w3.css (zie load_css in functions.php),
   zodat deze regels voorgaan. Bijna alles staat in media queries:
   de desktopweergave blijft gelijk.

     tot 700px : compacte kopbalk met logo en menuknop (hamburger)
     tot 600px : compactere inhoud (w3.css zet de kolommen dan onder
                 elkaar)

   Kleuren komen uit de Customizer (Thema Kleuren) via de CSS-variabelen
   --cm-donker en --cm-geel (zie custommate_customize_css).
   Terugdraaien: de twee enqueue-regels voor 'custommate-mobiel' in
   functions.php weghalen.
   ===================================================================== */

/* Verborgen SEO-tekst bovenaan elke pagina. Die werd pas verborgen als de
   hele pagina (met alle afbeeldingen) geladen was, waardoor de pagina eerst
   een lege grijze ruimte toonde en daarna versprong. Nu direct verborgen;
   het eindresultaat is gelijk. */
#info-section { display: none; }

/* Menuknop: alleen op smalle schermen */
#menu-knop { display: none; }


/* ===================== tot 1000px: tablet ===================== */
@media (max-width: 1000px) {
	/* Koppen in de drie gele vakken op de startpagina ("Ontwikkeling")
	   pasten niet meer in een smalle kolom */
	.C-top-box h1 {
		font-size: clamp(19px, 3.4vw, 36px);
		overflow-wrap: break-word;
	}
}


/* ===================== tot 700px: kopbalk en menu ===================== */
@media (max-width: 700px) {

	/* html/body staan op height:100%; dan blijft de kopbalk maar 1 scherm
	   hoog "plakken". Footer blijft onderaan door min-height. */
	html, body { height: auto; }
	body { min-height: 100vh; }

	/* ---- Kopbalk: logo links, menuknop rechts, blijft bovenaan ---- */
	#Header-section {
		position: -webkit-sticky;
		position: sticky;      /* w3-top maakt hem anders 'fixed' */
		top: 0;
		z-index: 1000;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background: var(--cm-donker, #333333);
	}

	#Header-logo {
		order: 1;
		flex: 1 1 auto;
		float: none;
		position: static;
		padding: 8px 12px;
		line-height: 0;
	}
	#Header-logo img {
		width: auto;
		height: 44px;
	}

	#menu-knop {
		order: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		margin-right: 8px;
		padding: 0 12px;
		background: transparent;
		border: 0;
		border-radius: 6px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	#menu-knop span {
		display: block;
		height: 3px;
		background: #ffffff;
		border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}
	#menu-knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	#menu-knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	#menu-knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
	#menu-knop:focus-visible { outline: 2px solid var(--cm-geel, #ffd539); outline-offset: -2px; }

	#Menu-section {
		order: 3;
		width: 100%;
		height: auto;
	}

	#header-line {               /* gele golf onder de balk */
		order: 4;
		display: block;
		width: 100%;
		height: 14px;
	}

	/* ---- Menu: dicht tot op de knop gedrukt wordt ----
	   .cm-js wordt in de <head> gezet; zonder JavaScript blijft het menu
	   gewoon open (en dus bruikbaar). */
	.cm-js #cssmenu { display: none; }
	.cm-js #Header-section.menu-open #cssmenu { display: block; }

	#cssmenu {
		height: auto;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		padding: 0 0 8px 0;
		-webkit-overflow-scrolling: touch;
	}
	#cssmenu > ul > li {
		float: none;
		width: 100%;
	}
	#cssmenu > ul > li > a,
	#cssmenu ul li.has-sub:hover > a {
		top: 0;
		height: auto;
		padding: 14px 20px;
		text-align: left;
		font-size: 16px;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
	#cssmenu li.active > a { color: var(--cm-geel, #ffd539); }
	#cssmenu li.active > a:hover { color: #000000; }

	/* Submenu (Markten) altijd uitgeklapt: hover werkt niet op een telefoon */
	#cssmenu > ul > li.has-sub > a:before { display: none; }
	#cssmenu ul li > ul,
	#cssmenu ul li.has-sub:hover > ul {
		display: block;
		position: static;
		width: auto;
		padding: 0 0 6px 0;
		border-radius: 0;
	}
	#cssmenu ul li > ul li a {
		padding: 11px 20px 11px 36px;
		font: 15px Arial, Helvetica, sans-serif;
	}

	/* ---- Kopafbeelding en afspeelknop ---- */
	#Header-image-section { position: relative; }
	#Header-play-button {
		position: absolute;
		right: 12px;
		bottom: 10px;
		width: auto;
		height: auto;
	}
	#Header-play-button .fa-3x { font-size: 2.2em; }
	#Header-play-button a {
		color: #ffffff;
		text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
	}

	/* ---- Inhoud: geen ruimte meer reserveren voor de vaste desktopbalk ---- */
	#Content_center {
		padding-top: 16px;
		padding-bottom: 24px;
	}
	#Content_center.C-content_move {
		top: 0;
		padding-top: 16px !important;
	}
}


/* ===================== tot 600px: inhoud ===================== */
@media (max-width: 600px) {

	/* Eén smalle marge rondom i.p.v. 2-3 geneste w3-containers */
	#Content_center {
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		overflow-wrap: break-word;   /* lange URL's lopen niet buiten beeld */
	}
	#Content_center > .w3-container:not(.w3-white),
	#Content_center > .w3-row-padding {
		padding-left: 0;
		padding-right: 0;
	}
	#Content_center > .w3-row-padding > .w3-third,
	#Content_center > .w3-row-padding > .w3-half,
	#Content_center > .w3-row-padding > .w3-rest {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 12px;
	}
	/* w3-rest staat naast een zwevende kolom; die is hier 100% breed.
	   Zonder binnenmarge zou w3-rest 0px breed ernaast blijven staan. */
	#Content_center .w3-rest { clear: both; }

	/* Afbeeldingen, video's en tabellen passen in het scherm */
	#Content_center img { max-width: 100%; height: auto; }
	#Content_center iframe,
	#Content_center video,
	#Content_center embed { max-width: 100%; }
	#Content_center table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	#Content_center ul:not(.w3-ul),
	#Content_center ol { padding-left: 22px; }
	#Content_center ul ul,
	#Content_center ol ol { padding-left: 18px; }

	/* Koppen kleiner (w3.css: h1 36px, h2 30px) */
	#Content_center h1 { font-size: 26px; line-height: 1.25; }
	#Content_center h2 { font-size: 21px; line-height: 1.3; }
	#Content_center h3 { font-size: 18px; }
	#Content_center .C-top h1,
	#Content_center .C-top-box h1 { font-size: 19px; }
	.C-top-box h1 { padding: 8px 0; }

	/* Markten-iconen: 3 naast elkaar i.p.v. 1 per regel */
	.Markten_icon {
		width: 29%;
		margin: 0 1% 14px;
		vertical-align: top;
		font-size: 14px;
		line-height: 1.3;
	}
	.Markten_icon img { width: 100%; max-width: 120px; }
	.C-top_color:has(> .Markten_icon) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 16px 8px 2px;
	}
	.C-top_color:has(> .Markten_icon) > br { display: none; }

	/* Nieuwslijst en productlijst: tekst niet extra inspringen */
	#Content_center article .w3-row-padding,
	#Content_center article .w3-row-padding > *,
	#Content_center .blog-post.w3-row-padding,
	#Content_center .blog-post.w3-row-padding > *,
	#Content_center .blog-post .w3-rest > .w3-container {
		padding-left: 0;
		padding-right: 0;
	}
	#Content_center article .w3-third img,
	#Content_center .blog-post .w3-third img {
		display: block;
		width: auto;
		max-height: 240px;
		margin: 12px auto 4px;
	}
	#Content_center article h2 { margin: 20px 0 6px; }

	/* Nieuwsbericht: datum/auteur-regel */
	.blog-post-meta { font-size: 14px; color: #666666; }

	/* Productpagina: documentenlijst */
	#Content_center .w3-ul .w3-bar-item { padding: 8px 4px; }

	/* Contactpagina: kaart lager, formulier past in het scherm */
	#Header-image-section.acf-map {
		height: 240px;
		margin: 0;
		border-width: 0 0 1px 0;
	}
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 input[type="number"],
	.wpcf7 textarea,
	.wpcf7 select {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		font-size: 16px;      /* voorkomt inzoomen op iPhone */
	}
	.wpcf7 textarea { height: 160px; }
	.wpcf7 input[type="submit"] {
		width: 100%;
		padding: 12px;
		font-size: 16px;
	}

	/* Paginanummers groter aantikbaar */
	.page-numbers { padding: 10px 14px; }

	/* Footer: minder witruimte */
	#footer-section.w3-padding-64 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}