/*
 * WPBakery compatibility.
 *
 * The ported sections are full-bleed <section> elements that manage their own
 * width, padding and background. WPBakery wraps every element in row/column/
 * element containers that add gutters and bottom margins of their own, which
 * would otherwise inset the sections and cause horizontal overflow.
 */

.vc_row.wpb_row {
	margin-left: 0;
	margin-right: 0;
}

.vc_row .vc_column_container {
	padding-left: 0;
	padding-right: 0;
}

.vc_row .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

.wpb-content-wrapper .wpb_content_element,
.wpb-content-wrapper .wpb_raw_code,
.wpb-content-wrapper .wpb_raw_html,
.wpb-content-wrapper .wpb_text_column,
.wpb-content-wrapper .wpb_row {
	margin-bottom: 0;
}

.wpb_raw_code .wpb_wrapper,
.wpb_text_column .wpb_wrapper {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Contact Form 7
 *
 * The mockup's form was static markup; CF7 renders its own wrappers, spinner
 * and response element. These rules keep the rendered form geometrically
 * identical to the approved mockup. Values verified against the mockup in a
 * real browser, not assumed.
 * ------------------------------------------------------------------------- */

#contact .wpcf7,
#contact .wpcf7 form.wpcf7-form {
	margin: 0;
}

/*
 * The submit button is width:100%, so CF7's inline-block spinner wraps onto a
 * line of its own at rest and adds height the mockup does not have. Take it
 * out of flow -- CF7 still reveals it during submission.
 */
#contact .wpforms-submit-container {
	position: relative;
}

#contact .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 18px;
	margin: 0;
	transform: translateY(-50%);
}

#contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 0.9em;
	color: #ffd9d9;
}

/* ---------------------------------------------------------------------------
 * Contact page form (.contact-form-simple)
 *
 * That form is `display:grid; gap:20px`, so every extra element CF7 renders
 * costs a whole grid row plus a gap. Measured against the mockup in a real
 * browser; these three rules account for exactly the 52px difference.
 * ------------------------------------------------------------------------ */

.contact-form-simple {
	position: relative;
}

/* Out of flow, so it stops occupying a 24px grid row (+20px gap). */
.contact-form-simple .wpcf7-spinner {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
}

/*
 * In the mockup the textarea is a direct grid item and so is blockified. Inside
 * CF7's wrap span it keeps its inline-block default and picks up 6px of
 * baseline descender space.
 */
.contact-form-simple .wpcf7-form-control-wrap textarea {
	display: block;
}

/* CF7 submits as <input>, which keeps a 1px UA border the mockup's <button> lacks. */
.contact-form-simple .contact-submit {
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Selectors that relied on the mockup's flat DOM
 *
 * The mockup put its first section as a direct sibling of <header>. The theme
 * wraps page content in <main>, so any rule using an adjacency combinator
 * across that boundary silently stops matching. Re-expressed here against the
 * real WordPress structure.
 *
 * locations: `body.recovery-residences-page header + #locations`
 *            -> padding-top: clamp(70px, 9vw, 115px)
 * ------------------------------------------------------------------------ */

body.recovery-residences-page main #locations {
	padding-top: clamp(70px, 9vw, 115px);
}

/* ---------------------------------------------------------------------------
 * Contact page submit button
 *
 * The mockup's field rule is untyped -- `.contact-form-simple input` -- and the
 * mockup's submit was a <button>, so it never matched. CF7 renders the submit
 * as <input type="submit">, which therefore inherits the white *text field*
 * styling: white text on a white background, i.e. an invisible button.
 * Restore the mockup's .btn appearance for the submit specifically.
 * ------------------------------------------------------------------------ */

.contact-form-simple input[type="submit"] {
	background-color: var(--primary-blue);
	color: var(--white);
	border: none;
	/*
	 * A <button> resolves line-height:normal against the font; an <input>
	 * inherits the form's computed line-height instead, which lands 0.28px
	 * short and nudges everything below it off by a subpixel.
	 */
	line-height: normal;
	box-shadow: 0 8px 25px rgba(44, 62, 80, 0.18);
	transition: var(--transition-elegant);
	cursor: pointer;
}

.contact-form-simple input[type="submit"]:hover {
	background-color: var(--secondary-slate);
	transform: translateY(-4px);
	box-shadow: 0 12px 35px rgba(90, 103, 116, 0.22);
	color: var(--white);
}

/* ---------------------------------------------------------------------------
 * Locations page H1
 *
 * The mockup opened this page with an <h2> and carried no <h1> at all, which
 * leaves the page without a top-level heading. The tag is promoted to <h1> in
 * the content; these rules reproduce the <h2>'s exact appearance so the change
 * is semantic only. Values copied from the h2 cascade in pages/locations.css.
 * ------------------------------------------------------------------------ */

body.recovery-residences-page #locations .section-title h1 {
	font-size: clamp(2.3em, 5vw, 3.4em) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: var(--primary-blue) !important;
	text-shadow: none !important;
	margin: 0 0 0.4em 0 !important;
	max-width: none !important;
}

@media (max-width: 768px) {
	body.recovery-residences-page #locations .section-title h1 {
		font-size: clamp(2em, 8.5vw, 2.55em) !important;
		line-height: 1.16 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Skip link (WCAG 2.4.1 "Bypass Blocks")
 *
 * Every page puts a large navigation ahead of the content, so keyboard users
 * need a way past it. Hidden with the clip technique rather than display:none
 * -- it must stay focusable - and it occupies no layout space until focused,
 * so the rendered page is unchanged.
 * ------------------------------------------------------------------------ */

.tharros-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tharros-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 14px 22px;
	clip: auto;
	clip-path: none;
	background-color: var(--primary-blue);
	color: var(--white);
	font-family: var(--font-primary);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--border-radius-sleek);
	box-shadow: 0 8px 25px rgba(44, 62, 80, 0.28);
	outline: 3px solid var(--white);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Contact Form 7 status messages
 *
 * These sit INSIDE the white form card on the homepage and Teras page, not on
 * the dark section background, so they need dark text -- an earlier rule here
 * set them white and the "message sent" confirmation was invisible.
 * Success and failure are styled distinctly rather than relying on text alone.
 * ------------------------------------------------------------------------ */

.wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 18px;
	border: 2px solid #6c757d;
	border-radius: var(--border-radius-sleek);
	background-color: #f4f6f8;
	color: #212529;
	font-family: var(--font-secondary, inherit);
	font-size: 0.97em;
	line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #1e7e46;
	background-color: #e8f5ed;
	color: #14532d;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #b8860b;
	background-color: #fdf6e3;
	color: #6b4b00;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #b02a37;
	background-color: #fdecee;
	color: #75151e;
}

/* Per-field validation hints, also inside the light card. */
.wpcf7 form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #b02a37;
	font-size: 0.9em;
	font-weight: 600;
}

.wpcf7 form .wpcf7-not-valid {
	border-color: #b02a37 !important;
}

/* ---------------------------------------------------------------------------
 * YouTube facade
 *
 * The embedded player pulls about 1MB before a visitor has shown any interest
 * in watching. This shows the same thumbnail YouTube would, and only loads the
 * real player once someone presses play. Positioned to fill exactly the box
 * the iframe used, so the section is unchanged.
 * ------------------------------------------------------------------------ */

.video-container .yt-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #000;
	overflow: hidden;
	cursor: pointer;
}

.video-container .yt-facade img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yt-facade-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.yt-facade-shape {
	fill: #212121;
	fill-opacity: 0.8;
	transition: fill 0.2s, fill-opacity 0.2s;
}

.yt-facade:hover .yt-facade-shape,
.yt-facade-play:focus-visible .yt-facade-shape {
	fill: #f00;
	fill-opacity: 1;
}

.yt-facade-play:focus-visible {
	outline: 3px solid var(--white);
	outline-offset: 4px;
}