/*
Theme Name: Escrow Base
Theme URI: https://21stcenturyescrow.com
Author: Full Realty Services
Author URI: https://21stcenturylending.com
Description: The shared brand system for the Full Realty Services escrow network — Diamond Valley Escrow and 21st Century Escrow. A child of the Ollie block theme, so Ollie Pro's pattern library, editor extensions and Abilities stay available. All brand tokens live in theme.json; the palette, type scale and section vocabulary are shared network-wide, and each site differs only by logo, content and contact details.
Template: ollie
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0.3
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: escrow-base
Tags: block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, style-variations, template-editing, wide-blocks

Escrow Base is a child of the Ollie WordPress Theme, (C) 2026 Mike McAlister.
Distributed under the terms of the GNU GPL.
*/

/* Everything visual is expressed as a design token in theme.json. This file
   carries only what theme.json cannot: pseudo-element and interaction details. */

/* Eyebrow label — the uppercase micro-type that opens most sections. */
.esc-eyebrow {
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--letter-spacing--label );
	font-weight: var( --wp--custom--font-weight--bold );
}

/* Hairline rule used between process rows and card columns. */
.esc-rule-top {
	border-top: var( --wp--custom--brand--rule ) solid var( --wp--preset--color--border-light );
}

.esc-rule-top.has-border-dark-border-color {
	border-top-color: var( --wp--preset--color--border-dark );
}

/* Keyline that sits above a quote or stat. Signal green on dark, emerald on light. */
.esc-keyline::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: var( --wp--custom--brand--rule-heavy );
	margin-bottom: var( --wp--preset--spacing--medium );
	background: var( --wp--preset--color--primary );
}

.has-main-background-color .esc-keyline::before,
.has-primary-alt-accent-background-color .esc-keyline::before,
.has-deep-forest-background-color .esc-keyline::before,
.wp-block-cover .esc-keyline::before {
	background: var( --wp--preset--color--primary-alt );
}

/* Buttons: the brand's signature interaction is a hue shift to signal green,
   not a darken. Emerald is the only supplied green that clears 4.5:1 on white
   (4.61); signal green only ever carries ink, which it clears at 8.88:1. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--primary-alt );
	color: var( --wp--preset--color--main );
}

.is-style-esc-ghost .wp-block-button__link {
	background-color: transparent;
	border: var( --wp--custom--brand--rule-heavy ) solid currentColor;
	color: var( --wp--preset--color--primary );
}

.is-style-esc-ghost .wp-block-button__link:hover,
.is-style-esc-ghost .wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* Ghost buttons sitting on a dark band invert: signal green outline, ink fill. */
.has-main-background-color .is-style-esc-ghost .wp-block-button__link,
.has-primary-alt-accent-background-color .is-style-esc-ghost .wp-block-button__link,
.has-deep-forest-background-color .is-style-esc-ghost .wp-block-button__link,
.wp-block-cover .is-style-esc-ghost .wp-block-button__link {
	color: var( --wp--preset--color--primary-alt );
}

/* A cover with a video background is a dark band, but its overlay colour class
   sits on a child span rather than an ancestor — so the dark-band selectors
   above never match it, and the outline button renders emerald-on-video, which
   is close to invisible. */
.has-main-background-color .is-style-esc-ghost .wp-block-button__link:hover,
.has-primary-alt-accent-background-color .is-style-esc-ghost .wp-block-button__link:hover,
.has-deep-forest-background-color .is-style-esc-ghost .wp-block-button__link:hover,
.wp-block-cover .is-style-esc-ghost .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--primary-alt );
	border-color: var( --wp--preset--color--primary-alt );
	color: var( --wp--preset--color--main );
}

/* Cards lift on hover, one shadow tier only. */
.is-style-esc-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.is-style-esc-card:hover {
	transform: translateY( -2px );
	box-shadow: var( --wp--preset--shadow--medium-light );
}

/* The header logo swaps to the knockout mark on dark chrome. */
.esc-header-dark .wp-block-site-logo img {
	filter: brightness( 0 ) invert( 1 );
}

/* Forminator
---------------------------------------------------------------------------- */
/* The contact form is third-party markup, so theme.json cannot reach it and it
   arrives in Forminator's own default chrome — grey submit button, generic
   inputs. These rules put it on the design system. Token values only, so it
   follows a palette change like everything else. */

.forminator-ui.forminator-custom-form {
	--forminator-input-border: var( --wp--preset--color--border-light );
	font-family: var( --wp--preset--font-family--primary );
}

.forminator-ui.forminator-custom-form .forminator-label {
	color: var( --wp--preset--color--main );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: var( --wp--custom--font-weight--semi-bold );
	letter-spacing: var( --wp--custom--letter-spacing--wide );
	text-transform: uppercase;
}

.forminator-ui.forminator-custom-form .forminator-required {
	color: var( --wp--preset--color--primary );
}

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form select.forminator-select2,
.forminator-ui.forminator-custom-form .forminator-input-with-phone {
	background-color: var( --wp--preset--color--base );
	border: var( --wp--custom--brand--rule ) solid var( --wp--preset--color--border-light );
	border-radius: var( --wp--preset--border-radius--sm );
	color: var( --wp--preset--color--main );
	font-family: var( --wp--preset--font-family--primary );
	font-size: var( --wp--preset--font-size--small );
	padding: 0.75em 1em;
	transition: border-color 0.15s ease;
}

.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
	border-color: var( --wp--preset--color--primary );
	box-shadow: none;
	outline: var( --wp--custom--brand--rule-heavy ) solid var( --wp--preset--color--primary-accent );
}

.forminator-ui.forminator-custom-form .forminator-textarea {
	min-height: 9rem;
}

/* Same treatment as core/button, including the hue-shift on hover. */
.forminator-ui.forminator-custom-form button.forminator-button-submit {
	background: var( --wp--preset--color--primary );
	border: 0;
	border-radius: var( --wp--preset--border-radius--sm );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--primary );
	font-size: var( --wp--preset--font-size--small );
	font-weight: var( --wp--custom--font-weight--semi-bold );
	letter-spacing: var( --wp--custom--letter-spacing--wide );
	line-height: var( --wp--custom--line-height--none );
	padding: 0.85em 1.6em;
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:hover,
.forminator-ui.forminator-custom-form button.forminator-button-submit:focus-visible {
	background: var( --wp--preset--color--primary-alt );
	color: var( --wp--preset--color--main );
}

.forminator-ui.forminator-custom-form .forminator-error-message {
	color: var( --wp--preset--color--primary-alt-accent );
	font-size: var( --wp--preset--font-size--x-small );
}

.forminator-ui.forminator-custom-form .forminator-response-message.forminator-success {
	background: var( --wp--preset--color--primary-accent );
	border-radius: var( --wp--preset--border-radius--sm );
	color: var( --wp--preset--color--primary-alt-accent );
}

/* Team cards
---------------------------------------------------------------------------- */
/* The office / email / phone lines under a name are sibling spans inside one
   paragraph rather than <br>-separated text, so each can carry its own icon
   and — the actual bug — so a long address wraps instead of being clipped.
   "jennifer@diamondvalleyescrow.com" was running out of the card at five
   columns. Two things fix it: overflow-wrap:anywhere, which lets the break
   happen mid-word, and min-width:0, because a flex item's automatic minimum
   size is its longest unbreakable run and that is what forced the overrun. */

.esc-meta {
	align-items: flex-start;
	display: flex;
	gap: 0.5em;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The spans stack, so the rhythm between them is type-relative, not a spacing
   preset — the smallest preset is a whole line of x-small copy. */
.esc-meta + .esc-meta {
	margin-top: 0.35em;
}

.esc-meta a {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Icons are masks rather than images, so they take their colour from the text
   they sit beside and follow a palette change with it. */
.esc-meta::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 0.9em;
	margin-top: 0.25em;
	opacity: 0.65;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 0.9em;
}

.esc-meta-office::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.esc-meta-email::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2.5 6.5 9.5 6 9.5-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2.5 6.5 9.5 6 9.5-6'/%3E%3C/svg%3E");
}

.esc-meta-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1.6 4.2 2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L7.6 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1.6 4.2 2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L7.6 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

/* A name that wraps to two lines — "Natalie Castaneda" does at three columns —
   used to drop that card's contact block half a line below its neighbours'.
   The cards already stretch to the row height, so making each one a column and
   letting the contact block take up the slack lines them all up. The rule beats
   the flow layout's own margin-block-start on specificity, hence the same
   property rather than margin-top. */
.esc-team-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.esc-team-card > .wp-block-image {
	flex: 0 0 auto;
}

.esc-team-card > p:has( .esc-meta ) {
	margin-block-start: auto;
	padding-top: var( --wp--preset--spacing--small );
}

/* Kellie Jones is Director of Escrow across both brands, so she gets a row to
   herself above the grid instead of reading as one branch manager among ten.
   Wide only where there is room: 782px is the breakpoint core itself uses, and
   below it the card stacks like every other one. The float is what keeps the
   text beside the headshot without the builder having to wrap it in a group. */
@media ( min-width: 782px ) {

	.esc-team-lead {
		display: flow-root;
	}

	.esc-team-lead > .wp-block-image {
		float: left;
		margin-block: 0;
		margin-inline-end: var( --wp--preset--spacing--medium );
		width: 180px;
	}

	/* Without this the name sits a gap lower than the top of the headshot. */
	.esc-team-lead > .wp-block-image + * {
		margin-block-start: 0;
	}
}

/* core/group's grid layout emits a fixed column count at every width, so three
   across otherwise survives all the way down to a phone. */
@media ( max-width: 781px ) {

	.wp-block-group-is-layout-grid:has( > .esc-team-card ) {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 480px ) {

	.wp-block-group-is-layout-grid:has( > .esc-team-card ) {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Nothing may scroll the page sideways
---------------------------------------------------------------------------- */
/* Full-bleed sections plus root-padding-aware alignments can add up to more
   than the viewport on narrow screens, and the symptom — a page that drifts
   right as you scroll — is easy to miss on a desktop. Belt and braces. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* The hero cover is hand-built markup, so it does not get the inner-container
   max-width that a constrained layout would normally generate for it. */
.wp-block-cover__inner-container {
	margin-inline: auto;
	max-width: var( --wp--custom--brand--max-content );
	width: 100%;
}