/* ==========================================================================
   Braxtone enquiry form — styles.

   The visual half of app/shared/braxtone-enquiry-form.php. Lifted verbatim from
   the landing theme's style.css (lines 290-468 as of v2.2.0); see that file's
   PHP counterpart for why this is a copy rather than a shared include.

   The rules below are written against the landing theme's --bd-* tokens. The
   block underneath re-declares those tokens in terms of a division theme's
   theme.json presets, so the same card renders in the division's palette with no
   edits to the rules themselves. Each falls back to the Brand Guidelines v1.1
   literal, so the form still looks right in a theme that defines no presets.
   ========================================================================== */

:root {
	--bd-ink:     var(--wp--preset--color--ink,          #101623);
	--bd-slate:   var(--wp--preset--color--muted,        #46536A);
	--bd-line:    var(--wp--preset--color--line,         #CFD8E8);
	--bd-glass:   var(--wp--preset--color--subtle,       #EDF2FA);
	--bd-paper:   var(--wp--preset--color--subtle,       #F6F8FC);
	--bd-white:   var(--wp--preset--color--surface,      #FFFFFF);
	--bd-indigo:  var(--wp--preset--color--brand-accent, #2F4BD9);

	/* Hover tint. color-mix keeps it correct for any division accent, not just
	   Digital's Indigo; the literal is the guidelines' Indigo 400 for browsers
	   without it. */
	--bd-indigo4: #5E79E8;
	--bd-coral:   #C2410C;  /* §07 error colour — no preset equivalent. */

	--bd-fs-h2:      var(--wp--preset--font-size--xx-large, clamp(1.625rem, 1.30rem + 1.00vw, 2rem));
	--bd-fs-body:    1rem;
	--bd-fs-ui:      0.875rem;
	--bd-fs-caption: 0.75rem;
	--bd-fs-label:   0.6875rem;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	:root { --bd-indigo4: color-mix(in srgb, var(--bd-indigo) 78%, #ffffff); }
}

/* --------------------------------------------------------------------------
   FORM — White card, 16px radius, 1px Line (the §14 card spec).
   -------------------------------------------------------------------------- */
.bd-form-card {
	width: 100%;
	max-width: 608px;
	margin-inline: auto;
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	padding: 32px;
	box-sizing: border-box;
	text-align: left;
}

/* The card title is an <h2> element carrying the h3 token, so it needs the
   element-qualified selector to outrank theme.json's `:root :where(h2)`. */
.bd-form-card__title,
h2.bd-form-card__title {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-h3);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.02em;
	color: var(--bd-ink);
	margin: 0 0 1.5rem;
}

/* CF7 autop is disabled in functions.php; neutralise any stray wrappers. */
.bd-form-card form p { margin: 0; }

.bd-field { margin-bottom: 20px; }
.bd-field:last-child { margin-bottom: 0; }

.bd-field label,
.bd-label {
	display: block;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 500;
	line-height: 1.43;
	color: var(--bd-ink);
	margin-bottom: 8px;
}
.bd-label .req { color: var(--bd-indigo); }
.bd-label .bd-optional { color: var(--bd-slate); font-weight: 400; }

/* Two-up: 264 + 16 + 264 inside the 608 card. */
.bd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.bd-form-card input[type="text"],
.bd-form-card input[type="email"],
.bd-form-card input[type="tel"],
.bd-form-card select,
.bd-form-card textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 400;
	color: var(--bd-ink);
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	border-radius: 8px;
	height: 44px;
	padding: 0 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bd-form-card textarea {
	height: 120px;
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}

/* Mobile numbers are figures — §10 sets figures in Plex Mono. Weight 500 is
   the one mono cut shipped, so ask for it rather than synthesising 400. */
.bd-form-card input[type="tel"] {
	font-family: var(--wp--preset--font-family--mono, var(--wp--preset--font-family--plex-mono, ui-monospace, monospace));
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.bd-form-card select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2346536A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}

.bd-form-card input::placeholder,
.bd-form-card textarea::placeholder { color: var(--bd-slate); opacity: 1; }

/* Focus ring — §07: Indigo deep at 30% over a solid deep border. */
.bd-form-card input:focus,
.bd-form-card select:focus,
.bd-form-card textarea:focus {
	outline: none;
	border-color: var(--bd-indigo);
	box-shadow: 0 0 0 3px rgba(47, 75, 217, 0.3);
}

.bd-form-card .wpcf7-submit,
.bd-form-card button[type="submit"] {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 500;
	color: var(--bd-white);
	background: var(--bd-indigo);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.bd-form-card .wpcf7-submit:hover { background: var(--bd-indigo4); }
.bd-form-card .wpcf7-submit:active { transform: translateY(1px); }
.bd-form-card .wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* CF7 feedback */
.bd-form-card .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: 8px;
	border-width: 1px !important;
	font-size: var(--bd-fs-ui);
	line-height: 1.6;
}
.bd-form-card .wpcf7-not-valid-tip {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-caption);
	line-height: 1.67;
	color: var(--bd-coral);
	margin-top: 6px;
}
.bd-form-card .wpcf7-not-valid { border-color: var(--bd-coral); }
.bd-form-card .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* Honeypot — reachable to bots, invisible and unfocusable to people.
   Never display:none; that is the first thing a scraper skips. */
.bd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bd-form-notice {
	border: 1px dashed var(--bd-indigo);
	background: var(--bd-glass);
	color: var(--bd-ink);
	border-radius: 10px;
	padding: 16px;
	font-size: var(--bd-fs-ui);
	line-height: 1.6;
	margin-top: 16px;
}
.bd-form-notice code {
	font-family: var(--wp--preset--font-family--mono, var(--wp--preset--font-family--plex-mono, ui-monospace, monospace));
	font-weight: 500;
	font-size: var(--bd-fs-caption);
	background: rgba(16, 22, 35, 0.08);
	padding: 2px 6px;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.bd-form-card { padding: 24px; }
	.bd-row { grid-template-columns: 1fr; gap: 0; }
}