/*
Theme Name: TIPCo
Theme URI: https://tipco.it
Author: TIPCo
Author URI: https://tipco.it
Description: Custom WordPress Block Theme for TIPCo — The Italian Property Company.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tipco

All design tokens (colour, typography, spacing, layout) are defined in theme.json.
No colours or typography values should be hardcoded in template or CSS files.
*/

/*
UI Design System requires button hover to be "Slight Darkening". No hover
shade is documented, so this uses a relative brightness filter instead of
an invented hex value.
*/
.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(0.92);
}

/*
SPEC-009 Header: sticky, and a transparent-over-hero -> solid-after-scroll
mechanism, wired up in SPEC-011 for the Homepage. Solid state uses Primary
Navy per 03_BRAND_GUIDELINES.md ("Header ... Primary Navy"); text uses the
existing Stone token rather than a new colour (SPEC-009 decision).
*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--primary-navy);
	transition: background-color 0.2s ease;
}

/*
Brand lockup (header + footer): the gold house mark (inline SVG) beside the
"TIPCo" wordmark, an Italian-tricolour rule, and the full-name tagline. Real
text (not an image) so it stays crisp, accessible, and in the site fonts;
the site name itself is the short "TIPCo" for SEO titles. On Primary Navy,
so text is Stone. The tricolour green/red are the Italian flag (a motif,
not brand tokens) — the middle band uses Stone so it reads on Navy.
*/
.site-branding {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	line-height: 1;
	flex: none;
}

.site-branding__mark {
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
}

.site-branding__text {
	display: flex;
	flex-direction: column;
}

.site-branding__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.55rem;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--stone);
	white-space: nowrap;
}

.site-branding__rule {
	height: 2px;
	margin: 4px 0;
	background: linear-gradient(
		to right,
		#007a3d 0 33.33%,
		var(--wp--preset--color--stone) 33.33% 66.66%,
		#c8102e 66.66% 100%
	);
}

.site-branding__tagline {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.site-branding__mark {
		width: 2rem;
		height: 2rem;
	}

	.site-branding__name {
		font-size: 1.25rem;
	}

	.site-branding__tagline {
		font-size: 0.55rem;
		letter-spacing: 0.14em;
	}

	/*
	At mobile widths the navigation collapses to the hamburger overlay,
	which already contains a Contact link. The header Enquire button
	(flex-shrink: 0, so it never narrows) would otherwise sit in the row
	at its full width and push the header past the viewport, forcing a
	site-wide horizontal scroll. Hide it here; the overlay covers the CTA.
	*/
	.site-header .wp-block-buttons {
		display: none;
	}
}

/*
SPEC-011: plain `position: sticky` still occupies its own space in normal
document flow, so the Hero would render *below* it, not behind it — a
transparent background would just show the page's base Stone colour, not
the hero image. `position: fixed` removes the header from flow entirely
(for the whole time this class is active, not only after scrolling), so
the full-bleed Hero can rise up to fill that space from the very top, with
the header floating transparently on top of it via z-index. Only its
background colour changes on scroll (via .is-scrolled), not its position —
switching position itself on scroll would make the header scroll away and
disappear for most of the hero's height, since a not-yet-fixed state has
nothing pinning it to the viewport.
*/
.has-transparent-header .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent;
}

.has-transparent-header .site-header.is-scrolled {
	background-color: var(--wp--preset--color--primary-navy);
}

/*
SPEC-011 Hero entrance: a single subtle fade, scoped entirely inside the
reduced-motion media query so users who prefer reduced motion get no
animation rule at all, rather than a suppressed/overridden one.
*/
@media (prefers-reduced-motion: no-preference) {
	.hero-section {
		animation: tipco-hero-fade-in 300ms ease-out;
	}
}

/*
Hero background video (drone footage of Castronovo). The poster image
(hero-castronovo.jpg) is the LCP and shows instantly; the video layers over
it once it can play. Users who prefer reduced motion never see the video —
it is hidden and the poster still image remains.
*/
.hero-section .hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (prefers-reduced-motion: reduce) {
	.hero-section .hero-video {
		display: none;
	}
}

@keyframes tipco-hero-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*
SPEC-011: closes the gap between the Hero and the Footer on the Homepage.
WordPress applies its root block-gap spacing as a margin-top on every
direct child of .wp-site-blocks, including the auto-generated wrapper
around the footer template-part — but that block doesn't support a
spacing/margin block attribute to override it directly (unlike Group or
Cover), so it has to be overridden here instead. Scoped to
.has-transparent-header (currently only the Homepage) rather than
removing this spacing everywhere, since other templates may want it once
they have real content between sections.
*/
.has-transparent-header .wp-site-blocks > .wp-block-template-part {
	margin-top: 0;
}

/*
Without this, the flex layout can squeeze the Enquire button below its
natural width once the navigation wraps to multiple lines, causing its
text to wrap one character per line.
*/
.site-header .wp-block-buttons {
	flex-shrink: 0;
}

.site-header .wp-block-button__link {
	white-space: nowrap;
}

/*
The horizontal navigation (six top-level items) only fits on one line beside
the brand, search and Enquire button at roughly 1130px+ of inner width. Below
that, WordPress core still renders the inline menu — its overlay breakpoint is
hard-coded at 600px — so the nav wraps to two or three cramped rows on tablets
and narrow windows. Raise the overlay breakpoint to 1200px: show the hamburger
overlay up to that width and only render the inline menu on wider screens where
it fits cleanly. These mirror core's own 600px rules; the `.site-header` prefix
gives them the specificity to win in the 600–1200px overlap.
*/
@media (max-width: 1200px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/*
The overlay above is WordPress core's full-viewport modal (`.is-menu-open`
is `position: fixed` at `inset: 0`). At the 601–1200px widths this theme
now opens it at — laptop and tablet windows rather than phones — a
full-page navy takeover is far heavier than the six links it carries.
Narrow it to a right-hand drawer, and dim the page beside it so it still
reads as modal.

The drawer *is* core's container, so the navigation's overlay colours
(`has-primary-navy-background-color`) still apply untouched — only the box
is resized. The scrim is a fixed pseudo-element that stops at the drawer's
left edge (hence the shared width custom property): keeping it clear of the
drawer avoids the negative-z-index stacking that would otherwise dim the
panel along with the page behind it.

The extra `.wp-block-navigation` in each selector lifts these above core's
own equally-specific `.is-menu-open` rules regardless of stylesheet order,
which matters here because core sets the overlay's padding as a shorthand.

Below 601px the full-screen overlay is deliberately kept: it is the
standard phone pattern and gives the links room for comfortable targets.
*/
@media (min-width: 601px) and (max-width: 1200px) {
	.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		--tipco-nav-drawer-width: min(340px, 85vw);

		left: auto;
		width: var(--tipco-nav-drawer-width);
		padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
		box-shadow: -1px 0 0 0 rgba(242, 239, 232, 0.12);
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open::before {
		content: "";
		position: fixed;
		top: 0;
		right: var(--tipco-nav-drawer-width);
		bottom: 0;
		left: 0;
		background-color: rgba(13, 27, 42, 0.6);
	}
}

/*
SPEC-046 Breadcrumbs: a slim, muted contextual trail at the top of
<main>. Contained to the content width, with a separator between items.
The current page (last item) is the body colour and not a link.
*/
.breadcrumbs {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--small);
}

.breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--stone-muted);
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	color: var(--wp--preset--color--stone-muted);
}

.breadcrumbs__item [aria-current="page"] {
	color: #6a7480;
}

/*
SPEC-051 Contact Form: an on-brand, accessible enquiry form (ADR-003).
Fields use the project's form tokens (Warm Grey border, 8px radius —
matching SPEC-012); the honeypot is visually hidden; success/error
messages are perceivable beyond colour (a left border + label), using the
palette's success-green / warning-amber.
*/
.contact-form {
	max-width: 40rem;
	margin-inline: auto;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block: var(--wp--preset--spacing--sm);
}

.contact-form__field label,
.contact-form__consent label {
	font-weight: 400;
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
	box-sizing: border-box; /* width:100% + padding overflowed the container, forcing a horizontal scroll on mobile */
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--warm-grey);
	border-radius: 8px;
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--primary-navy);
	font: inherit;
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__consent input:focus-visible {
	outline: 2px solid var(--wp--preset--color--heritage-gold);
	outline-offset: 2px;
}

.contact-form__required {
	color: var(--wp--preset--color--warning-amber);
}

.contact-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--stone-muted);
}

.contact-form__consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-block: var(--wp--preset--spacing--md);
}

.contact-form__consent label {
	font-weight: 400;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.contact-form__consent input {
	margin-top: 0.25rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.contact-form__field-error {
	color: var(--wp--preset--color--warning-amber);
	font-size: var(--wp--preset--font-size--small);
}

.contact-form__success,
.contact-form__error-summary {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-inline-start: 4px solid;
	margin-bottom: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--primary-navy);
}

.contact-form__success {
	border-color: var(--wp--preset--color--success-green);
	background: color-mix( in srgb, var(--wp--preset--color--success-green) 12%, var(--wp--preset--color--stone) );
}

.contact-form__error-summary {
	border-color: var(--wp--preset--color--warning-amber);
	background: color-mix( in srgb, var(--wp--preset--color--warning-amber) 12%, var(--wp--preset--color--stone) );
}

/* SPEC-052 Property Enquiry: the "enquiring about {property}" context line. */
.property-enquiry__about {
	color: var(--wp--preset--color--stone-muted);
	margin-bottom: var(--wp--preset--spacing--md);
}

/*
SPEC-053 Viewing Request: the "arrange a viewing" toggle and its revealed
date/time fields, set off as one calm group. The fields are visible without
JavaScript; the reveal script sets [hidden] until the toggle is ticked.
*/
.property-enquiry__viewing-toggle {
	margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
}

.property-enquiry__viewing-fields {
	margin-bottom: var(--wp--preset--spacing--md);
	padding-inline-start: var(--wp--preset--spacing--md);
	border-inline-start: 2px solid var(--wp--preset--color--warm-grey);
}

.property-enquiry__viewing-fields[hidden] {
	display: none;
}

/*
SPEC-055 Valuation Request: the two headed form sections ("About your
property" / "Your details") and the responsive grid for the property
detail fields (collapses to one column on mobile).
*/
.valuation-form__section {
	border: 0;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.valuation-form__section legend {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.valuation-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--wp--preset--spacing--md);
}

@media (max-width: 600px) {
	.valuation-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Honeypot — off-screen, hidden from assistive tech and tab order. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
SPEC-050 Empty States: one shared, understated treatment for every empty
state (06: "explain why nothing is shown; what the user should do next").
Consistent vertical breathing room and a comfortable reading width; text
stays at the readable body colour (no muted colour that could risk AA
contrast), the "what next" link uses the standard link style.
*/
.tipco-empty-state {
	max-width: 42rem;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--md);
	text-align: center;
}

/*
SPEC-049 Loading States: a skeleton placeholder behind content images
while they load (06: "Skeleton loaders preferred. Avoid blank screens.";
images lazy-load per 07). A solid Warm Grey base by default; a gentle
Stone shimmer only where motion is welcome. `image-loading.js` adds
`is-loaded` on load, which clears the skeleton (and stops the shimmer);
loaded opaque images cover it meanwhile, and JS-off degrades gracefully.
*/
.wp-block-post-featured-image img,
.wp-block-image img,
.property-gallery__primary-trigger img {
	background-color: var(--wp--preset--color--warm-grey);
}

.wp-block-post-featured-image img.is-loaded,
.wp-block-image img.is-loaded,
.property-gallery__primary-trigger img.is-loaded {
	background-color: transparent;
	background-image: none;
	animation: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-featured-image img:not(.is-loaded),
	.wp-block-image img:not(.is-loaded),
	.property-gallery__primary-trigger img:not(.is-loaded) {
		background-image: linear-gradient(
			100deg,
			transparent 20%,
			rgba(242, 239, 232, 0.65) 50%,
			transparent 80%
		);
		background-size: 200% 100%;
		background-repeat: no-repeat;
		animation: tipco-image-skeleton 1.4s ease-in-out infinite;
	}
}

@keyframes tipco-image-skeleton {
	from {
		background-position: 180% 0;
	}

	to {
		background-position: -80% 0;
	}
}

/*
SPEC-047 Pagination: consistent, on-brand styling for the core Query
Pagination block across every listing (property/location/guide archives,
News, Search). Numbered pagination is retained and polished — body-colour
links with a Heritage Gold hover, the current page marked in Heritage
Gold and non-interactive, comfortable tap targets.
*/
.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
	align-items: center;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-block;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	color: var(--wp--preset--color--primary-navy);
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--forms, 8px);
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus-visible {
	color: var(--wp--preset--color--heritage-gold);
	text-decoration: underline;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--heritage-gold);
	font-weight: 400;
}

.wp-block-query-pagination .page-numbers.dots {
	color: var(--wp--preset--color--stone-muted);
	min-width: auto;
	padding-inline: 0.25rem;
}

/*
SPEC-045 Site Search: the header search control (core Search block, icon
style). The icon sits on the navy header, so force its colour to Stone to
match the nav and Enquire button.
*/
.header-search .wp-block-search__button {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--stone);
	padding: 0 var(--wp--preset--spacing--xs, 0.5rem);
}

.header-search .wp-block-search__button svg {
	fill: currentColor;
}

/*
SPEC-045 Site Search results: a simple stacked list of results, each with
a small content-type label above its linked title. Divider between rows,
matching the FAQ accordion's understated treatment.
*/
.search-result + .search-result {
	border-top: 1px solid var(--wp--preset--color--warm-grey);
}

.search-result__type {
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--stone-muted);
}

/*
SPEC-010 Footer: solid Primary Navy per 03_BRAND_GUIDELINES.md
("Footer ... Primary Navy"), Stone text set per-block in footer.html.
Not sticky, unlike the Header.
*/
.site-footer {
	background-color: var(--wp--preset--color--navy-deep);
	border-top: 1px solid var(--tipco-hairline);
	padding-top: var(--wp--preset--spacing--section);
	padding-bottom: var(--wp--preset--spacing--lg);
}

/*
SPEC-054 Newsletter: the footer signup. Sits on Primary Navy, so text is
Stone and the input is a light (Stone) field with dark text. Fills the
"Newsletter Signup" slot SPEC-010 deferred.
*/
.newsletter {
	max-width: 30rem;
	margin-bottom: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--stone);
}

.newsletter__heading {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--stone);
}

.newsletter__intro {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
}

.newsletter__field,
.newsletter__consent {
	margin-block: var(--wp--preset--spacing--sm);
}

.newsletter__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.newsletter__field label {
	font-weight: 400;
}

.newsletter__field input {
	box-sizing: border-box; /* width:100% + padding overflowed the footer container, forcing a 2px horizontal scroll on mobile */
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--warm-grey);
	border-radius: 8px;
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--primary-navy);
	font: inherit;
}

.newsletter__field input:focus-visible,
.newsletter__consent input:focus-visible {
	outline: 2px solid var(--wp--preset--color--heritage-gold);
	outline-offset: 2px;
}

.newsletter__consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--small);
}

.newsletter__consent label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.newsletter__consent input {
	margin-top: 0.2rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.newsletter__consent a {
	color: var(--wp--preset--color--stone);
	text-decoration: underline;
}

.newsletter__success,
.newsletter__error {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-inline-start: 4px solid;
	margin-block: var(--wp--preset--spacing--sm);
	background: color-mix( in srgb, var(--wp--preset--color--stone) 12%, transparent );
}

.newsletter__success {
	border-color: var(--wp--preset--color--success-green);
}

.newsletter__error {
	border-color: var(--wp--preset--color--warning-amber);
}

/*
SPEC-039 Legal Pages: the Footer's legal-links row. Links inside the
Stone paragraphs would otherwise inherit the site link colour
(heritage-gold-text), which is low-contrast on Primary Navy — force
Stone here, with an underline for affordance, matching the rest of the
Footer's Stone-on-Navy text.
*/
.footer-legal a {
	color: var(--wp--preset--color--stone);
	text-decoration: underline;
}


/*
SPEC-012 Homepage Property Search. WordPress core has no block for
grouped form controls (select, multi-field rows), so the <form> itself
is a Custom HTML block (wp:html) — its wrapping section still gets
spacing/layout from a normal Group block as usual. Border colour and
radius follow 06_UI_DESIGN_SYSTEM.md's documented values (Warm Grey for
borders, 8px radius for forms) — same values already used for buttons,
not a new invented style.
*/
.tipco-property-search__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--sm);
	margin-block: var(--wp--preset--spacing--sm);
}

.tipco-property-search__field {
	display: flex;
	flex: 1 1 200px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.tipco-property-search__field label {
	font-size: var(--wp--preset--font-size--small);
}

.tipco-property-search__field input,
.tipco-property-search__field select {
	background-color: var(--wp--preset--color--stone);
	border: 1px solid var(--wp--preset--color--warm-grey);
	border-radius: 8px;
	color: var(--wp--preset--color--primary-navy);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	padding: var(--wp--preset--spacing--xs);
}

/*
Disabled rather than a dead placeholder link — SPEC-012 decision. There
is no Property Archive to search yet (Milestone 3), so pretending this
button works would be dishonest, not just incomplete.
*/
.tipco-property-search__submit .wp-element-button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.tipco-property-search__filters summary {
	color: var(--wp--preset--color--gold-on-navy);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	margin-block: var(--wp--preset--spacing--xs);
}

.tipco-property-search__notice {
	color: var(--wp--preset--color--stone-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--xs);
}

/*
SPEC-024 Status Badges. 06_UI_DESIGN_SYSTEM.md specifies badge colours
(Green/Amber/Grey/Gold/Navy) with no exact shade, and warns badge
backgrounds must still pass AA contrast against their text — a solid
fill in any of these hues fails that against either Stone or Navy text
(verified by calculation). A light tint of each token, mixed into Stone
via color-mix(), keeps every badge's background close to Stone's own
luminance regardless of hue, so Primary Navy text (already proven
accessible everywhere else on the site) stays comfortably AA-compliant
without a second contrast check per colour. The full-strength token
colour is used only as a decorative border accent, not as text or a
solid fill — a non-text UI element, held to WCAG's lower 3:1 bar, which
a light tint against Stone clears easily.
*/
.status-badge {
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--wp--preset--color--primary-navy);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	padding: 2px 10px;
}

.status-badge--success {
	background-color: color-mix(in srgb, var(--wp--preset--color--success-green) 15%, var(--wp--preset--color--stone));
	border-color: var(--wp--preset--color--success-green);
}

.status-badge--warning {
	background-color: color-mix(in srgb, var(--wp--preset--color--warning-amber) 15%, var(--wp--preset--color--stone));
	border-color: var(--wp--preset--color--warning-amber);
}

.status-badge--neutral {
	background-color: color-mix(in srgb, var(--wp--preset--color--warm-grey) 15%, var(--wp--preset--color--stone));
	border-color: var(--wp--preset--color--warm-grey);
}

.status-badge--gold {
	background-color: color-mix(in srgb, var(--wp--preset--color--heritage-gold) 15%, var(--wp--preset--color--stone));
	border-color: var(--wp--preset--color--heritage-gold);
}

.status-badge--navy {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-navy) 10%, var(--wp--preset--color--stone));
	border-color: var(--wp--preset--color--primary-navy);
}

.status-badge--featured {
	background-color: transparent;
	border-color: var(--wp--preset--color--heritage-gold);
	/* Sits on the navy page (transparent fill), so it uses the navy-safe
	   gold rather than the dark-on-light gold-text token. */
	color: var(--wp--preset--color--gold-on-navy);
}

/*
SPEC-024 "View Property": Secondary/Outline style (confirmed decision),
not solid Gold — keeps a grid of many cards visually calm rather than a
wall of gold buttons. core/read-more has no block-editor style variant
of its own, so this is styled directly, matching the outline treatment
already used for the Hero's Secondary CTA (SPEC-011).
*/
.wp-block-read-more {
	border: 1px solid var(--wp--preset--color--primary-navy);
	border-radius: 8px;
	color: var(--wp--preset--color--primary-navy);
	display: inline-block;
	font-family: inherit;
	margin-top: var(--wp--preset--spacing--xs);
	padding: 0.5em 1.5em;
	text-decoration: none;
}

.wp-block-read-more:hover {
	background-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--stone);
}

/*
SPEC-027 Property Page. Meta/stats/summary/agent styling reuses the
exact values already proven on the Archive card (SPEC-024) rather than
inventing new ones, even though the class names differ. The hero image
itself is now SPEC-028's Property Gallery (below), which uses the same
4:3 ratio SPEC-027 originally set for its single Featured Image.
*/
.property-page p:empty {
	display: none;
}

.property-page__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.property-page__price {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}

.property-page__location,
.property-page__stats {
	color: var(--wp--preset--color--stone-muted);
}

.property-page__meta {
	color: var(--wp--preset--color--stone-muted);
	font-size: var(--wp--preset--font-size--small);
}

.property-page__meta .wp-block-post-terms {
	display: inline;
}

.property-page__agent {
	color: var(--wp--preset--color--stone-muted);
	font-size: var(--wp--preset--font-size--small);
}

.property-page__description {
	margin-top: var(--wp--preset--spacing--md);
	max-width: 65ch;
}

.property-page__description h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--xs);
}

/* Property location map (SPEC-027 "Map") */
.property-map {
	margin-top: var(--wp--preset--spacing--lg);
}
.property-map__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--xs);
}
.property-map__place {
	color: #5b6774;
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.property-map__figure {
	margin: 0;
	max-width: 720px;
	border: 1px solid #e3ddce;
	border-radius: 10px;
	overflow: hidden;
}
.property-map__img {
	display: block;
	width: 100%;
	height: auto;
}
.property-map__note {
	font-size: var(--wp--preset--font-size--small);
	color: #8a94a0;
	margin: var(--wp--preset--spacing--xs) 0 0;
}

/*
SPEC-028 Property Gallery. Ratio matches SPEC-027's original single
Featured Image (4:3, 06_UI_DESIGN_SYSTEM.md's Image Ratio table).
Fullscreen is a same-page modal overlay (confirmed decision), not the
native Fullscreen API. The fade transition is scoped inside
prefers-reduced-motion's "no-preference" branch, matching the Hero's
existing entrance-fade discipline (SPEC-011).
*/
.property-gallery__primary {
	position: relative;
}

.property-gallery__primary-trigger {
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

.property-gallery__primary-trigger img {
	aspect-ratio: 4 / 3;
	display: block;
	/* The img carries width/height attributes for CLS (SPEC-060). Those act as
	   presentational hints, so height stays definite and `aspect-ratio` is
	   ignored — the box then scaled with the viewport (1.98:1 wide, 0.57:1 on
	   mobile). `height: auto` lets the 4:3 ratio apply, so the primary reserves
	   its ratio at every width as SPEC-060 requires. */
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.property-gallery__primary-trigger img {
		transition: opacity 150ms ease;
	}

	.property-gallery__primary-trigger img.is-fading {
		opacity: 0;
	}
}

.property-gallery__nav {
	align-items: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-navy) 60%, transparent);
	border: none;
	border-radius: 999px;
	color: var(--wp--preset--color--stone);
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
}

.property-gallery__nav svg {
	height: 20px;
	width: 20px;
}

.property-gallery__nav--prev {
	left: var(--wp--preset--spacing--xs);
}

.property-gallery__nav--next {
	right: var(--wp--preset--spacing--xs);
}

.property-gallery__thumbs {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	margin-top: var(--wp--preset--spacing--xs);
	overflow-x: auto;
}

.property-gallery__thumb {
	background: none;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	flex-shrink: 0;
	overflow: hidden;
	padding: 0;
}

.property-gallery__thumb img {
	aspect-ratio: 4 / 3;
	display: block;
	/* Same reason as the primary above: core emits width/height on the
	   thumbnail, which otherwise pinned these to 72x150 instead of 72x54. */
	height: auto;
	object-fit: cover;
	width: 72px;
}

.property-gallery__thumb.is-active {
	border-color: var(--wp--preset--color--heritage-gold);
}

.property-gallery__lightbox {
	align-items: center;
	background-color: var(--wp--preset--color--primary-navy);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 1000;
}

.property-gallery__lightbox[hidden] {
	display: none;
}

.property-gallery__lightbox-image {
	max-height: 90vh;
	max-width: 80vw;
	object-fit: contain;
}

.property-gallery__lightbox-close {
	background: none;
	border: none;
	color: var(--wp--preset--color--stone);
	cursor: pointer;
	padding: var(--wp--preset--spacing--xs);
	position: absolute;
	right: var(--wp--preset--spacing--sm);
	top: var(--wp--preset--spacing--sm);
}

.property-gallery__lightbox-close svg {
	height: 28px;
	width: 28px;
}

.property-gallery__lightbox-nav {
	align-items: center;
	background: none;
	border: none;
	color: var(--wp--preset--color--stone);
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: var(--wp--preset--spacing--xs);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.property-gallery__lightbox-nav svg {
	height: 36px;
	width: 36px;
}

.property-gallery__lightbox-nav--prev {
	left: var(--wp--preset--spacing--sm);
}

.property-gallery__lightbox-nav--next {
	right: var(--wp--preset--spacing--sm);
}

/*
SPEC-028 admin meta box (Property editor screen, not front-end).
*/
.tipco-gallery-images__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.tipco-gallery-images__item {
	position: relative;
}

.tipco-gallery-images__item img {
	display: block;
	height: 60px;
	object-fit: cover;
	width: 60px;
}

.tipco-gallery-images__remove {
	background: #000;
	border: none;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 2px 6px;
	position: absolute;
	right: 0;
	top: 0;
}

/*
SPEC-029 Property Documents "Downloads" section, front-end.
*/
.property-documents {
	margin-top: var(--wp--preset--spacing--sm);
}

.property-documents__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.property-documents__item a {
	align-items: center;
	color: var(--wp--preset--color--gold-on-navy);
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	text-decoration: underline;
}

.property-documents__icon {
	flex-shrink: 0;
	height: 20px;
	width: 20px;
}

.property-documents__meta {
	color: var(--wp--preset--color--stone-muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

/*
SPEC-029 admin meta box (Property editor screen, not front-end).
*/
.tipco-property-documents__list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.tipco-property-documents__item {
	align-items: center;
	display: flex;
	gap: 8px;
	padding: 4px 0;
}

.tipco-property-documents__remove {
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1;
}

/*
SPEC-030 Related Properties. Cards use the shared editorial `.eprop`
card (Direction A) — this section only needs its own heading/grid
wrapper, matching the Archive's grid pattern (minimumColumnWidth: 18rem)
without the Query Loop block machinery, since this grid's contents are a
hand-built WP_Query loop, not an editor-configured Query Loop.
*/
.related-properties {
	margin-top: var(--wp--preset--spacing--section);
}

.related-properties__grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	margin-top: var(--wp--preset--spacing--sm);
}

/*
SPEC-033 Town Template. `:has()` hides a whole heading+paragraph section
when its bound field is empty — the same graceful-degradation principle
already used everywhere else (e.g. `.property-page p:empty`), extended
to the heading too, since a lone heading over nothing looks broken.
`:has()` has full support across evergreen browsers; no fallback needed
given every other Browser Compatibility section in this project already
assumes modern-browser-only features (aspect-ratio, color-mix()).
*/
.location-section:has(p:empty) {
	display: none;
}

.location-practical-info:not(:has(.location-section p:not(:empty))) {
	display: none;
}

.location-properties__grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	margin-top: var(--wp--preset--spacing--sm);
}

/*
SPEC-040 Related Articles (`.location-articles__grid`) and SPEC-041
Buying Guides (`.buying-guides__grid`): the same hand-built-WP_Query
card grid as `.location-properties__grid` above. Grouped here — the
`.location-articles__grid` rule also backfills a gap from SPEC-040,
where the grid class was rendered but never given its CSS (it only ever
showed with a single card during that spec's verification, so it stacked
harmlessly; with 2–3 guides it needs the grid).
*/
.location-articles__grid,
.buying-guides__grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	margin-top: var(--wp--preset--spacing--sm);
}

/*
SPEC-042 FAQs: the native <details>/<summary> accordion. Kept minimal —
a divider between items and a clear, keyboard-focusable question row.
The disclosure behaviour itself is native (no JS).
*/
.faqs__list {
	margin-top: var(--wp--preset--spacing--md);
}

.faq-item {
	border-top: 1px solid var(--wp--preset--color--warm-grey);
	padding-block: var(--wp--preset--spacing--sm);
}

.faq-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--warm-grey);
}

.faq-item__question {
	cursor: pointer;
	font-weight: 400;
}

.faq-item__answer {
	margin-top: var(--wp--preset--spacing--sm);
}

/*
Cookie consent banner (LEG-001 requirement). Fixed to the bottom on the
Primary Navy so it reads over any page; Stone text; the "Accept" primary
button uses Heritage Gold. Hidden until the script shows it, and hidden
again once a choice is stored.
*/
.tipco-cc {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--stone);
	box-shadow: 0 -4px 20px rgb(0 0 0 / 25%);
}

.tipco-cc[hidden] {
	/* !important so a hidden banner can never be left visible by any
	   conflicting or stale cached rule (it is position:fixed over content). */
	display: none !important;
}

.tipco-cc__inner {
	max-width: var(--wp--style--global--content-size, 60rem);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.tipco-cc__text {
	flex: 1 1 22rem;
	font-size: var(--wp--preset--font-size--small);
}

.tipco-cc__text p {
	margin: 0 0 0.25rem;
}

.tipco-cc__title {
	font-weight: 400;
	font-family: var(--wp--preset--font-family--heading);
}

.tipco-cc__text a {
	color: var(--wp--preset--color--stone);
	text-decoration: underline;
}

.tipco-cc__prefs {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--small);
}

.tipco-cc__prefs[hidden] {
	display: none;
}

.tipco-cc__option {
	margin: 0;
}

.tipco-cc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tipco-cc__btn {
	padding: 0.55rem 1rem;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--stone);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.tipco-cc__btn[hidden] {
	display: none;
}

.tipco-cc__btn:hover {
	filter: brightness(1.1);
}

.tipco-cc__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--heritage-gold);
	outline-offset: 2px;
}

.tipco-cc__btn--primary {
	background: var(--wp--preset--color--heritage-gold);
	border-color: var(--wp--preset--color--heritage-gold);
	color: var(--wp--preset--color--primary-navy);
	font-weight: 400;
}

/* "Cookie settings" text button inside page content (e.g. Cookie Policy). */
.tipco-cookie-settings-link {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* =====================================================================
   Direction A — navy editorial system (SPEC-071 design refresh).
   Homepage sections + shared editorial utilities. The navy ground,
   stone text, light headings and buttons are set in theme.json; this
   file styles the bespoke sections that have no core-block equivalent.
   ===================================================================== */

:root {
	--tipco-hairline: #22303e;
}

/* Eyebrow label — small uppercase gold lead-in used across sections. */
.tipco-eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-weight: 600;
	color: var(--wp--preset--color--gold-on-navy);
	margin: 0 0 1.1rem;
}

/* ---- Hero (front page): left-aligned editorial over the drone video ---- */
.hero-section.wp-block-cover {
	align-items: flex-end;
	justify-content: flex-start;
}
.hero-section .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px) clamp(48px, 8vh, 104px);
	text-align: left;
}
.hero-section__title {
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 0.98;
	font-size: clamp(2.8rem, 6.4vw, 6rem);
	max-width: 15ch;
	margin: 0;
}
.hero-section__title strong { font-weight: 600; }
.hero-section .tipco-eyebrow { color: #E7C877; }
.hero-section__actions { margin-top: 2.1rem; gap: 14px 22px; }

/* ---- Inner-page hero (brand-tinted full-bleed, static) ---- */
.page-hero.wp-block-cover {
	align-items: flex-end;
	justify-content: flex-start;
	min-height: clamp(420px, 56vh, 620px) !important;
}
/* Navy duotone wash over the photo — heavier at the left and bottom where
   the title sits, so it reads as a designed, on-palette header rather than
   a raw photo with text on top. Overrides the flat Cover dim. */
.page-hero .wp-block-cover__background {
	background:
		linear-gradient(180deg, rgba(15, 29, 48, 0.10) 30%, rgba(15, 29, 48, 0.60)),
		linear-gradient(90deg, rgba(15, 29, 48, 0.82), rgba(15, 29, 48, 0.32) 62%, rgba(15, 29, 48, 0.20)) !important;
	opacity: 1 !important;
}
.page-hero .wp-block-cover__image-background {
	filter: saturate(0.82) contrast(1.03);
}
.page-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px) clamp(40px, 7vh, 88px);
	text-align: left;
}
.page-hero__eyebrow {
	font-size: 0.82rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: #E7C877;
	margin: 0 0 0.6rem;
}
.page-hero__title {
	color: var(--wp--preset--color--stone);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.0;
	font-size: clamp(2.6rem, 6vw, 5rem);
	margin: 0;
	max-width: 18ch;
}

/* ============ Content guide pages (light editorial) ============ */
.content-light {
	background: #F7F4ED;
	color: #1c2733;
	counter-reset: guidesec;
}
/* :not(.wp-element-button) - same specificity trap as the navy-section link rule: without it, solid gold buttons inside a light section inherit this link colour on their own gold background (1.33:1). */
.content-light a:not(.wp-element-button) { color: #B8873A; }

/* breadcrumbs sit on the light content now */
.content-light .tipco-breadcrumbs,
.content-light .tipco-breadcrumbs a { color: #6a7480; }
.content-light .tipco-breadcrumbs { max-width: 1240px; margin: 0 auto; padding: 22px clamp(24px,5vw,40px) 0; }

/* two-column shell */
.content-light .guide { max-width: 1240px; margin: 0 auto; padding: clamp(40px,6vh,72px) clamp(24px,5vw,40px); }
.content-light .guide__cols {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(36px, 6vw, 80px);
	align-items: start;
}
.content-light .guide__index { position: sticky; top: 96px; align-self: start; }
.content-light .guide__index-label {
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: #8a94a0; font-weight: 700; margin: 0 0 14px;
}
.content-light .guide__index-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid #e3ddce; }
.content-light .guide__index-list li { margin: 0; }
.content-light .guide__index-list a {
	display: block; padding: 8px 0 8px 18px; margin-left: -1px;
	border-left: 2px solid transparent; font-size: 14px; color: #5b6774; text-decoration: none;
}
.content-light .guide__index-list a:hover { color: var(--wp--preset--color--primary-navy); border-left-color: #c9a24a; }

/* content column */
.content-light .guide__main { max-width: 720px; }
.content-light .guide__main .lead {
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); line-height: 1.5; font-weight: 300;
	letter-spacing: -0.01em; color: var(--wp--preset--color--primary-navy); margin: 0 0 14px;
}
.content-light .guide-sec {
	border-top: 1px solid #e3ddce;
	padding-top: clamp(34px, 5vh, 54px);
	margin-top: clamp(34px, 5vh, 54px);
	scroll-margin-top: 96px;
}
.content-light .guide-sec::before {
	counter-increment: guidesec;
	content: counter(guidesec, decimal-leading-zero);
	display: block; font-size: 13px; letter-spacing: 0.14em; color: #B8873A; font-weight: 700; margin-bottom: 8px;
}
.content-light .guide-sec--plain::before { content: none; counter-increment: none; }
.content-light .guide-sec__title {
	text-align: left; color: var(--wp--preset--color--primary-navy);
	font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 400; letter-spacing: -0.015em; margin: 0 0 18px;
}
.content-light .guide-sec p { text-align: left; font-size: 1.05rem; line-height: 1.78; color: #33404e; margin: 0 0 15px; }
.content-light .guide-sec p a { color: #B8873A; text-decoration: underline; text-underline-offset: 3px; }
.content-light .guide-disclaimer { color: #8a94a0; margin-top: 40px; }

/* dynamic blocks (FAQ accordion) inside a light guide page */
.content-light .faqs h2 { color: var(--wp--preset--color--primary-navy); text-align: left; }
.content-light .faq-item__question { color: var(--wp--preset--color--primary-navy); }
.content-light .faq-item__answer { color: #33404e; }

/* full-bleed navy pull-quote band */
.guide-quote.wp-block-cover { align-items: center; justify-content: flex-start; min-height: 42vh; }
.guide-quote .wp-block-cover__inner-container {
	width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px,5vw,40px); text-align: left;
}
.guide-quote__eyebrow {
	font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #E7C877; font-weight: 700; margin: 0 0 12px;
}
.guide-quote__q {
	color: #fff; max-width: 820px; font-weight: 300; line-height: 1.4; letter-spacing: -0.01em;
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem); margin: 0;
}

@media (max-width: 860px) {
	.content-light .guide__cols { grid-template-columns: 1fr; gap: 0; }
	.content-light .guide__index { display: none; }
}

/* coming-soon / notice block (light content pages) */
.content-light .coming-soon { max-width: 640px; margin: 0 auto; text-align: center; }
.content-light .coming-soon__eyebrow {
	color: #B8873A; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; font-size: 0.8rem; margin: 0 0 14px;
}
.content-light .coming-soon h2 {
	color: var(--wp--preset--color--primary-navy); font-weight: 400; letter-spacing: -0.015em;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: 0 0 18px;
}
.content-light .coming-soon p { color: #33404e; font-size: 1.1rem; line-height: 1.75; margin: 0 0 28px; }

/* About page (light editorial): reading column, mission band, values grid */
.content-light .about-reading { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vh, 80px) clamp(24px, 5vw, 40px); }
.content-light .about-reading p { font-size: 1.05rem; line-height: 1.78; color: #33404e; margin: 0 0 15px; }
.content-light .about-reading p.lead { color: var(--wp--preset--color--primary-navy); }
.content-light .about-reading p a { color: #B8873A; text-decoration: underline; text-underline-offset: 3px; }
.content-light .about-values { max-width: 1140px; margin: 0 auto; padding: clamp(48px, 7vh, 80px) clamp(24px, 5vw, 40px); }
.content-light .about-values h2 {
	text-align: center; color: var(--wp--preset--color--primary-navy); font-weight: 400;
	letter-spacing: -0.015em; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); margin: 0 0 40px;
}
.content-light .about-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 44px; }
.content-light .about-values__grid h3 { color: var(--wp--preset--color--primary-navy); font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; }
.content-light .about-values__grid p { color: #33404e; line-height: 1.7; margin: 0; }
@media (max-width: 820px) { .content-light .about-values__grid { grid-template-columns: 1fr 1fr; } }
/* About — Meet the Team (partner profiles). */
.content-light .about-team { max-width: 1140px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 40px) clamp(24px, 4vh, 40px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 64px; }
.content-light .about-team__person { margin: 0; }
.content-light .about-team__photo { margin: 0 0 22px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--stone-muted); }
.content-light .about-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-light .about-team__role { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--heritage-gold-text); margin: 0 0 6px; }
.content-light .about-team h3 { color: var(--wp--preset--color--primary-navy); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.01em; margin: 0 0 14px; }
.content-light .about-team p:not(.about-team__role) { font-size: 1.02rem; line-height: 1.75; color: #33404e; margin: 0 0 14px; }
@media (max-width: 720px) { .content-light .about-team { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 520px) { .content-light .about-values__grid { grid-template-columns: 1fr; } }

/* ---- Light-theme rollout: keep navy/dark sections legible ---- */
/* The site base is light; any block that opts into a navy background needs
   its text and headings switched back to Stone so they stay readable. */
.has-primary-navy-background-color,
.has-navy-panel-background-color,
.has-navy-deep-background-color {
	color: var(--wp--preset--color--stone);
}
.has-primary-navy-background-color :is(h1, h2, h3, h4, h5, h6),
.has-navy-panel-background-color :is(h1, h2, h3, h4, h5, h6),
.has-navy-deep-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--stone);
}
/*
Buttons are excluded: this rule's specificity (0,2,1) beats theme.json's
:root :where(.wp-element-button, .wp-block-button__link) (0,1,0), so any
solid Heritage Gold button placed inside a navy section was inheriting
Gold-on-Navy text on its own gold background (~1.1:1 - invisible). Links
in dark sections still get the gold treatment; buttons keep the Primary
Navy label theme.json specifies.
*/
.has-primary-navy-background-color a:not(.wp-element-button),
.has-navy-panel-background-color a:not(.wp-element-button),
.has-navy-deep-background-color a:not(.wp-element-button) {
	color: var(--wp--preset--color--gold-on-navy);
}

/* ---- Statement ("thesis") ---- */
.tipco-statement { max-width: var(--wp--style--global--content-size); }
.tipco-statement__big {
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.08;
	font-size: clamp(1.7rem, 3.4vw, 3rem);
	max-width: 24ch;
	margin: 0.3rem 0 0;
}
.tipco-statement__big strong { font-weight: 600; }

/* ---- Credibility facts strip ---- */
.tipco-facts {
	border-top: 1px solid var(--tipco-hairline);
	border-bottom: 1px solid var(--tipco-hairline);
}
.tipco-facts__grid { margin: 0; gap: 0; }
.tipco-facts__grid .wp-block-column {
	padding: clamp(36px, 5vw, 60px) clamp(28px, 3vw, 48px) clamp(36px, 5vw, 60px) 0;
}
.tipco-facts__grid .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--tipco-hairline);
	padding-left: clamp(28px, 3vw, 48px);
}
.tipco-fact__n {
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}
.tipco-fact__l {
	margin: 0.7rem 0 0;
	color: var(--wp--preset--color--stone-muted);
	font-size: 0.98rem;
	line-height: 1.5;
}
@media (max-width: 781px) {
	.tipco-facts__grid .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--tipco-hairline);
		padding-left: 0;
	}
}

/* ---- Editorial index list (towns + services) ---- */
.tipco-towns { border-bottom: 1px solid var(--tipco-hairline); }
.tipco-towns__h {
	font-weight: 300;
	letter-spacing: -0.02em;
	font-size: clamp(1.7rem, 3.4vw, 2.8rem);
	margin: 0 0 1.6rem;
	max-width: 22ch;
}
.tipco-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
}
.tipco-index a {
	text-decoration: none;
	color: var(--wp--preset--color--primary-navy);
	font-size: clamp(1.05rem, 1.8vw, 1.5rem);
	font-weight: 300;
	letter-spacing: -0.01em;
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
	transition: border-color 0.2s ease;
}
.tipco-index a:hover { border-color: var(--wp--preset--color--heritage-gold); }
.tipco-index__soon {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heritage-gold-text);
	vertical-align: middle;
	margin-left: 6px;
}
.tipco-towns__note {
	color: var(--wp--preset--color--stone-muted);
	font-size: 0.9rem;
	margin: 1.8rem 0 0;
}

/* ---- Property showcase (live Query Loop, editorial cards) ---- */
.tipco-props__head { align-items: flex-end; margin-bottom: 2.6rem; }
.tipco-props__head h2 { margin: 0.5rem 0 0; }
.tipco-props__all { margin: 0; }
.tipco-props__all a {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--heritage-gold);
	padding-bottom: 4px;
}
.eprop { gap: 0; }
.eprop .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.eprop .wp-block-post-featured-image a,
.eprop .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eprop .wp-block-post-featured-image img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eprop:hover .wp-block-post-featured-image img { transform: scale(1.045); }
.eprop__row { display: flex; justify-content: space-between; margin-top: 1rem; align-items: baseline; gap: 16px; }
.eprop__id { flex: 1; }
.eprop__ref {
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-on-navy);
	font-weight: 600;
	margin: 0;
}
.eprop__title {
	margin: 0.3rem 0 0;
	font-size: clamp(1.25rem, 1.8vw, 1.55rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.eprop__title a { color: var(--wp--preset--color--primary-navy); text-decoration: none; }
.eprop:hover .eprop__title a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wp--preset--color--heritage-gold);
}
.eprop__meta,
.eprop__stats {
	color: var(--wp--preset--color--stone-muted);
	font-size: 0.9rem;
	margin: 0.4rem 0 0;
}
.eprop__price {
	font-size: 1.1rem;
	font-weight: 500;
	white-space: nowrap;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ---- Buying-in-Italy guidance ---- */
.tipco-buying__lead {
	max-width: 60ch;
	color: var(--wp--preset--color--stone-muted);
	font-size: 1.0625rem;
	margin: 0 0 2rem;
}

/* ---- Closing CTA band ---- */
.tipco-cta__title { margin: 0; max-width: 16ch; }
.tipco-cta__actions { margin-top: 2.2rem; align-items: center; gap: 16px 34px; }
.tipco-cta__contact { margin: 0; color: var(--wp--preset--color--stone-muted); }
.tipco-cta__contact a {
	color: var(--wp--preset--color--stone);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--heritage-gold);
	padding-bottom: 2px;
}

/* Editorial card status badges (archive) sit just under the image. */
.eprop__badges { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eprop__badges:empty { display: none; }

/* ---- Header "Services" dropdown (navy) ---- */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--navy-deep);
	border: 1px solid var(--tipco-hairline);
	min-width: 15rem;
	padding: 0.4rem 0;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--stone);
	padding: 0.5rem 1.1rem;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold-on-navy);
}

/* The header lockup + nav need the wide measure, not the narrow reading
   content-size, so the streamlined nav sits on one line on desktop. */
.site-header > .wp-block-group {
	max-width: var(--wp--style--global--wide-size);
}

/* The layout content-size is wide for editorial sections, so keep long-form
   reading text (plain prose on content/legal/property pages) to a
   comfortable measure. Zero-specificity :where() so any classed component
   (hero, statement, cards) keeps its own intended width. */
body:not(.home) main .is-layout-constrained > p,
body:not(.home) main .is-layout-constrained > ul,
body:not(.home) main .is-layout-constrained > ol,
.wp-block-post-content p,
.wp-block-post-content li {
	max-width: 68ch;
}

/* Left-align content inside the main-constrained editorial sections. WP's
   constrained layout centres any child narrower than the column (its
   .wp-container-* rule ties with a single class and wins on order), which
   would centre the statement/headings. This higher-specificity rule keeps
   the editorial left edge consistent with the hero and cards. */
.tipco-statement.is-layout-constrained > *,
.tipco-facts.is-layout-constrained > *,
.tipco-towns.is-layout-constrained > *,
.tipco-services.is-layout-constrained > *,
.tipco-buying.is-layout-constrained > * {
	/* WP's constrained layout centres children with margin: auto !important,
	   so left-aligning the editorial content requires !important too. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* =====================================================================
   Locations — archive cards + single town-page sections (Direction A)
   ===================================================================== */
.tipco-archive-intro {
	color: var(--wp--preset--color--stone-muted);
	max-width: 60ch;
	margin-inline: auto;
	margin-top: 0.6rem;
}

/* Location archive card (image-forward, matching the property card). */
.eloc { gap: 0; }
.eloc .wp-block-post-featured-image { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--tipco-hairline); }
.eloc .wp-block-post-featured-image a,
.eloc .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eloc .wp-block-post-featured-image img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.eloc:hover .wp-block-post-featured-image img { transform: scale(1.045); }
.eloc__title { margin: 1rem 0 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 400; letter-spacing: -0.01em; }
.eloc__title a { color: var(--wp--preset--color--primary-navy); text-decoration: none; }
.eloc:hover .eloc__title a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--wp--preset--color--heritage-gold); }
.eloc__summary { color: var(--wp--preset--color--stone-muted); margin: 0.5rem 0 0; }