/* TNE 27 Registration — self-contained, theme-independent styling. */

.tne27-wrap {
	--tne-ink: #14161a;
	--tne-body: #454b54;
	--tne-muted: #7a828d;
	--tne-line: #dcdfe4;
	--tne-line-soft: #ecedf0;
	--tne-bg: #ffffff;
	--tne-field: #fbfbfc;
	--tne-accent: #8a1c2b;
	--tne-accent-ink: #ffffff;
	--tne-err: #b3261e;
	--tne-radius: 8px;

	max-width: 860px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 48px);
	background: var(--tne-bg);
	color: var(--tne-body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.tne27-wrap *,
.tne27-wrap *::before,
.tne27-wrap *::after { box-sizing: inherit; }

/* Header */
.tne27-head { margin-bottom: 32px; }
.tne27-title {
	margin: 0 0 6px;
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tne-ink);
	/* Keep the wordmark from splitting across lines mid-name. */
	text-wrap: balance;
}
.tne27-sub {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tne-muted);
}

/* Alerts */
.tne27-alert {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var(--tne-radius);
	font-size: 14px;
}
.tne27-alert-error {
	background: #fdf0ef;
	border: 1px solid #f2c9c5;
	color: var(--tne-err);
}

/* Fieldsets */
.tne27-set {
	margin: 0 0 28px;
	padding: 0 0 24px;
	border: 0;
	border-bottom: 1px solid var(--tne-line-soft);
}
.tne27-set:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.tne27-legend {
	padding: 0;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tne-ink);
}
.tne27-legend-note {
	display: inline-block;
	margin-left: 8px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--tne-muted);
}

/* Grid */
.tne27-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
.tne27-col-2 { grid-column: 1 / -1; }

/* Finer 6-column grid for the address block. */
.tne27-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tne27-s2 { grid-column: span 2; }
.tne27-s3 { grid-column: span 3; }
.tne27-s4 { grid-column: span 4; }
.tne27-s6 { grid-column: span 6; }

@media (max-width: 860px) {
	.tne27-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tne27-s2, .tne27-s3, .tne27-s4 { grid-column: span 1; }
	.tne27-s6 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.tne27-grid,
	.tne27-grid-6 { grid-template-columns: 1fr; }
	.tne27-col-2,
	.tne27-s2, .tne27-s3, .tne27-s4, .tne27-s6 { grid-column: auto; }
}

/* Fields */
.tne27-field { min-width: 0; }
.tne27-field + .tne27-field { margin-top: 0; }
.tne27-set > .tne27-field + .tne27-field { margin-top: 22px; }

.tne27-field > label,
.tne27-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tne-ink);
}
.tne27-req { margin-left: 3px; color: var(--tne-accent); font-weight: 700; }
.tne27-hint,
.tne27-note {
	font-weight: 400;
	font-size: 12px;
	color: var(--tne-muted);
}
.tne27-note { margin: 6px 0 0; }

.tne27-wrap input[type="text"],
.tne27-wrap input[type="email"],
.tne27-wrap input[type="tel"],
.tne27-wrap input[type="date"],
.tne27-wrap select {
	width: 100%;
	max-width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	line-height: 1.35;
	font-family: inherit;
	color: var(--tne-ink);
	background: var(--tne-field);
	border: 1px solid var(--tne-line);
	border-radius: var(--tne-radius);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.tne27-wrap 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='%237a828d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 34px;
}
.tne27-wrap input:focus,
.tne27-wrap select:focus {
	background: #fff;
	border-color: var(--tne-accent);
	box-shadow: 0 0 0 3px rgba(138, 28, 43, .12);
}
.tne27-wrap input[readonly] {
	background: #f2f3f5;
	color: var(--tne-body);
	cursor: default;
}

.tne27-has-err input,
.tne27-has-err select { border-color: var(--tne-err); background: #fffafa; }
.tne27-err {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--tne-err);
}

/* Radio groups */
.tne27-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tne27-choice {
	line-height: 1.2;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 16px 11px 14px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--tne-ink);
	background: var(--tne-field);
	border: 1px solid var(--tne-line);
	border-radius: var(--tne-radius);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.tne27-choice:hover { border-color: #b9bec6; }
.tne27-choice input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--tne-accent);
	flex: none;
}
.tne27-choice:has(input:checked) {
	background: #fff;
	border-color: var(--tne-accent);
	box-shadow: 0 0 0 1px var(--tne-accent) inset;
}
.tne27-choice:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(138, 28, 43, .18);
}
.tne27-choices-yn .tne27-choice { min-width: 96px; }

/* Honeypot, and the HubSpot Collected Forms suppression field (see templates/form.php) */
.tne27-hp,
.tne27-hs-suppress {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submit block */
.tne27-submit {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 16px 24px;
	margin-top: 8px;
	padding: 22px 24px;
	background: #f7f7f9;
	border: 1px solid var(--tne-line-soft);
	border-radius: 12px;
}
.tne27-price { line-height: 1.2; }
.tne27-price-amt {
	display: block;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tne-ink);
}
.tne27-price-amt .woocommerce-Price-amount { color: inherit; }
.tne27-price-label {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tne-muted);
}
.tne27-btn {
	justify-self: end;
	min-width: 200px;
	padding: 15px 30px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--tne-accent-ink);
	background: var(--tne-accent);
	border: 0;
	border-radius: var(--tne-radius);
	cursor: pointer;
	transition: background .15s ease, transform .06s ease;
}
.tne27-btn:hover { background: #741724; }
.tne27-btn:active { transform: translateY(1px); }
.tne27-btn:focus-visible { outline: 3px solid rgba(138, 28, 43, .35); outline-offset: 2px; }
.tne27-btn[disabled] { opacity: .6; cursor: progress; }

.tne27-fine {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tne-muted);
}
@media (max-width: 640px) {
	.tne27-submit { grid-template-columns: 1fr; }
	.tne27-btn { justify-self: stretch; width: 100%; }
}

/* ---- Session cards (v1.1) ---------------------------------------------- */
/* Three sessions as of 1.3.0 -- was a 2-column grid, which left The Full
   Summer stranded on its own row at half width. */
.tne27-choices-session {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.tne27-choice-block {
	align-items: flex-start;
	padding: 16px 18px;
}
.tne27-choice-block > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}
.tne27-choice-title {
	font-weight: 700;
	font-size: 16px;
}
.tne27-choice-sub {
	font-size: 14px;
	opacity: 0.75;
	white-space: nowrap;
}
/* Program scope + deposit, e.g. "10 instructional days · $500 deposit". MUST be
   allowed to wrap -- it overflows a narrow card otherwise. */
.tne27-choice-meta {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0.85;
	white-space: normal;
}
@media (max-width: 860px) {
	.tne27-choices-session { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.tne27-choices-session { grid-template-columns: 1fr; }
	.tne27-choice-sub { white-space: normal; }
}

/*
 * A session the derived track does not run in. The C Line (ages 9-12) is
 * Session 1 only, so entering a 9-to-12-year-old's date of birth dims
 * Session 2 and The Full Summer. tne27-form.js also sets input.disabled,
 * and TNE27_Fields::validate() re-checks on submit -- this is only the
 * visual half of the lock.
 */
.tne27-choice.is-unavailable {
	opacity: .38;
	cursor: not-allowed;
	filter: grayscale(1);
}

.tne27-choice.is-unavailable input,
.tne27-choice.is-unavailable * {
	cursor: not-allowed;
}