/**
 * Loaded last on the frontend (see zanco_enqueue_front_layer in functions.php).
 * Reinforces header/footer mobile rules after Global Styles and aggressive caching.
 *
 * @package Zanco
 */

/* --------------------------------------------------------------------------
   Footer — hide link columns + newsletter on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
	/* Prefer #footer (template anchor); also match if --home2 was removed in Site Editor */
	#footer.site-footer .site-footer__column--company,
	#footer.site-footer .site-footer__column--services,
	#footer.site-footer .site-footer__column--newsletter,
	#footer.site-footer.site-footer--home2 .site-footer__column--company,
	#footer.site-footer.site-footer--home2 .site-footer__column--services,
	#footer.site-footer.site-footer--home2 .site-footer__column--newsletter,
	footer.site-footer.site-footer--home2.wp-block-group .site-footer__column--company,
	footer.site-footer.site-footer--home2.wp-block-group .site-footer__column--services,
	footer.site-footer.site-footer--home2.wp-block-group .site-footer__column--newsletter,
	.site-footer.site-footer--home2 .site-footer__column--company,
	.site-footer.site-footer--home2 .site-footer__column--services,
	.site-footer.site-footer--home2 .site-footer__column--newsletter {
		display: none !important;
	}

	#footer.site-footer .site-footer__main,
	#footer.site-footer--home2 .site-footer__main,
	footer.site-footer--home2 .site-footer__main {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		margin-block-end: 2rem !important;
	}
}

/* --------------------------------------------------------------------------
   Header (block / FSE) — mobile nav as dropdown under bar, not full viewport
   Core navigation uses position:fixed + inset:0 + huge clamp() padding + overflow:auto;
   override with high-specificity !important so it wins over block-library + global styles.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/*
	 * Keep the bar above page heroes / overlays so taps hit the header, not the main stack.
	 */
	header[role="banner"],
	.site-header.alignfull,
	.site-header {
		z-index: 99990 !important;
	}

	/* Same breakpoint as overlay menu: hide header CTA so logo + menu fit; link lives in nav/footer. */
	header[role="banner"] .site-header .header-actions .contact-btn,
	.site-header .header-actions .contact-btn {
		display: none !important;
	}

	/*
	 * Core Navigation (mobile): the responsive layer is often a full-screen sibling that sits
	 * on top of the hamburger. pointer-events:none when closed lets taps reach the open control.
	 * The open button is usually OUTSIDE the container (sibling), not a child — style it explicitly.
	 */
	header[role="banner"] .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open),
	.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		pointer-events: none !important;
	}

	header[role="banner"] .wp-block-navigation .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
		position: relative;
		z-index: 3;
		pointer-events: auto !important;
		touch-action: manipulation;
	}

	/*
	 * Dropdown is position:absolute; 100% wide. If .main-navigation stays position:relative,
	 * its box collapses to the hamburger — panel stays icon-width. Static nav + relative
	 * .header-content makes the panel span the full header row (same CB as the bar).
	 */
	header .site-header .header-content,
	.site-header .header-content,
	.site-header .header-inner {
		position: relative !important;
	}

	header .site-header .header-content .main-navigation.wp-block-navigation,
	header[role="banner"] .site-header .header-content .main-navigation.wp-block-navigation,
	.site-header.wp-block-group .header-content .main-navigation.wp-block-navigation,
	.site-header .header-content .main-navigation.wp-block-navigation,
	.site-header .main-navigation.wp-block-navigation {
		position: static !important;
		z-index: auto !important;
	}

	/* Match nav whether or not .header-content exists (Site Editor) */
	header .site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
	header[role="banner"] .site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
	nav.main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		/* Cancel Gutenberg fullscreen modal */
		position: absolute !important;
		inset: auto !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: min(72vh, 21rem) !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		overscroll-behavior: contain;
		/* Core: padding clamp(1rem, var(--wp--style--root--padding-*), 20rem) — causes giant white panel */
		padding: 0 !important;
		padding-top: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		border-top: 1px solid #e3ddd0;
		box-shadow: 0 16px 40px rgba(27, 45, 74, 0.14);
		z-index: 100001 !important;
		border-radius: 0 0 4px 4px;
		-webkit-overflow-scrolling: touch;
		animation: none !important;
		animation-fill-mode: none !important;
		transform: none !important;
		background-color: #f4efe6 !important;
	}

	/* Inner wrappers (Core): without this, .responsive-close / dialog can still behave like a full-viewport layer. */
	header .site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	nav.main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		position: static !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
	}

	header .site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	nav.main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open dialog.wp-block-navigation__responsive-dialog {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 1 1 auto !important;
		overflow: visible !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open dialog.wp-block-navigation__responsive-dialog::backdrop {
		background: transparent !important;
	}

	header .site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	header[role="banner"] .site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		/* Core: padding-top calc(2rem + icon) for overlay */
		padding: 0.5rem 1.25rem 1rem !important;
		padding-top: 2.25rem !important;
		overflow: visible !important;
		flex: 0 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		width: 100% !important;
		max-height: none !important;
	}

	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		margin: 0 !important;
	}

	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
		font-size: 0.8125rem !important;
		font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
		letter-spacing: 0.12em !important;
		text-transform: uppercase !important;
		padding: 0.55rem 0 !important;
		border-bottom: 1px solid rgba(229, 229, 229, 0.8);
		display: block;
	}

	.site-header .main-navigation.wp-block-navigation .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 0.35rem !important;
		right: 0.75rem !important;
		left: auto !important;
		z-index: 2 !important;
	}

	header[role="banner"],
	.site-header,
	.site-header.wp-block-group {
		overflow: visible !important;
	}

	header[role="banner"] .site-header .header-content,
	.site-header .header-content,
	.site-header .header-inner {
		overflow: visible !important;
	}
}

/* Scroll-to-top shares .hero-carousel-next; block global `button` / svg rules often keep ivory. */
button#zanco-scroll-top.hero-carousel-next {
	color: var(--zanco-dark, #1b2d4a) !important;
	border-color: var(--zanco-dark, #1b2d4a) !important;
}

button#zanco-scroll-top.hero-carousel-next:hover {
	border-color: var(--zanco-dark, #1b2d4a) !important;
}

button#zanco-scroll-top.hero-carousel-next svg,
button#zanco-scroll-top.hero-carousel-next svg polyline {
	color: var(--zanco-dark, #1b2d4a) !important;
	stroke: var(--zanco-dark, #1b2d4a) !important;
}

button#zanco-scroll-top.hero-carousel-next:hover svg,
button#zanco-scroll-top.hero-carousel-next:hover svg polyline {
	color: var(--zanco-dark, #1b2d4a) !important;
	stroke: var(--zanco-dark, #1b2d4a) !important;
}

/* --------------------------------------------------------------------------
   Services archive — 3 cards per row
   Loaded last so this beats block-support grid (auto-fill + container-type)
   and any template markup missing explicit columnCount.
   -------------------------------------------------------------------------- */
.zanco-services-grid-section .wp-block-query .wp-block-post-template,
.zanco-services-grid-section .wp-block-query ul.wp-block-post-template,
.zanco-services-query .wp-block-post-template,
.zanco-services-query ul.wp-block-post-template,
body.post-type-archive-service .site-main .wp-block-query .wp-block-post-template,
body.post-type-archive-service .site-main .wp-block-query ul.wp-block-post-template,
body.post-type-archive-service .wp-block-query .wp-block-post-template,
body.post-type-archive-service .wp-block-query ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-flow: row !important;
	gap: clamp(1.5rem, 3vw, 2rem) !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	container-type: normal !important;
}

.zanco-services-grid-section .wp-block-post-template > li,
.zanco-services-grid-section .wp-block-post-template > .wp-block-post,
.zanco-services-query .wp-block-post-template > li,
.zanco-services-query .wp-block-post-template > .wp-block-post,
body.post-type-archive-service .site-main .wp-block-post-template > li,
body.post-type-archive-service .site-main .wp-block-post-template > .wp-block-post,
body.post-type-archive-service .wp-block-post-template > li,
body.post-type-archive-service .wp-block-post-template > .wp-block-post {
	min-width: 0 !important;
}

@media (max-width: 768px) {
	.zanco-services-grid-section .wp-block-query .wp-block-post-template,
	.zanco-services-grid-section .wp-block-query ul.wp-block-post-template,
	.zanco-services-query .wp-block-post-template,
	.zanco-services-query ul.wp-block-post-template,
	body.post-type-archive-service .site-main .wp-block-query .wp-block-post-template,
	body.post-type-archive-service .site-main .wp-block-query ul.wp-block-post-template,
	body.post-type-archive-service .wp-block-query .wp-block-post-template,
	body.post-type-archive-service .wp-block-query ul.wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}