/* =========================================================
   Elementor structural fixes
   Loaded LAST — after style-base.css — for the few rules that must win over
   the design's own, because Elementor inserts a wrapper the original static
   markup did not have.

   Elementor renders page content inside `<div class="elementor" data-elementor-id>`,
   so every `main.shell > section…` child combinator in style-base.css now has
   an extra level between it and the section.
   ========================================================= */

/* Full-bleed hero.
   Two things break it: the design's own rule is written as
   `main.shell > section.hero` (0,2,2), which no longer matches with the wrapper
   in between — so `.panel:first-child` (0,2,0) wins and adds a top margin — and
   Elementor caps every top-level container at `max-width: min(100%, var(--width))`,
   which clips the 100vw breakout. Restating the rule here fixes both. */
main.shell .elementor > section.hero {
	width: 100vw;
	max-width: none;
	margin: 0 calc(50% - 50vw);
	border-radius: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	isolation: isolate;
}

/* `.e-con.e-flex { flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis) }`
   is (0,2,0) and outranks the design's `.hero__main { flex: 1 }`, so the hero's
   main block stops filling the leftover height (visible at tablet widths, where
   the audience cards are shorter than the viewport). */
.e-con.hero__main {
	flex: 1;
}

/* Elementor normalises links inside its content with
   `.elementor a { box-shadow: none }` (0,1,1), which outranks the design's own
   single-class rules. Two components draw real UI with a box-shadow:
   `.btn` paints its outline as an inset shadow (visible on the ghost and light
   variants), and `.work-fan__item` carries the fanned cards' drop shadow. */
.elementor a.btn {
	box-shadow: inset 0 0 0 1px var(--btn-bd);
}

.elementor a.work-fan__item {
	box-shadow: 0 18px 30px -20px rgba(18, 17, 16, .25);
}

.elementor a.work-fan__item:hover {
	box-shadow: 0 26px 38px -18px rgba(18, 17, 16, .32);
}

/* The design puts `.cta__title` on the `<h2>` itself. As an Elementor heading
   widget the class lands on the wrapper instead, so the typography it sets is
   handed down to the heading rather than lost to the bare `h2` rule. */
.cta__title .elementor-heading-title {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-wrap: balance;
}

/* The one declaration `.contact-section` did take from
   `main.shell > section:not(.panel)` and does not restate itself. */
main.shell .elementor > section.contact-section {
	position: relative;
}

/* The service pages run the section heading straight into the copy below it,
   which the static markup did with an inline `margin-bottom: 0`. */
.sec-head.mm-sec-head--flush {
	margin-bottom: 0;
}

/* =========================================================
   Contact Form 7
   The forms are real CF7 forms so their fields and notification email are
   editable in the CF7 admin. CF7 wraps each control in its own markup, so the
   design's field styling is mapped onto that structure here.
   ========================================================= */

/* CF7's control wrapper is an inline span; the design's inputs are block. */
.contact__form .wpcf7-form-control-wrap {
	display: block;
}

/* The pill radios and service chips: CF7 renders
   .wpcf7-form-control-wrap > .wpcf7-radio > .wpcf7-list-item > label,
   where the design had a single `<label class="radio">`. All three wrappers are
   removed from the box tree, so each label becomes a direct flex child of
   `.radio-row` / `.chip-group` and picks up their 10px gap. Leaving any of them
   as a box would make it the only flex item and the pills would sit flush. */
.radio-row .wpcf7-form-control-wrap,
.chip-group .wpcf7-form-control-wrap,
.radio-row .wpcf7-form-control,
.chip-group .wpcf7-form-control,
.radio-row .wpcf7-list-item,
.chip-group .wpcf7-list-item {
	display: contents;
}

/* A validation message belongs on its own line, not in among the pills. */
.radio-row .wpcf7-not-valid-tip,
.chip-group .wpcf7-not-valid-tip {
	flex-basis: 100%;
}

.radio-row .wpcf7-list-item label,
.chip-group .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--color-white);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1;
	color: var(--text);
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.radio-row .wpcf7-list-item label input,
.chip-group .wpcf7-list-item label input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.radio-row .wpcf7-list-item label:hover,
.chip-group .wpcf7-list-item label:hover {
	border-color: var(--text-mut);
}

.radio-row .wpcf7-list-item label:has(input:focus-visible),
.chip-group .wpcf7-list-item label:has(input:focus-visible) {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

.radio-row .wpcf7-list-item label:has(input:checked),
.chip-group .wpcf7-list-item label:has(input:checked) {
	border-color: var(--orange);
	background: var(--orange-tint);
	color: var(--orange-dark);
}

/* Upload field. CF7 handles one file and attaches it to the notification email,
   so the control stays a real file input (the visitor needs to see the chosen
   file name) inside the design's dashed dropzone box. */
.upload--cf7 {
	text-align: left;
}

.upload--cf7 input[type="file"] {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	opacity: 1;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.9rem;
	color: var(--text);
}

.upload--cf7 input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--color-white);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--orange-dark);
	cursor: pointer;
}

.upload--cf7 .upload__hint {
	margin-top: 10px;
}

/* The design's `.btn` draws its outline with an inset shadow and sets no
   border, so CF7's <input type="submit"> keeps the browser's default 2px
   border and renders 4px taller than the static button. */
.contact__form .wpcf7-submit {
	border: 0;
}

/* The spam-check field — hidden from people, left in the DOM for bots to fill. */
.mm-nope {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Validation and status messages, styled like the design's `.form-status`. */
.wpcf7 form .wpcf7-response-output {
	margin: 15px 0 0;
	padding: 0;
	border: 0;
	font-weight: 600;
	font-size: 0.93rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	color: var(--color-error);
}

.wpcf7 form.sent .wpcf7-response-output {
	color: var(--color-success);
}

.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--color-error);
}

/* CF7's spinner holds its space even while hidden, which stretches the submit
   button's line by 27px and, on a narrow screen where the button already fills
   the width, pushes past the right edge and makes the whole page scroll
   sideways. It is only meaningful while a submission is in flight, so it is
   shown then and takes no space otherwise. */
.contact__form .wpcf7-spinner {
	display: none;
}

.contact__form form.submitting .wpcf7-spinner {
	display: inline-block;
	margin-left: 12px;
}

/* Very narrow screens: `.contact-grid`'s single column is `1fr`, and a `1fr`
   track is at least as wide as its content's min-content size. A long
   unbreakable address is enough to push the card wider than the screen — the
   original static site does this below roughly 340px too. Letting the item
   shrink, and long words wrap, keeps the page from scrolling sideways. */
.contact-grid > *,
.contact-aside,
.contact__form {
	min-width: 0;
}

.contact-aside .contact__info span,
.contact-aside a {
	overflow-wrap: anywhere;
}

/* `.contact-form > .field:last-of-type` gives the last field extra room before
   the button. CF7 appends its response div after the fields, so no `.field` is
   `:last-of-type` any more — this matches the last one by sibling instead. */
.wpcf7-form > .field:not(:has(~ .field)) {
	margin-bottom: 22px;
}

/* --- Elementor editor ---
   The scroll-fade (`.reveal`) is switched on by main.js's IntersectionObserver
   for the elements present at page load. The editor renders every widget
   after that, by AJAX, so those elements were never observed and sat at
   opacity 0 — whole components looked missing while editing. There is nothing
   to animate in the editor, so the fade is simply off there. */
body.elementor-editor-active .reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* --- WordPress chrome ---
   The site's nav pill is `position: fixed; top: 0`, which the admin bar would
   sit on top of for logged-in editors. */
body.admin-bar .nav-shell {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .nav-shell {
		top: 46px;
	}
}

/* Nothing else needs restating: the design's other `main.shell …` rules are
   descendant selectors, which still match through the Elementor wrapper.
   (`main.shell > section:not(.panel)` is the one exception, and the only
   section it ever applied to — `.contact-section` — overrides all of it with
   `main.shell section.contact-section:not(.panel)` anyway.) */