/*!
 * Dainty Touch — Responsive Fix Layer
 *
 * Loaded after the theme and any page-builder CSS. Every rule here exists to
 * remove one specific reason a page stops scaling with the browser window.
 *
 * Tuning knobs (override in the Customizer's Additional CSS, after this file):
 *   --dts-container-max   widest the main content is allowed to get
 *   --dts-gutter          side breathing room used by the opt-in gutter helper
 */

:root {
	--dts-container-max: 1200px;
	--dts-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
 * 1. Baseline
 *
 * `text-size-adjust` stops iOS Safari inflating body copy when a phone is
 * turned sideways, which otherwise reflows a working layout into a broken one.
 * ----------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
 * 2. Stop the sideways scroll
 *
 * `overflow-x: clip` is preferred over `hidden` because `hidden` silently turns
 * the element into a scroll container, which breaks every `position: sticky`
 * descendant on the page — a sticky header stops sticking. `hidden` stays as
 * the fallback for browsers without `clip`, where a working header matters less
 * than a page that fits the screen.
 * ----------------------------------------------------------------------- */

/* Both elements are required: setting overflow-x on `html` alone does not stop
 * the viewport scrolling sideways in Chromium. Verified across the fixture at
 * 320-1440px in tools/test-scaling.mjs. */
html,
body {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* A minimum width anywhere in the wrapper chain pins the page open and is the
 * classic cause of "it works on my desktop but not on a phone". */
body,
#page,
#wrapper,
#outer-wrap,
.site,
.site-inner,
#content,
#main,
.main,
.site-content,
.content-area,
.elementor,
.fusion-fullwidth,
.et_pb_section {
	min-width: 0 !important;
}

body {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 3. Media that refuses to shrink
 *
 * Element-level selectors keep specificity at 0,0,1 so any deliberate theme
 * rule (a cover image with a fixed height, an icon sprite) still wins.
 * ----------------------------------------------------------------------- */

img,
video,
audio,
canvas,
svg,
iframe,
embed,
object,
figure {
	max-width: 100%;
}

img,
video,
canvas {
	height: auto;
}

/* Legacy width/height attributes still in older post content. */
img[width],
table[width],
td[width],
th[width] {
	max-width: 100%;
}

img[width] {
	height: auto;
}

/* Bare video embeds keep their aspect ratio instead of a hard pixel height. */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"],
iframe[src*="dailymotion.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Form controls default to a fixed `size`, which overflows narrow screens. */
input,
select,
textarea,
button {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 4. Fixed-width containers
 *
 * A container declared as `width: 1200px` cannot get narrower than 1200px, so
 * the whole page stops scaling below that. Swapping to `max-width` keeps the
 * desktop layout identical while letting everything below it shrink.
 *
 * Padding is deliberately left alone: the theme almost certainly sets its own,
 * and overriding it would either double the gutter or remove it entirely.
 * ----------------------------------------------------------------------- */

.container,
.wrap,
.wrapper,
.site-container,
.inner-wrap,
.page-width,
.content-wrapper,
/* Elementor */
.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner,
/* Divi */
.et_pb_row,
.et_pb_row_inner,
/* Avada */
.fusion-row,
/* WPBakery */
.vc_container,
/* Beaver Builder */
.fl-row-fixed-width,
.fl-row-content-wrap > .fl-row-content,
/* Core blocks */
.wp-block-group__inner-container {
	width: auto !important;
	max-width: min(100%, var(--dts-container-max)) !important;
	margin-inline: auto;
}

/* Full-width sections must stay full width. */
.container-fluid,
.elementor-section-full_width > .elementor-container,
.e-con-full > .e-con-inner,
.et_pb_row_fullwidth,
.fusion-fullwidth > .fusion-builder-row,
.fl-row-full-width .fl-row-content {
	max-width: 100% !important;
}

/* Inline `style="width: 900px"` written by an editor or an old shortcode.
 * Anchored so `border-width` and `stroke-width` are not caught by mistake. */
[style^="width:"],
[style^="width :"],
[style*=";width:"],
[style*="; width:"] {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 5. Flex and grid children that will not compress
 *
 * A flex/grid item defaults to `min-width: auto`, meaning it refuses to shrink
 * below its content. One long word or a wide image then pushes the whole row
 * past the screen edge. `:where()` keeps specificity at zero so this only fills
 * a gap and never overrides an intentional rule.
 * ----------------------------------------------------------------------- */

:where(
	.row,
	.wp-block-columns,
	.elementor-container,
	.e-con-inner,
	.et_pb_row,
	.fusion-builder-row,
	.fl-row-content
) > * {
	min-width: 0;
}

:where(
	[class*="col-"],
	.wp-block-column,
	.elementor-column,
	.et_pb_column,
	.fl-col,
	.vc_column_container
) {
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * 6. Text that overflows its box
 *
 * Long unbroken strings — a pasted URL, an email address, a product code — are
 * a frequent cause of a single stubborn pixel of horizontal scroll.
 * ----------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label, a) {
	overflow-wrap: break-word;
}

:where(.entry-content, .post-content, .page-content, .elementor-widget-text-editor) a {
	word-break: break-word;
}

pre {
	max-width: 100%;
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
 * 7. Tables
 *
 * A table is sized by its content and ignores its parent's width, so a wide one
 * stretches the page. Give it its own scroll area instead. `.dts-table-scroll`
 * is added by dts-responsive.js; the block-editor wrapper is handled directly.
 * ----------------------------------------------------------------------- */

.dts-table-scroll,
.wp-block-table,
figure.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 8. Headers and footers
 * ----------------------------------------------------------------------- */

.site-header,
.site-footer,
#masthead,
#colophon,
header[role="banner"],
footer[role="contentinfo"] {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 9. Opt-in helper
 *
 * Add the `dts-gutter` class to a container that is running edge-to-edge on
 * phones because the theme gives it no side padding of its own.
 * ----------------------------------------------------------------------- */

.dts-gutter {
	padding-inline: var(--dts-gutter);
}

/* --------------------------------------------------------------------------
 * 10. Astra mobile-header title guard
 *
 * Astra switches to its mobile header well above phone width. Its left flex
 * section can collapse the title wrapper to a few pixels; combined with the
 * global long-string safeguard above, that renders the site title one letter
 * per line. Keep the branding row flexible, reserve real space for the title,
 * and only wrap the title at normal word boundaries.
 * ----------------------------------------------------------------------- */

@media (max-width: 921px) {
	#ast-mobile-header .site-header-primary-section-left,
	#ast-mobile-header [data-section="title_tagline"],
	#ast-mobile-header .site-branding,
	#ast-mobile-header .ast-site-identity {
		min-width: 0;
	}

	#ast-mobile-header .site-header-primary-section-left {
		flex: 1 1 auto;
	}

	#ast-mobile-header [data-section="title_tagline"],
	#ast-mobile-header .site-branding,
	#ast-mobile-header .ast-site-identity {
		width: 100%;
		flex: 1 1 auto;
	}

	#ast-mobile-header .ast-site-title-wrap {
		width: auto;
		min-width: min(14rem, 58vw);
		max-width: none;
		flex: 1 1 auto;
	}

	#ast-mobile-header .site-title,
	#ast-mobile-header .site-title a {
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}

@media (min-width: 481px) and (max-width: 921px) {
	#ast-mobile-header .ast-builder-grid-row {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	#ast-mobile-header .site-header-primary-section-left {
		width: auto !important;
		flex: 1 1 0 !important;
	}

	#ast-mobile-header .site-header-primary-section-right {
		width: auto !important;
		flex: 0 0 auto !important;
	}

	#ast-mobile-header [data-section="title_tagline"],
	#ast-mobile-header .site-branding,
	#ast-mobile-header .ast-site-identity,
	#ast-mobile-header .ast-site-title-wrap {
		width: auto !important;
	}

	#ast-mobile-header .ast-site-title-wrap {
		min-width: min(14rem, 58vw) !important;
	}
}

@media (max-width: 480px) {
	#ast-mobile-header .ast-site-title-wrap {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
 * 11. Site-specific overrides
 *
 * Unlike everything above, these target this site's actual markup: the
 * SureForms quote form, the service dropdown, and the contact links. They will
 * not carry over to another site, and they are the first place to look if a
 * plugin update changes a class name.
 * ----------------------------------------------------------------------- */

.dt-formband .srfm-form-container-38 {
	width: min(100%, 780px);
	margin-inline: auto;
	padding: clamp(1rem, 2.5vw, 1.75rem) !important;
}

.dt-formband .srfm-form-container-38 .srfm-form {
	padding: clamp(1rem, 2.5vw, 1.75rem) !important;
}

.dt-formband .srfm-form-container-38 textarea {
	min-height: 7.5rem;
}

@media (min-width: 700px) {
	.dt-formband .srfm-form-container-38 .srfm-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.1rem 1.5rem;
	}

	.dt-formband .srfm-form-container-38 .srfm-block {
		width: 100% !important;
		margin-block: 0 !important;
	}

	.dt-formband .srfm-form-container-38 .srfm-textarea-block,
	.dt-formband .srfm-form-container-38 .srfm-custom-button-ctn {
		grid-column: 1 / -1;
	}
}

/* Make the full service range discoverable without an oversized menu. */
.srfm-slug-service-needed .ts-dropdown-content {
	max-height: min(420px, 55vh) !important;
	overflow-y: scroll !important;
	scrollbar-gutter: stable;
	scrollbar-width: auto;
	scrollbar-color: #64746a #eef0ec;
}

.srfm-slug-service-needed .ts-dropdown-content::-webkit-scrollbar {
	width: 12px;
}

.srfm-slug-service-needed .ts-dropdown-content::-webkit-scrollbar-track {
	background: #eef0ec;
	border-radius: 999px;
}

.srfm-slug-service-needed .ts-dropdown-content::-webkit-scrollbar-thumb {
	background: #64746a;
	border: 3px solid #eef0ec;
	border-radius: 999px;
}

/* Present contact details naturally while keeping them clickable and accessible. */
.dt-phone a,
.dt-meta a,
.dt-foot-contact a {
	display: inline-block;
	color: inherit;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
	border-radius: 0.18em;
	outline-offset: 0.18em;
}

.dt-phone a:hover,
.dt-phone a:focus-visible,
.dt-meta a:hover,
.dt-meta a:focus-visible {
	color: #b46343;
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
	text-decoration-thickness: 1px !important;
	text-decoration-skip-ink: none !important;
	text-underline-offset: 0.18em;
}

.dt-foot-contact a:hover,
.dt-foot-contact a:focus-visible {
	color: #ffffff;
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
	text-decoration-thickness: 1px !important;
	text-decoration-skip-ink: none !important;
	text-underline-offset: 0.18em;
}

/* `inline-block` above keeps each underline continuous, but it also makes the
 * link an unbreakable box. A contact string wider than its container would then
 * be clipped by the overflow rule in section 2 and silently truncated -- no
 * scrollbar, no ellipsis, nothing to tell the reader text is missing. Allow a
 * break only when the alternative is losing the text: an address that already
 * fits is unaffected and keeps its single continuous underline.
 * Measured in tools/test-scaling.mjs. */
.dt-phone a,
.dt-meta a,
.dt-foot-contact a {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Preserve the country flag and +1 prefix area in SureForms phone fields. */
.srfm-input-phone.iti__tel-input {
	padding-left: 59px !important;
}

/* Keep Tom Select's internal search input hidden after an option is chosen. */
.ts-control > .item + input {
	width: 0 !important;
	min-width: 0 !important;
	flex: 0 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* The theme's `.dt-trustbar span` rule sets `white-space: nowrap`
 * unconditionally, so a badge wider than its column (the approved estimate
 * wording, the multi-city location badge) overflows the viewport instead of
 * wrapping at phone widths. Equal selector specificity to the theme rule, so
 * this wins on source order alone -- no `!important` needed. `flex-start`
 * keeps the checkmark icon flush with the first line once the text wraps,
 * instead of drifting to the vertical center of a multi-line badge. */
@media (max-width: 600px) {
	.dt-trustbar span {
		white-space: normal;
		overflow-wrap: break-word;
		max-width: 100%;
		text-align: center;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
 * 12. Audit overlay (only present with ?dts_audit=1)
 * ----------------------------------------------------------------------- */

.dts-audit-flag {
	outline: 2px solid #e5004c !important;
	outline-offset: -2px !important;
}

.dts-audit-flag--source {
	outline: 3px solid #ff8a00 !important;
}