/*
 * Mobile responsive override for viewports < 900px.
 *
 * Two strategies depending on page type, selected via the body class the
 * theme already emits (body.page-home on /index.html, body.page-<slug>
 * elsewhere):
 *
 * 1. Home pages (body.page-home): scale the entire 900px-wide layout
 *    proportionally with CSS `zoom` on #page-wrapper. The slideshow and
 *    its absolutely-positioned slide composition can't be reflowed
 *    sensibly, so we keep the desktop layout intact and shrink it. The
 *    home page #footer is a descendant of #page-wrapper, so the zoom on
 *    the wrapper covers it too — we don't zoom #footer separately or the
 *    factors would compound (0.5 × 0.5 = 0.25).
 *
 * 2. Subpages (body:not(.page-home)): keep the chrome zoomed (header +
 *    footer are absolutely-positioned compositions of logo / nav / flags
 *    / copyright that don't reflow well), but let the main content area
 *    reflow at native scale so text stays readable. The 900px-fixed
 *    content blocks (#main, #content, #wrapper, headings, dividers,
 *    spacers) become width:auto/max-width:100%, and the two-column
 *    contact layout stacks vertically.
 *
 * Each step's zoom value = (lower edge of range) / 900, so the scaled
 * layout fits the narrowest viewport in that range. Firefox doesn't parse
 * `zoom: calc(<length>/<length>)`, so the ratios are pre-computed literals.
 */

/* ----------------------------------------------------------------------
 * Home pages: full-page zoom
 * ---------------------------------------------------------------------- */

/*
 * Crop the dot column to an exact whole number of dot+padding cycles so
 * the bottom dot is never half-rendered. The dot pattern in dots.png is a
 * 13px dot + 7px gap = 20px period, so we round the available height down
 * to the nearest multiple of 20px. CSS only standardised round() with an
 * explicit strategy — there is no top-level floor() — so we use that.
 * (Slidewrappers only exist on home pages, so this is implicitly home-only;
 * scoped explicitly for documentation.)
 */
@media (max-width: 899px) {
	body.page-home #slidewrapper2,
	body.page-home #slidewrapper2 #dots,
	body.page-home #slidewrapper3 {
		height: round(down, 170vh, 20px);
	}
	/*
	 * Pin #page-wrapper to the 900px design width so descendants using
	 * width:100% match the 900px-wide siblings (#main, #header-content,
	 * #slidewrapper*). Without this the wrapper inherits the narrow body
	 * width and width:100% children collapse while width:900px siblings
	 * stay at 900px (visually scaled via zoom).
	 */
	body.page-home #page-wrapper {
		width: 900px;
	}
}

@media (max-width: 899px) { body.page-home #page-wrapper { zoom: 0.94; } }
@media (max-width: 850px) { body.page-home #page-wrapper { zoom: 0.89; } }
@media (max-width: 800px) { body.page-home #page-wrapper { zoom: 0.83; } }
@media (max-width: 750px) { body.page-home #page-wrapper { zoom: 0.78; } }
@media (max-width: 700px) { body.page-home #page-wrapper { zoom: 0.72; } }
@media (max-width: 650px) { body.page-home #page-wrapper { zoom: 0.67; } }
@media (max-width: 600px) { body.page-home #page-wrapper { zoom: 0.61; } }
@media (max-width: 550px) { body.page-home #page-wrapper { zoom: 0.56; } }
@media (max-width: 500px) { body.page-home #page-wrapper { zoom: 0.50; } }
@media (max-width: 450px) { body.page-home #page-wrapper { zoom: 0.44; } }
@media (max-width: 400px) { body.page-home #page-wrapper { zoom: 0.39; } }
@media (max-width: 350px) { body.page-home #page-wrapper { zoom: 0.33; } }

/* ----------------------------------------------------------------------
 * Subpages: zoom only the chrome (#header + #footer), reflow the body
 * ---------------------------------------------------------------------- */

@media (max-width: 899px) {
	/*
	 * Pin chrome to the 900px design width so the zoom factor (calibrated
	 * to 900px) lands them at the correct visual width inside the
	 * viewport. style.css overrides #header to width:100% (line 534), so
	 * we need width:900px here with sufficient selector specificity.
	 */
	body:not(.page-home) #header,
	body:not(.page-home) #footer {
		width: 900px;
	}

	/*
	 * Reflow the content blocks. Drop the 900px width pins so they
	 * collapse to the available body width, and add box-sizing so any
	 * padding stays inside that width.
	 */
	body:not(.page-home) #main,
	body:not(.page-home) #content,
	body:not(.page-home) #wrapper,
	body:not(.page-home) #title,
	body:not(.page-home) #services,
	body:not(.page-home) .divider,
	body:not(.page-home) .space,
	body:not(.page-home) h1,
	body:not(.page-home) h2,
	body:not(.page-home) h3,
	body:not(.page-home) h4 {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/*
	 * The contact page is a two-column float layout (#contact 600px left,
	 * #contact_col 250px left). Stack them vertically on narrow viewports.
	 */
	body:not(.page-home) #contact,
	body:not(.page-home) #contact_col {
		float: none;
		width: auto;
		max-width: 100%;
	}

	/*
	 * Keep embedded images, maps, and similar from forcing horizontal
	 * scroll. Constrains by parent width; height auto preserves aspect.
	 */
	body:not(.page-home) #main img {
		max-width: 100%;
		height: auto;
	}

	/* Breathing room so text doesn't touch the screen edges. */
	body:not(.page-home) #main {
		padding-left: 10px;
		padding-right: 10px;
	}

	/*
	 * Stick #footer to the bottom of the viewport on subpages. The
	 * original layout uses a margin:-50px / .push sticky-footer pattern
	 * that depends on body height:100% — but with our chrome zoom on
	 * #header and #footer the negative margin and push heights no longer
	 * line up, and short pages end up with the footer floating mid-screen
	 * (or, with longer content, drifting below the fold). A flex column
	 * on body with #page-wrapper as the flex-grow item pushes #footer to
	 * the bottom regardless of content length or zoom factor. Other body
	 * children (scripts/noscript) flex as zero-height items.
	 */
	body:not(.page-home) {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		height: auto;
	}
	body:not(.page-home) > #page-wrapper {
		flex: 1 0 auto;
		margin-bottom: 0;
	}
	body:not(.page-home) > #footer {
		flex: 0 0 auto;
	}
}

@media (max-width: 899px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.94; } }
@media (max-width: 850px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.89; } }
@media (max-width: 800px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.83; } }
@media (max-width: 750px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.78; } }
@media (max-width: 700px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.72; } }
@media (max-width: 650px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.67; } }
@media (max-width: 600px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.61; } }
@media (max-width: 550px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.56; } }
@media (max-width: 500px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.50; } }
@media (max-width: 450px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.44; } }
@media (max-width: 400px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.39; } }
@media (max-width: 350px) { body:not(.page-home) #header, body:not(.page-home) #footer { zoom: 0.33; } }

/* ----------------------------------------------------------------------
 * Services / diensten 800-899px: zoom #main instead of reflowing
 *
 * Between 800-899px the body-reflow rules (auto-width #main, fluid
 * descendants) leave the 898px-wide #carousel-circular inside still
 * overflowing — the carousel scroll-snap reflow only kicks in below
 * 800px. To bridge that gap, pin #main back to the 900px design width
 * and apply the same stepped zoom we use elsewhere so the whole content
 * column fits the viewport while the carousel keeps its desktop layout.
 * The padding overrides cancel out the 10px horizontal padding from the
 * generic subpage reflow above, so #main is exactly the design width
 * the zoom factors are calibrated against.
 * ---------------------------------------------------------------------- */

@media (min-width: 800px) and (max-width: 899px) {
	body.page-services #main {
		width: 900px;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
}
@media (min-width: 851px) and (max-width: 899px) { body.page-services #main { zoom: 0.94; } }
@media (min-width: 800px) and (max-width: 850px) { body.page-services #main { zoom: 0.89; } }

/* ----------------------------------------------------------------------
 * Page-specific reflows (< 800px)
 * ---------------------------------------------------------------------- */

/*
 * Services / diensten carousel: each .carousel-item is laid out as a 3-up
 * composition — .image floated left (385×400), .title-wrapper overlapping
 * the bottom of the image via top:-160px, and .text positioned to the
 * right of the image via top:-560px / left:385px.
 *
 * On narrow viewports we want each item to stack its image/title/text
 * vertically AND keep the carousel mechanic (one item visible at a time,
 * navigate to the next item by swiping). The carouFredSel JS lays out
 * items in a horizontal strip via inline transform/left positioning that's
 * calibrated to the 898×400 desktop item — that won't survive a width
 * override. So instead we replace the JS-driven strip with a native CSS
 * scroll-snap container: #carousel-circular becomes the scrollable
 * snap container, the UL becomes a flex row, and each LI is flex: 0 0
 * 100% with scroll-snap-align: start so the container's overflow-x:
 * auto provides the horizontal pagination. The carouFredSel JS still
 * runs but its positioning is neutralised by the !important rules
 * below, so it becomes a no-op rather than a fight.
 *
 * carouFredSel also wraps the UL in a generated
 * <div class="caroufredsel_wrapper" style="width:898; height:400;
 * overflow:hidden"> at init time. That JS-injected wrapper sits BETWEEN
 * #carousel-circular and ul.carousel, and its inline overflow:hidden +
 * fixed 400px height clips the stacked .text content below the image
 * (the symptom: text "disappears" because the carousel doesn't grow
 * vertically to fit it). We override the wrapper too — height:auto,
 * overflow:visible — to let the column grow.
 */
@media (max-width: 799px) {
	body.page-services #carousel-circular {
		width: 90vw !important;
		max-width: 90vw;
		height: auto !important;
		margin-left: auto;
		margin-right: auto;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	body.page-services #carousel-circular .caroufredsel_wrapper {
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}
	body.page-services #carousel-circular ul.carousel {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		width: auto !important;
		height: auto !important;
		transform: none !important;
		left: 0 !important;
		position: relative !important;
	}
	body.page-services #carousel-circular ul.carousel li.carousel-item {
		flex: 0 0 100%;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		scroll-snap-align: start;
	}
	/*
	 * Keep the image frame at its native 400px height even when the
	 * container widens, so the image doesn't balloon vertically on
	 * larger viewports just because we stretched its width. object-fit:
	 * cover crops the source image to fill the 100%×400px frame while
	 * preserving aspect ratio; object-position: center keeps the
	 * middle of the image visible (rather than the top-left corner,
	 * which is the default).
	 */
	body.page-services #carousel-circular .image {
		width: 100%;
		height: 400px;
		overflow: hidden;
	}
	body.page-services #carousel-circular .image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		float: none;
	}
	/* The yellow accent stripe sits to the right of the desktop image — pointless once we stack. */
	body.page-services #carousel-circular .image-right {
		display: none;
	}
	/*
	 * Keep title-wrapper overlapping the bottom of the image (visual
	 * appeal), but neutralise its flow contribution so .text doesn't sit
	 * 160px below the image.
	 */
	body.page-services #carousel-circular .title-wrapper {
		margin-bottom: -160px;
	}
	body.page-services #carousel-circular .text {
		position: static;
		top: 0;
		left: 0;
		width: auto;
		max-width: 100%;
		height: auto;
		overflow: visible;
	}
    body.page-services #carousel-buttons #carousel-prev {
        left: 10px;
    }
    body.page-services #carousel-buttons #carousel-next {
        right: 10px;
    }
}

/*
 * Clients / klanten reference grid: the markup is a 3×4 <table> with each
 * cell containing one logo. Collapse the table structure so the cells
 * become a single flow of inline-blocks that wrap on whatever width is
 * available. display:contents on table/tbody/tr removes them from the
 * layout tree and promotes the .reference TDs to direct flex/inline
 * siblings of the table's container.
 */
@media (max-width: 799px) {
	body.page-klanten table.references,
	body.page-klanten table.references tbody,
	body.page-klanten table.references tr {
		display: contents;
	}
	body.page-klanten .references .reference {
		display: inline-block;
		width: 225px;
		height: 120px;
		vertical-align: middle;
		text-align: center;
		margin: 10px 0;
	}
	/*
	 * With display:contents on the table/tbody/tr the .reference cells
	 * become direct layout children of #wrapper. Centring requires
	 * text-align:center on that actual layout parent — not on the
	 * .references table (which has display:contents and therefore no
	 * layout box to centre against).
	 */
	body.page-klanten #wrapper {
		text-align: center;
	}
}

/*
 * Trojan scan: the page is layout-by-nested-tables (1990s style) with
 * fixed widths (750/630/600/130).
 *
 * The text-wrap fix is unconditional (applies at every viewport width):
 * two of the layout TDs have the HTML `nowrap` attribute, which maps to
 * white-space: nowrap and prevents the long paragraphs from ever
 * wrapping — including on desktop, where the page rendered as a wide
 * unbreakable strip. Forcing white-space:normal on every cell makes the
 * paragraphs reflow to the cell width regardless of viewport.
 *
 * The table-to-block collapse and fluid-image rules are mobile-only
 * (below 900px): on desktop we want the original two-column nested
 * table layout to render as designed.
 */
body.page-trojanscan #main table,
body.page-trojanscan #main tbody,
body.page-trojanscan #main tr,
body.page-trojanscan #main td {
	white-space: normal !important;
}

@media (max-width: 899px) {
	body.page-trojanscan #main table,
	body.page-trojanscan #main tbody,
	body.page-trojanscan #main tr,
	body.page-trojanscan #main td {
		display: block;
		width: auto !important;
		max-width: 100%;
		height: auto !important;
	}
	body.page-trojanscan #main img,
	body.page-trojanscan #main iframe {
		max-width: 100%;
		height: auto;
	}
}

/*
 * Testimonials: each .test card is 430px wide and float:left, so they tile
 * two-up at desktop. On narrow viewports we drop the float and centre
 * each card horizontally. Below 430px viewport the card collapses to
 * full width via max-width:100% and there's no excess for margin:auto to
 * distribute, so centring is a no-op there (which is fine).
 */
@media (max-width: 899px) {
	body.page-testimonials .test {
		float: none;
		width: 430px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		/*
		 * Contain the floated .testimg / .testtext children so .test's
		 * height grows with their content. Without this, .test stays at
		 * its declared 136px (floats don't contribute to parent height)
		 * and the 30px margin sits below an undersized box — overlapping
		 * any testtext that wraps past 120px.
		 */
		display: flow-root;
	}
}

/* ----------------------------------------------------------------------
 * Narrow-viewport header adjustments (< 580px)
 *
 * At small viewports the stepped chrome-zoom leaves the #header-content
 * box sitting flush against the left viewport edge, with the gap to the
 * right viewport edge varying by breakpoint (because zoom * 900 ≤
 * lower-edge-of-range, so there's slack at the upper edge of each
 * range). Result: #logo touches the left edge, while #nav and #flags
 * sit too far from the right edge. Pull #logo inward and push #nav /
 * #flags outward so they always anchor near the viewport edges.
 * ---------------------------------------------------------------------- */

@media (max-width: 580px) {
	body:not(.page-home) #logo {
		left: 15px;
	}
	body:not(.page-home) #nav {
		right: -20px;
	}
	body:not(.page-home) #header #flags {
		right: -20px;
	}
}

/* ----------------------------------------------------------------------
 * Shared
 * ---------------------------------------------------------------------- */

/*
 * Right-align the language flags inside #flags regardless of how many
 * flags are present. Default style.css uses float:left on the <li>s,
 * which packs flags to the LEFT of #flags' fixed 66px width. On pages
 * where one of the flags is stripped (e.g. algvw.html, where the
 * Spanish version of terms-and-conditions doesn't exist and
 * mirror-strip-deprecated-hreflang removes its <li>) the gap shows up
 * on the right. Flexbox with justify-content:flex-end keeps the
 * remaining flags pinned to the right edge of the container so they
 * still anchor near the viewport edge.
 */
#header #flags ul {
	display: flex;
	justify-content: flex-end;
}
#header #flags li {
	float: none;
}

@media (max-width: 899px) {
	#header #flags {
		width: 67px;
	}
}