/**
 * Homepage redesign ("Bold. Immersive. Emotional.") -- loaded only on the
 * front page (see WSC_Homepage::maybe_enqueue()), never on course/servicing
 * pages, so it can't collide with the .wsc-cc-* system used everywhere else.
 *
 * Colour system: CSS custom properties act as the single, centrally
 * adjustable palette (the brief's "Elementor global colours" requirement,
 * achieved without going through Elementor's own widget system -- see the
 * build-method note in the completion report). The green is deliberately
 * the same #2e834f/#256b40 already used sitewide in course-content.css,
 * not a second, slightly-different green.
 */

.wsc-home {
	--wsc-navy: #0a141f;
	--wsc-navy-deep: #05090d;
	--wsc-lime: #2e834f;
	--wsc-lime-dark: #256b40;
	--wsc-lime-bright: #3fa868;
	--wsc-white: #ffffff;
	--wsc-ink: #16202a;
	--wsc-mist: #c9d6dd;
	--wsc-section-max: 1180px;
}

.wsc-home img {
	max-width: 100%;
	height: auto;
}

.wsc-home a {
	color: inherit;
}

.wsc-home .wsc-container {
	max-width: var(--wsc-section-max);
	margin: 0 auto;
	padding: 0 24px;
}

@media ( prefers-reduced-motion: reduce ) {
	.wsc-home * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Reveal-on-scroll: elements start slightly lower/faded, IntersectionObserver
   (homepage.js) adds .is-visible. No-JS and reduced-motion both fall back to
   fully visible immediately -- content is never hidden behind JS. */
.wsc-reveal {
	opacity: 1;
	transform: none;
}
@media ( prefers-reduced-motion: no-preference ) {
	.wsc-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.wsc-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Skip link ---------- */
.wsc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wsc-lime);
	color: #fff;
	padding: 12px 20px;
	z-index: 10000;
	border-radius: 0 0 6px 0;
	font-weight: 600;
}
.wsc-skip-link:focus {
	left: 0;
}

/* ---------- Section 1: Hero ---------- */
.wsc-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	background: var(--wsc-navy-deep);
	color: #fff;
	overflow: hidden;
	/* The theme's own content wrapper chain (#content/#primary/.main_inner)
	   leaves a consistent 20px gap above the first block on every page --
	   invisible against its normal white background, but visible here as a
	   sliver above the transparent-header hero. Cancel it locally rather
	   than fighting the theme's float/wrapper structure. */
	margin-top: -20px;
}

.wsc-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wsc-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.wsc-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(5, 9, 13, 0.75) 0%,
		rgba(5, 9, 13, 0.55) 35%,
		rgba(5, 9, 13, 0.85) 100%
	);
}

.wsc-hero-content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding: 0 24px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

@media ( min-width: 900px ) {
	.wsc-hero-content {
		margin: 0 0 0 8vw;
		text-align: left;
	}
}

.wsc-hero-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78em;
	font-weight: 700;
	color: var(--wsc-lime-bright);
	margin: 0 0 18px;
}

.wsc-hero h1 {
	font-size: clamp(2.2em, 6vw, 3.6em);
	line-height: 1.08;
	margin: 0 0 20px;
	text-wrap: balance;
	color: #fff;
}

.wsc-hero-sub {
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--wsc-mist);
	max-width: 46ch;
	margin: 0 0 32px;
}

.wsc-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-bottom: 18px;
}

.wsc-btn {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	font-size: 0.98em;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.wsc-btn-primary {
	background: var(--wsc-lime);
	/* Something in the theme's own content-area link styling out-specifies
	   a plain .wsc-btn-primary{color} declaration, silently swapping this
	   to --wsc-ink and dropping contrast to 3.51:1 (fails WCAG AA 4.5:1).
	   Scope to .wsc-home to win reliably rather than chasing the theme rule. */
	color: #fff;
}
.wsc-home .wsc-btn-primary {
	color: #fff;
}
.wsc-btn-primary:hover,
.wsc-btn-primary:focus-visible {
	background: var(--wsc-lime-dark);
	transform: translateY(-1px);
}

.wsc-btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.65);
}
.wsc-btn-outline:hover,
.wsc-btn-outline:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

.wsc-hero-tertiary {
	color: var(--wsc-mist);
	text-decoration: underline;
	font-size: 0.92em;
}
.wsc-hero-tertiary:hover,
.wsc-hero-tertiary:focus-visible {
	color: #fff;
}

.wsc-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 2;
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 14px;
}
.wsc-scroll-cue::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 8px;
	background: #fff;
	border-radius: 2px;
	transform: translateX(-50%);
}
@media ( prefers-reduced-motion: no-preference ) {
	.wsc-scroll-cue::before {
		animation: wsc-scroll-dot 1.8s ease-in-out infinite;
	}
}
@keyframes wsc-scroll-dot {
	0%, 100% { top: 8px; opacity: 1; }
	60% { top: 22px; opacity: 0; }
}
@media ( max-width: 640px ) {
	.wsc-scroll-cue { display: none; }
}

/* ---------- Section 2: Trust strip ---------- */
.wsc-trust {
	background: var(--wsc-navy);
	padding: 34px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wsc-trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	text-align: center;
}
@media ( max-width: 900px ) {
	.wsc-trust-list {
		grid-template-columns: repeat(2, 1fr);
		text-align: left;
	}
}
@media ( max-width: 480px ) {
	.wsc-trust-list {
		grid-template-columns: 1fr;
	}
}
.wsc-trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--wsc-mist);
	font-size: 0.92em;
	font-weight: 600;
}
@media ( max-width: 900px ) {
	.wsc-trust-item { justify-content: flex-start; }
}
.wsc-trust-item svg {
	flex: none;
	width: 22px;
	height: 22px;
	stroke: var(--wsc-lime-bright);
}

/* ---------- Section 3: Pathways ---------- */
.wsc-section {
	padding: 88px 0;
}
.wsc-section--white {
	background: #fff;
	color: var(--wsc-ink);
}
.wsc-section--navy {
	background: var(--wsc-navy);
	color: #fff;
}
.wsc-section-heading {
	font-size: clamp(1.7em, 3.6vw, 2.4em);
	text-align: center;
	max-width: 780px;
	margin: 0 auto 48px;
	text-wrap: balance;
}
.wsc-section--navy .wsc-section-heading {
	color: #fff;
}

.wsc-pathways {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media ( max-width: 980px ) {
	.wsc-pathways { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 560px ) {
	.wsc-pathways { grid-template-columns: 1fr; }
}

.wsc-pathway-card {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	aspect-ratio: 3 / 4;
	isolation: isolate;
}
.wsc-pathway-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.5s ease;
}
@media ( prefers-reduced-motion: no-preference ) {
	.wsc-pathway-card:hover img,
	.wsc-pathway-card:focus-visible img {
		transform: scale(1.06);
	}
}
.wsc-pathway-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(5,9,13,0) 30%, rgba(5,9,13,0.92) 100%);
}
.wsc-pathway-body {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px;
}
.wsc-pathway-body h3 {
	margin: 0 0 8px;
	font-size: 1.2em;
	color: #fff;
}
.wsc-pathway-body p {
	margin: 0 0 14px;
	font-size: 0.9em;
	color: var(--wsc-mist);
	line-height: 1.4;
}
.wsc-pathway-cta {
	font-weight: 700;
	font-size: 0.88em;
	color: var(--wsc-lime-bright);
}
.wsc-pathway-card:focus-visible {
	outline: 3px solid var(--wsc-lime-bright);
	outline-offset: 2px;
}

/* ---------- Section 4: Journey timeline ---------- */
.wsc-journey {
	max-width: 980px;
	margin: 0 auto;
}
.wsc-journey-track {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: flex;
	justify-content: space-between;
	position: relative;
}
.wsc-journey-track::before {
	content: '';
	position: absolute;
	top: 17px;
	left: 4%;
	right: 4%;
	height: 2px;
	background: rgba(255, 255, 255, 0.18);
}
.wsc-journey-track li {
	position: relative;
	flex: 1;
	text-align: center;
	padding: 0 6px;
}
.wsc-journey-track a {
	display: block;
	text-decoration: none;
	color: var(--wsc-mist);
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.3;
}
.wsc-journey-track a:hover,
.wsc-journey-track a:focus-visible {
	color: #fff;
}
.wsc-journey-dot {
	display: block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	background: var(--wsc-navy);
	border: 2px solid var(--wsc-lime-bright);
	color: #fff;
	margin: 0 auto 12px;
	font-weight: 700;
	position: relative;
	z-index: 1;
}
@media ( max-width: 760px ) {
	.wsc-journey-track {
		flex-direction: column;
		gap: 24px;
		align-items: flex-start;
	}
	.wsc-journey-track::before {
		top: 4%;
		bottom: 4%;
		left: 17px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.wsc-journey-track li {
		display: flex;
		align-items: center;
		gap: 16px;
		text-align: left;
		width: 100%;
	}
	.wsc-journey-track a {
		display: flex;
		align-items: center;
		gap: 16px;
	}
	.wsc-journey-dot { margin: 0; }
}
.wsc-journey-sub {
	text-align: center;
	color: var(--wsc-mist);
	max-width: 620px;
	margin: 0 auto 28px;
}
.wsc-journey-cta {
	text-align: center;
}

/* ---------- Section 5: Featured courses ---------- */
.wsc-courses-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media ( max-width: 900px ) {
	.wsc-courses-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
.wsc-course-card {
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.wsc-course-card img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.wsc-course-card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.wsc-course-card h3 {
	margin: 0 0 8px;
	font-size: 1.1em;
}
.wsc-course-meta {
	font-size: 0.88em;
	color: #555;
	margin: 0 0 6px;
}
.wsc-course-price {
	font-weight: 700;
	color: var(--wsc-lime-dark);
	margin: 8px 0 16px;
}
.wsc-course-card .wsc-btn {
	margin-top: auto;
	text-align: center;
	padding: 12px 20px;
}
.wsc-courses-empty {
	text-align: center;
	color: #555;
	max-width: 560px;
	margin: 0 auto;
}

/* ---------- Section 6: Technical services split ---------- */
.wsc-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	border-radius: 14px;
	overflow: hidden;
}
@media ( max-width: 860px ) {
	.wsc-split { grid-template-columns: 1fr; }
}
.wsc-split-media {
	position: relative;
	min-height: 320px;
}
.wsc-split-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wsc-split-body {
	background: var(--wsc-navy);
	color: #fff;
	padding: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.wsc-split-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78em;
	font-weight: 700;
	color: var(--wsc-lime-bright);
	margin: 0 0 14px;
}
.wsc-split-body h2 {
	margin: 0 0 16px;
	font-size: 1.7em;
	color: #fff;
}
.wsc-split-body p {
	color: var(--wsc-mist);
	margin: 0 0 20px;
	line-height: 1.55;
}
.wsc-split-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.wsc-split-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	color: var(--wsc-mist);
}
.wsc-split-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--wsc-lime-bright);
	font-weight: 700;
}
.wsc-split-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Section 7: Why Wiltshire Scuba ---------- */
.wsc-why-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
@media ( max-width: 980px ) {
	.wsc-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 560px ) {
	.wsc-why-grid { grid-template-columns: 1fr; }
}
.wsc-why-card {
	text-align: center;
	padding: 26px 18px;
}
.wsc-why-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #eef7f0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wsc-why-icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--wsc-lime-dark);
}
.wsc-why-card h3 {
	font-size: 1.02em;
	margin: 0 0 8px;
	color: var(--wsc-ink);
}
.wsc-why-card p {
	font-size: 0.9em;
	color: #555;
	line-height: 1.5;
	margin: 0;
}
.wsc-why-cta {
	text-align: center;
	margin-top: 40px;
}

/* ---------- Section 8: Reviews ---------- */
.wsc-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}
@media ( max-width: 900px ) {
	.wsc-reviews-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.wsc-review-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 24px;
}
.wsc-review-stars {
	color: var(--wsc-lime-dark);
	letter-spacing: 2px;
	margin-bottom: 10px;
}
.wsc-review-card blockquote {
	margin: 0 0 14px;
	color: var(--wsc-ink);
	line-height: 1.55;
	font-style: italic;
}
.wsc-review-name {
	font-weight: 700;
	color: var(--wsc-ink);
}
.wsc-review-course {
	font-size: 0.85em;
	color: #666;
}
.wsc-reviews-note {
	text-align: center;
	color: #666;
	margin-top: 20px;
}
.wsc-reviews-note a {
	color: var(--wsc-lime-dark);
	font-weight: 600;
	text-decoration: none;
}
.wsc-reviews-note a:hover,
.wsc-reviews-note a:focus-visible {
	text-decoration: underline;
}

/* ---------- Section 8b: Tinted section variant ---------- */
.wsc-section--tinted {
	background: #f4f8f5;
	color: var(--wsc-ink);
}

/* ---------- Section 8c: Course decision guide ---------- */
.wsc-decision-intro {
	text-align: center;
	color: #555;
	max-width: 560px;
	margin: 0 auto 32px;
	font-size: 1.02em;
}
.wsc-decision-table-wrap {
	overflow-x: auto;
	border-radius: 10px;
	border: 1px solid #cfe0d4;
}
.wsc-decision-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	background: #fff;
	min-width: 620px;
}
.wsc-decision-table thead {
	background: var(--wsc-navy);
	color: #fff;
}
.wsc-decision-table th {
	padding: 13px 15px;
	text-align: left;
	font-weight: 600;
	font-size: 0.82em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wsc-decision-table td {
	padding: 13px 15px;
	border-bottom: 1px solid #e8f1ec;
	vertical-align: top;
	line-height: 1.45;
	color: var(--wsc-ink);
}
.wsc-decision-table tbody tr:last-child td {
	border-bottom: 0;
}
.wsc-decision-table tbody tr:hover td {
	background: #f0f7f3;
}
.wsc-decision-table td a {
	font-weight: 700;
	color: var(--wsc-lime-dark);
	text-decoration: none;
}
.wsc-decision-table td a:hover,
.wsc-decision-table td a:focus-visible {
	text-decoration: underline;
}
.wsc-decision-note {
	text-align: center;
	color: #555;
	margin-top: 22px;
	font-size: 0.9em;
}
.wsc-decision-note a {
	color: var(--wsc-lime-dark);
	font-weight: 600;
	text-decoration: none;
}
.wsc-decision-note a:hover {
	text-decoration: underline;
}

/* ---------- Section 8d: Meet the instructors ---------- */
.wsc-team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	max-width: 780px;
	margin: 0 auto;
}
@media ( max-width: 640px ) {
	.wsc-team-grid { grid-template-columns: 1fr; }
}
.wsc-team-card {
	background: #f8fbf9;
	border: 1px solid #cfe0d4;
	border-radius: 12px;
	padding: 30px 26px;
}
.wsc-team-card h3 {
	margin: 0 0 4px;
	font-size: 1.15em;
	color: var(--wsc-ink);
}
.wsc-team-role {
	font-size: 0.87em;
	font-weight: 600;
	color: var(--wsc-lime-dark);
	margin: 0 0 14px;
}
.wsc-team-card > p {
	font-size: 0.9em;
	color: #444;
	line-height: 1.55;
	margin: 0 0 18px;
}
.wsc-team-link {
	font-weight: 700;
	font-size: 0.88em;
	color: var(--wsc-lime-dark);
	text-decoration: none;
}
.wsc-team-link:hover,
.wsc-team-link:focus-visible {
	text-decoration: underline;
}

/* ---------- Section 9: Final CTA ---------- */
.wsc-final-cta {
	position: relative;
	padding: 100px 0;
	color: #fff;
	text-align: center;
	overflow: hidden;
}
.wsc-final-cta-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.wsc-final-cta-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wsc-final-cta-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(5,9,13,0.82) 0%, rgba(5,9,13,0.9) 100%);
}
.wsc-final-cta-content {
	position: relative;
	z-index: 2;
	max-width: 680px;
	margin: 0 auto;
}
.wsc-final-cta h2 {
	font-size: clamp(1.9em, 4.4vw, 2.6em);
	margin: 0 0 18px;
	color: #fff;
}
.wsc-final-cta p {
	color: var(--wsc-mist);
	font-size: 1.08em;
	margin: 0 0 32px;
}
.wsc-final-cta-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* ---------- Header transition on scroll ----------
   site-header.css already makes the header dark navy with white text on
   every page, all the time. The homepage's only difference is that it
   floats over the hero and starts fully transparent, becoming that same
   dark navy once scrolled -- so this only needs to override the
   *background*, not re-declare text colour or the icon-panel fix. */
body.wsc-home-page header#masthead,
body.wsc-home-page .site-header,
body.wsc-home-page header.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body.wsc-home-page.wsc-scrolled header#masthead,
body.wsc-home-page.wsc-scrolled .site-header,
body.wsc-home-page.wsc-scrolled header.header {
	background-color: var(--wsc-navy-deep, #05090d);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/*
 * Nav clearance wherever the horizontal menu is shown (961px and up).
 *
 * MEASURED, not assumed: the nav wraps to two rows at every width tested
 * from 1024px to 1800px, and its second row lands on this eyebrow at all of
 * them. Eight top-level items need about 833px, and the menu container is
 * narrower than that even on a wide screen because the theme constrains it
 * between the logo and the search/account/basket icons.
 *
 * So this is not the tablet-only problem it first looked like. It was scoped
 * to 961-1024px on the first attempt, which was wrong -- and that error was
 * invisible until the stylesheet actually shipped, because the version
 * constant had not been bumped and the browser was still holding the old
 * file.
 * The theme's header does not grow to accommodate the second row, so it
 * overhangs the hero and lands on top of this eyebrow -- measured at 1024px,
 * the nav's second row occupies y 74-124 while the eyebrow sits at y 97-116.
 *
 * Not caused by raising the nav item limit from six to eight on 2026-08-28:
 * the same collision happened with six items plus a "More" link, just with
 * less text in it. Raising the limit made an existing overlap more obvious.
 *
 * Pushing the hero down is deliberate over the alternative of squeezing the
 * items onto one row. Fitting eight into 636px needs roughly a quarter off
 * every item's width, which means shrinking type and padding on a
 * third-party theme's navigation at one narrow breakpoint -- more moving
 * parts, and it degrades the tap targets on precisely the device class that
 * is being touched rather than clicked. Two comfortable rows with room for
 * them is the better trade.
 */
@media ( min-width: 961px ) {
	.wsc-hero-content {
		padding-top: 46px;
	}
}