/*
 * Supporting styles for things theme.json cannot express.
 * Everything colour/typography related lives in theme.json - keep it that way.
 */

/* Top bar links inherit the light-on-dark treatment from the old header. */
.ewm-topbar a {
	color: #dddddd;
	text-decoration: none;
}
.ewm-topbar a:hover,
.ewm-topbar a:focus-visible {
	color: #ed1c24;
}

/* Phone number should never wrap mid-number. */
.ewm-phone-link {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* White wherever the number sits on the red CTA or the dark footer. It is NOT
   set globally: in the header the same class sits on a white background, where
   white would make the number invisible, so there it stays brand red. */
.ewm-cta .ewm-phone-link,
.ewm-footer-top .ewm-phone-link,
.has-brand-red-background-color .ewm-phone-link,
.has-footer-top-background-color .ewm-phone-link,
.has-footer-bottom-background-color .ewm-phone-link {
	color: #ffffff;
}

/* Footer links: white, gold on hover, matching footer_bottom_link_hover_color. */
.ewm-footer-top a,
.wp-block-group.has-footer-bottom-background-color a {
	color: #ffffff;
	text-decoration: none;
}
.ewm-footer-top a:hover,
.wp-block-group.has-footer-bottom-background-color a:hover {
	color: #ffd50f;
	text-decoration: underline;
}

/* Sticky-ish header shadow once scrolled past, without JS. */
.ewm-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* The old theme let embedded iframes size themselves; keep them responsive. */
.ewm-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	min-height: 640px;
}

/* Respect reduced motion for any scroll-linked affordances. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Hero banners centred their text in the old theme. */
.wp-block-cover .wp-block-heading,
.wp-block-cover > .wp-block-cover__inner-container > p {
	text-align: center;
}

/* Only the leading hero gets the tall banner treatment. Other full-bleed
   covers (the Types of Services band) just need modest breathing room. */
.entry-content > .wp-block-cover:first-child {
	min-height: 520px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.entry-content > .wp-block-cover:not(:first-child) {
	padding-top: 34px;
	padding-bottom: 44px;
}

@media (max-width: 781px) {
	.entry-content > .wp-block-cover:first-child { min-height: 380px; }
}

/*
 * Quote form embed. The provider's iframe brings its own internals, so this
 * only supplies the surrounding card: a legible panel over the hero image.
 */
.ewm-embed {
	max-width: 560px;
	margin: 28px auto 0;
	padding: 26px 26px 20px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	text-align: center;
}

/* Inside the card we are back on a light surface, so undo the hero's white. */
.wp-block-cover .ewm-embed,
.wp-block-cover .ewm-embed p,
.wp-block-cover .ewm-embed label {
	color: #232323;
}

.ewm-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* The fallback line, shown only until the provider script loads. */
.ewm-embed-placeholder {
	margin: 0;
	font-weight: 700;
}

/* Hero headings need to clear the card comfortably on small screens. */
@media (max-width: 600px) {
	.ewm-embed { margin-top: 20px; padding: 20px 16px 16px; }
}

/* Cover blocks keep their own inner content at the reading width. */
.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-inline: auto;
}

/*
 * Gap under the page-title band.
 *
 * The band itself carries no bottom margin, so a full-bleed hero sits flush
 * against it - no white strip. Ordinary content still needs breathing room,
 * so give the first non-full-bleed child of the content its own top margin.
 */
.ewm-page-title { margin-bottom: 0 !important; }

.entry-content > *:first-child { margin-top: 0; }

.entry-content > *:first-child:not(.alignfull):not(.wp-block-cover) {
	margin-top: 45px;
}

/* Blocks immediately after a full-bleed row need the same treatment. */
.entry-content > .alignfull + *:not(.alignfull):not(.wp-block-cover) {
	margin-top: 45px;
}

/* Trailing full-bleed rows should not leave a gap before the footer either. */
.entry-content > .alignfull:last-child { margin-bottom: 0; }

/* =========================================================================
 * Header
 *
 * Interior pages: solid white bar. Home: the bar overlays the hero image on
 * a translucent black panel with white links, matching the old theme's
 * header_transparent + rgba(0,0,0,0.79) settings.
 * ====================================================================== */

.ewm-header {
	background: #ffffff;
	border-bottom: 1px solid #e9e9e9;
	position: relative;
	z-index: 100;
}

.ewm-header .wp-block-navigation a {
	color: #222222;
	text-decoration: none;
}
.ewm-header .wp-block-navigation a:hover,
.ewm-header .wp-block-navigation .current-menu-item > a {
	color: #ed1c24;
}

/* Phone, in the red-bordered pill the old theme used. */
.ewm-phone-pill {
	margin: 0;
	padding: 6px 14px;
	border: 2px solid #ed1c24;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}
.ewm-phone-pill a {
	color: #ed1c24;
	text-decoration: none;
}
.ewm-phone-pill a::before {
	content: "\260E";
	margin-right: 7px;
	font-weight: 400;
}

/* ---- home: overlay the hero ---- */
.home .ewm-header {
	position: absolute;
	inset: 0 0 auto 0;
	background: rgba(0, 0, 0, 0.79);
	border-bottom: 0;
}

.home .ewm-header .wp-block-navigation a { color: #ffffff; }
.home .ewm-header .wp-block-navigation a:hover,
.home .ewm-header .wp-block-navigation .current-menu-item > a { color: #ed1c24; }

/* The hero has to clear the overlaid bar. */
.home .entry-content > .wp-block-cover:first-child {
	padding-top: 130px;
}

/* Mobile: the overlay would swallow the hero, so fall back to the solid bar. */
@media (max-width: 781px) {
	.home .ewm-header {
		position: relative;
		background: #ffffff;
		border-bottom: 1px solid #e9e9e9;
	}
	.home .ewm-header .wp-block-navigation a { color: #222222; }
	.home .entry-content > .wp-block-cover:first-child { padding-top: 40px; }
}

/* =========================================================================
 * Navigation dropdowns
 *
 * The submenu is its own white panel, so it must NOT inherit the white link
 * colour used by the translucent header on the homepage - that produced white
 * text on a white background.
 * ====================================================================== */

.ewm-header .wp-block-navigation__submenu-container,
.home .ewm-header .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border: 1px solid #e9e9e9;
	border-radius: 4px;
	padding: 6px 0;
	min-width: 210px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.ewm-header .wp-block-navigation__submenu-container li > a,
.home .ewm-header .wp-block-navigation__submenu-container li > a {
	color: #444444;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	padding: 9px 18px;
	width: 100%;
}

.ewm-header .wp-block-navigation__submenu-container li > a:hover,
.ewm-header .wp-block-navigation__submenu-container li > a:focus-visible,
.home .ewm-header .wp-block-navigation__submenu-container li > a:hover,
.home .ewm-header .wp-block-navigation__submenu-container li > a:focus-visible {
	background-color: #444444;
	color: #ffffff;
}

/* The parent item keeps the header's own colour, including its red current state. */
.ewm-header .wp-block-navigation-submenu__toggle { text-transform: uppercase; }

/* =========================================================================
 * Service cards (Types of Services)
 * ====================================================================== */

/* One card treatment everywhere. This was previously split: the homepage used
   a heavier borderless variant while converted pages used a bordered one, so
   the same component looked different depending on the page. */
.ewm-card {
	background: #ffffff;
	border: 1px solid #e9e9e9;
	border-radius: 8px;
	padding: 0 0 20px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ewm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.ewm-card .ewm-card__img { margin: 0 0 16px; }
.ewm-card .ewm-card__img img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.ewm-card > :not(.ewm-card__img):not(figure) { padding-inline: 20px; }
.ewm-card :is(h2, h3, h4) { margin: 0 0 8px; }
.ewm-card p { margin: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
	.ewm-card, .ewm-card:hover { transition: none; transform: none; }
}

/* =========================================================================
 * Accordions (core/details), converted from vc_toggle / vc_tta_section
 * ====================================================================== */

.wp-block-details {
	border: 1px solid #e9e9e9;
	border-radius: 6px;
	margin-bottom: 12px;
	background: #ffffff;
}

.wp-block-details > summary {
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 700;
	font-size: 16px;
	color: #222222;
	list-style: none;
	position: relative;
	padding-right: 48px;
}

.wp-block-details > summary::-webkit-details-marker { display: none; }

.wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	color: #ed1c24;
	font-weight: 400;
}
.wp-block-details[open] > summary::after { content: "\2013"; }

.wp-block-details > summary:hover { color: #ed1c24; }

.wp-block-details > *:not(summary) {
	padding: 0 20px;
}
.wp-block-details > *:last-child { padding-bottom: 18px; }

/* Group-variant cards only need the outer spacing; the look is shared above. */
.wp-block-group.ewm-card { margin-bottom: 24px; }

/* =========================================================================
 * Cover text colour must not leak into cards
 *
 * A cover block sets color:#fff on itself, which every descendant inherits.
 * The service cards sit on a white panel inside that cover, so their text was
 * white-on-white and invisible. Buttons keep their own colours.
 * ====================================================================== */

.wp-block-cover .ewm-card,
.wp-block-cover .ewm-card :is(h1, h2, h3, h4, h5, h6, p, li, span) {
	color: var(--wp--preset--color--body-text, #232323);
}
.wp-block-cover .ewm-card :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--dark, #222222);
}
.wp-block-cover .ewm-card .wp-block-button__link {
	color: var(--wp--preset--color--white, #fff);
}

/* Card images must fill the card edge to edge - no white gutter. */
.ewm-card figure.wp-block-image,
.ewm-card figure.ewm-card__img {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}
.ewm-card figure.wp-block-image img,
.ewm-card figure.ewm-card__img img {
	width: 100%;
	max-width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	border-radius: 8px 8px 0 0;
}

/* =========================================================================
 * Content panels, feature cards, quote cards, coverage lists
 * ====================================================================== */

.ewm-panel {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 34px 34px 26px;
	margin-bottom: 34px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.ewm-panel > h2:first-child,
.ewm-panel > h3:first-child { margin-top: 0; }

.ewm-feature {
	background: #ffffff;
	border: 1px solid #ececec;
	border-top: 3px solid #ed1c24;
	border-radius: 8px;
	padding: 26px 22px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.ewm-feature h3 { margin-top: 0; }

.ewm-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	border: 1px solid #ececec;
	border-top: 3px solid #ed1c24;
	border-radius: 10px;
	padding: 46px 26px 26px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
	text-align: center;
}

/* Decorative opening quote. Hidden from assistive tech - it is ornament. */
.ewm-quote::before {
	content: "\201C";
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 64px;
	line-height: 1;
	color: #ed1c24;
	opacity: 0.18;
	pointer-events: none;
}

.ewm-quote p {
	font-style: italic;
	font-size: 15px;
	line-height: 1.75;
	color: #444444;
	margin: 0 0 auto;
}

/* The image in these testimonials is a 90x24 star-rating strip, not an avatar.
   Forcing it into a 76px circle cropped it to an unreadable blob. Render it at
   its natural proportions instead. */
.ewm-quote figure {
	margin: 18px auto 10px;
	width: auto;
	max-width: 120px;
	line-height: 0;
}

.ewm-quote img {
	width: auto;
	max-width: 120px;
	height: auto;
	object-fit: contain;
	border-radius: 0;
	border: 0;
	image-rendering: -webkit-optimize-contrast;
}

.ewm-quote :is(h2, h3, h4, h5, h6) {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.03em;
	color: #ed1c24;
	text-transform: uppercase;
}

/* Equal-height cards across the row.
   WordPress emits a generated .wp-container-core-columns-is-layout-* class
   that sets align-items:normal, so these need two classes to outrank it. */
/* WordPress core ships .wp-block-columns{align-items:normal!important}, so
   equal-height cards genuinely need !important here to win. */
.wp-block-columns.ewm-quote-row,
.wp-block-columns.ewm-step-row { align-items: stretch !important; }
.wp-block-columns.ewm-quote-row > .wp-block-column,
.wp-block-columns.ewm-step-row > .wp-block-column { display: flex; }

/* =========================================================================
 * Process step cards ("how it works")
 *
 * These are heading/image/paragraph triples, NOT testimonials - the block
 * order is what distinguishes them. Numbered via a CSS counter.
 * ====================================================================== */

.ewm-step-row { counter-reset: ewmstep; }

.ewm-step {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 34px 20px 24px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
	text-align: center;
}

.ewm-step::before {
	counter-increment: ewmstep;
	content: counter(ewmstep);
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #ed1c24;
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	line-height: 34px;
	box-shadow: 0 3px 8px rgba(237, 28, 36, 0.35);
}

.ewm-step :is(h2, h3, h4, h5, h6) {
	margin: 4px 0 12px;
	font-size: 16px;
	text-transform: uppercase;
	color: #222222;
}

.ewm-step figure { margin: 0 auto 12px; max-width: 84px; }
.ewm-step img { width: 100%; height: auto; }
.ewm-step p { margin: 0; font-size: 14px; color: #555555; }

/* Stack neatly on small screens. */
@media (max-width: 781px) {
	.ewm-quote, .ewm-step { margin-bottom: 22px; }
	.ewm-step::before { top: -14px; }
}

.ewm-list ul { margin: 0; padding-left: 20px; }
.ewm-list li { margin-bottom: 6px; }

/* CTA band: black bar, copy on the left, red button hard right.
   :has() targets the group that wraps the row so the whole band goes black;
   the group's existing #232323 is a graceful fallback if :has() is missing. */
.wp-block-group:has(> .ewm-cta-row) {
	background-color: #000000 !important;
}

.ewm-cta-row { align-items: center; }

.ewm-cta-row .wp-block-column:last-child .wp-block-buttons {
	justify-content: flex-end;
}

.ewm-cta-row .wp-block-column:first-child :is(h1,h2,h3,h4,h5,h6,p) {
	margin: 0;
	text-align: left;
	color: #ffffff;
}

.ewm-cta-row .wp-block-button__link {
	background-color: #ed1c24;
	color: #ffffff;
	font-size: 16px;
	padding: 14px 34px;
}
.ewm-cta-row .wp-block-button__link:hover {
	background-color: #ffffff;
	color: #ed1c24;
}

@media (max-width: 781px) {
	.ewm-cta-row .wp-block-column:last-child .wp-block-buttons { justify-content: center; }
	.ewm-cta-row .wp-block-column:first-child :is(h1,h2,h3,h4,h5,h6,p) { text-align: center; margin-bottom: 16px; }
}

/* No white strip between a full-bleed closing block and the footer. */
main { margin-bottom: 0 !important; }
.entry-content > *:last-child:not(.alignfull) { margin-bottom: 70px; }

/* ---- footer detail ---- */
.ewm-footer-contact { line-height: 2; }
.ewm-footer-links { list-style: none; margin: 0; padding: 0; }
.ewm-footer-links li { margin-bottom: 8px; }
.ewm-footer-links--two {
	columns: 2;
	column-gap: 20px;
}
.ewm-footer-top a { color: #ffffff; text-decoration: none; }
.ewm-footer-top a:hover { color: #ffd50f; text-decoration: underline; }
.ewm-footer-bottom a { color: #ffffff; }
.ewm-footer-bottom a:hover { color: #ffd50f; }

/* The card image is wrapped in a link. An inline <a> shrinks to fit, so the
   image's width:100% resolved against the anchor instead of the figure and
   left a gutter down the right-hand side. Make the anchor a block. */
.ewm-card figure.wp-block-image > a,
.ewm-card figure.ewm-card__img > a {
	display: block;
	width: 100%;
}

/* The converted band opens with a leftover vc_empty_space spacer, which on top
   of the cover's own padding pushed the heading far down the section. */
.entry-content > .wp-block-cover:not(:first-child) > .wp-block-cover__inner-container > .wp-block-spacer:first-child {
	display: none;
}
.entry-content > .wp-block-cover:not(:first-child) .wp-block-group > h2:first-child {
	margin-top: 0;
}

/* Some converted sections carried full_width="stretch_row", so their panel
   spans the viewport while every other panel sits at the reading width.
   Pull them back in line - a card should not be edge to edge. */
.entry-content > .ewm-panel.alignfull,
.ewm-panel.alignfull {
	max-width: var(--wp--style--global--content-size, 1170px);
	margin-left: auto;
	margin-right: auto;
	width: auto;
}

/* Equal heights, independent of the parent row's class.
   align-self on the flex item beats the parent's align-items, so this works
   for the homepage testimonial row too, which predates .ewm-quote-row. */
.ewm-quote,
.ewm-step,
.ewm-feature {
	align-self: stretch;
}

/* =========================================================================
 * Flow gaps between full-bleed sections
 *
 * WordPress core emits
 *   :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--30) }
 * which resolves to 0.67rem. That margin lands on <main>, pushing the hero
 * down ~11px so the overlaid header sits partly over white instead of the
 * image, and it lands between every top-level section, showing as a white
 * band between one full-bleed row and the next.
 *
 * Full-bleed rows carry their own padding, so they should butt together.
 * ====================================================================== */

.wp-site-blocks > main { margin-block-start: 0; }

.entry-content > .alignfull,
.entry-content > .wp-block-cover {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Ordinary content after a full-bleed row still needs breathing room. */
.entry-content > .alignfull + *:not(.alignfull):not(.wp-block-cover),
.entry-content > .wp-block-cover + *:not(.alignfull):not(.wp-block-cover) {
	margin-block-start: 45px;
}

/* The footer is a sibling of <main> inside .wp-site-blocks, so it picks up the
   same flow margin. With the spacing scale corrected that became a visible
   30px white strip above the footer. Sections own their spacing. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* =========================================================================
 * Mobile
 * ====================================================================== */

/* Embedded maps arrive from the builder with width="600" height="450" baked
 * into the tag. On a 390px screen that forces the whole document to 620px,
 * which also drags the mobile menu overlay off-screen because the overlay
 * sizes to the document, not the viewport. Make every embed fluid.
 */
.entry-content iframe,
.wp-block-html iframe {
	max-width: 100%;
}

.ewm-map { width: 100%; }

/* A map needs to be legible, not enormous. aspect-ratio alone made this 878px
   tall at the 1170px content width - about 12% of a whole page for one map.
   Fix the height instead and let the width flex. */
.ewm-map iframe {
	display: block;
	width: 100%;
	height: 400px;
	aspect-ratio: auto;
	border: 0;
}
@media (max-width: 781px) {
	.ewm-map iframe { height: 280px; }
}

/* Nothing may exceed the viewport, whatever the content does. */
html, body { overflow-x: hidden; }
.wp-block-navigation__responsive-container.is-menu-open { max-width: 100vw; }

@media (max-width: 781px) {
	/* The desktop logo width is too large once the header stacks. */
	.ewm-header .wp-block-site-logo img,
	.ewm-header .custom-logo {
		max-width: 150px;
		height: auto;
	}

	.ewm-header { padding-top: 8px; padding-bottom: 8px; }

	/* Put the phone pill and the menu toggle on one tidy row.
	   The markup lists the navigation BEFORE the phone pill, which on a phone
	   wedges the hamburger between the logo and the call button instead of
	   putting it where a thumb expects it. Reordered so the toggle is last and
	   sits hard against the right edge. */
	.ewm-header-right {
		gap: 12px;
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
	.ewm-header-right > .ewm-phone-pill { order: 1; }
	.ewm-header-right > .wp-block-navigation { order: 2; }

	.ewm-phone-pill { font-size: 14px; padding: 5px 9px; }

	/* The logo and the right-hand cluster must share one row. Left to wrap,
	   the logo takes a line of its own and the phone pill and toggle drop
	   underneath it, left-aligned, which is what "messed up" looked like. */
	.ewm-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	/* A bigger tap target for the toggle, taken out of its own box so it does
	   not widen the row and force the wrap this rule just prevented. */
	.ewm-header .wp-block-navigation__responsive-container-open {
		padding: 6px 0;
		margin: 0;
	}

	/* Tables and wide blocks scroll rather than pushing the page sideways. */
	.entry-content table { display: block; overflow-x: auto; max-width: 100%; }

	/* Cards and panels lose their side padding budget on narrow screens. */
	.ewm-panel { padding: 22px 18px 18px; }
	.wp-block-cover .wp-block-cover__inner-container { padding-inline: 4px; }
}

@media (max-width: 480px) {
	.ewm-phone-pill a::before { margin-right: 4px; }
	.ewm-header .wp-block-site-logo img,
	.ewm-header .custom-logo { max-width: 128px; }
}

/* =========================================================================
 * Mobile overlay menu
 *
 * The desktop nav is right-justified and its submenu is a floating white
 * card. Both of those rules follow the markup into the full-screen overlay,
 * where they read as broken: every item hugs the right edge and the submenu
 * floats over the list instead of sitting under its parent.
 * ====================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 28px 22px 40px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: 2px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: block;
	width: 100%;
	text-align: left;
	padding: 13px 0;
	font-size: 17px;
	color: #222222;
	border-bottom: 1px solid #eeeeee;
}

/* Submenu becomes an indented list, not a floating panel. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 0 16px !important;
	min-width: 0 !important;
	width: 100%;
	opacity: 1 !important;
	visibility: visible !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li > a {
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	color: #555555;
	padding: 10px 0;
	background: transparent;
	border-bottom: 1px dashed #eeeeee;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li > a:hover {
	background: transparent;
	color: #ed1c24;
}

/* Current page still reads as current inside the overlay. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a { color: #ed1c24; }

/* The submenu list inherits the desktop nav's right justification, so its
   items sat against the right edge even after the panel became inline.
   Force a plain stacked list inside the overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: block !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
	width: 100%;
	display: block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a {
	display: block;
	width: 100%;
	text-align: left;
}

/* The nav is items-justified-right on desktop, which sets align-items:flex-end
   on each item. In the overlay that pushes the whole submenu panel to the
   right edge (it was sitting 138px wide at x=232 on a 390px screen).
   These need !important to beat the generated justification class. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
	display: block !important;
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a {
	padding-left: 0 !important;
}

/* Images inside raw HTML blocks carry their original width/height attributes
   and are not covered by the image block's own styles, so on a 390px screen
   they rendered 550px wide and were simply cropped by overflow-x:hidden.
   Make every image in content fluid. */
.entry-content img,
.wp-block-html img,
.ewm-panel img,
footer img {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
 * Legacy markup from the old theme
 *
 * Converted pages still contain raw HTML that relied on the old theme's
 * bundled Bootstrap grid (col-md-4 / col-md-8) and its own component classes.
 * None of that CSS exists here, so those sections collapsed into full-width
 * stacks. Rather than rewrite ~4,500 hand-authored blocks, give the classes
 * a home in this theme.
 * ====================================================================== */

/* ---- container size cards: image + title beside the description ---- */
.size-cont {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid #e9e9e9;
	border-radius: 10px;
	padding: 20px;
	margin: 0 0 16px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.size-cont .sz-head {
	flex: 0 0 210px;
	max-width: 210px;
	text-align: center;
}
.size-cont .sz-head img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 12px;
}
.size-cont .sz-head h4 {
	margin: 0;
	font-size: 20px;
	text-transform: uppercase;
	color: #ed1c24;
}

.size-cont .sz-body {
	flex: 1 1 320px;
	min-width: 0;
}
.size-cont .sz-body > :first-child { margin-top: 0; }
.size-cont .sz-body ul { margin: 12px 0 0; padding-left: 20px; }
.size-cont .sz-body li { margin-bottom: 6px; }

/* The old markup cleared floats; flexbox makes that a no-op that would
   otherwise add a stray empty row. */
.size-cont .clearfix, .clearfix::after { display: none; }

/* ---- csc / colm / twc: text blocks with no paragraph tags ----
   The copy inside these sits as bare text separated by blank lines, so
   without this it renders as one run-on paragraph. */
.csc .colm,
.csc .twc {
	white-space: pre-line;
}
.csc { margin-bottom: 18px; }

/* ---- misc legacy ---- */
.cs-highlight-style-4 { font-weight: 700; }

@media (max-width: 781px) {
	.size-cont { padding: 18px; gap: 16px; }
	.size-cont .sz-head { flex: 1 1 100%; max-width: 100%; }
	.size-cont .sz-head img { max-width: 220px; }
}

/* The builder scattered spacer blocks liberally; on a converted page they add
   up to hundreds of pixels of pure whitespace. Cap them so a page keeps its
   rhythm without the dead scrolling. */
.entry-content .wp-block-spacer { max-height: 32px; }
@media (max-width: 781px) {
	.entry-content .wp-block-spacer { max-height: 22px; }
}

/* ---- collapsed container-size panels ---- */
.ewm-size {
	border: 1px solid #e9e9e9;
	border-radius: 8px;
	margin-bottom: 10px;
	background: #ffffff;
}
.ewm-size > summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 46px 14px 18px;
	font-size: 17px;
	font-weight: 700;
	color: #222222;
	position: relative;
}
.ewm-size > summary::-webkit-details-marker { display: none; }
.ewm-size > summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	color: #ed1c24;
}
.ewm-size[open] > summary::after { content: "\2013"; }
.ewm-size > summary:hover { color: #ed1c24; }

/* the card inside loses its own frame, the panel provides it */
.ewm-size .size-cont {
	border: 0;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	padding: 0 18px 18px;
}

/* =========================================================================
 * "How dumpster rental works" 3-step boxes
 *
 * Replaces fixed 344x370px divs that used a background PNG hosted on the
 * ewmdumpsterrental.com domain and white text - if that one file ever moved,
 * all three boxes went white-on-white. Same card look as .ewm-step but with
 * no counter badge, because these boxes print "Step 1" as real text.
 * ====================================================================== */

.ewm-process-step {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 28px 24px 24px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.ewm-process-step__label {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ed1c24;
}

.ewm-process-step h4 {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.35;
	color: #222222;
}

.ewm-process-step p {
	margin: 0;
	font-size: 14px;
	color: #555555;
}

.wp-block-columns:has(> .wp-block-column > .ewm-process-step) {
	align-items: stretch;
}
.wp-block-columns:has(> .wp-block-column > .ewm-process-step) > .wp-block-column {
	display: flex;
}

@media (max-width: 781px) {
	.ewm-process-step { margin-bottom: 22px; }
}