/* ==========================================================================
   WSkills — layout, motion, and section design
   Mobile-first. Brand tokens come from theme.json (--wp--preset--color--*).
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.wskills-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}
.wskills-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.wskills-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Hero entrance — CSS-only (not JS/scroll-gated), since it's always above the fold */
@keyframes wskillsHeroIn {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.wskills-hero-in {
	opacity: 0;
	animation: wskillsHeroIn 0.7s ease forwards;
}
.wskills-hero-in--headline {
	animation-delay: 0.05s;
}
.wskills-hero-in--sub {
	animation-delay: 0.2s;
}
.wskills-hero-in--cta {
	animation-delay: 0.35s;
}
@media (prefers-reduced-motion: reduce) {
	.wskills-hero-in {
		animation: none;
		opacity: 1;
	}
}

/* ---------- Section spacing (single source of truth) ----------
   Every top-level homepage section is a direct child of <main>, which
   applies WordPress's default flow block-gap as a margin-top on each
   child. That's on top of each section's own padding, and on sections
   with a divider it stacked again with divider height — the shared
   cause of oversized gaps above section headings. Zero it here, once,
   for every section, instead of patching each section's padding. */
main.wp-block-group > .alignfull {
	margin-top: 0;
}

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}
.wskills-hero a:focus-visible,
.wskills-testimonials a:focus-visible,
.wskills-cta a:focus-visible {
	outline-color: #ffffff;
}

/* ---------- Section base ---------- */
.wskills-section {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}
.wskills-section--light {
	background: var(--wp--preset--color--light-background);
}
.wskills-section--white {
	background: #ffffff;
}
.wskills-section__heading {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	max-width: 20ch;
}
.wskills-section__heading--onDark {
	color: #ffffff;
}
.wskills-section__intro {
	max-width: 55ch;
	color: var(--wp--preset--color--text);
	font-size: 1.05rem;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* ---------- Header ---------- */
/* position:sticky lives on the auto-generated <header
   class="wp-block-template-part"> wrapper WordPress puts around the
   header template part, not on .wskills-header itself. That wrapper's
   containing block is .wp-site-blocks, which spans the whole page —
   plenty of room for sticky to work. .wskills-header's OWN direct
   parent is that same thin wrapper, auto-sized to exactly the
   header's own height with zero slack, which is why sticky silently
   no-ops when applied there: nothing to actually stick against. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.wskills-header {
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0);
	transition: box-shadow 0.25s ease;
}
/* Toggled by a tiny IntersectionObserver (see wskills.js) watching a
   1px sentinel at the very top of the page — not a scroll listener,
   so it doesn't run on every scroll tick, just the one crossing. */
.wskills-header.is-scrolled {
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
}
.wskills-header__row {
	padding-block: 1rem;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.wskills-header__logo {
	display: flex;
	align-items: center;
}
.wskills-header__logo img {
	display: block;
	height: auto;
}
.wskills-header__nav a {
	color: #e8e9eb !important;
	font-weight: 500;
}
.wskills-header__nav a:hover {
	color: #ffffff !important;
}
/* The mobile hamburger trigger is a 24x24 icon with zero padding by
   default — well under the ~44px touch-target minimum. Padding adds
   room around the icon without resizing it. */
.wskills-header .wp-block-navigation__responsive-container-open {
	padding: 10px;
	box-sizing: content-box;
}
.wskills-header__cta .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Logo + full nav + this button don't fit on one row below desktop
   widths (measured: needs ~782px at 768px viewport with only ~676px
   available) — forcing a 3-row wrap that made the sticky header eat
   145px of a phone's vertical space. Hidden below 1024px, where it's
   redundant anyway (Browse Courses is already prominent in the hero).
   Core's .wp-block-buttons{display:flex} rule ties this on specificity
   (both single-class) and wins on source order, so this needs the
   extra .wskills-header__row ancestor to actually win the override. */
@media (max-width: 1023px) {
	.wskills-header__row .wskills-header__cta {
		display: none;
	}
}
.wskills-header__cta .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(250, 91, 15, 0.55);
}

/* ---------- Hero ---------- */
.wskills-hero {
	position: relative;
	background: var(--wp--preset--color--secondary);
	overflow: hidden;
	padding-top: clamp(3.5rem, 9vw, 6rem);
	padding-bottom: 0;
}
.wskills-hero__blob {
	position: absolute;
	top: -12%;
	right: -14%;
	width: min(50%, 480px);
	opacity: 0.16;
	pointer-events: none;
}
.wskills-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 100%;
	padding-bottom: clamp(5rem, 11vw, 8rem);
}
.wskills-hero__headline {
	font-size: clamp(2.6rem, 7vw, 5.25rem);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
	max-width: 15ch;
	margin: 0 0 1.25rem;
}
.wskills-hero__headline mark,
.wskills-highlight {
	background: none;
	color: var(--wp--preset--color--primary);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.wskills-hero__sub {
	max-width: 42ch;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: #c7cad0;
	margin: 0 0 2rem;
}
.wskills-btn-lg .wp-block-button__link {
	font-size: 1.05rem;
	padding: 1rem 2.1rem;
	border-radius: 999px;
	box-shadow: 0 16px 34px -14px rgba(250, 91, 15, 0.55);
}
.wskills-btn-lg .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -14px rgba(250, 91, 15, 0.65);
}

/* Hero course search */
.wskills-hero-search {
	/* Also carries .wskills-hero-in, whose entrance animation targets
	   opacity/transform — that alone forces this element into its own
	   stacking context (even once the animation has finished), same as
	   the "Browse Courses" button wrapper below it. With both stacking
	   contexts left at the implicit z-index (auto), painting fell back
	   to DOM order, so the later button wrapper painted over this one
	   regardless of the dropdown's own z-index. An explicit z-index
	   here fixes the comparison between the two stacking contexts. */
	position: relative;
	z-index: 5;
	max-width: 420px;
	margin: 0 0 1.75rem;
}
.wskills-hero-search__form {
	display: flex;
	align-items: stretch;
	background: #ffffff;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.5);
}
.wskills-hero-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0.85rem 1.25rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--secondary);
	outline: none;
}
.wskills-hero-search__input::placeholder {
	color: #9c9c9c;
}
.wskills-hero-search__button {
	flex-shrink: 0;
	width: 48px;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}
.wskills-hero-search__button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 85%, black);
}
.wskills-hero-search__results {
	/* position:fixed plus top/left/width are set inline by JS, which
	   moves this element to be a direct child of <body> — see wskills.js.
	   That's what lets it render above the hero's overflow:hidden
	   (needed for the decorative blob) instead of being clipped by it. */
	background: #ffffff;
	border-radius: 1rem;
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5);
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	max-height: 320px;
	overflow-y: auto;
	z-index: 1000;
}
.wskills-hero-search__results li a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: 0.6rem;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	font-size: 0.9rem;
}
.wskills-hero-search__results li a:hover,
.wskills-hero-search__results li a:focus {
	background: var(--wp--preset--color--light-background);
	color: var(--wp--preset--color--primary);
}
.wskills-hero-search__results-empty {
	padding: 0.6rem 0.85rem;
	font-size: 0.85rem;
	color: #8d8e8e;
}

/* Organic dividers */
.wskills-divider {
	display: block;
	width: 100%;
	line-height: 0;
	position: relative;
	z-index: 1;
}
.wskills-divider svg {
	display: block;
	width: 100%;
	height: clamp(50px, 8vw, 110px);
}
/* Single shared gap between a divider's bottom edge and the heading that
   follows it (testimonials, CTA). Change once here, applies everywhere. */
:root {
	--wskills-after-divider-space: clamp(0.5rem, 2vw, 1rem);
}

/* ---------- Trust bar (overlaps hero) ---------- */
.wskills-trust {
	position: relative;
	z-index: 2;
	margin-top: clamp(-4.5rem, -7vw, -3rem);
	background: #ffffff;
	border-radius: 1.5rem;
	box-shadow: 0 24px 60px -24px rgba(20, 20, 25, 0.28);
	padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 3rem;
	justify-content: space-between;
}
.wskills-trust__stat {
	flex: 1 1 160px;
}
.wskills-trust__num {
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 800;
	color: var(--wp--preset--color--secondary);
	margin: 0;
	line-height: 1.1;
}
.wskills-trust__label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0.2rem 0 0;
}

/* ---------- Categories: asymmetric grid ---------- */
.wskills-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.wskills-cat-card {
	border-radius: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	position: relative;
	overflow: hidden;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.wskills-cat-card--light {
	background: #ffffff;
	color: var(--wp--preset--color--text);
	box-shadow: 0 12px 30px -18px rgba(20, 20, 25, 0.18);
}
.wskills-cat-card--dark {
	background: var(--wp--preset--color--secondary);
	color: #ffffff;
}
.wskills-cat-card--accent {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}
.wskills-cat-card__title {
	font-size: 1.25rem;
	margin: 0 0 0.4rem;
	line-height: 1.2;
}
.wskills-cat-card__title a {
	color: inherit;
	text-decoration: none;
}
/* Global Styles sets an explicit color on every heading (theme.json
   elements.heading), which otherwise wins over color:inherit on the
   link below it. Set the title's own color per card variant so it
   isn't silently overridden — this is what caused dark/accent cards
   to render charcoal-on-charcoal (invisible) titles. */
.wskills-cat-card--dark .wskills-cat-card__title,
.wskills-cat-card--accent .wskills-cat-card__title {
	color: #ffffff;
}
.wskills-cat-card--light .wskills-cat-card__title {
	color: var(--wp--preset--color--secondary);
}
.wskills-cat-card__link {
	margin: 0;
	font-size: 0.9rem;
}
.wskills-cat-card__link a {
	display: inline-block;
	padding: 0.7rem 0;
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
}
.wskills-cat-card__link a:hover {
	opacity: 1;
	text-decoration: underline;
}

@media (min-width: 780px) {
	.wskills-cat-grid {
		grid-template-columns: repeat(6, 1fr);
	}
	.wskills-cat-card:nth-child(1) {
		grid-column: span 3;
		grid-row: span 2;
		min-height: 340px;
	}
	.wskills-cat-card:nth-child(2) {
		grid-column: span 3;
	}
	.wskills-cat-card:nth-child(3) {
		grid-column: span 3;
	}
	.wskills-cat-card:nth-child(4) {
		grid-column: span 2;
	}
	.wskills-cat-card:nth-child(5) {
		grid-column: span 2;
	}
	.wskills-cat-card:nth-child(6) {
		grid-column: span 2;
	}
	.wskills-cat-card:nth-child(7) {
		grid-column: span 6;
	}
}

/* ---------- Featured courses ---------- */
.wskills-courses .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}
@media (min-width: 620px) {
	.wskills-courses .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 980px) {
	.wskills-courses .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
	.wskills-courses .wp-block-post-template > li:nth-child(2n),
	.wskills-courses .wp-block-post-template > div:nth-child(2n) {
		transform: translateY(2.25rem);
	}
}
.wskills-course-card {
	background: #ffffff;
	border-radius: 1.1rem;
	padding: 1.75rem;
	box-shadow: 0 12px 30px -18px rgba(20, 20, 25, 0.18);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
}
.wskills-course-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px -20px rgba(20, 20, 25, 0.28);
}
.wskills-course-card__image img {
	border-radius: 0.75rem;
	margin-bottom: 1rem;
}
.wskills-course-card__title a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	font-size: 1.15rem;
}
.wskills-course-card__fee {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0.35rem 0 0.5rem;
}
/* Graceful degradation: courses without a Fee value render an empty
   bound paragraph — collapse it instead of leaving a blank line. */
.wskills-course-card__fee:empty {
	display: none;
	margin: 0;
}
.wskills-course-card__excerpt {
	color: var(--wp--preset--color--text);
	font-size: 0.95rem;
}
.wskills-course-card__link {
	/* .wskills-course-card__link is itself the <a> (core/read-more
	   renders no nested anchor) — this previously targeted a
	   non-existent descendant and never applied. */
	display: inline-block;
	padding: 0.7rem 0;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}
.wskills-course-card__link:hover {
	text-decoration: underline;
}

/* Outline buttons ("View All Courses") — same lift/shadow language as
   every other button on the site. Scoped to the style class (not a
   custom className) so any future outline button picks it up too. */
.wp-block-button.is-style-outline .wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(250, 91, 15, 0.45);
}

/* ---------- Testimonials (color block, offset cards) ---------- */
.wskills-testimonials {
	position: relative;
	background: var(--wp--preset--color--secondary);
	padding-top: 0;
	padding-bottom: clamp(4rem, 8vw, 6rem);
	overflow: hidden;
}
.wskills-testimonials .wp-block-group.alignwide {
	padding-top: var(--wskills-after-divider-space);
}
.wskills-testimonials-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 700px) {
	.wskills-testimonials-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}
.wskills-testimonial-card {
	background: #ffffff;
	border-radius: 1.1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.4);
}
@media (min-width: 700px) {
	.wskills-testimonial-card:nth-child(odd) {
		transform: rotate(-0.6deg);
	}
	.wskills-testimonial-card:nth-child(even) {
		transform: rotate(0.6deg) translateY(1.25rem);
	}
}
.wskills-testimonial-card__quote {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text);
	margin: 0;
}
.wskills-testimonial-card__quote::before {
	content: "\201C";
	display: block;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	margin-bottom: 0.25rem;
}
.wskills-testimonial-card__name {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 1rem;
	margin: 1.25rem 0 0;
}
.wskills-testimonial-card__role {
	color: #8d8e8e;
	font-size: 0.85rem;
	margin: 0.15rem 0 0;
}

/* ---------- Testimonials archive (masonry) ----------
   CSS multi-column layout gives a true Pinterest-style masonry with
   zero JS: each tile flows into the shortest column and keeps its own
   natural height, so a one-line quote and a five-line quote both read
   as intentional instead of being forced into a uniform box. Deliberately
   a new tile class rather than reusing .wskills-testimonial-card — that
   class carries an unscoped nth-child rotation from the homepage's 2x2
   grid, which would fight the masonry's own organic stagger here. */
.wskills-testimonials-masonry {
	columns: 1;
	column-gap: 1.5rem;
}
@media (min-width: 700px) {
	.wskills-testimonials-masonry {
		columns: 2;
	}
}
@media (min-width: 1100px) {
	.wskills-testimonials-masonry {
		columns: 3;
	}
}
.wskills-testimonial-tile {
	background: #ffffff;
	border-radius: 1.1rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: 0 20px 45px -24px rgba(0, 0, 0, 0.3);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 1.5rem;
	display: inline-block;
	width: 100%;
}

/* ---------- CTA ---------- */
.wskills-cta {
	position: relative;
	background: var(--wp--preset--color--primary);
	padding-top: 0;
	padding-bottom: clamp(4rem, 9vw, 6rem);
	overflow: hidden;
}
.wskills-cta__inner {
	padding-top: var(--wskills-after-divider-space);
}
.wskills-cta__card {
	background: #ffffff;
	border-radius: 1.5rem;
	padding: clamp(2rem, 5vw, 3.25rem);
	box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.45);
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}
.wskills-cta__heading {
	font-size: clamp(1.75rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 0.75rem;
}
.wskills-cta__sub {
	color: var(--wp--preset--color--text);
	max-width: 46ch;
	margin: 0 auto 1.75rem;
}
/* Note: WPForms' custom block render doesn't apply the block's
   className attribute to any wrapper, so the .wskills-cta__form class
   set on the wp:wpforms/form-selector block never reaches the DOM —
   scope via the section wrapper instead. Fields default to full width
   of the card, reading lopsided against the centered heading above —
   narrow the whole form into its own centered column instead. */
.wskills-cta .wpforms-container {
	max-width: 460px;
	margin-inline: auto;
}
.wskills-cta .wpforms-submit-container {
	text-align: center;
}
/* WPForms' own field-size classes (Name/Email/Mobile Number/Course
   Category are all "medium" in the builder) cap width at max-width:60%
   independent of the .wpforms-container width above — this has gone
   missing from this file once already (a previous full-file deploy
   silently dropped it), so it's restored here AND duplicated directly
   in .wskills-hero-cta's own rules below rather than left as a single
   global rule that's easy to lose again. */
.wpforms-container input[type="text"].wpforms-field-small,
.wpforms-container input[type="text"].wpforms-field-medium,
.wpforms-container input[type="text"].wpforms-field-large,
.wpforms-container input[type="email"].wpforms-field-small,
.wpforms-container input[type="email"].wpforms-field-medium,
.wpforms-container input[type="email"].wpforms-field-large,
.wpforms-container input[type="tel"].wpforms-field-small,
.wpforms-container input[type="tel"].wpforms-field-medium,
.wpforms-container input[type="tel"].wpforms-field-large,
.wpforms-container select[name].wpforms-field-small,
.wpforms-container select[name].wpforms-field-medium,
.wpforms-container select[name].wpforms-field-large {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------- Hero CTA (home-cta.php only — About/single-course CTAs
   still use .wskills-cta above, untouched) ----------
   Orange ground (not dark) — deliberately a different color from
   .wskills-testimonials directly above it, so the section boundary is
   obvious from color contrast alone; no gap/divider trick needed the
   way the dark version required. Badges and submit button both switch
   to --secondary here since the sitewide default button color is
   --primary, which would otherwise vanish against this background —
   see the .wpforms-container override below. */
.wskills-hero-cta {
	position: relative;
	background: var(--wp--preset--color--primary);
	padding-block: clamp(3.5rem, 8vw, 6rem);
}
main.wp-block-group > .wskills-hero-cta {
	margin-top: clamp(24px, 4vw, 40px);
}
.wskills-hero-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.25rem;
}
.wskills-hero-cta__content {
	max-width: 640px;
	text-align: center;
}
.wskills-hero-cta__badges {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
}
.wskills-hero-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.42rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: #ffffff;
}
.wskills-hero-cta__badge svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	color: #ffffff;
}
.wskills-hero-cta__heading {
	font-size: clamp(2rem, 4.4vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: #ffffff;
	margin: 0 0 0.7rem;
}
.wskills-hero-cta__sub {
	font-size: clamp(1rem, 1.5vw, 1.1rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

/* The form bar. WPForms' modern-theme markup nests every field inside
   a single .wpforms-field-container wrapper with .wpforms-submit-
   container as a separate sibling after it — display:contents on the
   wrapper "unwraps" it for grid purposes, so its field children and
   the submit container can share one explicit grid instead of two
   disconnected layout contexts. Explicit grid-column/row placement
   (rather than relying on flex-wrap) is what guarantees the T&Cs
   checkbox — a full sentence with a link, not a labelled input — gets
   its own row instead of being squeezed into a field-width column. */
/* div.wpforms-container-full:not(:empty) in WPForms' own CSS sets
   background-color:var(--wpforms-background-color), which resolves to
   transparent — its "div + class + :not()" selector out-specifies a
   plain 2-class descendant selector by one element point (:not()'s
   specificity is its argument's, so :not(:empty) counts as a class).
   Same story for every other rule below with a "div.wpforms-container-
   full ..." comment: matched here by adding the div + full class so
   this reliably wins instead of tying (and losing the tie-break). */
.wskills-hero-cta div.wpforms-container.wpforms-container-full {
	width: 100%;
	max-width: 900px;
	background: #ffffff;
	border-radius: 16px;
	padding: 1.15rem 1.25rem;
	box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.5);
	/* The sitewide default (see the shared .wpforms-container rule
	   further down) sets this button to --primary/orange — on the dark
	   CTA that popped; on this orange one it would nearly vanish into
	   the background, the exact "no hard edge" problem flagged earlier.
	   --secondary here keeps it matching the badges above and gives it
	   a real edge against the orange ground. */
	--wpforms-button-background-color: var(--wp--preset--color--secondary);
	--wpforms-button-background-color-alt: var(--wp--preset--color--secondary);
	--wpforms-button-border-color: var(--wp--preset--color--secondary);
}
.wskills-hero-cta .wpforms-form {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	gap: 0.7rem;
}
.wskills-hero-cta .wpforms-field-container {
	display: contents;
}
.wskills-hero-cta .wpforms-field {
	margin: 0;
}
.wskills-hero-cta .wpforms-field-name { grid-column: 1; grid-row: 1; align-self: start; }
.wskills-hero-cta .wpforms-field-email { grid-column: 2; grid-row: 1; align-self: start; }
.wskills-hero-cta .wpforms-field-text { grid-column: 3; grid-row: 1; align-self: start; }
.wskills-hero-cta .wpforms-field-select { grid-column: 4; grid-row: 1; align-self: start; }
.wskills-hero-cta .wpforms-field-checkbox {
	grid-column: 1 / 4;
	grid-row: 2;
}
.wskills-hero-cta .wpforms-submit-container {
	grid-column: 4;
	grid-row: 2;
	margin: 0;
	padding: 0;
}
.wskills-hero-cta div.wpforms-container-full .wpforms-field-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.045em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.32rem;
}
.wskills-hero-cta .wpforms-field input[type="text"],
.wskills-hero-cta .wpforms-field input[type="email"],
.wskills-hero-cta .wpforms-field select {
	height: 44px;
	border-radius: 8px;
	background: var(--wp--preset--color--light-background);
	border: 1px solid #dde0e4;
	box-sizing: border-box;
	width: 100%;
	/* WPForms' own .wpforms-field-medium class (all 4 fields use it) sets
	   max-width:60% on the input itself, independent of the 1fr grid
	   column it sits in — without this override the grid cell scales
	   correctly but the input inside it doesn't fill it, which is
	   exactly the "extra space before the button" symptom. Kept here
	   (not just in the shared rule above) so this component doesn't
	   depend on that rule surviving future edits to stay correct. */
	max-width: 100%;
}
.wskills-hero-cta div.wpforms-container-full .wpforms-field-checkbox label {
	font-size: 0.85rem;
	color: var(--wp--preset--color--text);
}
.wskills-hero-cta .wpforms-submit-container button.wpforms-submit[type="submit"] {
	width: 100%;
	height: 44px;
	border-radius: 8px;
}
/* The sitewide hover shadow (further down) is orange-tinted, matching
   an orange button — this one's --secondary now, so its own hover
   shadow should be too rather than leaving a mismatched orange glow
   under a dark button. */
.wskills-hero-cta .wpforms-submit-container button.wpforms-submit[type="submit"]:hover {
	box-shadow: 0 10px 24px -14px rgba(51, 56, 66, 0.55);
}
@media (max-width: 768px) {
	.wskills-hero-cta .wpforms-form {
		grid-template-columns: 1fr;
	}
	.wskills-hero-cta .wpforms-field-name,
	.wskills-hero-cta .wpforms-field-email,
	.wskills-hero-cta .wpforms-field-text,
	.wskills-hero-cta .wpforms-field-select,
	.wskills-hero-cta .wpforms-field-checkbox,
	.wskills-hero-cta .wpforms-submit-container {
		grid-column: 1;
		grid-row: auto;
	}
}

/* WPForms buttons site-wide — matches Global Styles primary button.
   WPForms prints its own `:root { --wpforms-button-background-color:
   #066aab; ... }` block inline, late in wp_footer — at equal
   specificity, that wins on source order regardless of our own :root
   rule. Targeting .wpforms-container (present on every WPForms form,
   including the future Contact page one) has higher specificity, so
   it wins independent of load order. WPForms applies its own hover
   darkening automatically, so base and alt use the same solid color. */
.wpforms-container {
	--wpforms-button-background-color: var(--wp--preset--color--primary);
	--wpforms-button-background-color-alt: var(--wp--preset--color--primary);
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-text-color-alt: #ffffff;
	--wpforms-button-border-color: var(--wp--preset--color--primary);
	--wpforms-button-border-style: none;
	--wpforms-button-border-size: 0px;
	--wpforms-button-border-radius: 999px;
	/* WPForms' own defaults (43px / 41px) sit just under the ~44px
	   touch-target minimum. */
	--wpforms-field-size-input-height: 44px;
	--wpforms-button-size-height: 44px;
}
/* Same lift/shadow language as every other button. WPForms already
   darkens the background on hover via its own rule (a different
   property), so this layers on top rather than conflicting with it.
   WPForms' own `button[type=submit]` rule outranks a plain two-class
   selector (element + attribute beats it on specificity), which was
   overriding our transition timing — matched here so the hover speed
   is identical to every other button, not just visually similar. */
.wpforms-container button.wpforms-submit[type="submit"] {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wpforms-container button.wpforms-submit[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(250, 91, 15, 0.55);
}

/* ---------- Footer ---------- */
.wskills-footer {
	background: var(--wp--preset--color--secondary);
	color: #cfd1d5;
	padding-top: clamp(3rem, 6vw, 4.5rem);
}
.wskills-footer h3,
.wskills-footer h4 {
	color: #ffffff;
}
.wskills-footer__logo {
	margin-bottom: 1rem;
}
.wskills-footer__logo img {
	display: block;
	height: auto;
}
.wskills-footer a {
	color: #cfd1d5;
	text-decoration: none;
}
.wskills-footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}
.wskills-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}
@media (min-width: 700px) {
	.wskills-footer__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.wskills-footer__social .wp-block-social-link a {
	background: rgba(255, 255, 255, 0.12);
}
.wskills-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 1.5rem;
	font-size: 0.85rem;
}

/* ---------- Single course: hero, stats, content ---------- */
.wskills-course-hero {
	padding-bottom: 0;
}
.wskills-course-hero__category {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}
.wskills-course-hero__category a {
	color: #ffffff;
	text-decoration: none;
}
.wskills-course-hero__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	max-width: 24ch;
}
.wskills-course-stats {
	flex-wrap: wrap;
}
.wskills-course-stats__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 220px;
}
.wskills-course-stats__button {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wskills-course-stats__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(250, 91, 15, 0.55);
}

.wskills-course-content-wrap {
	max-width: 780px;
}
.wskills-course-content h2 {
	color: var(--wp--preset--color--secondary);
	font-size: clamp(1.4rem, 2.5vw, 1.75rem);
	font-weight: 800;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid #e4e4e4;
}
.wskills-course-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.wskills-course-content h3 {
	color: var(--wp--preset--color--primary);
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	font-weight: 700;
	margin-top: 1.75rem;
}
.wskills-course-content p {
	color: var(--wp--preset--color--text);
	line-height: 1.75;
	margin-bottom: 1rem;
}
.wskills-course-content ul,
.wskills-course-content ol {
	color: var(--wp--preset--color--text);
	line-height: 1.7;
	padding-left: 1.25rem;
	margin-bottom: 1.25rem;
}
.wskills-course-content li {
	margin-bottom: 0.5rem;
}
.wskills-course-content a {
	color: var(--wp--preset--color--primary);
}
.wskills-course-content img {
	border-radius: 0.75rem;
	height: auto;
}

/* ---------- Contact page ---------- */
.wskills-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 900px) {
	.wskills-contact-grid {
		grid-template-columns: 1fr 1.3fr;
	}
}
.wskills-contact-card {
	background: #ffffff;
	border-radius: 1rem;
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 12px 30px -18px rgba(20, 20, 25, 0.18);
}
.wskills-contact-card__label {
	color: var(--wp--preset--color--primary);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin: 0 0 0.4rem;
}
.wskills-contact-card__value {
	color: var(--wp--preset--color--secondary);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.5;
}
.wskills-contact-card__value a {
	display: inline-block;
	padding: 0.65rem 0;
	color: inherit;
	text-decoration: none;
}
.wskills-contact-card__value a:hover {
	color: var(--wp--preset--color--primary);
}
.wskills-contact-form-card {
	background: #ffffff;
	border-radius: 1.5rem;
	padding: clamp(2rem, 4vw, 2.75rem);
	box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.25);
}
.wskills-contact-form-card__heading {
	color: var(--wp--preset--color--secondary);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	margin: 0 0 0.5rem;
}
.wskills-contact-form-card__sub {
	color: var(--wp--preset--color--text);
	margin: 0 0 1.5rem;
}

/* ---------- About page ---------- */
.wskills-about-story {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 900px) {
	.wskills-about-story {
		grid-template-columns: 1fr 1fr;
	}
}
.wskills-about-story__text {
	color: var(--wp--preset--color--text);
	line-height: 1.75;
	margin-bottom: 1rem;
}
.wskills-values-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.wskills-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1000px) {
	.wskills-values-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.wskills-values-grid .wskills-cat-card {
	min-height: 200px;
}
.wskills-values-grid__text {
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
	opacity: 0.92;
}

/* ---------- Floating callback CTA ----------
   Sits below the sticky header and hero search dropdown (both z-index:
   1000) so it never fights either for the top of the stack — when the
   mobile menu opens (nested inside the header's own stacking context)
   it naturally covers this instead of floating above it. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
.wskills-floating-cta {
	position: fixed;
	right: clamp(1rem, 4vw, 1.75rem);
	bottom: calc(clamp(1rem, 4vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.35rem 0.85rem 1.05rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 16px 34px -14px rgba(250, 91, 15, 0.55);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wskills-floating-cta:hover,
.wskills-floating-cta:focus-visible {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -14px rgba(250, 91, 15, 0.65);
}
.wskills-floating-cta svg {
	flex-shrink: 0;
}
@media (max-width: 420px) {
	.wskills-floating-cta {
		padding: 0.8rem;
	}
	.wskills-floating-cta__label {
		display: none;
	}
}