/* ------------------------------------------------------------------
   Safer Roads MA — responsive safety layer.

   The original build (Elementor + hello-elementor) already ships its own
   breakpoints, so this file deliberately does NOT restate the design. It
   only guards the things that break a restored static copy on small
   screens: media that can overflow, unbreakable strings, wide tables,
   tap targets, and the mobile menu panel.
   ------------------------------------------------------------------ */

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

/* Nothing may make the page wider than the viewport. */
body {
	overflow-x: hidden;
}

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

img,
video {
	height: auto;
}

iframe {
	border: 0;
}

/* Long words and raw URLs wrap instead of stretching their column. */
p,
li,
dd,
blockquote,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Wide tables scroll inside their column rather than the page. */
.elementor-widget-container > table,
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Mobile / tablet: the collapsed nav panel --- */
@media (max-width: 1024px) {
	.elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	.elementor-nav-menu--dropdown {
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* The toggle only animates the panel open, so keep it out of the way
	   of the page while it is closed. */
	.elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
		pointer-events: none;
	}
}

/* --- Phones: comfortable tap targets --- */
@media (max-width: 767px) {
	.elementor-nav-menu--dropdown a.elementor-item,
	.elementor-nav-menu--dropdown a.elementor-sub-item {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.elementor-button {
		min-height: 44px;
	}
}

/* --- Embedded Action Network forms --- */
#can-form-area,
[id^="can_embed_form"],
#can-form-area input,
#can-form-area select,
#can-form-area textarea {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* --- Honour the visitor's motion preference --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
