/**
 * EKV-NORD responsive and accessibility fixes.
 *
 * This stylesheet intentionally loads after Zakra's dynamic Customizer CSS.
 */

/* Make keyboard focus visible on the custom navigation controls. */
.zak-submenu-toggle:focus-visible,
.zak-menu-toggle:focus-visible,
.zak-mobile-nav-close:focus-visible {
	outline: 3px solid #4a91e2;
	outline-offset: 3px;
}

/* Keep the restored single-post H1 readable and visually tied to its meta. */
.single-post .zakra-single-article .zak-entry-header .entry-title {
	margin: 0 0 0.6em;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.12;
	overflow-wrap: break-word;
}

/**
 * Zakra 4.1.6 uses both max-width and min-width rules at 768px. At exactly
 * 768px the mobile header is active while its menu toggle is hidden by the
 * desktop rule. Treat 768px consistently as the mobile/tablet breakpoint.
 */
@media screen and (max-width: 768px) {
	.single-post .zakra-single-article .zak-entry-header .entry-title {
		font-size: clamp(1.75rem, 7vw, 2.4rem);
	}

	.zak-header-builder .zak-toggle-menu {
		display: flex !important;
	}

	.zak-header-builder .zak-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
	}

	/*
	 * Dynamic Zakra layout styles retain the desktop 70/30 widths after the
	 * row switches to a column. Reset both columns to the full content width.
	 */
	.zak-content .zak-row {
		flex-direction: column !important;
	}

	.zak-content .zak-primary,
	.zak-content .zak-secondary {
		flex: 0 0 100%;
		align-self: stretch;
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.zak-content .zak-primary {
		padding-right: 0;
	}

	.zak-content .zak-secondary {
		padding-left: 0;
		border-left: 0;
	}
}

/*
 * The floating contact bar covers the product finder between tablet and
 * small-desktop widths. All destinations remain available in the navigation.
 */
@media screen and (max-width: 1100px) {
	.floating-menu {
		display: none !important;
	}
}

/* Avoid mid-word breaks in the large home-page hero on narrow phones. */
@media screen and (max-width: 360px) {
	body.home .entry-content h1 {
		font-size: clamp(1.75rem, 9vw, 2rem) !important;
		line-height: 1.22 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: auto;
	}
}