/* =========================================================================
   TOPP-zorg Replica — responsive layer
   Loaded AFTER the original main.css. Makes the theme genuinely fluid on
   phones/tablets by unlocking the site's own (previously unreachable) mobile
   rules and filling the gaps. The original main.css is left untouched.
   ========================================================================= */

/* 1. UNLOCK — the original forced a 992px minimum width on body/.container,
   which disabled every mobile rule the theme already ships. Remove it. */
html { -webkit-text-size-adjust: 100%; }
body,
.container { min-width: 0 !important; }

/* 1b. ADDRESS-BAR / HORIZONTAL-OVERFLOW FIX.
   On phones the browser address bar only auto-hides while the *document* itself
   scrolls vertically. Any sideways overflow (e.g. the off-canvas menu sitting
   just past the right edge, a wide embed, etc.) makes the page horizontally
   scrollable, which suppresses that auto-hide. We clip the horizontal axis with
   `overflow-x: clip` — and NOT `hidden`, because `clip` is the only value that
   stops sideways scroll WITHOUT turning html/body into a scroll container. That
   means the document keeps scrolling vertically (so the address bar collapses on
   scroll) and `position: sticky` on the header keeps working. Scoped to the widths
   where the off-canvas menu exists, so desktop dropdowns are never clipped. */
@media (max-width: 1120px) {
	html, body { overflow-x: clip; }

	/* Header is NOT pinned on phones — it scrolls away with the page, freeing the
	   top of the viewport (and removing the pinned element that can stop the mobile
	   address bar from collapsing). The floating button below is the menu control. */
	.header { position: static !important; box-shadow: none; }
	.header__menu-btn { display: none !important; } /* replaced by the floating button */

	/* Nav drawer overlays full height, independent of the (now unpinned) header. */
	.header__nav {
		position: fixed !important;
		top: 0 !important;
		right: 0;
		height: 100vh !important;
		height: 100dvh !important;
		z-index: 1100;
	}
	.header--active .header__nav { padding-top: 76px; z-index: 1100 !important; } /* clear the button; sit above page content */

	/* Dimmed backdrop behind the open drawer (also closes the menu when tapped). */
	.tz-nav-scrim {
		display: block;
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		background: rgba(0, 0, 0, .45);
		z-index: 1080;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
	}
	body.tz-nav-open .tz-nav-scrim { opacity: 1; visibility: visible; }

	/* Floating menu button — fixed top-right, always reachable. */
	.tz-fab-menu {
		position: fixed;
		top: 12px;
		right: 12px;
		z-index: 1200;
		width: 50px;
		height: 50px;
		padding: 0;
		border: 1px solid #e2e9ea;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.tz-fab-menu span { position: relative; display: block; width: 22px; height: 2px; background: #1d2a2e; border-radius: 2px; transition: background .15s ease; }
	.tz-fab-menu span::before,
	.tz-fab-menu span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #1d2a2e; border-radius: 2px; transition: transform .2s ease, top .2s ease; }
	.tz-fab-menu span::before { top: -7px; }
	.tz-fab-menu span::after { top: 7px; }
	/* Morph to an X while the drawer is open. */
	body.tz-nav-open .tz-fab-menu span { background: transparent; }
	body.tz-nav-open .tz-fab-menu span::before { top: 0; transform: rotate(45deg); }
	body.tz-nav-open .tz-fab-menu span::after { top: 0; transform: rotate(-45deg); }
}

/* The floating button is mobile-only. */
@media (min-width: 1121px) { .tz-fab-menu { display: none; } }
.tz-nav-scrim { display: none; } /* shown only inside the mobile media query above */

/* 2. FLUID MEDIA — stop images / embeds / maps / tables from overflowing. */
img, svg, video, canvas { max-width: 100%; }
.entry-content img,
.wp-block-image img { height: auto; }
.entry-content iframe,
.wp-block-embed iframe,
.contact-route__map iframe,
iframe[src*="google.com/maps"] { max-width: 100%; }
.entry-content table { display: block; width: 100%; overflow-x: auto; }

/* 3. Lock background scroll while the slide-out menu is open
   (the bundled JS toggles body.noscroll, but the original CSS never styled it). */
body.noscroll { overflow: hidden; }

/* 4. TABLET (≤1120px): the mobile nav already engages here via main.css.
   Just make sure the open panel never exceeds the viewport on small phones. */
@media (max-width: 1120px) {
	.header--active .header__nav { width: 320px; max-width: 86vw; }
}

/* 5. ≤768px — comfortable gutters + full-width emphasis buttons. */
@media (max-width: 768px) {
	.header__container,
	.footer__container { padding-left: 20px; padding-right: 20px; }
	.element__btn-orange .wp-block-button__link { min-width: 0; width: 100%; }
	.wp-block-buttons.element__btn-centre { flex-direction: column; align-items: stretch; }
}

/* 6. ≤560px — tighten spacing and scale display headings down. */
@media (max-width: 560px) {
	.container .wp-block-group:not(.alignfull) { padding: 24px 18px; }
	.header__container { height: 100%; }
	h1, .h1 { font-size: 1.875rem; line-height: 1.2; }
	h2, .h2 { font-size: 1.375rem; }
	h3, .h3 { font-size: 1.2rem; }
	.homepage__teaser h1,
	.homepage__teaser p { margin-bottom: 28px; }
	/* keep round team photos from dominating a narrow column */
	.tz-person .tz-person__image img { height: 180px; width: 180px; }
	.footer { padding: 30px 18px; }
}

/* 7. Theme-shell listings (archives/search) — already fluid, just tighten. */
@media (max-width: 560px) {
	.tz-postlist, .tz-breadcrumb .container { padding-left: 18px; padding-right: 18px; }
}

/* 8. Defensive: any flex-based info-block / columns list stacks on small screens
   (real content uses a Columns block, which core CSS already stacks at ≤781px). */
@media (max-width: 781px) {
	.info-blocks-list { flex-wrap: wrap; }
	.info-blocks-list > * { flex: 1 1 100%; max-width: 100%; }
	.info-blocks-list .info-block:not(:last-child) { margin-bottom: 20px; }
}