/**
 * PropOffice Designs — Property Contact.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_contact] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting
 * (see PropOffice\Designs\PropertyContact\PropertyContactAssets).
 *
 * PALETTE. Every colour reads a PropOffice design token with the token's own
 * value as the fallback: `var(--po-ds-color-text)`. Inside the workspace the
 * component inherits the live design system; on a public theme page — where
 * those tokens are not defined — it renders in the identical palette. One rule,
 * both contexts, no drift. The component's own decisions (the navy of a
 * Resource card, the red of the send button) are declared once at the top as
 * component tokens, so a theme can retint the whole thing by setting four
 * values rather than overriding forty selectors.
 *
 * ISOLATION. Every selector is namespaced under .po-contact / .po-agents /
 * .po-agent / .po-enquiry / .po-actions / .po-share, so the component can never
 * restyle a theme, and it resets the handful of properties themes most often
 * impose on lists, headings, inputs and buttons.
 *
 * LAYOUT. The arrangement is intrinsic — container-relative, not viewport
 * media queries — because this component is routinely placed in a sidebar a
 * third of the page wide, where "desktop means three columns" is wrong.
 */

.po-contact {
	font-family: var(--po-ds-font-family);
	/* Surface and structure. */
	--po-contact-surface: var(--po-ds-color-surface);
	--po-contact-border: var(--po-ds-color-border);
	--po-contact-radius: 10px;
	--po-contact-ink: var(--po-ds-color-text);
	--po-contact-muted: var(--po-ds-color-muted);
	--po-contact-gap: 20px;

	/* The Resource card. Deep navy with white type — the one place in the
	   component that inverts. */
	--po-contact-navy: var(--po-ds-color-text);
	--po-contact-navy-ink: #ffffff;
	--po-contact-navy-muted: rgba(255, 255, 255, 0.82);

	/* The channel buttons carry their own identities: a red envelope and a
	   green WhatsApp are how those two are recognised at 28px. */
	--po-contact-primary: var(--po-bad, #d81f34);
	--po-contact-whatsapp: #25d366;
	--po-contact-facebook: #1877f2;
	--po-contact-x: #000000;

	/* Focus. Declared once so every control in the component agrees. */
	--po-contact-focus: var(--po-ds-color-primary);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--po-contact-gap);
	padding: 20px;
	border: 1px solid var(--po-contact-border);
	border-radius: var(--po-contact-radius);
	background: var(--po-contact-surface);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	color: var(--po-contact-ink);
	font-size: 14px;
	line-height: 1.45;
}

.po-contact *,
.po-contact *::before,
.po-contact *::after {
	box-sizing: inherit;
}

/* Themes routinely put bullets, margins and padding on lists inside content.
   Every list in this component is a grouping device, not prose. */
.po-contact ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.po-contact p {
	margin: 0;
}

.po-contact h3 {
	margin: 0;
	color: inherit;
}

/* One visible focus treatment for every control, including the ones a theme
   would otherwise strip. Never `outline: none` — a keyboard user who cannot see
   where they are cannot use the form at all. */
.po-contact a:focus-visible,
.po-contact button:focus-visible,
.po-contact input:focus-visible,
.po-contact textarea:focus-visible {
	outline: 2px solid var(--po-contact-focus);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────── sections */

/* The two reorderable sections are ordinary siblings in document order, which
   is what makes "Form first" and "Agents first" one implementation. The rules
   that would make them side by side on a wide container belong here later;
   nothing about this markup has to change for that. */
.po-contact__section {
	display: block;
}

.po-contact__section + .po-contact__section {
	padding-top: var(--po-contact-gap);
	border-top: 1px solid var(--po-contact-border);
}

/* ────────────────────────────────────────────────────────── agents (shared) */

.po-agents__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.po-agents__item {
	min-width: 0;
}

/* Grid. The column count arrives as an inline custom property from the
   renderer; the track floor is what actually collapses it, so a two-column
   request becomes one column inside a narrow sidebar without a media query
   knowing anything about the viewport. */
.po-agents__items--grid {
	--po-agents-columns: 2;

	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(220px, (100% - ((var(--po-agents-columns) - 1) * 12px)) / var(--po-agents-columns)), 1fr)
	);
	gap: 12px;
}

/* ───────────────────────────────────────────────────────────── agent card */

.po-agent {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 14px;
	border-radius: 8px;
	background: var(--po-contact-navy);
	color: var(--po-contact-navy-ink);
}

.po-agent__profile {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.po-agent__photo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 64px;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
}

.po-agent__portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Themes love a global `img { border-radius }` and a max-width that is not
	   100%; the portrait's frame is this element's, not the image's. */
	border-radius: 0;
	display: block;
}

.po-agent__initials {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--po-contact-navy-ink);
}

.po-agent__identity {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.po-agent__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--po-contact-navy-ink);
}

.po-agent__role,
.po-agent__agency {
	font-size: 12px;
	line-height: 1.35;
	color: var(--po-contact-navy-muted);
}

.po-agent__registration {
	font-size: 11px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.66);
	/* A licence number is long and has no natural break; letting it overflow
	   the card is not an option, and truncating it hides the part that
	   identifies the registration. */
	overflow-wrap: anywhere;
}

.po-agent__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: auto;
}

.po-agent__channels {
	display: flex;
	gap: 8px;
	align-items: center;
}

.po-agent__channel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--po-contact-primary);
	color: #ffffff;
	text-decoration: none;
	transition: transform 140ms ease, filter 140ms ease;
}

.po-agent__channel--whatsapp {
	background: var(--po-contact-whatsapp);
}

.po-agent__channel:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.po-agent__channel-icon {
	width: 15px;
	height: 15px;
}

.po-agent__links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	margin-left: auto;
	text-align: right;
}

.po-agent__link {
	font-size: 12px;
	line-height: 1.4;
	color: var(--po-contact-navy-muted);
	text-decoration: none;
}

.po-agent__link:hover {
	color: var(--po-contact-navy-ink);
	text-decoration: underline;
}

/* ───────────────────────────────────────────────────────────────── slider */

.po-agents__slider {
	--po-agents-slides: 1;

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 10px;
}

/* A NATIVE scroll container, deliberately: it is keyboard-scrollable, it
   follows focus when a card inside it is tabbed to, and it gets the platform's
   own momentum on touch. The buttons move it; they are not the only way. */
.po-agents__items--slider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - ((var(--po-agents-slides) - 1) * 12px)) / var(--po-agents-slides)
	);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* The scrollbar is chrome the design does not want, but the SCROLLING is
	   the accessible behaviour and stays. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.po-agents__items--slider::-webkit-scrollbar {
	display: none;
}

.po-agents__items--slider > .po-agents__item {
	scroll-snap-align: start;
}

.po-agents__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--po-contact-border);
	border-radius: 50%;
	background: var(--po-contact-surface);
	color: var(--po-contact-ink);
	cursor: pointer;
	transition: background-color 140ms ease;
}

.po-agents__control:hover {
	background: var(--po-ds-color-background);
}

/* Disabled rather than hidden: a control that disappears at the end of a
   carousel moves everything beside it, and the layout shifting under a
   pointer is worse than a dimmed button. */
.po-agents__control[disabled] {
	opacity: 0.4;
	cursor: default;
}

.po-agents__control-icon {
	width: 14px;
	height: 14px;
}

.po-agents__dots {
	grid-column: 1 / -1;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.po-agents__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--po-contact-border);
	cursor: pointer;
}

.po-agents__dot[aria-current="true"] {
	background: var(--po-contact-navy);
}

/* The dot's hit area is 8px, which is far below a usable touch target. The
   pseudo-element grows the target without growing the dot. */
.po-agents__dot::after {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: -8px;
}

/* ─────────────────────────────────────────────────────────── enquiry form */

.po-enquiry {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-enquiry__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-contact .po-enquiry__heading {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--po-contact-ink);
	font-size: 15px;
	font-weight: 600;
	align-self: flex-start;
}

.po-enquiry__notice {
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 13px;
}

.po-enquiry__notice--success {
	border-color: #bbf7d0;
	background: #f0fdf4;
	color: #14532d;
}

.po-enquiry__notice--error {
	border-color: #fecaca;
	background: #fef2f2;
	color: #7f1d1d;
}

/* The honeypot. Removed from layout and from sight, but NOT with
   `display: none` alone — some bots skip hidden fields, and the point is that
   they do not. It is also aria-hidden and untabbable in the markup, so no
   assistive-technology user can reach it. */
.po-enquiry__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.po-enquiry__fields {
	display: grid;

	/* Two across when there is room for two, one when there is not — the
	   name/surname pair of the reference, without a viewport rule.

	   The track floor is HALF THE CONTAINER, not a fixed 160px, and that is the
	   whole trick. A fixed floor lets auto-fit open a third track as soon as the
	   container passes ~500px, and since every other field spans the full row,
	   the third track is always empty — the name pair ends up squeezed into
	   two-thirds of the width with dead space beside it. A floor of half the
	   container can never fit three, so the grid is 2 or 1 and nothing else.

	   The 160px is still there as the lower bound: below roughly 330px, half the
	   container is narrower than a usable field, so the pair stacks. */
	grid-template-columns: repeat(auto-fit, minmax(max(160px, (100% - 10px) / 2), 1fr));
	gap: 10px;
}

/* The fields the reference gives a full row to. */
.po-enquiry__field--phone,
.po-enquiry__field--email,
.po-enquiry__field--message {
	grid-column: 1 / -1;
}

.po-enquiry__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--po-contact-border);
	border-radius: 6px;
	background: var(--po-contact-surface);
	color: var(--po-contact-ink);
	font-family: var(--po-ds-font-family);
	font-size: 13px;
	line-height: 1.4;
}

.po-enquiry__input::placeholder {
	/* Dark enough to read. A placeholder that fails contrast is invisible to
	   the people most likely to be relying on it. */
	color: var(--po-contact-muted);
	opacity: 1;
}

.po-enquiry__input--textarea {
	min-height: 76px;
	resize: vertical;
}

.po-enquiry__field.is-invalid .po-enquiry__input {
	border-color: var(--po-contact-primary);
}

.po-enquiry__error {
	margin-top: 4px;
	font-size: 12px;
	color: var(--po-contact-primary);
}

/* `hidden` is an attribute a `display` rule can silently defeat. */
.po-enquiry__error[hidden] {
	display: none;
}

.po-enquiry__optins {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.po-enquiry__optin {
	display: flex;
	gap: 8px;
	align-items: center;
}

.po-enquiry__checkbox {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--po-contact-primary);
	flex: 0 0 auto;
}

.po-enquiry__optin-label {
	font-size: 13px;
	color: var(--po-contact-ink);
	cursor: pointer;
}

.po-enquiry__legal {
	font-size: 11px;
	line-height: 1.5;
	color: var(--po-contact-muted);
}

.po-enquiry__legal-link {
	color: var(--po-contact-primary);
	text-decoration: none;
}

.po-enquiry__legal-link:hover {
	text-decoration: underline;
}

.po-enquiry__actions {
	display: flex;
	justify-content: flex-end;
}

.po-enquiry__submit {
	min-width: 104px;
	padding: 10px 22px;
	border: 0;
	border-radius: 4px;
	background: var(--po-contact-primary);
	color: #ffffff;
	font-family: var(--po-ds-font-family);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 140ms ease;
}

.po-enquiry__submit:hover {
	filter: brightness(1.06);
}

.po-enquiry__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ──────────────────────────────────────────────────────── property actions */

.po-actions__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.po-actions__action {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--po-contact-ink);
	font-family: var(--po-ds-font-family);
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.po-actions__action:hover .po-actions__label {
	text-decoration: underline;
}

.po-actions__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 8px;
	border: 1px solid var(--po-contact-border);
	border-radius: 50%;
	color: var(--po-contact-primary);
}

/* `hidden` on the print button until the script that gives it meaning runs. */
.po-actions__action[hidden] {
	display: none;
}

/* ────────────────────────────────────────────────────────────────── share */

.po-share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
}

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-share__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-contact .po-share__heading {
	font-size: 13px;
	font-weight: 600;
}

.po-share__items {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

.po-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--po-contact-primary);
	color: #ffffff;
	text-decoration: none;
	transition: transform 140ms ease, filter 140ms ease;
}

.po-share__link--whatsapp {
	background: var(--po-contact-whatsapp);
}

.po-share__link--facebook {
	background: var(--po-contact-facebook);
}

.po-share__link--x {
	background: var(--po-contact-x);
}

.po-share__link:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.po-share__icon {
	width: 16px;
	height: 16px;
}

/* ──────────────────────────────────────────────────── accessible-only text */

.po-contact .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────── responsive */

/* Narrow containers only. The type sizes and control sizes do NOT shrink: the
   reference is drawn at roughly a phone's width already, and the contact
   controls are at the smallest size that stays a usable touch target. */
@media (max-width: 480px) {
	.po-contact {
		padding: 16px;
		--po-contact-gap: 16px;
	}

	/* The links stop competing with the channel buttons for one row. */
	.po-agent__footer {
		align-items: flex-start;
	}

	.po-share {
		justify-content: flex-start;
	}

	.po-share__items {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-agent__channel,
	.po-share__link,
	.po-agents__control,
	.po-enquiry__submit {
		transition: none;
	}

	.po-agent__channel:hover,
	.po-share__link:hover {
		transform: none;
	}

	/* The slider still pages — the buttons work and the cards change. It simply
	   does not glide to get there. The script asks matchMedia the same question
	   and jumps instead, so the two agree. */
	.po-agents__items--slider {
		scroll-behavior: auto;
	}
}