@charset "UTF-8";

/* =====================================================================
   responsive.css  -  maakt de site geschikt voor telefoon en tablet.
   Wordt op elke pagina als LAATSTE stylesheet geladen, zodat deze
   regels voorgaan op main.css / menu.css / pagina-specifieke styles.
   Op een computerscherm (breder dan 1000px) verandert er vrijwel niets.
   ===================================================================== */


html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }

/* Container: max 1000px breed, maar mag smaller worden */
div#container {
	width: 100%;
	max-width: 1000px;
}

/* Header schaalt mee met de schermbreedte (header.jpg = 1022 x 229) */
div#header {
	height: auto;
	aspect-ratio: 1022 / 229;
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
}

/* Afbeeldingen, video en invoervelden nooit breder dan het scherm */
img, video, iframe, audio { max-width: 100%; }
img { height: auto; }
input, select, textarea, button { max-width: 100%; }

/* Controlevraag tegen spam */
.hc_lokveld { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
td.humancheck label { margin-right: 6px; }
td.humancheck input[type="text"] { width: 70px; }

/* Slider op de homepage */
div#slidy-container { overflow: hidden; }

/* Kolommen netjes laten eindigen (floats opruimen) */
div#content::after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------------------------
   MENU: hamburgerknop (alleen zichtbaar op smalle schermen)
   --------------------------------------------------------------------- */
nav .nav-toggle,
nav .sub-toggle { display: none; }


/* =====================================================================
   TABLET en kleiner (tot 1000px)
   ===================================================================== */
@media (max-width: 1000px) {
	div#content { padding: 15px 20px; }
	nav ul li a { padding: 10px 22px; }
}


/* =====================================================================
   TELEFOON (tot 760px)
   ===================================================================== */
@media (max-width: 760px) {

	*, *::before, *::after { box-sizing: border-box; }

	body { font-size: 16px; line-height: 1.45; }

	h1 { font-size: 30px; margin: 15px 0 10px; }
	h2 { font-size: 22px; }

	div#content { padding: 10px 14px; }
	div#full-col { padding: 0; }
	#footer, #footer_panfluitboeken { padding: 15px 14px; }

	/* ---- Alle kolommen onder elkaar i.p.v. naast elkaar ---- */
	div#content div[id^="col"],
	div#content div[class^="col"],
	div#content div[id^="left-col"],
	div#content div[id^="right-col"] {
		float: none !important;
		clear: both !important;
		display: block !important;
		width: auto !important;
		margin: 0 0 15px 0 !important;
		padding: 5px 0 !important;
	}

	/* Homepage: welkomsttekst + nieuws */
	div#col1of2_index h1 { font-size: 30px; }
	div#col2of2_index img { width: 100% !important; }

	/* Slider op volle breedte */
	div#slidy-container { width: 100%; }

	/* Boekenpagina: afbeelding + tekst onder elkaar */
	div.col1of2_panfluitboeken img { width: 160px; }
	#content h2 { margin-left: 0 !important; margin-right: 0 !important; }

	/* Grote knoppen met vaste breedte (bv. "Ga naar het bestelformulier") */
	input[type="submit"], input[type="button"] {
		width: auto !important;
		white-space: normal;
		padding: 10px 14px;
		font-size: 16px !important;
	}

	/* ---- Tabellen met gegevens (tarieven, vakanties) ----
	   Mogen horizontaal scrollen als ze echt niet passen. */
	div#full-col { overflow-x: auto; }
	table.tarieven, table#vakanties { font-size: 14px; }
	table.tarieven tr td { padding-right: 8px; }
	table#vakanties tr td { padding: 4px 6px; }
	p.tarieven_kop { font-size: 20px; }
	p.tabel_kop { font-size: 15px; }
	td.center { width: auto; white-space: nowrap; }

	/* Tabel met foto ernaast (les_ede, les_amersfoort, ...) */
	table.layout-stack, table.layout-stack tbody,
	table.layout-stack tr, table.layout-stack td {
		display: block; width: 100% !important; padding: 0 !important;
	}

	/* ---- Formulieren: label boven het invoerveld ---- */
	#form1 table, #form1 tbody, #form1 tr, #form1 td {
		display: block;
		width: 100% !important;
		height: auto !important;
	}
	#form1 table { margin: 0; }
	#form1 td:empty { display: none; }
	#form1 td { padding: 2px 0; }
	#form1 td.section_header, #form1 td h3, #form1 p.form_header {
		padding-top: 18px; height: auto;
	}
	#form1 td.humancheck label { display: block; }
	#form1 td.humancheck input[type="text"] { width: 90px !important; }
	#form1 input[type="text"],
	#form1 input[type="email"],
	#form1 input[type="tel"],
	#form1 input[type="number"],
	#form1 select,
	#form1 textarea {
		width: 100% !important;
		margin: 2px 0 10px 0;
		padding: 8px;
		font-size: 16px;   /* voorkomt automatisch inzoomen op iPhone */
	}
	#form1 input[type="checkbox"] { margin: 10px 8px 10px 0; transform: scale(1.3); }

	/* Bestelformulier: boekenrijen (titel / prijs / aantal) */
	#form1 tr.book-header { display: none; }
	#form1 tr.book-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 6px 0; border-bottom: 1px solid #222650; }
	#form1 tr.book-row td { width: auto !important; }
	#form1 tr.book-row td:first-child { width: 100% !important; }
	#form1 tr.book-row input[type="text"] { width: 70px !important; margin: 0; }

	/* ---- MENU: hamburger ---- */
	nav { margin: 0; text-align: left; position: relative; }

	nav .nav-toggle {
		display: block;
		width: 100%;
		padding: 12px 16px;
		background: #efefef;
		background: linear-gradient(#efefef, #bbbbbb);
		color: #333;
		border: none;
		font-size: 18px;
		text-align: left;
		cursor: pointer;
	}

	nav.js > ul { display: none; }
	nav.js.open > ul { display: block; }

	nav ul {
		margin: 0;
		display: block;
		width: 100%;
		border-radius: 0;
		padding: 0;
	}
	nav ul li { float: none; position: relative; border-top: 1px solid #ccc; }
	nav ul li a { padding: 12px 16px; color: #333; font-size: 17px; }
	nav ul li:hover { background: none; }
	nav ul li:hover a { color: #333; }
	nav ul li a:active, nav ul li a:hover { background: #4b545f; color: #fff !important; }

	/* Submenu (Les) op telefoon: openklappen via het pijltje */
	nav ul li:hover > ul { display: none; }
	nav ul ul,
	nav ul li.sub-open > ul {
		position: static;
		background: #5f6975;
	}
	nav ul li.sub-open > ul { display: block; }
	nav.nojs ul ul { display: block; }   /* zonder JavaScript: altijd open */
	nav ul ul li { border-top: 1px solid #6b727c; border-bottom: none; }
	nav ul ul li a { padding: 11px 16px 11px 34px; color: #fff !important; font-size: 16px; }

	nav .sub-toggle {
		display: block;
		position: absolute;
		right: 0; top: 0;
		width: 56px; height: 47px;
		border: none;
		border-left: 1px solid #ccc;
		background: transparent;
		font-size: 20px;
		color: #333;
		cursor: pointer;
	}
}