/* ============================================================
   VYOM Ankur — front-end styles
   Uses the Wisdom Three theme tokens where available, with the
   brand hexes as fallbacks so the plugin is safe on its own.
============================================================ */

:root {
	--va-primary: var(--primary, #1B4F72);
	--va-secondary: var(--secondary, #2D8C7E);
	--va-accent: var(--accent, #C9973A);
	--va-text: var(--text, #2D3748);
	--va-muted: var(--muted, #718096);
	--va-border: var(--border, #E2E8F0);
	--va-white: var(--white, #FFFFFF);
	--va-radius: var(--radius, 8px);
	--va-radius-lg: var(--radius-lg, 16px);
}

.va-section {
	padding: 4.5rem 1.25rem;
	color: var(--va-text);
}

.va-section--tint {
	background: #F7FAFB;
}

.va-wrap {
	max-width: 1120px;
	margin: 0 auto;
}

/* ---------- Headings ---------- */
.va-head {
	max-width: 46rem;
	margin-bottom: 3rem;
}

.va-h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.2;
	color: var(--va-primary);
	margin: 0 0 .5rem;
}

.va-h3 {
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	color: var(--va-primary);
	margin: 3rem 0 .5rem;
}

.va-section .va-head .va-h3:first-child {
	margin-top: 0;
}

.va-tm {
	font-size: .45em;
	top: -.8em;
}

.va-kicker {
	font-size: 1rem;
	color: var(--va-secondary);
	margin: 0 0 1rem;
}

.va-lead {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--va-text);
	margin: 0;
	max-width: 42rem;
}

.va-sub {
	color: var(--va-muted);
	font-size: .95rem;
	margin: .25rem 0 1.5rem;
	max-width: 42rem;
}

.va-why {
	border-left: 3px solid var(--va-secondary);
	padding: .25rem 0 .25rem 1.25rem;
	max-width: 44rem;
	margin: 0 0 1rem;
}

.va-why p {
	margin: 0;
	line-height: 1.75;
}

/* ---------- Stages ---------- */
.va-stages {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	counter-reset: none;
}

.va-stage {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--va-border);
}

.va-stage:last-child {
	border-bottom: 1px solid var(--va-border);
}

.va-stage__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--va-primary);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
}

.va-stage__title {
	margin: 0;
	font-size: 1.15rem;
	color: var(--va-primary);
}

.va-stage__quote {
	margin: .25rem 0 .35rem;
	font-style: italic;
	color: var(--va-secondary);
}

.va-stage__meta {
	margin: 0 0 .75rem;
	font-size: .875rem;
	color: var(--va-muted);
}

.va-stage__points {
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.7;
}

.va-stage__points li {
	margin-bottom: .2rem;
}

/* ---------- Card grids ---------- */
.va-grid {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.va-grid--comp {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.va-grid--thread {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.va-card {
	background: var(--va-white);
	border: 1px solid var(--va-border);
	border-radius: var(--va-radius);
	padding: 1.25rem;
}

.va-card__title {
	margin: 0 0 .35rem;
	font-size: 1rem;
	color: var(--va-primary);
}

.va-card__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.65;
	color: var(--va-muted);
}

/* ---------- Approach + roots ---------- */
.va-approach {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2.5rem;
}

.va-flow {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: 0;
}

.va-flow__item {
	background: var(--va-white);
	border: 1px solid var(--va-border);
	border-radius: 999px;
	padding: .4rem 1rem;
	font-size: .9rem;
	color: var(--va-primary);
}

.va-roots {
	margin: 1rem 0 0;
}

.va-roots dt {
	font-weight: 600;
	color: var(--va-secondary);
	margin-top: .9rem;
}

.va-roots dd {
	margin: .15rem 0 0;
	color: var(--va-muted);
	font-size: .92rem;
	line-height: 1.65;
}

/* ---------- Parents / schools ---------- */
.va-audience {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 2rem;
	margin-top: 1rem;
}

.va-audience__col {
	background: var(--va-white);
	border: 1px solid var(--va-border);
	border-radius: var(--va-radius-lg);
	padding: 1.75rem;
}

.va-audience__col .va-h3 {
	margin-top: 0;
}

.va-offer {
	padding: .85rem 0;
	border-bottom: 1px solid var(--va-border);
}

.va-offer:last-of-type {
	border-bottom: 0;
}

.va-offer__title {
	margin: 0 0 .2rem;
	font-size: .98rem;
}

.va-offer__text {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--va-muted);
}

/* ---------- Programme lead + consent ---------- */
.va-lead-person,
.va-consent {
	max-width: 46rem;
}

.va-person__name {
	font-size: 1.1rem;
	font-weight: 600;
	margin: .5rem 0 .1rem;
}

.va-person__role {
	color: var(--va-muted);
	font-size: .92rem;
	margin: 0 0 1rem;
}

.va-lead-person p,
.va-consent p {
	line-height: 1.75;
}

.va-quote {
	border-left: 3px solid var(--va-accent);
	margin: 1.25rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	font-style: italic;
	color: var(--va-primary);
}

.va-person__built {
	font-size: .9rem;
	color: var(--va-muted);
}

/* ---------- Comparison table ---------- */
.va-compare {
	overflow-x: auto;
	border: 1px solid var(--va-border);
	border-radius: var(--va-radius-lg);
	background: var(--va-white);
}

.va-compare:focus-visible {
	outline: 2px solid var(--va-primary);
	outline-offset: 2px;
}

.va-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: .95rem;
}

.va-table th,
.va-table td {
	padding: 1rem 1.15rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--va-border);
}

.va-table thead th {
	background: var(--va-primary);
	color: #fff;
	font-size: 1.05rem;
	border-bottom: 0;
}

.va-table thead th.va-table__rowhead {
	background: var(--va-primary);
}

.va-th-sub {
	display: block;
	font-size: .78rem;
	font-weight: 400;
	opacity: .85;
	margin-top: .2rem;
}

.va-table__rowhead {
	width: 11rem;
	color: var(--va-muted);
	font-weight: 600;
	background: #F7FAFB;
}

.va-table tbody tr:last-child th,
.va-table tbody tr:last-child td {
	border-bottom: 0;
}

.va-row--shared td {
	background: rgba(45, 140, 126, .08);
	color: var(--va-secondary);
	font-weight: 600;
}

.va-closing {
	margin: 2.5rem 0 0;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--va-primary);
	max-width: 44rem;
}

.va-vis-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Registration ---------- */
.va-reg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
	align-items: start;
}

.va-reg__card {
	background: var(--va-white);
	border: 1px solid var(--va-border);
	border-radius: var(--va-radius-lg);
	padding: 1.9rem;
}

.va-reg__card .va-h3 {
	margin-top: 0;
}

.va-reg__card p {
	line-height: 1.7;
}

.va-contact {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--va-border);
	font-size: .92rem;
}

.va-contact dt {
	color: var(--va-muted);
	margin-top: .6rem;
}

.va-contact dd {
	margin: .1rem 0 0;
}

.va-contact a {
	color: var(--va-primary);
}

/* ---------- Buttons ---------- */
.va-btn {
	display: inline-block;
	background: var(--va-primary);
	color: #fff;
	border: 1.5px solid var(--va-primary);
	border-radius: var(--va-radius, 8px);
	padding: .8rem 1.5rem;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.va-btn:hover,
.va-btn:focus-visible {
	background: var(--va-secondary);
	border-color: var(--va-secondary);
	color: #fff;
}

.va-btn--ghost {
	background: transparent;
	color: var(--va-primary);
	margin-top: 1.25rem;
}

.va-btn--ghost:hover,
.va-btn--ghost:focus-visible {
	background: var(--va-primary);
	color: #fff;
	border-color: var(--va-primary);
}

.va-btn--submit {
	width: 100%;
	margin-top: 1.25rem;
}

.va-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

/* ---------- Form ---------- */
.va-form {
	margin-top: 1.5rem;
}

.va-field {
	margin-bottom: 1.1rem;
}

.va-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}

.va-field__label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	margin-bottom: .35rem;
	color: var(--va-text);
}

.va-req {
	color: #C0392B;
}

.va-form input[type="text"],
.va-form input[type="email"],
.va-form input[type="tel"],
.va-form select,
.va-form textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1.5px solid var(--va-border);
	border-radius: var(--va-radius, 8px);
	font-size: .95rem;
	font-family: inherit;
	color: var(--va-text);
	background: #fff;
}

.va-form input:focus,
.va-form select:focus,
.va-form textarea:focus {
	outline: none;
	border-color: var(--va-primary);
	box-shadow: 0 0 0 3px rgba(27, 79, 114, .1);
}

.va-choice {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
}

.va-choice__opt {
	display: flex;
	align-items: center;
	gap: .5rem;
	border: 1.5px solid var(--va-border);
	border-radius: 999px;
	padding: .5rem 1rem;
	font-size: .92rem;
	cursor: pointer;
}

.va-choice__opt:focus-within {
	border-color: var(--va-primary);
	box-shadow: 0 0 0 3px rgba(27, 79, 114, .1);
}

.va-hint {
	margin: .4rem 0 0;
	font-size: .82rem;
	color: var(--va-muted);
}

.va-consent-check {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--va-muted);
	margin-top: 1rem;
}

.va-consent-check input {
	margin-top: .25rem;
	flex: 0 0 auto;
}

.va-form__status {
	margin: 1rem 0 0;
	font-size: .9rem;
	line-height: 1.6;
	display: none;
}

.va-form__status.is-visible {
	display: block;
}

.va-form__status.is-error {
	color: #C0392B;
}

.va-form__status.is-success {
	color: var(--va-secondary);
	font-weight: 600;
}

.va-field.is-hidden {
	display: none;
}

/* ---------- Floating in-page menu ---------- */
.va-jump {
	position: fixed;
	z-index: 900;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, .96);
	border: 1px solid var(--border, #E2E8F0);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(16, 42, 67, .16);
	padding: .35rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	backdrop-filter: blur(6px);
}

.va-jump.is-ready {
	opacity: 1;
	visibility: visible;
}

.va-jump__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: .15rem;
}

.va-jump__link {
	display: block;
	padding: .5rem .95rem;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--primary, #1B4F72);
	white-space: nowrap;
}

.va-jump__link:hover,
.va-jump__link:focus-visible {
	background: rgba(27, 79, 114, .08);
}

.va-jump__link.is-active {
	background: var(--primary, #1B4F72);
	color: #fff;
}

@media (max-width: 480px) {
	.va-jump {
		left: .6rem;
		right: .6rem;
		bottom: .6rem;
		transform: none;
		border-radius: var(--radius-lg, 16px);
	}

	.va-jump__list {
		justify-content: space-between;
	}

	.va-jump__link {
		padding: .55rem .55rem;
		font-size: .82rem;
	}
}

@media (max-width: 700px) {
	.va-section {
		padding: 3rem 1.1rem;
	}

	.va-stage {
		grid-template-columns: 2.25rem 1fr;
		gap: .9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.va-jump,
	.va-btn {
		transition: none;
	}
}

/* ============================================================
   PAIRED REGISTRATION — Discovery Session and VYOM Ankur
   enquiry side by side inside the theme's discovery section.
============================================================ */
.vyom-discovery-section .va-dual-intro {
	display: block;
	max-width: 48rem;
	margin: 0 auto 2.75rem;
	text-align: center;
}

.va-dual {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 1.75rem;
	align-items: start;
}

.va-dual__col {
	background: var(--va-white);
	border: 1px solid var(--va-border);
	border-radius: var(--va-radius-lg);
	padding: 1.9rem;
	color: var(--va-text);
	scroll-margin-top: 90px;
}

.va-dual__eyebrow {
	margin: 0 0 .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--va-secondary);
}

.va-dual__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	line-height: 1.3;
	color: var(--va-primary);
}

.va-dual__text {
	margin: 0 0 1rem;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--va-text);
}

.va-dual__points {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: .9rem;
	line-height: 1.6;
}

.vyom-discovery-section .va-dual__col .va-dual__points li,
.va-dual__col .va-dual__points li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .45rem;
	color: var(--va-text);
	opacity: 1;
	text-shadow: none;
}

.vyom-discovery-section .va-dual__col .va-dual__points li i,
.va-dual__col .va-dual__points li i {
	color: var(--va-secondary);
	margin-top: .2rem;
	font-size: .8rem;
	flex: 0 0 auto;
}

/* The theme paints this section's text white for its dark background.
   Inside the white columns everything has to flip back to dark. */
.vyom-discovery-section .va-dual__col,
.vyom-discovery-section .va-dual__col p,
.vyom-discovery-section .va-dual__col li,
.vyom-discovery-section .va-dual__col label,
.vyom-discovery-section .va-dual__col span,
.vyom-discovery-section .va-dual__col dt,
.vyom-discovery-section .va-dual__col dd,
.vyom-discovery-section .va-dual__col strong {
	color: var(--va-text);
}

.vyom-discovery-section .va-dual__col h3,
.vyom-discovery-section .va-dual__col .va-dual__title {
	color: var(--va-primary);
}

.vyom-discovery-section .va-dual__col .va-hint,
.vyom-discovery-section .va-dual__col .va-contact dt {
	color: var(--va-muted);
}

.vyom-discovery-section .va-dual__col .va-dual__eyebrow {
	color: var(--va-secondary);
}

.vyom-discovery-section .va-dual__col a {
	color: var(--va-primary);
}

/* The theme's card sits inside the column now, so drop its own frame. */
.va-dual__col .vyom-discovery-card {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
}

/* Keep the Discovery form readable on the white column. */
.va-dual__col .vyom-discovery-form label,
.va-dual__col .vyom-form-row label {
	color: var(--va-text);
}

.va-dual__col .vyom-discovery-form input[type="text"],
.va-dual__col .vyom-discovery-form input[type="email"],
.va-dual__col .vyom-discovery-form input[type="tel"],
.va-dual__col .vyom-discovery-form select {
	background: #fff;
	color: var(--va-text);
	border-color: var(--va-border);
}

.va-dual__col .vyom-form-checkbox label {
	color: var(--va-muted);
}

.va-dual__col .vyom-discovery-msg {
	color: var(--va-text);
}

.va-enquiry__card .va-form {
	margin-top: 0;
}

.va-enquiry .va-contact {
	margin-top: 1.25rem;
}

@media (max-width: 700px) {
	.va-dual__col {
		padding: 1.4rem;
	}
}
