/*
 * afd-leads.css — the project expert card, the WhatsApp button, and the
 * field/chip layout used by the 2026-10 Contact Form 7 templates (.afd-lead).
 *
 * Loaded by inc/afd-leads.php: wherever CF7 loads its own stylesheet, on
 * every property page, and late (footer) wherever [afd_expert] /
 * [afd_wa_button] print. Colours are the kit tokens with their own values
 * as fallbacks, so the file renders the same with or without afd-kit.css.
 *
 * Selectors that style a LINK carry a `body` prefix: Elementor's kit prints
 * `.elementor-kit-3623 a` at (0,1,1) and the order of that file is not ours
 * to control (see project memory «Elementor cascade defeat»).
 *
 * Contrast (WCAG 2.x, computed): white on #12803F 5.0:1 · #5A6472 on white
 * 6.0:1 · #054777 on white 9.7:1.
 */

.afda-expert,
.afdl-box {
	--afdl-navy: var(--afd-navy, #054777);
	--afdl-ink: var(--afd-ink-900, #333333);
	--afdl-ink-2: var(--afd-ink-600, #5A6472);
	--afdl-line: rgba(5, 71, 119, .14);
	--afdl-wa: var(--afd-wa, #12803F);
	--afdl-wa-hover: var(--afd-wa-hover, #0E6B34);
	--afdl-gold: var(--afd-gold, #A48A61);
}

/* ---- expert: shared --------------------------------------------------- */
.afda-expert__img {
	display: block;
	flex: none;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	object-fit: cover;
	/* Portraits are taller than wide: keep the face, not the chest. */
	object-position: 50% 22%;
	background: #EEF2F6;
}
.afda-expert__img--letter {
	display: grid;
	place-items: center;
	background: var(--afdl-navy);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
}
.afda-expert__txt {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	line-height: 1.6;
}
.afda-expert__label {
	color: var(--afdl-ink-2);
	font-size: 12px;
}
body a.afda-expert__name,
.afda-expert__name {
	color: var(--afdl-navy);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
}
body a.afda-expert__name:is(:hover, :focus-visible) {
	color: var(--afdl-navy);
	text-decoration: underline;
	text-decoration-color: var(--afdl-gold);
}
.afda-expert__role {
	color: var(--afdl-ink-2);
	font-size: 12.5px;
}

/* ---- expert: card (property sidebar, above the form) -------------------- */
.afda-expert--card {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px;
	border: 1px solid var(--afdl-line);
	border-radius: var(--afd-r-sm, 12px);
	background: #FFFFFF;
}
.afda-expert__head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.afda-expert__media {
	flex: none;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--afdl-gold);
}

/* ---- expert: mini (loop cards) ------------------------------------------ */
body a.afda-expert__link,
.afda-expert__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-inline-size: 100%;
	color: inherit;
	text-decoration: none;
}
.afda-expert--mini .afda-expert__img {
	inline-size: 36px;
	block-size: 36px;
}
.afda-expert--mini .afda-expert__img--letter {
	font-size: 15px;
}
.afda-expert--mini .afda-expert__label {
	font-size: 11px;
}
.afda-expert--mini .afda-expert__name {
	overflow: hidden;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---- WhatsApp button ----------------------------------------------------- */
body a.afdl-wa,
.afdl-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 46px;
	padding: 10px 16px;
	border-radius: var(--afd-r-pill, 999px);
	background: var(--afdl-wa, #12803F);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 14.5px;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
body a.afdl-wa:is(:hover, :focus-visible) {
	background: var(--afdl-wa-hover, #0E6B34);
	color: #FFFFFF;
}
body a.afdl-wa:focus-visible {
	outline: 3px solid var(--afdl-gold, #A48A61);
	outline-offset: 2px;
}
.afdl-wa .fa-whatsapp {
	font-size: 1.25em;
}

/* ---- fallback box when the project has no expert ------------------------ */
.afdl-box {
	margin: 0 0 16px;
}
.afdl-box .afdl-box__or {
	margin: 10px 0 0;
	color: var(--afdl-ink-2);
	font-size: 13px;
	text-align: center;
}

/* ---- CF7 templates (.afd-lead) ------------------------------------------- *
 * The same form markup lands in three kinds of container (measured on the
 * live site 2026-10-08):
 *   1. .afdx-form       ERE pages (property, developer) — white card, styled
 *                       by ere-single.css. The reference look.
 *   2. .afd-form        kit cards/sections, often NAVY (.afd-card--navy,
 *                       .afd-sec--navy on /property/): the kit turns label
 *                       text white there.
 *   3. legacy .DK       Elementor archive sidebars and /contact/: the parent
 *                       theme's 2021 rules — grey 40px boxes, a 22%-wide
 *                       submit, white on #C3A157 (2.45:1), label clipped.
 * So nothing below may assume a white background: text colours are
 * inherited, chips are transparent, and only the legacy container gets
 * field and button styles (block 3).
 * ------------------------------------------------------------------------ */
.afd-lead {
	--afdl-navy: var(--afd-navy, #054777);
	--afdl-line: rgba(5, 71, 119, .28);
}
.afd-lead .afd-lead__name {
	display: block;
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 13.5px;
}
.afd-lead .afd-lead__req {
	margin-inline-start: 3px;
	color: #B3261E;
}
/* Hints follow the container's text colour: dark on white, light on navy. */
.afd-lead .afd-lead__opt {
	margin-inline-start: 4px;
	color: inherit;
	opacity: .8;
	font-weight: 400;
	font-size: 12px;
}
.afd-lead fieldset.afd-lead__group {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}
.afd-lead fieldset.afd-lead__group > legend {
	float: none;
	inline-size: auto;
	margin: 0 0 6px;
	padding: 0;
	color: inherit;
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.6;
}
/* Radio/checkbox lists as chips. Transparent, so they sit on any background;
   the native control stays visible (no :has() dependency for the checked
   state); :has() only adds the fill. */
.afd-lead .wpcf7-radio,
.afd-lead .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.afd-lead .wpcf7-list-item {
	margin: 0;
}
.afd-lead .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--afdl-line);
	border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
	border-radius: 999px;
	background: transparent;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.6;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}
.afd-lead .wpcf7-list-item input {
	margin: 0;
	accent-color: var(--afdl-navy);
}
.afd-lead .wpcf7-list-item label:has(input:checked) {
	border-color: currentColor;
	background: rgba(5, 71, 119, .07);
	background: color-mix(in srgb, currentColor 10%, transparent);
}
.afd-lead .wpcf7-list-item label:has(input:focus-visible) {
	outline: 2px solid var(--afd-gold, #A48A61);
	outline-offset: 2px;
}
.afd-lead .afd-lead__note {
	margin: 6px 0 0;
	color: inherit;
	opacity: .8;
	font-size: 12.5px;
	line-height: 1.8;
}
/* Phone numbers are typed left-to-right even on an RTL page. The placeholder
   is a bare number for the same reason: Persian words inside an LTR field
   re-order into «4567 123 912 98+ …». The hint lives in the label. */
.afd-lead input[type="tel"] {
	direction: ltr;
	text-align: right;
}

/* ---- 2. dark containers (kit navy card / section) ------------------------ *
 * #FFB4AB on #054777 5.6:1 (the default red is 2.2:1 there). */
:is(.afd-card--navy, .afd-sec--navy) .afd-lead .afd-lead__req {
	color: #FFB4AB;
}
:is(.afd-card--navy, .afd-sec--navy) .afd-lead .wpcf7-list-item input {
	accent-color: #FFFFFF;
}

/* ---- 3. legacy .DK containers only --------------------------------------- *
 * Matches the ERE-page form (ere-single.css §12) so every form on the site
 * reads the same. :not(:is(.afd-form, .afdx-form) *) keeps these rules out of
 * the two containers that already style their fields; the extra weight
 * (0,6,1) beats the parent theme's `.DK .wpcf7-form-control` (0,2,0),
 * `.single-property-element .DK …` (0,3,0) and `.DK-submit .wpcf7-submit`
 * (0,2,0, plus a 40% width in a media query). */
body .afd-lead :is(.DK, .DK-text) .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-checkbox):not(:is(.afd-form, .afdx-form) *) {
	box-sizing: border-box;
	inline-size: 100%;
	width: 100%;
	block-size: auto;
	height: auto;
	min-block-size: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(5, 71, 119, .24);
	border-radius: var(--afd-r-sm, 12px);
	background: #FFFFFF;
	color: #333333;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.8;
	transition: border-color .2s ease, box-shadow .2s ease;
}
/* CF7 renders <label><span>name</span> <input></label>; the legacy pages leave
   that label inline-block, so each field was only as wide as its own text
   (measured on /contact/: 333 / 281 / 325 px in a 590 px form). */
body .afd-lead :is(.DK, .DK-text) label:not(:is(.afd-form, .afdx-form) *),
body .afd-lead :is(.DK, .DK-text) .wpcf7-form-control-wrap:not(:is(.afd-form, .afdx-form) *) {
	display: block;
	inline-size: 100%;
}
body .afd-lead .DK-text textarea.wpcf7-form-control:not(:is(.afd-form, .afdx-form) *) {
	min-block-size: 96px;
	resize: vertical;
}
body .afd-lead :is(.DK, .DK-text) .wpcf7-form-control:not(:is(.afd-form, .afdx-form) *)::placeholder {
	color: #6B7480;
	opacity: 1;
}
body .afd-lead :is(.DK, .DK-text) .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-checkbox):not(:is(.afd-form, .afdx-form) *):focus {
	outline: none;
	border-color: var(--afd-gold, #A48A61);
	box-shadow: 0 0 0 4px rgba(164, 138, 97, .25);
}
/* The CTA: full width, wraps instead of clipping, dark text on gold
   (#1B1206 on #A48A61 5.6:1, on #9D8375 5.3:1). */
body .afd-lead .DK-submit .wpcf7-submit:not(:is(.afd-form, .afdx-form) *) {
	box-sizing: border-box;
	inline-size: 100%;
	width: 100%;
	block-size: auto;
	height: auto;
	min-block-size: 48px;
	margin: 4px 0 0;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--afd-r-pill, 999px);
	background-color: #A48A61;
	background-image: var(--afd-grad-gold-2, linear-gradient(135deg, #A48A61, #9D8375));
	color: var(--afd-onGold, #1B1206);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	box-shadow: 0 18px 40px -20px rgba(164, 138, 97, .55);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
body .afd-lead .DK-submit .wpcf7-submit:not(:is(.afd-form, .afdx-form) *):hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 46px -18px rgba(164, 138, 97, .72);
}
body .afd-lead .DK-submit .wpcf7-submit:not(:is(.afd-form, .afdx-form) *):focus-visible {
	outline: 3px solid var(--afdl-navy);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.afdl-wa,
	.afd-lead .wpcf7-list-item label,
	body .afd-lead .DK-submit .wpcf7-submit {
		transition: none !important;
	}
}