/* ==========================================================================
   Responsive corrections. Loaded last so it wins over Elementor's generated
   per-post CSS.

   WHY THIS IS GENERAL, NOT PER-PAGE:
   Elementor writes fixed percentage widths with no breakpoint overrides:
     .elementor-element-<id> { width: var(--container-widget-width, 23%);
                               max-width: 23%; --container-widget-width: 23%; }
   On a 380px phone that is an 87px column. An earlier version of this file
   listed individual element IDs, which meant every new page shipped broken
   until its IDs were added by hand. These rules target Elementor's container
   structure instead, so any page - built today or later - is covered.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Never allow sideways scroll
   -------------------------------------------------------------------------- */

html,
body {
	max-width: 100%;
	/* clip, NOT hidden. overflow-x:hidden turns these into scroll containers,
	   which disables position:sticky for every descendant - including the
	   site header. clip prevents the same sideways overflow without that
	   side effect. */
	overflow-x: clip;
}

img,
svg,
iframe,
video,
table {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. Tablet - anything narrower than a third becomes roughly half.
   min-width beats max-width in CSS, which is what lets this override
   Elementor's inline percentages without naming them.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

	.e-con > .elementor-element,
	.e-con-inner > .elementor-element,
	.e-con > .e-con,
	.e-con-inner > .e-con {
		min-width: 44% !important;
		flex-grow: 1;
	}

	/* Single-child containers should still fill the row */
	.e-con-inner > .elementor-element:only-child,
	.e-con > .elementor-element:only-child {
		min-width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   3. Mobile - one column, everywhere, whatever the page
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.e-con > .elementor-element,
	.e-con-inner > .elementor-element,
	.e-con > .e-con,
	.e-con-inner > .e-con {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		--container-widget-width: 100% !important;
		flex-basis: auto !important;
	}

	/* Section rhythm */
	.e-con.e-parent {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	/* The hero slider manages its own padding */
	.elementor-element-heroSec.e-con.e-parent {
		padding: 0 !important;
	}

	/* Interior page heroes need a little more breathing room */
	.elementor-element-abHero.e-con.e-parent,
	.ad-page-hero.e-con.e-parent {
		padding-top: 72px !important;
		padding-bottom: 60px !important;
	}

	/* Headings scale with the viewport */
	.elementor-widget-heading h1 {
		font-size: clamp(1.9rem, 8.5vw, 2.4rem) !important;
		line-height: 1.12 !important;
	}

	.elementor-widget-heading h2 {
		font-size: clamp(1.6rem, 7vw, 2rem) !important;
		line-height: 1.18 !important;
	}

	/* Counters read as a stacked list rather than a squashed row */
	.elementor-widget-counter {
		text-align: center;
	}

	.elementor-widget-counter .elementor-counter-number-wrapper {
		justify-content: center;
	}

	.ad-card {
		padding: 22px !important;
	}
}

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* Before/after: bigger touch handle, smaller labels */
	.ad-compare__handle::after {
		width: 52px;
		height: 52px;
	}

	.ad-compare__tag {
		bottom: 10px;
		font-size: 0.64rem;
		padding: 5px 9px;
	}

	.ad-review {
		padding: 22px;
	}

	/* Map: stack address above a full-width directions button */
	.ad-map__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ad-map__dir {
		width: 100%;
		justify-content: center;
	}

	.ad-map iframe {
		height: 300px;
	}

	/* Hero slider */
	.ad-slider__inner {
		gap: 14px;
	}

	.ad-slider__actions {
		width: 100%;
		flex-direction: column;
		gap: 10px;
	}

	.ad-slider__btn {
		width: 100%;
	}

	.ad-slider__dots {
		bottom: 16px;
	}

	/* Contact form */
	.ad-form {
		padding: 20px;
	}

	.ad-form__row {
		gap: 0;
	}

	.ad-form__row > .ad-form__field {
		flex: 1 1 100%;
	}

	.ad-form__actions {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.ad-form button[type="submit"] {
		width: 100%;
		justify-content: center;
	}

	/* 16px stops iOS Safari zooming the page on focus */
	.ad-form input,
	.ad-form select,
	.ad-form textarea {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {

	.site-header .header-inner {
		flex-wrap: wrap;
		gap: 12px;
	}

	.site-header .site-navigation ul,
	.site-header .menu {
		gap: 2px;
	}

	.site-header .site-navigation a,
	.site-header .menu a {
		padding: 8px 10px;
		font-size: 0.88rem;
	}
}

@media (max-width: 600px) {

	.site-header .site-branding img,
	.site-header .custom-logo-link img {
		max-height: 34px;
	}
}

/* --------------------------------------------------------------------------
   6. Tap targets - anything interactive should be thumb-sized
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

	.ad-btn,
	.ad-slider__btn,
	.ad-map__dir,
	.ad-form button[type="submit"],
	.elementor-button {
		min-height: 46px;
	}

	.ad-slider__dot {
		height: 6px;
		min-width: 30px;
	}
}