/*
 * Basisweergave voor mobiel (Claude/Dennis, 2026-11-12).
 * Alleen actief tot 980px (media-attribuut in index.php); desktop blijft ongewijzigd.
 * De vaste tabel-layout (970px) wordt gestapeld; inhoudstabellen (stambomen e.d.) blijven tabellen
 * en kunnen horizontaal scrollen binnen de inhoud.
 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background-color: #ffffff; }

/* Layout-tabellen stapelen */
table.basic,
table.basic > tbody,
table.basic > tbody > tr,
table.basic > tbody > tr > td,
table.contentainer,
table.contentainer > tbody,
table.contentainer > tbody > tr,
table.contentainer > tbody > tr > td {
	display: block;
	width: auto !important;
	height: auto !important;
	min-height: 0;
	box-sizing: border-box;
}
table.basic { margin: 0; }
td.payoff, td.crumbtrail, td.menu, td.contentbar { background-image: none; background-color: #ffffff; }
td.contentbar { background-color: #efefef; }
table.contentainer { margin: 0; background-image: none; }
/* Volgorde: inhoud, menu van de hengst, submenu, rechterkolom (nieuws) */
table.contentainer > tbody > tr { display: flex !important; flex-direction: column; }
td.content { order: 1; }
td.rightcol.rightcolhengst { order: 2; }
td.submenu { order: 3; }
td.rightcol { order: 4; }

/* Kop: logo met daaronder de talen op één regel */
td.topbar { background-image: none !important; background-color: #002569; padding: 8px 10px; overflow: hidden; }
td.topbar img.logo { float: none; display: block; width: 150px; height: auto; }
table.language, table.language > tbody { display: block; float: none; margin: 6px 0 0 0; height: auto; }
table.language tr { display: inline-block; margin-right: 10px; }
table.language td { display: inline; width: auto; padding: 0 0 0 4px; font-size: 12px; }
table.language img { float: none; vertical-align: middle; }
table.language td a { color: #ffffff; }
td.payoff { text-align: left; padding: 4px 10px; line-height: 16px; }

/* Hoofdmenu: knoppen die over meerdere regels mogen lopen */
td.menu { background-image: none; background-color: #002569; padding: 4px; }
td.menu ul { height: auto !important; overflow: hidden; }
td.menu li { float: left; height: auto !important; margin: 2px; }
td.menu li a, td.menu li span { height: auto !important; padding: 6px 10px !important; line-height: 18px !important; font-size: 13px; }

td.crumbtrail { padding: 6px 10px; line-height: 18px; }

/* Inhoud */
td.content { padding: 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
td.content, td.content p, td.content td, td.content li, td.content div { font-size: 14px; line-height: 1.5; }
td.submenu, td.rightcol, td.rightcolhengst { border-width: 0 !important; padding: 8px 12px; }
td.submenu { border-top: 3px solid #ffffff !important; }
td.rightcol { border-top: 3px solid #ffffff !important; }
div.hengstmenu { width: auto; height: auto; }
td.submenu li a, td.submenu li span, div.hengstmenu li a { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 13px; }

div.pics, div.intro, td.content > div.intro {
	width: auto !important;
	position: static;
	margin: 0 0 12px 0;
	left: auto;
	top: auto;
}
div.pics { overflow-x: auto; white-space: nowrap; }
div.intro { padding: 10px; }

img, iframe, video, object, embed { max-width: 100%; }
img { height: auto; }
iframe { max-height: 60vh; }
div.slideshow, div.slideshow img { max-width: 100%; }

/* Hengstenoverzicht: tegels naast elkaar zolang ze passen */
div.hengst { float: none; display: inline-block; vertical-align: top; position: static; width: 48%; height: auto; margin: 0 1% 12px 1%; }
div.hengst img { width: 100%; box-sizing: border-box; }

/* Homepage */
.home table.contentainer { width: auto !important; }
.home table.content,
.home div.newsblock,
table.news,
.home table.news { width: auto !important; float: none; margin: 12px; }
div.homepic { float: none; text-align: center; margin: 12px; }

/* Formulieren: label boven het veld */
td.content form table, td.content form tbody, td.content form tr, td.content form td { display: block; width: auto !important; }
td.content form td { padding: 2px 0 !important; }
td.content form tr { margin-bottom: 8px; }
input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea { width: 100%; box-sizing: border-box; }
input, select, textarea, button { max-width: 100%; font-size: 16px; }
button, input[type=submit] { padding: 6px 14px; }