/* ==========================================================================
   Archihub Elementor layer — utilities + normalization only.
   No page-specific rules in this file. Loaded last (priority 999) by
   includes/archihub-elementor-layer.php. Standard: docs/PAGE-BUILD-STANDARD.md
   ========================================================================== */

/* Header height per breakpoint, measured 2026-10-04 on archihub-local
   (desktop 1440 → 105px, tablet 900 → 80px, mobile 390 → 98px).
   A small script in archihub-elementor-layer.php replaces these with the
   real rendered height, so header changes don't break full-screen sections. */
:root { --ah-header-h: 105px; }
@media (max-width: 1024px) { :root { --ah-header-h: 80px; } }
@media (max-width: 767px)  { :root { --ah-header-h: 98px; } }

/* --------------------------------------------------------------------------
   Full-screen sections. Leave Elementor's Min Height control EMPTY.
   .ah-screen       = visible viewport minus the header (normal pages)
   .ah-screen--full = whole visible viewport (transparent/overlay header)
   svh (small viewport) is used on purpose: it never resizes while the mobile
   browser bar shows/hides, so the hero does not jump. vh is the fallback.
   Works on V3 containers (--min-height) and V4 flexbox/div blocks (min-height).
   The WordPress admin bar is subtracted when present.
   -------------------------------------------------------------------------- */
.e-con.ah-screen {
	--ah-screen-h: calc(100vh - var(--ah-header-h) - var(--wp-admin--admin-bar--height, 0px));
	--min-height: var(--ah-screen-h);
	min-height: var(--ah-screen-h);
}
.e-con.ah-screen--full {
	--ah-screen-h: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	--min-height: var(--ah-screen-h);
	min-height: var(--ah-screen-h);
}
@supports (height: 100svh) {
	.e-con.ah-screen {
		--ah-screen-h: calc(100svh - var(--ah-header-h) - var(--wp-admin--admin-bar--height, 0px));
	}
	.e-con.ah-screen--full {
		--ah-screen-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	}
}

/* iOS/Android ignore background-attachment: fixed; force scroll on touch sizes. */
@media (max-width: 1024px) {
	.ah-screen,
	.ah-screen--full {
		background-attachment: scroll !important;
	}
}

/* --------------------------------------------------------------------------
   Typography normalization: same font, same weights, same size on every device.
   font-synthesis: none → a missing weight falls back to a real one instead of
   a browser-faked bold/italic (one reason Roboto looked different per device).
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	font-family: "Roboto", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Paragraph text: justified (body and lead paragraphs). Inside centered
   stacks the last line is centered. Words are never split: a line breaks
   only at a space or at a real hyphen in the text (e.g. "add-ons").
   -------------------------------------------------------------------------- */
.e-paragraph-base.ah-lead,
.e-paragraph-base.ah-measure {
	text-align: justify;
	-webkit-hyphens: manual;
	hyphens: manual;
	word-break: normal;
	overflow-wrap: normal;
}
.ah-stack-center .e-paragraph-base,
.ah-card .e-paragraph-base {
	text-align-last: center;
}

/* --------------------------------------------------------------------------
   Text + photo blocks (.ah-split): the text follows the page's middle line.
   Desktop: text beside a photo on the right aligns right (toward the middle);
   text beside a photo on the left aligns left. Tablet/phone (stacked, photo
   first): centered.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.e-con.ah-split:not(.ah-split--reverse) > .ah-split__text {
		align-items: flex-end;
		text-align: right;
	}
	.e-con.ah-split:not(.ah-split--reverse) > .ah-split__text .e-paragraph-base {
		text-align-last: right;
	}
	.e-con.ah-split.ah-split--reverse > .ah-split__text {
		align-items: flex-start;
		text-align: left;
	}
}
@media (max-width: 1024px) {
	.e-con.ah-split > .ah-split__text {
		align-items: center;
		text-align: center;
	}
	.e-con.ah-split > .ah-split__text .e-paragraph-base {
		text-align-last: center;
	}
}

/* Accent: short rule under split titles, following the same alignment.
   Teal on light backgrounds, cyan on dark. */
.ah-split__text > .ah-title-upper::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 0.75rem;
	background: var(--ah-teal, #19CBD2);
}
.ah-tone-dark .ah-split__text > .ah-title-upper::after,
.ah-tone-graphite .ah-split__text > .ah-title-upper::after {
	background: var(--ah-cyan, #80FEFE);
}
@media (min-width: 1025px) {
	.e-con.ah-split:not(.ah-split--reverse) > .ah-split__text > .ah-title-upper::after {
		margin-left: auto;
	}
}
@media (max-width: 1024px) {
	.ah-split__text > .ah-title-upper::after {
		margin-left: auto;
		margin-right: auto;
	}
}

/* --------------------------------------------------------------------------
   Stacked photos (tablet and phone). Most split photos are portrait people
   shots; the ah-cover-img class gives them a wide box (16:9 tablet, 4:3
   phone) cropped from the center, which cut heads off. Taller boxes and a
   crop anchored near the top keep faces in frame. The anchor has zero extra
   specificity (:where), so a focal point set on the image in Elementor
   (Style > Object position) always wins.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor .ah-split__media .ah-cover-img {
		aspect-ratio: 4 / 3;
	}
	:where(.elementor .ah-split__media) .ah-cover-img {
		object-position: 50% 25%;
	}
	/* Join Professionals, Surveyor photo: the people stand at the bottom of the frame. */
	:where(.elementor .elementor-element-170c71eb) .ah-cover-img {
		object-position: 50% 85%;
	}
}
@media (max-width: 767px) {
	.elementor .ah-split__media .ah-cover-img {
		aspect-ratio: 1 / 1;
	}
}

/* Hover: photos ease in slightly; buttons lift. Pointer devices only. */
@media (hover: hover) {
	.ah-split__media .ah-cover-img {
		transition: transform 0.6s ease;
	}
	.e-con.ah-split:hover .ah-split__media .ah-cover-img {
		transform: scale(1.04);
	}
	.ah-btn {
		transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	}
	.ah-btn:hover {
		transform: translateY(-1px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ah-split__media .ah-cover-img,
	.ah-btn {
		transition: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   One middle line for every split section (desktop). Text column = 55 %,
   photo = 45 %, alternating sides. The text column's inner padding is 5 % of
   the section width, so text beside a right-hand photo ENDS at 50 % and text
   beside a left-hand photo STARTS at 50 %: every section shares the same
   vertical line. Each split also fills the screen on desktop.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.e-con.ah-split:not(.ah-split--reverse) > .ah-split__text {
		padding-inline-end: 5%;
	}
	.e-con.ah-split.ah-split--reverse > .ah-split__text {
		padding-inline-start: 5%;
	}
	.e-con.ah-split {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	}
	@supports (height: 100svh) {
		.e-con.ah-split {
			min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
		}
	}
}

/* Even line lengths: no single word left alone on a paragraph's last line,
   balanced headings. Browsers without support simply wrap as before. */
.e-paragraph-base {
	text-wrap: pretty;
}
.e-heading-base {
	text-wrap: balance;
}

/* Statement band (e.g. Join Owners "Whether you're a boutique studio..."):
   hero-sized text so the message is the protagonist of its section. */
.e-paragraph-base.ah-statement {
	font-size: clamp(1.5rem, 1rem + 1.9vw, 2.625rem);
	font-weight: 500;
	line-height: 1.3;
	max-width: 56rem;
	text-align: justify;
	text-align-last: center;
}
.e-heading-base.ah-statement-accent {
	font-size: var(--ah-fs-h2, clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem));
	font-weight: 700;
	line-height: 1.2;
}

/* Centered display text (heroes, statement bands, closing calls to action,
   cards) is centered with balanced lines, not justified: justifying two or
   three centered lines stretches the word spacing. Body paragraphs in text
   columns stay justified with "pretty" wrapping (no lone last word). */
.ah-stack-center .e-paragraph-base,
.ah-card .e-paragraph-base,
.e-paragraph-base.ah-statement {
	text-align: center;
	text-wrap: balance;
}