/*
 * Kool Responsive Fixes (pages) — v1.0.0 (2026-10-19)
 * Loaded last on every front-end page EXCEPT single product pages (plugin skips is_product()).
 * Every rule is a responsive/layout correction keyed on an existing Elementor data-id or theme hook.
 * No content, colours, fonts or functionality are changed. Deactivating the plugin reverts everything.
 */

/* ------------------------------------------------------------------ */
/* 1. HOME (#33947) hero: container 9068bad is capped at 500px and      */
/*    padded 300px for the desktop category dropdown. Below 1025px the  */
/*    dropdown is not shown, so let the slider use the full width.      */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.elementor-33947 .elementor-element-9068bad {
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Hero slides 30113 / 30484: the product photo is a "contain / right center" background, so on
   phones and tablets it sits directly behind the headline. Keep the same image but anchor it
   bottom-right at reduced height and start the copy at the top of the slide. */
@media (max-width: 1024px) {
	#slide-30113 .wd-slide-bg,
	#slide-30484 .wd-slide-bg {
		background-size: auto 46% !important;
		background-position: right bottom !important;
	}
	#slide-30113 .wd-slide-container,
	#slide-30484 .wd-slide-container {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		padding-top: 28px !important;
	}
	#slide-30113,
	#slide-30484 {
		min-height: 560px !important;
	}
}
@media (max-width: 768px) {
	#slide-30484 .wd-slide-container h4.title {
		font-size: 26px !important;
		line-height: 1.2 !important;
	}
}

/* ------------------------------------------------------------------ */
/* 2. Full-width "wd-negative-gap" containers that carry a 150px left   */
/*    margin extend past the right edge of laptop/desktop viewports.     */
/* ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	/* Book a Meeting (#29874-family page) banner */
	.elementor-element-29e1257.wd-negative-gap {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Service Areas: 1192px block pushed 150px right → centre it instead */
	.elementor-element-3c2692d.wd-negative-gap {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ------------------------------------------------------------------ */
/* 3. SERVICES (#29874): container 85c8311 keeps -30px side margins and  */
/*    60px padding on phones, leaving ~200px for content.               */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.elementor-29874 .elementor-element-85c8311 {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		padding: 28px 18px !important;
	}
}

/* Services hero form widget 634b376: a 51%-wide widget with 50px inner padding leaves an
   83px-wide form on phones (labels break one word per line). Let it use the column. */
@media (max-width: 768px) {
	.elementor-29874 .elementor-element-634b376 {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.elementor-29874 .elementor-element-634b376 {
		width: 80% !important;
		max-width: 560px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 4. Elementor Pro forms: columns that only have a desktop width keep   */
/*    33%/50% on small phones, so labels wrap one word per line. Stack.  */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
	.elementor-form .elementor-field-group[class*="elementor-col-"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* 5. ABOUT (#4400): container 1895ee5 forces 90vh on every device.     */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.elementor-4400 .elementor-element-1895ee5 {
		min-height: 0 !important;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 6. CONTACT (#4439): HTML widget d50abe5 ships an unscoped            */
/*    `* { margin:0; padding:0 }` reset. Restore paragraph/list rhythm   */
/*    in the page's text widgets (the widget itself is untouched).      */
/* ------------------------------------------------------------------ */
.page-id-4439 .elementor-widget-text-editor p:not(:last-child) {
	margin-bottom: 1em;
}
.page-id-4439 .elementor-widget-text-editor ul,
.page-id-4439 .elementor-widget-text-editor ol {
	padding-left: 1.25em;
	margin-bottom: 1em;
}

/* ------------------------------------------------------------------ */
/* 7. Touch targets (WCAG 2.5.8 / Lighthouse "tap targets"): topbar and */
/*    footer links are 22-28px tall on phones and tablets.              */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#kah-bar a.kah-item {
		min-height: 36px !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
	#kah-bar a.kah-soc {
		width: 36px !important;
		height: 36px !important;
	}
	.wd-footer .widget_nav_menu .menu > li > a {
		display: inline-block;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.wd-cookies-popup .btn,
	.wd-cookies-popup a.wd-cookies-inform {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
}

/* ------------------------------------------------------------------ */
/* 9. Header strip (#kah-bar) on narrow phones: the e-mail link in the  */
/*    left grid column (142px) runs under the social/location column.  */
/*    Stack the three groups on ≤480px; social icons and location share */
/*    one row.                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
	#kah-bar .kah-inner {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas: none !important;
	}
	#kah-bar .kah-contact,
	#kah-bar .kah-trust,
	#kah-bar .kah-right {
		grid-column: 1 !important;
		grid-row: auto !important;
		max-width: 100%;
	}
	#kah-bar .kah-right {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 4px 12px;
	}
	#kah-bar .kah-contact .kah-stack a.kah-item {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* 10. Remaining sub-32px tap targets found by the after-audit on       */
/*     phones/tablets: ticker link, footer inline text links, cookie    */
/*     "More info", login-panel "Create an Account".                    */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#kah-bar .kah-tk-item a {
		display: inline-block;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.wd-footer .wd-text-block a,
	.wd-footer .elementor-widget-text-editor a,
	.wd-footer p a {
		display: inline-block;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.wd-cookies-popup .cookies-more-btn {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
	.login-form-side .create-account-button,
	a.btn.create-account-button {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}

/* Note: the existing must-use plugin wp-content/mu-plugins/kah-responsive.php (Oct 10) already
   provides body-copy size, the heading scale, overflow guards and 24px tap targets. This file only
   adds the page-level layout fixes above; it does not duplicate or override that layer. */