/*
 * 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;
}

/* 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;
}