/* ===========================================================================
   Hekari Academy Registration — form styles.
   Scoped under .areg-*. Relies on the theme's CSS variables (--red, --gold,
   --green, --ink, --paper, --hair, --data, --display) and reuses the site's
   .field/.btn/.form-status components where possible.
   =========================================================================== */

.areg-shell { max-width: 880px; }

.areg-section {
	border: 1px solid var(--hair-dark);
	background: #fff;
	padding: 26px 26px 30px;
	margin-bottom: 26px;
	color: var(--ink);
}
.areg-section > legend {
	font-family: var(--display);
	font-weight: 800;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0 10px;
	margin-left: -10px;
}
.areg-hint {
	margin: 6px 0 20px;
	color: rgba(10, 10, 10, 0.62);
	font-size: 14.5px;
	max-width: 64ch;
}

.areg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.areg-field.wide { grid-column: 1 / -1; }
.areg-field { margin-bottom: 14px; }
.areg-field label {
	display: block;
	font: 600 13px/1.3 var(--data);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: var(--muted-2);
}
.areg-field .req { color: var(--red); }
.areg-field input,
.areg-field select,
.areg-field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba(10, 10, 10, 0.3);
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.4 var(--body, inherit);
	border-radius: 0;
}
.areg-field textarea { min-height: 90px; resize: vertical; }

.areg-child {
	border: 1px solid var(--hair-dark);
	border-left: 4px solid var(--gold);
	background: #fff;
	padding: 20px 22px 24px;
	margin-bottom: 18px;
}
.areg-child-num {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--ink);
	color: var(--gold);
	font-family: var(--display);
	font-weight: 800;
	font-size: 13px;
	margin-left: 6px;
}
.areg-age-readout { font-size: 13px; color: var(--muted-2); margin-top: 6px; min-height: 1em; }

#areg-add-child { width: 100%; }
#areg-add-child:disabled { cursor: default; opacity: 0.55; }

@media (max-width: 680px) {
	.areg-grid { grid-template-columns: 1fr; }
	.areg-section { padding: 20px 16px 24px; }
	.areg-child { padding: 16px 14px 20px; }
}