/**
 * Go Play Abroad – "How we work" tabs (Home, section #how-we-work).
 * Loaded only on pages whose Elementor data contains "gpa-how-tabs" (mu-plugins/goplayabroad.php, section 4).
 *
 * Everything that has a native control is set in Elementor (Nested Tabs widget: tab backgrounds,
 * borders, title font and colours, white panel, shadow, padding; headings, button, chips).
 * This file only draws what the widgets cannot: the tab badges and the step progress.
 * Colours and fonts come from the Elementor Kit globals.
 *
 * 1. Tab titles: number badge (CSS counter), kicker line (span.gpa-how-tabs__kicker in the tab title), radio mark.
 * 2. Steps: number circle + connector line. Hover a step (tap on touch screens): the previous steps
 *    turn "done" (navy + check), the hovered one "active" (gold). At rest step 01 is active. CSS only.
 * 3. Mobile.
 */
.gpa-how-tabs,
.gpa-how-steps {
	--gpa-navy: var(--e-global-color-primary, #0B1A33);
	--gpa-gold: var(--e-global-color-secondary, #F5B659);
	--gpa-gold-dark: var(--e-global-color-accent, #96600E);
	--gpa-text: var(--e-global-color-text, #4A5468);
	--gpa-white: var(--e-global-color-a1b2c05, #FFFFFF);
	--gpa-idle: #C5CCD8; /* inactive rings and dashed lines (design value, not a palette colour) */
	--gpa-font-head: var(--e-global-typography-primary-font-family, "Palanquin Dark"), sans-serif;
	--gpa-font-body: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	--gpa-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* 1. Tab titles ------------------------------------------------------------- */
.gpa-how-tabs .e-n-tabs-heading { counter-reset: gpa-tab; }
.gpa-how-tabs .e-n-tabs-heading .e-n-tab-title {
	flex: 1 1 0; min-width: 0; /* equal tabs; long titles wrap instead of overflowing */
	counter-increment: gpa-tab;
	align-items: center;
	min-height: 112px; /* gap badge-text = Nested Tabs > Icon spacing */
}
.gpa-how-tabs .e-n-tab-title::before {
	content: counter(gpa-tab);
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 58px; width: 58px; height: 58px; box-sizing: border-box;
	border: 1.5px dashed var(--gpa-gold-dark); border-radius: 50%;
	font-family: var(--gpa-font-head); font-size: 22px; line-height: 1; color: var(--gpa-navy);
	transition: background .2s, border-color .2s, color .2s;
}
.gpa-how-tabs .e-n-tab-title[aria-selected="true"]::before {
	border: 1.5px solid var(--gpa-navy); background: var(--gpa-navy); color: var(--gpa-gold);
}
/* Kicker above the label, left-aligned (Elementor centres the title text by default). */
.gpa-how-tabs .e-n-tab-title .e-n-tab-title-text {
	flex-direction: column; align-items: flex-start; gap: 4px;
	flex: 1 1 auto; min-width: 0; text-align: start;
}
.gpa-how-tabs .gpa-how-tabs__kicker {
	font-family: var(--gpa-font-body); font-size: 12px; font-weight: 700; line-height: 1.4;
	letter-spacing: .12em; text-transform: uppercase; color: var(--gpa-text);
}
.gpa-how-tabs .e-n-tab-title[aria-selected="true"] .gpa-how-tabs__kicker { color: var(--gpa-gold-dark); }
.gpa-how-tabs .e-n-tab-title::after {
	content: "";
	flex: 0 0 26px; width: 26px; height: 26px; box-sizing: border-box;
	border: 2px solid var(--gpa-idle); border-radius: 50%;
}
.gpa-how-tabs .e-n-tab-title[aria-selected="true"]::after {
	border-color: var(--gpa-navy);
	background: radial-gradient(circle, var(--gpa-gold) 0 6px, transparent 6.5px);
}

/* 2. Steps ------------------------------------------------------------------ */
.gpa-how-steps .gpa-how-step__track::after {
	content: "";
	flex: 1 1 auto; height: 0; margin: 0 14px;
	border-top: 2px dashed var(--gpa-idle);
}
.gpa-how-steps .gpa-how-step:last-child .gpa-how-step__track::after { content: none; }

.gpa-how-steps .gpa-how-step__num {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 56px; width: 56px; height: 56px; box-sizing: border-box;
	background: var(--gpa-white); border: 1.5px solid var(--gpa-idle); border-radius: 50%;
	transition: background .2s, border-color .2s, box-shadow .2s;
}
.gpa-how-steps .gpa-how-step__num .elementor-heading-title {
	font-family: var(--gpa-font-head); font-size: 20px; font-weight: 700; line-height: 1; color: var(--gpa-text);
}
.gpa-how-steps .gpa-how-step__title .elementor-heading-title { transition: color .2s; }

/* Active: step 01 at rest, or the hovered step. */
.gpa-how-steps:not(:has(.gpa-how-step:hover)) .gpa-how-step:first-child .gpa-how-step__num,
.gpa-how-steps .gpa-how-step:hover .gpa-how-step__num {
	background: var(--gpa-gold); border-color: var(--gpa-gold);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--gpa-gold) 22%, transparent);
}
.gpa-how-steps:not(:has(.gpa-how-step:hover)) .gpa-how-step:first-child .gpa-how-step__num .elementor-heading-title,
.gpa-how-steps .gpa-how-step:hover .gpa-how-step__num .elementor-heading-title { color: var(--gpa-navy); }
.gpa-how-steps .gpa-how-step:hover .gpa-how-step__title .elementor-heading-title { color: var(--gpa-gold-dark); }

/* Done: every step before the hovered one. */
.gpa-how-steps .gpa-how-step:has(~ .gpa-how-step:hover) .gpa-how-step__num { background: var(--gpa-navy); border-color: var(--gpa-navy); }
.gpa-how-steps .gpa-how-step:has(~ .gpa-how-step:hover) .gpa-how-step__num .elementor-heading-title { visibility: hidden; }
.gpa-how-steps .gpa-how-step:has(~ .gpa-how-step:hover) .gpa-how-step__num::after {
	content: ""; position: absolute; inset: 0;
	background: var(--gpa-gold);
	-webkit-mask: var(--gpa-check) center / 22px no-repeat; mask: var(--gpa-check) center / 22px no-repeat;
}
.gpa-how-steps .gpa-how-step:has(~ .gpa-how-step:hover) .gpa-how-step__track::after { border-top: 3px solid var(--gpa-navy); }

/* 3. Mobile ----------------------------------------------------------------- */
@media (max-width: 767px) {
	.gpa-how-tabs .e-n-tabs .e-n-tabs-heading { flex-direction: column; } /* tabs stacked */
	.gpa-how-tabs .e-n-tabs-heading .e-n-tab-title { flex: 0 0 auto; min-height: 0; }
	.gpa-how-tabs .e-n-tab-title::before { flex-basis: 44px; width: 44px; height: 44px; font-size: 18px; }
	.gpa-how-tabs .e-n-tab-title::after { flex-basis: 22px; width: 22px; height: 22px; }
	.gpa-how-steps .gpa-how-step__track::after { content: none; }
	.gpa-how-steps .gpa-how-step__num { flex-basis: 48px; width: 48px; height: 48px; }
}