/**
 * DLA Math CAPTCHA - Frontend Styles
 *
 * Deliberately quiet. Everything inherits the host form's text colour, so
 * the same markup sits right on the navy enrolment modal and on the white
 * wp-login card. The image itself is a warm off-white card in every
 * context — that is the one fixed element.
 */

.dla-captcha-field {
	--dlac-acc: #b59458;
	--dlac-line: color-mix(in srgb, currentColor 22%, transparent);
	--dlac-line-strong: color-mix(in srgb, currentColor 45%, transparent);
	margin: 18px 0 14px;
	padding: 0;
	position: relative;
	color: inherit;
}

/* Label — the site's small caps eyebrow */
.dla-captcha-label {
	display: block;
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: inherit;
	opacity: .7;
}

/* Question + refresh, one row, no box around it */
.dla-captcha-question-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	padding: 0;
	background: transparent;
	border: 0;
}

/* Text mode */
.dla-captcha-question {
	flex: 1;
	font-family: 'Marcellus','Cormorant Garamond',serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .02em;
	color: inherit;
}

/* Image mode — drawn at 2x, shown at 56px.
   Specificity + !important because the theme's `.elementor img{height:auto}`
   otherwise blows it up to its natural 112px. */
.dla-captcha-field img.dla-captcha-image {
	display: block !important;
	flex: 0 0 auto;
	height: 56px !important;
	width: auto !important;
	max-width: calc(100% - 52px) !important;
	margin: 0 !important;
	border-radius: 2px !important;
	box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px -14px rgba(0,0,0,.5);
}

/* Refresh — a ghost circle in the form's own colour */
.dla-captcha-refresh {
	flex: 0 0 auto;
	display: inline-flex !important; /* theme's button reset forces block → icon left-aligned */
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--dlac-line) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 1;
	opacity: .75;
	transition: opacity .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.dla-captcha-refresh:hover {
	opacity: 1;
	border-color: var(--dlac-acc) !important;
	color: var(--dlac-acc) !important;
	background: transparent !important;
}
.dla-captcha-refresh:active { transform: scale(.94); }
.dla-captcha-refresh.is-loading {
	animation: dla-spin .8s linear infinite;
	pointer-events: none;
	opacity: .5;
}
.dla-captcha-refresh svg { width: 15px !important; height: 15px !important; display: block !important; margin: 0 !important; }

/* Answer input — deliberately light-touch: the theme (and wp-login) already
   style text inputs, and matching the neighbouring fields is exactly what we
   want. We only guarantee it never turns into a white box on a dark form. */
.dla-captcha-input {
	display: block;
	width: 100%;
	max-width: 240px;
	background: transparent;
	color: inherit;
	box-sizing: border-box;
}
.dla-captcha-input:focus { outline: none; }
.dla-captcha-input::placeholder { color: inherit; opacity: .45; }

/* Honeypot */
.dla-captcha-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.dla-captcha-noscript { font-size: 12px; opacity: .6; margin-top: 4px; }

@keyframes dla-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Older browsers without color-mix(): flat fallbacks */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.dla-captcha-refresh { border-color: rgba(128,128,128,.4) !important; }
}

/* ========================
   Context-specific
   ======================== */

/* wp-login.php card (white, WP grey text) */
.login .dla-captcha-field { margin: 16px 0 20px; color: #3c434a; }
.login .dla-captcha-label { opacity: .85; font-weight: 600; }
.login .dla-captcha-input { max-width: 100%; }

/* Inside the DLA modals / dark forms the colour is already light — nothing to do. */

/* Bheemji theme: the CF7 submit is `background: transparent` with the
   theme's accent text colour (white) — invisible on any light section, and
   navy-on-navy inside `.wdt-dark-bg` widgets. Give every CF7 submit the
   site's gold CTA so forms can actually be sent, whatever the background. */
.wpcf7-form .wpcf7-form-control.wpcf7-submit,
.wdt-submit-btn .wpcf7-submit {
	background: #b59458 !important;
	border: 1px solid #b59458 !important;
	color: #04100c !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease;
}
.wpcf7-form .wpcf7-form-control.wpcf7-submit:hover,
.wdt-submit-btn .wpcf7-submit:hover {
	background: #cdac6c !important;
	border-color: #cdac6c !important;
	color: #04100c !important;
}

/* Comment form / WooCommerce / WPForms / CF7 spacing */
.comment-form-captcha,
.woocommerce .dla-captcha-field,
.wpcf7-form .dla-captcha-field { margin: 16px 0; }
.wpcf7-form .dla-captcha-input,
.elementor-form .dla-captcha-input { max-width: 100%; } /* line up with the fields above */
.wpforms-field .dla-captcha-field { margin: 10px 0; }

@media (max-width: 480px) {
	.dla-captcha-field img.dla-captcha-image { height: 48px !important; }
	.dla-captcha-question { font-size: 20px; }
	.dla-captcha-input { max-width: 100%; }
	.dla-captcha-refresh { width: 36px !important; height: 36px !important; }
}