/* Tablet + mobile layer on top of the fixed 940px desktop design.
   Desktop (>1000px) is untouched. */

.nav-toggle, .mainmenu li.extra, .mainmenu .sub-toggle { display: none; }

/* contact block in the footer panel that used to hold the (now empty) news slider */
.share p a { color: #009fd7; }
.share p a:hover { text-decoration: underline; }

.contactbox { box-sizing: border-box; padding: 40px 30px; text-align: center; color: #fff; }
.contactbox .t { font-size: 24px; font-weight: 600; margin-bottom: 25px; }
.contactbox a { display: block; color: #fff; font-size: 20px; line-height: 34px; text-decoration: none; }
.contactbox a:hover { text-decoration: underline; }
.center.footer .contactbox a.cta { display: block; width: 215px; height: 44px; line-height: 44px; margin: 25px auto 0; border: 1px solid #fff; font-size: 16px; }
.center.footer .contactbox a.cta:hover { background: #fff; color: #0d80a9; text-decoration: none; }

/* ---------- tablet & smaller ---------- */
@media (max-width: 1000px) {
	html, body { height: auto; } /* layout.css pins them to 100%, which breaks page height once #page is no longer absolute */
	html, body { overflow-x: clip; } /* clip, not hidden: hidden would turn body into its own scroller */
	#page { display: flow-root; } /* contain the floated .center bands */
	img { max-width: 100%; height: auto; }

	.container { width: auto; padding: 0 20px; box-sizing: border-box; }
	.cms_content, .crumbs { width: 100%; max-width: none; float: none; }
	.center.header .container { padding: 0; }
	.logo { margin-left: 20px; }

	#carousel { min-width: 0; }
	body.info #carousel img { min-width: 0; }

	/* main menu: fluid bar */
	.mainmenu { width: 100%; left: 0; }
	.mainmenu ul.main { display: flex; justify-content: center; }
	.mainmenu li { padding-left: 7px; padding-right: 7px; }
	.mainmenu li > a, .mainmenu li > a:hover { font-size: 15px !important; }
	.mainmenu ul.main { width: auto !important; } /* scripts.js sets an inline width to centre the desktop bar */
	.mainmenu ul li .submenu { width: 100%; box-sizing: border-box; }
	.mainmenu .submenu li.menu { width: auto; padding-left: 40px; padding-right: 20px; }
	.mainmenu .submenu li.foto { display: none; }

	/* content blocks with fixed widths */
	.fotos, .fotos .main, ul.sliderd, .leg, .leg.detail, .gmap, #g_map,
	.refs_slider_detail, .verfijn.rea, .slider_rea ul, .formule, .suggesties, .nieuwsfoto { width: 100%; max-width: 100%; box-sizing: border-box; }
	.refs_slider_detail ul, .refs_slider_detail li { width: auto; margin-left: 0; }
	.leg.detail p, .dummy.nav, .nav, .refs, .bar { width: auto; max-width: 100%; }
	.ref { width: 48%; margin-right: 2%; }
	.ref .foto, .ref .video, .ref .txt { width: 100%; box-sizing: border-box; }
	.ref .foto img { width: 100%; height: auto; }
	.ref a.knop_ref { max-width: 100%; }
	/* images inside table-layout columns would shrink to nothing with max-width:100% */
	.div-table-col img { max-width: 45vw; }
	.div-table-col { overflow-wrap: anywhere; } /* long URLs in privacy text stretched the table */
	.leg:before { display: none; }
	.cms_content table { max-width: 100%; }
	.cms_content iframe, .cms_content video { max-width: 100%; }

	/* footer: the four bands were one 2600px background image; give each band its own colour */
	.center.footer.all { height: auto; background-image: none; }
	.center.footer.d1, .center.footer.d2, .center.footer.d3, .center.footer.d4 { height: auto; overflow: hidden; }
	.center.footer.d1 { background: #f8f8f8; padding: 30px 0; text-align: center; }
	.center.footer.d2 { background: linear-gradient(90deg, #017eb8, #019dd6); padding: 30px 0; }
	.center.footer.d3 { background: #3d3d3d; padding: 30px 0; }
	.center.footer.d4 { background: #f2f2f2; padding: 30px 0; }
	.footer.d1 p { float: none; margin: 0 0 15px; font-size: 22px; }
	.footer.d1 a.cta { float: none; display: inline-block; margin: 5px; }
	.nieuwsbrief { float: none; width: auto; height: auto; margin: 0; }
	.nieuwsbox { display: none; } /* contact block duplicates the CTA band right above it */
	.slider_rea .bx-pager { display: none; } /* one dot per card becomes a wall of numbers */
	.center.footer .refs_slider { float: none; width: 100%; margin: 0 auto 30px; height: auto; padding-bottom: 10px; }
	.refs_slider ul, .refs_slider li { width: 100% !important; height: auto; }
	.center.footer .map { float: none; margin: 0 auto; max-width: 100%; }

	/* address block: map/marker decoration only makes sense on the wide background */
	.footer.d4 .marker, .footer.d4 .helperm { display: none; }
	.footer.d4 .container.rel { text-align: center; }
	.footer.d4 .container.rel::before { content: ""; display: block; width: 140px; height: 100px; margin: 0 auto 15px; background: url(../../imgv3/main/logo_segorex.png) center no-repeat; }
	.adres, .tel, .copy { position: static; margin: 0 auto 12px; }
	.adres { height: auto; }
	.tel { max-width: 100%; box-sizing: border-box; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	/* header: white bar with logo + hamburger */
	.center.header { position: relative; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
	.center.header .container { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 16px; }
	.logo { float: none; width: 70px; height: 50px; margin: 0; background: url(../../imgv3/main/logo_segorex.png) center / contain no-repeat; }
	.logo img { width: 70px; height: 50px; }
	.topmenu { display: none; }
	.nav-toggle { display: block; width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; }
	.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; position: relative; width: 24px; height: 2px; background: #009fd7; transition: transform .2s; }
	.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
	.nav-toggle span::before { top: -7px; }
	.nav-toggle span::after { top: 7px; }
	.nav-open .nav-toggle span { background: transparent; }
	.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
	.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

	#page { position: static; }
	#carousel, body.info #carousel, body.home #carousel { height: 200px; }
	body.info #carousel .cover_info, body.home #carousel .cover { height: 200px; }

	/* menu becomes a drop-down panel under the header */
	.mainmenu { display: none; position: static; margin: 0; height: auto; float: none; text-align: left; }
	.nav-open .mainmenu { display: block; position: absolute; top: 70px; left: 0; right: 0; width: auto; z-index: 1000;
		max-height: calc(100vh - 70px); overflow-y: auto; box-shadow: 0 8px 16px rgba(0,0,0,.15); }
	.mainmenu ul.main { display: block; width: auto !important; margin: 0; } /* scripts.js sets an inline width to centre the desktop bar */
	.mainmenu li, .mainmenu li.l1 { float: none; height: auto; line-height: 48px; padding: 0; border-bottom: 1px solid #eee; background: none !important; }
	.mainmenu li > a { display: block; padding: 0 20px; }
	.mainmenu ul li .submenu, .mainmenu ul li:hover .submenu { display: none; position: static; animation: none; padding: 0; }
	.mainmenu li.open > .submenu { display: block; }
	.mainmenu .submenu li.menu { float: none; width: auto; margin: 0; padding: 0; }
	.mainmenu .submenu li.menu li, .mainmenu .submenu li.menu li:nth-child(even) { float: none; width: auto; height: auto; line-height: 44px; padding: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
	.mainmenu .submenu li > a, .mainmenu .submenu li > a:hover { padding-left: 40px; background-position: 20px center; }
	.mainmenu li.has-sub > a { position: relative; padding-right: 56px; }
	.mainmenu li.has-sub > .sub-toggle { display: block; position: absolute; right: 0; top: 0; width: 56px; height: 48px; border: 0; background: none; color: #009fd7; font-size: 22px; cursor: pointer; }
	.mainmenu li.l1 { position: relative; }
	.mainmenu li.extra { display: block; }
	.mainmenu li.extra > a { color: #1c2f69; font-size: 15px !important; }

	/* content: stack table-layout columns */
	.crumbs { height: auto; line-height: 20px; padding: 15px 0; text-align: left; }
	.div-table, .div-table-row, .div-table-col, .cms_tbl, .cms_row, .cms_col { display: block; width: 100% !important; box-sizing: border-box; }
	.div-table-col + .div-table-col { margin-top: 15px; }
	.div-table-col .fotoborder, .div-table-col div[align="center"] { text-align: center; }
	.cms_content img, .div-table-col img { max-width: 100%; height: auto; }
	.ref { width: 100%; margin-right: 0; }
	.cms_content [style*="width"] { max-width: 100%; }
	.cms_content input, .cms_content textarea, .cms_content select { max-width: 100%; box-sizing: border-box; }
	.subnav { box-sizing: border-box; padding: 15px; }
	.form { margin-left: 0 !important; max-width: 100%; }
	.Knopdeel2 { float: none; width: auto; max-width: 100%; height: auto; white-space: normal; }
	.Knopdeel2 a { margin-left: 0 !important; } /* inline margin-left:346px */
	.share { text-align: left; }

	/* realisaties / referenties lists */
	.slider_rea.alles li, .slider_rea li { width: 100%; margin-right: 0; height: auto; }
	.slider_rea .foto, .slider_rea .info { width: 100%; box-sizing: border-box; }
	.slider_rea .foto img { width: 100%; height: auto; }
	.refs .titel, .refs .lijst, .refs select { width: 100% !important; float: none; height: auto; }
	.filters { margin-bottom: 5px; }
	.verfijn p { float: none; }

	/* footer */
	.footer.d1 p { font-size: 20px; line-height: 28px; height: auto; }
	.footer.d1 a.cta { display: block; margin: 10px auto 0; max-width: 280px; }
	.nieuwsbrief { font-size: 18px; }
	.refs_slider p { height: auto; margin-bottom: 15px; }
}