/* =====================================================================
   Welcome Real Estate — supplemental styles
   Layered on top of theme.json. Uses theme.json preset CSS variables.

   DIRECTION — "Altitude"
   Denver sits at 5,280 ft in a semi-arid climate: the air is thin and dry,
   the light is hard and clear, UV runs ~25-30% above sea level, and the
   Front Range goes violet-grey with distance. The palette is taken from
   that, not from a mood board — a cool, clear ground rather than a warm
   one, deep altitude sky as the accent, and Lyons sandstone for warmth.

   PALETTE GUARDRAILS — measured, not assumed:
     ink       on paper  17.3:1  body text, any size
     ink-soft  on paper   7.1:1  secondary text, any size
     sky       on paper   7.8:1  links, any size
     paper     on sky     7.8:1  buttons
     ink       on sandstone 5.4:1  OK — this is the ONLY way to use sandstone
                                   behind text
     slate     on paper   3.5:1  FAILS AA for body. Large/decorative only.
     sandstone on paper   3.2:1  FAILS AA for body. Never body text.
     paper     on sandstone 3.2:1 FAILS. Never light text on sandstone.
   Treat slate and sandstone as drawing colours, not text colours.
   ===================================================================== */

:root {
	--wre-line: var(--wp--preset--color--line, #D6DCE2);
	--wre-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--wre-cut-weight: 3px;
}

/* ── SIGNATURE: the section cut ───────────────────────────────────────
   On an architectural drawing, the section cut — the line where the
   building is sliced open so you can see how it is actually built — is
   the heaviest line on the sheet, flagged at both ends to show the
   direction of view. Everything else is hairline by comparison.

   This site's entire proposition is "Most agents show you the house.
   I help you understand the home." A section is precisely that act, so
   the cut line, not a hairline, is what divides this site's sections.
   The convention is deliberately inverted: heavy where the genre
   defaults to thin.
   ------------------------------------------------------------------ */
.wre-cut {
	position: relative;
	border-top: var(--wre-cut-weight) solid var(--wp--preset--color--ink);
}
.wre-cut::before,
.wre-cut::after {
	content: "";
	position: absolute;
	top: calc(var(--wre-cut-weight) * -1);
	width: var(--wre-cut-weight);
	height: 0.875rem;
	background: var(--wp--preset--color--ink);
}
.wre-cut::before { left: 0; }
.wre-cut::after  { right: 0; }

/* Sandstone variant — used sparingly, for the one section that should
   read warm. Still a drawing colour: it never carries text. */
.wre-cut.is-sandstone,
.wre-cut.is-sandstone::before,
.wre-cut.is-sandstone::after {
	border-top-color: var(--wp--preset--color--sandstone);
	background-color: var(--wp--preset--color--sandstone);
}

/* Smooth, restrained motion on interactive elements ------------------ */
.wp-element-button,
.wp-block-button__link,
a {
	transition: background-color 0.25s var(--wre-ease),
		color 0.25s var(--wre-ease),
		border-color 0.25s var(--wre-ease),
		transform 0.25s var(--wre-ease);
}

/* Optional outline button variant (add class "is-style-wre-outline") --- */
.wp-block-button.is-style-wre-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}
.wp-block-button.is-style-wre-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Eyebrow / kicker label — mono, tracked, with a leading tick --------- */
.wre-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky);
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
}
.wre-eyebrow::before {
	content: "";
	width: 1.75em;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

/* Section index numerals (01 / 02 / 03) ------------------------------- */
.wre-index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.05em;
}

/* Hairline rules — drawing lines -------------------------------------- */
.wre-rule-top { border-top: 1px solid var(--wre-line); }
.wre-rule-bottom { border-bottom: 1px solid var(--wre-line); }

/* Card / panel with hairline border and quiet hover lift -------------- */
.wre-card {
	border: 1px solid var(--wre-line);
	background: var(--wp--preset--color--paper);
	transition: transform 0.3s var(--wre-ease), border-color 0.3s var(--wre-ease);
}
.wre-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--ink);
}

/* Display headline refinements ---------------------------------------- */
.wre-display-tight { line-height: 1.02; letter-spacing: -0.02em; }

/* Constrain measure for long-form reading ----------------------------- */
.wre-measure { max-width: 62ch; }

/* Numbered process / list with mono counters -------------------------- */
.wre-steps { counter-reset: wre-step; }
.wre-steps .wre-step::before {
	counter-increment: wre-step;
	content: counter(wre-step, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sky);
	display: block;
	margin-bottom: 0.5rem;
	letter-spacing: 0.05em;
}

/* Links inside body copy get a subtle underline offset ---------------- */
.entry-content a,
.wre-prose a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Sticky mobile action bar (used by a footer pattern) ----------------- */
.wre-mobile-bar { display: none; }
@media (max-width: 600px) {
	.wre-mobile-bar {
		display: grid;
		/* One column while the phone number is unpublished — the bar carries a
		   single action. Back to `1fr 1fr` when the tap-to-dial link returns. */
		grid-template-columns: 1fr;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 120;
		border-top: 1px solid var(--wre-line);
		background: var(--wp--preset--color--paper);
	}
	.wre-mobile-bar a {
		text-align: center;
		padding: 1em 0;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--x-small);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--wp--preset--color--paper);
		background: var(--wp--preset--color--ink);
	}
	.wre-mobile-bar a + a {
		background: var(--wp--preset--color--sky);
	}
	/* keep content clear of the bar */
	body { padding-bottom: 3.5rem; }
}

/* Header polish ------------------------------------------------------- */
.wp-block-site-title a { text-decoration: none; }
.wp-block-navigation a:hover { color: var(--wp--preset--color--sky); }

/* Reduce motion for users who ask for it ------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
	.wre-card:hover { transform: none; }
}

/* Hero portrait — a panel, not a floating photo ----------------------- */
/* The source is landscape (1200x827). Dropped into a 42% column that is
   vertically centred against a taller text column, it left dead space above and
   below. Giving the figure its own height and letting the image cover it makes
   the photo behave like a designed panel at every width.
   Focal point 40% was measured, not guessed: at 30% he sits right of centre and
   at 50% left of centre. */
.wre-hero-portrait { margin: 0; overflow: hidden; }
.wre-hero-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 25%;
}

/* 782px is WordPress's own column-stacking breakpoint — matching it means the
   layout never disagrees with the grid underneath it. */
@media (min-width: 782px) {
	/* Only the IMAGE column stretches. Core puts `align-self: center` on the
	   column itself via .is-vertically-aligned-center, so a rule on the parent's
	   align-items would be ignored — this has to out-specify the column rule
	   (0,2,1 beats 0,2,0) and target the last column alone, so the text column
	   keeps its vertical centring. */
	.wre-hero .wp-block-column:last-child {
		align-self: stretch;
		display: flex;
	}
	.wre-hero .wp-block-column:last-child > .wre-hero-portrait { flex: 1; }
	.wre-hero-portrait {
		height: 100%;
		/* Floor and ceiling so a short headline cannot squash the photo and a long
		   one cannot stretch it into a sliver on a narrow laptop. */
		min-height: 420px;
		max-height: 640px;
	}
}

@media (max-width: 781px) {
	/* Stacked: a calm landscape band rather than a tall column that pushes the
	   call to action below the fold. */
	.wre-hero-portrait { aspect-ratio: 16 / 10; }
}

@media (max-width: 480px) {
	.wre-hero-portrait { aspect-ratio: 3 / 2; }
}

/* Contact form (Contact Form 7) --------------------------------------- */
/* There was no form styling at all, so the one conversion surface on the site
   rendered in browser defaults. These rules reuse the existing button and
   colour tokens rather than introducing a second visual language. */
.wpcf7 form.wpcf7-form p { margin: 0 0 1.4rem; }

.wpcf7 label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.wpcf7-form-control-wrap { display: block; margin-top: 0.55rem; }

/* CF7 puts a <br> between the label text and the field; the wrap is already a
   block with its own margin, so the break just adds a blank line. */
.wpcf7 label br { display: none; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wre-line);
	border-radius: 0;                     /* square, like every other edge here */
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	/* MUST reset both: CF7 nests the <input> INSIDE the <label>, and
	   text-transform and letter-spacing are inherited properties. Without these
	   the uppercase, tracked label styling above lands on whatever the visitor
	   types — their name renders as SHOUTING WITH GAPS. */
	text-transform: none;
	letter-spacing: normal;
	transition: border-color 0.25s var(--wre-ease), box-shadow 0.25s var(--wre-ease);
}

.wpcf7 textarea { min-height: 9.5rem; resize: vertical; }

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 textarea:hover { border-color: var(--wp--preset--color--slate); }

/* A visible, high-contrast focus ring: this form is the whole point of the
   page, and keyboard users must be able to see where they are. */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--sky);
	box-shadow: 0 0 0 3px rgba(20, 82, 126, 0.18);
}

/* Submit — matches .wp-element-button so the form does not look bolted on. */
.wpcf7 input[type="submit"] {
	appearance: none;
	border: 0;
	border-radius: 0;
	padding: 0.9rem 1.9rem;
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--paper);   /* 7.8:1 — see the contrast table above */
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s var(--wre-ease), transform 0.25s var(--wre-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--sky-deep); }
.wpcf7 input[type="submit"]:active { transform: translateY(1px); }
.wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Validation and response messages. CF7 ships its own red/green borders that
   clash with the palette; these keep the meaning and drop the clash. */
.wpcf7 .wpcf7-not-valid { border-color: #A6321E; }
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	color: #A6321E;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	text-transform: none;
	letter-spacing: 0;
}
.wpcf7 .wpcf7-response-output {
	margin: 1.2rem 0 0;
	padding: 0.9rem 1.1rem;
	border-width: 1px;
	border-radius: 0;
	font-size: 0.95rem;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--sky);
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--ink);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #A6321E;
	background: #FBEFEC;
	color: #7A2416;
}

.wpcf7-spinner { margin-left: 0.75rem; }