/**
 * BIBH Registration - single-card signup form (spec §3).
 * League Spartan + BIBH palette (mirrors bibh-classroom-suite tokens). All rules are
 * namespaced under .bibh-reg so nothing leaks into the theme / PMPro checkout.
 */

.bibh-reg {
	--bibh-primary: #3F8170;
	--bibh-primary-dark: #346b5d;
	--bibh-primary-light: #e8f5f0;
	--bibh-secondary: #91D1DB;
	--bibh-secondary-light: #d4eef3;
	--bibh-accent: #F3D76A;
	--bibh-text: #3D3D3D;
	--bibh-text-light: #666666;
	--bibh-text-muted: #888888;
	--bibh-dark: #203D48;
	--bibh-white: #ffffff;
	--bibh-border: #e2e5ea;
	--bibh-danger: #dc2626;
	--bibh-danger-light: #fef2f2;
	--bibh-success: #049F84;
	--bibh-success-light: #ecfdf5;
	--bibh-warning: #b8860b;
	--bibh-warning-bg: #fffbeb;
	--bibh-radius-sm: 8px;
	--bibh-radius-md: 14px;
	--bibh-shadow: 0 8px 30px rgba(32, 61, 72, 0.12);

	font-family: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--bibh-text);
	box-sizing: border-box;
	max-width: 760px !important;
	margin: 32px auto;
	padding: 0 16px;
}

.bibh-reg *,
.bibh-reg *::before,
.bibh-reg *::after {
	box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.bibh-reg__card {
	background: var(--bibh-white);
	border: 1px solid #e8e8e8;
	border-radius: 30px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.07);
	padding: 32px 30px 28px;
	margin-bottom: 5%;

	/* The width cap lives on .bibh-reg above, which is enough on the plain
	   signup page. It is NOT enough on the PMPro checkout, where this same
	   card is <form id="pmpro_form">: an ID beats a class 100 to 10, so a
	   theme or PMPro rule on #pmpro_form widens it and the form goes full
	   page width on live. Cap the card itself, and use !important so the ID
	   cannot win. Deliberately the same 760px as the wrapper, so where the
	   wrapper is already doing its job this changes nothing - the card is
	   728px inside the wrapper's 16px padding and never reaches this cap. */
	max-width: 760px !important;
	margin-left: auto;
	margin-right: auto;
}

.bibh-reg__head {
	text-align: center;
	margin-bottom: 22px;
}

.bibh-reg__title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--bibh-dark);
	margin: 0 0 6px;
}

.bibh-reg__subtitle {
	font-size: 15px;
	font-weight: 500;
	color: var(--bibh-text-light);
	margin: 0;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
.bibh-reg__field {
	margin-bottom: 18px;
}

.bibh-reg__label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--bibh-dark);
	margin-bottom: 7px;
}

.bibh-reg__req {
	color: var(--bibh-primary);
	margin-left: 2px;
}

.bibh-reg__input,
.bibh-reg__select {
	width: 100%;
	min-height: 52px;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--bibh-text);
	background: var(--bibh-white);
	border: 1px solid #777777 !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	transition: border-color .15s ease;
	appearance: none;
}

.bibh-reg__input:focus,
.bibh-reg__select:focus {
	outline: none;
	border-color: var(--bibh-primary) !important;
	box-shadow: none !important;
}

.bibh-reg__input:disabled,
.bibh-reg__select:disabled {
	background: #f6f7f8;
	color: var(--bibh-text-muted);
	cursor: not-allowed;
}

.bibh-reg__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23203D48' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

/* S-07: instructional text in brand NAVY, not grey. The help itself stays,
   it is what stops the support emails, but at #888 it read as fine print a
   student was meant to skip, which is the opposite of its job. */
.bibh-reg__hint {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bibh-dark, #203D48);
	margin: 6px 0 0;
}

/* ── Book-code prefix lock (§3.1) ─────────────────────────────────────────── */
.bibh-reg__code {
	display: flex;
	align-items: stretch;
	border: 1px solid #777777;
	border-radius: 30px;
	overflow: hidden;
	transition: border-color .15s ease;
}

.bibh-reg__code:focus-within {
	border-color: var(--bibh-primary);
}

.bibh-reg__code-prefix {
	display: flex;
	align-items: center;
	padding: 0 14px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--bibh-dark);
	background: var(--bibh-secondary-light);
	border-right: 1px solid #777777;
	white-space: nowrap;
	user-select: none;
}

.bibh-reg__code-suffix {
	flex: 1;
	min-height: 52px;
	padding: 13px 15px;
	/* No border/shadow/bg of its own - the .bibh-reg__code wrapper draws the border.
	   !important defeats the theme's input[type=text] rules that caused a double border. */
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bibh-text);
}

.bibh-reg__code-suffix:focus {
	outline: none;
	box-shadow: none !important;
}

/* ── Classroom code (optional) ────────────────────────────────────────────── */
/* Same pill as every other input; only the typography is code-like. No prefix lock,
   because a classroom code is the teacher's whole code (ABC-123), not a suffix. */
.bibh-reg__input--code {
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.bibh-reg__input--code::placeholder {
	letter-spacing: 2px;
	text-transform: none;
}

/* "Optional" chip, the counterpart of the red * on required labels. */
.bibh-reg__opt {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 30px;
	background: var(--bibh-secondary-light);
	color: var(--bibh-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	vertical-align: 1px;
}

/* ── Two-column rows (email/confirm, password/confirm) ────────────────────── */
.bibh-reg__row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.bibh-reg__row2 .bibh-reg__field { margin-bottom: 18px; }

/* ── Password show/hide (§3.5) - single toggle above the row ──────────────── */
.bibh-reg__pwhead {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 7px;
}

.bibh-reg__pw-toggle {
	/* A plain text link, not a themed button. !important defeats Astra's button
	   background / box-shadow / hover chrome. */
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--bibh-primary-dark) !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 2px 2px;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s ease;
}

.bibh-reg__pw-toggle:hover,
.bibh-reg__pw-toggle:focus {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bibh-primary) !important;
	outline: none;
}

/* ── Parental-consent lead (§7) ───────────────────────────────────────────── */
.bibh-reg__plead {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--bibh-primary-light);
	border-radius: var(--bibh-radius-sm);
	padding: 13px 15px;
	margin-bottom: 16px;
}

.bibh-reg__plead-ic { font-size: 17px; line-height: 1.35; }

.bibh-reg__plead-tx {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bibh-primary-dark);
}

/* ── Consents + footer + PMPro notice ─────────────────────────────────────── */
.bibh-reg__consents {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.bibh-reg__foot {
	margin: 16px 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--bibh-text-light);
}

.bibh-reg__foot a { color: var(--bibh-primary-dark); font-weight: 700; }

.bibh-reg__notice {
	margin-bottom: 18px;
	padding: 12px 15px;
	border-radius: var(--bibh-radius-sm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.bibh-reg__notice--error { color: var(--bibh-danger); background: var(--bibh-danger-light); }
.bibh-reg__notice--info { color: var(--bibh-dark); background: var(--bibh-secondary-light); }

/* ── Email domain-check states (§4) ───────────────────────────────────────── */
.bibh-reg__status {
	display: none;
	margin-top: 8px;
	padding: 10px 13px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: var(--bibh-radius-sm);
}

.bibh-reg__status.is-shown { display: block; }

.bibh-reg__status--match {
	color: var(--bibh-success);
	background: var(--bibh-success-light);
}

.bibh-reg__status--warn {
	color: var(--bibh-warning);
	background: var(--bibh-warning-bg);
}

.bibh-reg__status--block {
	color: var(--bibh-danger);
	background: var(--bibh-danger-light);
}

.bibh-reg__status--info {
	color: var(--bibh-dark);
	background: var(--bibh-secondary-light);
}

.bibh-reg__escape {
	display: inline-block;
	margin-top: 6px;
	color: var(--bibh-primary-dark);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.bibh-reg__input.is-error {
	border-color: var(--bibh-danger);
}

.bibh-reg__error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bibh-danger);
}

.bibh-reg__error.is-shown { display: block; }

/* ── Combobox (county-scoped school type-ahead) ───────────────────────────── */
.bibh-reg__combo {
	position: relative;
}

.bibh-reg__combo-list {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 260px;
	overflow-y: auto;
	background: var(--bibh-white);
	border: 1.5px solid var(--bibh-border);
	border-radius: var(--bibh-radius-sm);
	box-shadow: var(--bibh-shadow);
	display: none;
}

.bibh-reg__combo-list.is-open { display: block; }

.bibh-reg__combo-item {
	padding: 11px 15px;
	cursor: pointer;
	border-bottom: 1px solid #f0f2f3;
}

.bibh-reg__combo-item:last-child { border-bottom: 0; }

.bibh-reg__combo-item.is-active,
.bibh-reg__combo-item:hover {
	background: var(--bibh-primary-light);
}

.bibh-reg__combo-item strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--bibh-dark);
}

.bibh-reg__combo-item span {
	font-size: 13px;
	font-weight: 500;
	/* S-07: the school's town/county under its name. Navy, at reduced opacity
	   for hierarchy, rather than a lighter grey. */
	color: var(--bibh-dark, #203D48);
	opacity: .72;
}

.bibh-reg__combo-item--none {
	color: var(--bibh-primary-dark);
	font-weight: 700;
}

/* ── Conditional blocks (age branch, parent emails) ───────────────────────── */
.bibh-reg__reveal {
	display: none;
}

.bibh-reg__reveal.is-shown {
	display: block;
}

/* Hide something that is visible by DEFAULT, so the no-JS render keeps the safer
   copy (the parental-approval wording) and JS opts out of it. */
.bibh-reg__hide {
	display: none !important;
}

.bibh-reg__radios {
	display: flex;
	gap: 12px;
}

.bibh-reg__radio {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bibh-dark);
	background: var(--bibh-white);
	border: 1.5px solid var(--bibh-border);
	border-radius: 30px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.bibh-reg__radio input { position: absolute; opacity: 0; pointer-events: none; }

.bibh-reg__radio.is-selected {
	border-color: var(--bibh-primary);
	background: var(--bibh-primary-light);
}

.bibh-reg__add-parent {
	/* Plain text link (see .bibh-reg__pw-toggle). */
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--bibh-primary-dark) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s ease;
}

.bibh-reg__add-parent:hover,
.bibh-reg__add-parent:focus {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bibh-primary) !important;
	outline: none;
}

/* ── Consent ──────────────────────────────────────────────────────────────── */
.bibh-reg__check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--bibh-text);
}

.bibh-reg__check input {
	margin-top: 3px;
	width: 19px;
	height: 19px;
	accent-color: var(--bibh-primary);
	flex-shrink: 0;
}

.bibh-reg__check a {
	color: var(--bibh-primary-dark);
	font-weight: 700;
}

/* ── Submit ───────────────────────────────────────────────────────────────── */
.bibh-reg__submit {
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
	border: 0;
	border-radius: var(--bibh-radius-sm);
	background: var(--bibh-primary);
	color: var(--bibh-white);
	font-family: inherit;
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

.bibh-reg__submit:hover { background: var(--bibh-primary-dark); }

.bibh-reg__submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

@media (max-width: 520px) {
	.bibh-reg__card { padding: 24px 18px 22px; }
	.bibh-reg__title { font-size: 22px; }
	.bibh-reg__radios { flex-direction: column; }
	.bibh-reg__row2 { grid-template-columns: 1fr; gap: 0; }
}

/* ── Theme: drop Astra's 2em article top padding on registration pages ─────
 * Astra's inline CSS puts padding-top: 2em on
 *   .ast-single-post.ast-page-builder-template .site-main > article
 * which pushes the signup card down the page for no reason: the card carries
 * its own spacing. Scoped with :has() so ONLY a page rendering the form loses
 * it, and every other page keeps the theme's own rhythm. The side padding is
 * left alone: it is what keeps the card off the edge on a phone.
 *
 * !important because Astra's selector carries one more class than this one,
 * and it is inline CSS, so it cannot be beaten on order either.
 */
body:has(.bibh-reg) .site-main > article {
	padding-top: 0 !important;
}