/*
Theme Name: Power of X
Description: Official custom WordPress theme for the Power of X website.
Version: 0.3.5
Text Domain: powerx
Requires at least: 6.4
Requires PHP: 7.4
*/

/* =========================================================
   Base / global
   ========================================================= */

/* box-sizing:border-box so padding doesn't grow an element past a
   flex-basis or width it was given (several two-column sections size
   their columns this way). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* Fluid side gutter for every section and the header: ~20px at a small
	   phone up to ~48px at a wide desktop, scaling continuously in between
	   rather than jumping between fixed breakpoint values. */
	--powerx-gutter: clamp(1.25rem, 0.85rem + 1.8vw, 3rem);

	/* WordPress serves stale fluid-clamp values for these four presets
	   regardless of theme.json's "fluid":false flag — redeclared here to
	   the design system's actual type scale (Small 14px, Body Large 16px,
	   H3 20px, H2 28px). Every var(--wp--preset--font-size--*) usage in
	   this file inherits the fix automatically. xx-large (H1, 44px)
	   resolves correctly on its own and needs no override. */
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--medium: 1rem;
	--wp--preset--font-size--large: 1.25rem;
	--wp--preset--font-size--x-large: 1.75rem;

	/* =========================================================
	   Light/dark theme tokens
	   =========================================================
	   Single-role tokens (off-white, dark-text, muted-text) flip directly
	   via [data-theme="dark"] below, so every existing
	   var(--wp--preset--color--*) usage inherits the new value with no
	   further edits. Dual-role tokens get their own dedicated variable
	   instead, since flipping the underlying preset would break their
	   other role:
	     - white/light-blue are used both as a light surface (cards — must
	       go dark) and as text/shadow colour on a permanently-dark panel
	       (e.g. the campaign strip's white text, which must stay light in
	       both themes) — surfaces use --powerx-card/--powerx-surface.
	     - dark-navy is used both as heading text (must go light) and as
	       the footer/campaign-strip's permanently-dark background (must
	       stay dark in both themes) — heading text uses --powerx-heading.
	     - rgba(32, 26, 23, alpha) borders/shadows use --powerx-border-rgb
	       for just the RGB triplet, so each rule keeps its own alpha.
	     - primary-blue is used both as link/text colour (brightens in
	       dark mode for contrast) and as a deliberately muted card/hover
	       fill (header CTA hover, the query form's checked radio option)
	       that must stay the same shade in both themes — fills use
	       --powerx-accent-fill. */
	--powerx-card: #FFFFFF;
	--powerx-surface: var(--wp--preset--color--light-blue);
	--powerx-heading: var(--wp--preset--color--dark-navy);
	--powerx-border-rgb: 32, 26, 23;
	/* Literal value, not var(--primary-blue) — custom properties resolve
	   live wherever they're read, so referencing primary-blue here would
	   pick up its dark-mode override too. */
	--powerx-accent-fill: #9C4E00;
}

[data-theme="dark"] {
	--wp--preset--color--off-white: #121212;
	--wp--preset--color--dark-text: #F0F0F0;
	--wp--preset--color--muted-text: #B8B8B8;
	/* Accessible Orange is tuned for 4.5:1 contrast on white; that drops
	   below accessible contrast on near-black, so dark mode gets its own
	   lighter tint for link/accent text. Button fills (bright-blue, the
	   brand orange) stay the same in both themes. */
	--wp--preset--color--primary-blue: #FFA857;
	--powerx-card: #232323;
	--powerx-surface: #1C1C1C;
	--powerx-heading: #FFFFFF;
	--powerx-border-rgb: 255, 255, 255;
}

.wp-block-button__link {
	/* border-radius comes from the theme.json button token, not from here. */
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	background-color: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--powerx-card);
	color: var(--powerx-heading);
}

/* =========================================================
   Accessibility
   ========================================================= */

.powerx-skip-link {
	position: absolute;
	top: -6rem;
	left: 1rem;
	z-index: 100;
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
	padding: 0.75rem 1.25rem;
	border-radius: 2px;
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}

.powerx-skip-link:focus {
	top: 1rem;
}

/* Not drawn from either orange token: the accessible orange drops to
   2.87:1 against the charcoal footer/panels, and the brand orange drops to
   2.35:1 on white — this value is tuned to clear 3:1 against both, since
   focusable elements sit on light and dark backgrounds alike. */
:focus-visible {
	outline: 2px solid #C06A10;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(192, 106, 16, 0.25);
}

/* =========================================================
   Shared layout utilities
   ========================================================= */

/* Each section's inner content caps at the theme.json wide-size token
   (WordPress exposes it as this CSS custom property) via a plain class
   selector, which wins over WordPress's low-specificity generated
   centering rule without touching block markup.
   .powerx-header__inner deliberately excluded: the header row uses
   nearly the full viewport width (just the header's own --powerx-gutter
   padding, no separate content cap) — six nav items plus two CTA
   buttons need that width, and capping at wideSize (1240px) wraps the
   row onto two lines. */
.powerx-hero__grid,
.powerx-information-list,
.powerx-announcements__grid,
.powerx-faq__grid {
	max-width: var(--wp--style--global--wide-size);
}

.powerx-hero,
.powerx-about,
.powerx-info-hub,
.powerx-digital-support,
.powerx-announcements,
.powerx-faq,
.powerx-stories,
.powerx-media-gallery,
.powerx-footer {
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
}

/* Class-selected rather than tag-selected, so it applies the same whether
   the heading is a page's own <h1> (About) or a
   .powerx-section-intro__heading on another page. */
.powerx-about__heading,
.powerx-section-intro__heading {
	font-size: clamp(2rem, 3vw, 3.25rem);
	line-height: 1.1;
}

/* Breadcrumb trail, used on pages nested under Programme Information
   (Required Documents, Application Status, Placement, Attendance
   Information). */
.powerx-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-breadcrumb p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-text);
}

.powerx-breadcrumb a {
	color: var(--wp--preset--color--muted-text);
}

.powerx-breadcrumb a:hover,
.powerx-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--primary-blue);
}

.powerx-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--dark-text);
	font-weight: 600;
}

/* Page intro — eyebrow label, heading and lead paragraph pattern used at
   the top of every content page (About, Programme Information,
   Announcements, FAQs, Support). */
.powerx-eyebrow {
	color: var(--wp--preset--color--primary-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.powerx-section-intro {
	max-width: 42rem;
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-section-intro__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-section-intro__text {
	color: var(--wp--preset--color--muted-text);
	margin: 0;
}

.powerx-text-link {
	margin: 0;
}

.powerx-text-link a {
	color: var(--wp--preset--color--primary-blue);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--primary-blue);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
	/* This class wraps every mailto/URL link on the site (Support
	   channels, document CTAs). A long unbroken address like
	   "recruitment@tothepowerofx.co.za" has no natural break point, so
	   without this it could push a narrow card or mobile column wider
	   than the viewport instead of wrapping. */
	overflow-wrap: break-word;
}

.powerx-text-link a:hover,
.powerx-text-link a:focus-visible {
	color: var(--powerx-heading);
	border-color: var(--powerx-heading);
}

/* Small icon prefix, used for the Support page's contact channels — an
   inline-flex row rather than changing .powerx-text-link's own display,
   so every other (icon-less) use of the shared class is unaffected. */
.powerx-text-link--icon {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.powerx-text-link__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--powerx-surface);
	color: var(--wp--preset--color--primary-blue);
}

/* Placeholder panel — used on pages that don't have content yet (the
   Programme Information sub-pages). A thin rule and generous top spacing
   rather than a boxed card — reads as a continuation of the page, not a
   separate component. */
.powerx-placeholder-panel {
	max-width: 42rem;
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
}

.powerx-placeholder-panel__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-placeholder-panel__text {
	color: var(--wp--preset--color--muted-text);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-placeholder-panel__nav {
	gap: var(--wp--preset--spacing--md);
}

/* =========================================================
   Header
   ========================================================= */

.powerx-header {
	position: sticky;
	top: 0;
	z-index: 45;
	background-color: var(--powerx-card);
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.08);
	/* A soft shadow (rather than a heavier border alone) gives the masthead a
	   more deliberate, elevated separation from page content — restrained
	   enough to stay comfortable while the header is sticky during scroll. */
	box-shadow: 0 1px 16px rgba(var(--powerx-border-rgb), 0.05);
	/* Literal 4px, not a spacing-scale token (xs is the smallest at 8px) —
	   the logo is now sized to fill nearly the full bar height (see
	   .powerx-header__brand-image), so only a thin margin is kept above
	   and below it; total header height stays about what it was. */
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
}

/* WordPress's admin toolbar is a fixed 32px bar (46px below 782px) when
   logged in. Without this, the sticky header's top:0 sticks it underneath
   that bar instead of below it once the page is scrolled. */
body.admin-bar .powerx-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .powerx-header {
		top: 46px;
	}
}

.powerx-header__inner {
	/* The header block's own "constrained" layout (header.html) generates
	   a `max-width:1200px` rule via a :where()-wrapped selector (zero
	   specificity) — overridden to `none` so the row fills the header's
	   full --powerx-gutter-padded width, which the nav plus two CTAs need
	   to stay on one line. */
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	/* header.html's own layout attribute sets flexWrap:"wrap" (same
	   WordPress block-layout default .powerx-hero__grid works around
	   above) — left alone, any viewport width just above the hamburger
	   breakpoint where the desktop row doesn't quite fit wraps the nav
	   onto its own line below the brand instead of collapsing to the
	   hamburger, which can visually strand the logo on its own row.
	   Forced nowrap here; the hamburger breakpoint below is set with
	   enough headroom over the measured fit width that nowrap never
	   forces horizontal overflow instead. */
	flex-wrap: nowrap;
}

.powerx-header__brand {
	flex-shrink: 0;
}

/* Wraps the logo and the Login to Portal button as one flex item within
   .powerx-header__inner — space-between still applies only between this
   group and .powerx-header__nav-group, exactly as it did when the logo
   alone was .powerx-header__inner's first child. flex-wrap:wrap (not
   nowrap) is deliberate: at widths too narrow to fit the logo and button
   on one line, the button drops to its own line directly under the logo
   rather than overlapping it or forcing horizontal overflow — the
   "cleanest responsive treatment" the brief allows for when the exact
   desktop arrangement no longer fits, while keeping the two visually
   grouped together at every width. */
.powerx-header__brand-group {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--xs);
	column-gap: var(--wp--preset--spacing--md);
}

/* Restrained outlined treatment (orange accent border, transparent fill)
   rather than the solid .powerx-header__cta--primary fill — deliberately
   the visually quieter of the two button languages already in this
   header, so Login to Portal reads as available but does not compete
   with the programme logo immediately to its left. */
.powerx-header__login-btn {
	flex-shrink: 0;
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--primary-blue);
	border-radius: 4px;
	color: var(--powerx-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.powerx-header__login-btn:hover,
.powerx-header__login-btn:focus-visible {
	background-color: var(--powerx-accent-fill);
	border-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

.powerx-header__nav-group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
}

.powerx-header__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.powerx-header__cta {
	flex-shrink: 0;
	display: inline-block;
	padding: 0.625rem 1.125rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Recruit: primary orange action. */
.powerx-header__cta--primary {
	border: 2px solid transparent;
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-text);
}

.powerx-header__cta--primary:hover,
.powerx-header__cta--primary:focus-visible {
	background-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

/* Employer: outlined/neutral secondary action — present with equal
   reachability but visually subordinate to the Recruit CTA, since Recruit
   is this site's primary journey. */
.powerx-header__cta--secondary {
	border: 2px solid rgba(var(--powerx-border-rgb), 0.22);
	background-color: transparent;
	color: var(--wp--preset--color--dark-text);
}

.powerx-header__cta--secondary:hover,
.powerx-header__cta--secondary:focus-visible {
	border-color: var(--powerx-heading);
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
}

/* Short "Employer Interest" label is the default (fits the nav row down
   to the 600px overlay breakpoint); the full accessible label swaps back
   in once the header has room to spare. */
.powerx-header__cta-full {
	display: none;
}

.powerx-header__cta-short {
	display: inline;
}

@media (min-width: 1280px) {
	.powerx-header__cta-full {
		display: inline;
	}

	.powerx-header__cta-short {
		display: none;
	}
}

/* =========================================================
   Theme toggle
   ========================================================= */

.powerx-theme-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background-color: transparent;
	border: 1px solid rgba(var(--powerx-border-rgb), 0.18);
	border-radius: 50%;
	color: var(--wp--preset--color--dark-text);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.powerx-theme-toggle:hover,
.powerx-theme-toggle:focus-visible {
	border-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--primary-blue);
}

.powerx-theme-toggle__icon--sun {
	display: none;
}

[data-theme="dark"] .powerx-theme-toggle__icon--moon {
	display: none;
}

[data-theme="dark"] .powerx-theme-toggle__icon--sun {
	display: block;
}

/* Mobile toggle stays out of the collapsed header row (matching
   .powerx-header__actions) and only appears once the hamburger overlay
   is open — :has() lets this sibling react to the overlay's open state
   nested deep inside the wp:navigation block, without needing to be a
   literal child of it (core's navigation block only accepts nav-link
   content, not an arbitrary <button>). */
.powerx-theme-toggle-mobile-wrap {
	display: none;
}

.powerx-theme-toggle--mobile {
	width: auto;
	height: auto;
	gap: var(--wp--preset--spacing--xs);
	padding: 0.625rem 1rem;
	border-radius: 999px;
}

.powerx-theme-toggle__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Mobile-overlay-only duplicates of the two header actions (see
   header.html) — hidden everywhere else, since the collapsed mobile
   header itself stays logo+hamburger only. */
/* Specificity needs to beat core's own inline `.wp-block-navigation
   .wp-block-navigation-item { display:flex }` (0-2-0) — a bare
   .powerx-header__nav-action selector (0-1-0) loses that comparison
   regardless of source order, so the extra .powerx-header__nav ancestor
   class is required here, not just stylistic consistency. */
.powerx-header__nav .wp-block-navigation-item.powerx-header__nav-action {
	display: none;
}

/* Suppresses the plain nav-link hover underline (below) on these two —
   they read as buttons, not text links. */
.powerx-header__nav-action > a::after {
	display: none;
}

/* Both header logos are transparent PNGs (real alpha, not a colour-matched
   background) cropped tightly to just the branding band — see
   assets/images/README.md — so no object-fit/object-position cropping is
   needed, and the header's own background shows through around the
   artwork rather than needing to match anything.

   Sized by height (not width) so the logo fills the bar's available
   height edge-to-edge — width:auto scales each by its own intrinsic
   ratio (~2.8:1 for both), and max-width:100% is a safety cap in case a
   narrow viewport can't fit the implied width (shrinks width, and with
   it height, rather than overflowing). The clamp() floor (4.5rem/72px)
   is the phone size, the ceiling (6rem/96px) is the desktop size —
   chosen together with the header's own 4px padding so the header's
   total height doesn't grow past what it was at the previous logo size. */
.powerx-header__brand-image {
	height: clamp(4.5rem, 9.25vw, 6rem);
	width: auto;
	max-width: 100%;
}

/* Theme-switched by CSS, same [data-theme="dark"] pattern as the sun/moon
   toggle icons — both images are always in the DOM, but only one is
   display:block, decided before first paint by the no-flash inline script
   in functions.php, so there's no flash of the wrong logo on load or on
   toggle. */
.powerx-header__brand-image--light {
	display: block;
}

.powerx-header__brand-image--dark {
	display: none;
}

[data-theme="dark"] .powerx-header__brand-image--light {
	display: none;
}

[data-theme="dark"] .powerx-header__brand-image--dark {
	display: block;
}

/* Deliberate, even spacing between nav items rather than the block's
   default flex gap, so the row reads as intentionally composed. */
.powerx-header__nav .wp-block-navigation__container {
	column-gap: var(--wp--preset--spacing--md);
}

.powerx-header__nav .wp-block-navigation-item > a {
	position: relative;
	color: var(--wp--preset--color--dark-text);
	text-decoration: none;
	font-weight: 600;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.powerx-header__nav .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.25rem;
	width: 0;
	height: 2px;
	/* Decorative accent only — the accompanying text-colour change on the
	   same hover state (below) is what carries the accessible contrast. */
	background-color: var(--wp--preset--color--bright-blue);
	transition: width 0.2s ease;
}

.powerx-header__nav .wp-block-navigation-item > a:hover,
.powerx-header__nav .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--primary-blue);
	text-decoration: none;
}

.powerx-header__nav .wp-block-navigation-item > a:hover::after,
.powerx-header__nav .wp-block-navigation-item > a:focus-visible::after {
	width: 100%;
}

/* =========================================================
   Header dropdown navigation (Programme / Media / Support)
   =========================================================
   Desktop open/close (hover, click-toggle on the caret button, Escape,
   click-outside, focus-within) and the width:0->auto / opacity 0->1
   reveal are all WordPress core's own navigation-submenu CSS/script
   (wp-includes/blocks/navigation) — untouched here. This block only
   layers the site's own colours/spacing onto that existing mechanism,
   plus the one structural override mobile needs (below, inside the
   1600px hamburger breakpoint): core's dropdown panel is
   position:absolute at every width, which would float a group's
   5-item list over the sibling groups below it inside the stacked
   mobile overlay instead of pushing them down — switched to a static,
   in-flow panel there so the groups behave as an accordion, matching
   the desktop dropdown everywhere else. */

/* The caret toggle is a sibling <button> next to the trigger link
   (core markup), not something inside it — needs its own reset since
   .wp-block-navigation-item > a above only reaches the link. */
.powerx-header__nav .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	/* Left margin only — this button sits immediately adjacent to the
	   trigger link with zero gap by default (both are plain flex
	   siblings in .wp-block-navigation-item, no gap set between them),
	   which made the caret read as part of the word instead of a
	   distinct control. 7px lands in the requested 6-8px range. */
	margin: 0 0 0 7px;
	padding: 0.5rem 0.25rem;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--dark-text);
	cursor: pointer;
	/* Protects this button's own box from ever being shrunk/encroached
	   on by its flex sibling (the trigger link) — a real device
	   recording showed mobile taps aimed at this button resolving to
	   the trigger instead, and header-navigation.js's document-level
	   click interception (which checks the real event.target) is the
	   actual fix for that, but this removes any geometry ambiguity
	   between the two hit-areas as well, belt and suspenders. */
	flex-shrink: 0;
}

/* Trigger link only takes the row's remaining space rather than any
   width it might otherwise be given, so it can never grow into this
   button's box — same reasoning as flex-shrink:0 above, from the other
   side. min-width:0 lets a flex item actually shrink below its
   content's natural width when needed (flex's own default,
   min-width:auto, would refuse to). */
.powerx-header__nav .has-child > .wp-block-navigation-item__content {
	flex: 1 1 auto;
	min-width: 0;
}

.powerx-header__nav .wp-block-navigation-submenu__toggle:hover,
.powerx-header__nav .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--wp--preset--color--primary-blue);
}

/* Root cause of the "tiny dot" appearance: core sizes this icon via
   .wp-block-navigation__submenu-icon { width:0.6em; height:0.6em } on
   the button, with .wp-block-navigation__submenu-icon svg
   { width:inherit; height:inherit } passing that same 0.6em down to
   the svg (~8-9.5px depending on the nav's font-size — not the 12x12
   its own width/height HTML attributes suggest; CSS always wins over
   those presentational attributes) — AND its colour was
   currentColor, i.e. this button's own `color` rule above
   (--wp--preset--color--dark-text, the same colour as the label next
   to it). Small + same colour as the surrounding text is what read as
   a faint dot rather than a distinct control. Fixed with explicit px
   sizing (matching core's own selector shape/specificity — 2 classes —
   so this wins on cascade order without needing !important) and an
   explicit stroke colour using the exact token the Recruit button's
   fill already uses, so the chevron is unmistakably "the same orange"
   rather than an approximation — and unlike the text-tuned
   --primary-blue token, --bright-blue isn't listed in the
   [data-theme="dark"] override block near :root, so it keeps its one
   light-mode value in dark mode too; one rule covers both themes with
   no separate dark-mode override needed. Button itself gets
   width/height:auto rather than a second
   fixed px value: this project's own global box-sizing:border-box
   rule means core's fixed 0.6em button box was already smaller than
   this button's own padding below (0.5rem/0.25rem desktop, 0.75rem
   mobile), clamping its content area toward zero — auto lets the
   button size itself around its padding and the svg's explicit 10px
   instead of fighting it. */
.powerx-header__nav .wp-block-navigation__submenu-icon {
	width: auto;
	height: auto;
}

.powerx-header__nav .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	stroke: var(--wp--preset--color--bright-blue);
	/* A tap landing on the icon's own painted pixels would otherwise
	   make event.target the <svg>/<path> itself rather than the
	   <button> wrapping it — .closest() in header-navigation.js already
	   walks up past that correctly, but removing the icon from hit-
	   testing entirely means every point inside the button's box,
	   including the icon, resolves straight to the button with no
	   intermediate step to reason about. Already aria-hidden/
	   focusable="false" (core-provided), so this has no accessibility
	   effect — it was never a keyboard/AT target. */
	pointer-events: none;
}

.powerx-header__nav .wp-block-navigation__submenu-icon svg path {
	stroke-width: 2.25;
}

/* Subtle open/closed rotation — core already flips this element
   0deg/180deg via [aria-expanded=true] (wp-includes/blocks/
   navigation/style.css); this only adds the transition between those
   two states, guarded the same way core guards its own submenu
   transition just above it in that file. */
@media not (prefers-reduced-motion) {
	.powerx-header__nav .wp-block-navigation__submenu-icon svg {
		transition: transform 0.15s ease;
	}
}

/* Trigger link (no href — Programme/Media/Support are group labels,
   not destinations) still matches the plain ">  a" rule above for
   colour/weight/underline-on-hover; only the default pointer cursor
   needs correcting since it isn't a real link. */
.powerx-header__nav .has-child > .wp-block-navigation-item__content {
	cursor: default;
}

/* Dropdown panel: same restrained card language as the rest of the
   site (--powerx-card background, thin border, soft shadow — see
   e.g. the About team card / FAQ panels using the same combination)
   rather than a fixed dark/light colour, so it reads correctly in
   both themes automatically. No top offset/margin: core positions it
   flush (top:100%) against the trigger row on purpose — a gap here
   would create a dead zone the pointer has to cross, closing the menu
   before it reaches the submenu (the exact flicker this brief asks to
   avoid). */
.powerx-header__nav .wp-block-navigation__submenu-container {
	background-color: var(--powerx-card);
	border: 1px solid rgba(var(--powerx-border-rgb), 0.1);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(var(--powerx-border-rgb), 0.1);
	padding: 0.4rem;
}

.powerx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 6px;
	color: var(--wp--preset--color--dark-text);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.powerx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.powerx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--powerx-surface);
	color: var(--wp--preset--color--primary-blue);
}

/* Dark mode: --powerx-card (the light-mode background above) is
   #232323 in dark mode — a mid grey, not the near-black this needs.
   Reuses --wp--preset--color--off-white instead, which already
   resolves to #121212 in dark mode (see the [data-theme="dark"] block
   near :root) — an existing token, not a new hardcoded value. Light
   mode is untouched: this selector only fires under
   [data-theme="dark"], so the white --powerx-card background above
   still applies there. --powerx-surface (used for the light-mode
   hover fill above) is #1C1C1C in dark mode — close enough to #121212
   that the hover state would barely register, so dark mode gets its
   own, clearly-lighter translucent-white hover fill instead; the
   accent-orange text colour on hover/focus stays the same in both
   themes. */
[data-theme="dark"] .powerx-header__nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--off-white);
}

[data-theme="dark"] .powerx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
[data-theme="dark"] .powerx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--primary-blue);
}

/* =========================================================
   Programme Progress counter (homepage)
   =========================================================
   Placeholder version — see the PMU/Services SETA approval note in
   front-page.html for why two of the four values are an em dash rather
   than a real number. Permanently-dark strip using the exact
   dark-navy/white/bright-blue combination already established
   elsewhere (footer, the Registration Gateway's Employer half — same
   1px rgba(255,255,255,.14) separator too), which is why this needs no
   separate dark-mode override at all: dark-navy is documented at
   :root as staying dark in both themes by design, the same reason the
   footer and gateway don't need one either. bright-blue (not
   primary-blue) for the same reason the dropdown chevrons use it over
   the header's own nav-link accent colour: it's the one brand orange
   that doesn't shift between themes, appropriate for a background that
   doesn't shift either. */
.powerx-progress {
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
	padding-top: var(--wp--preset--spacing--sm);
	padding-bottom: var(--wp--preset--spacing--sm);
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
}

.powerx-progress__inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.powerx-progress__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--bright-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.powerx-progress__stats {
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.powerx-progress__stat {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 var(--wp--preset--spacing--sm);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.powerx-progress__stat:first-child {
	border-left: none;
}

/* Prominent but deliberately not hero-sized — this strip stays
   significantly shorter than the Hero below it. */
.powerx-progress__value {
	margin: 0 0 0.25rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--white);
}

.powerx-progress__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.75);
}

.powerx-progress__note {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
}

/* Tablet and phone: 2x2 rather than four squeezed columns (768px
   matches a conventional tablet cutoff and is one of the widths this
   was checked against). Vertical separators become horizontal ones
   between the two rows; nth-child(even) keeps a vertical separator
   between the two columns instead of the now-meaningless
   first-child-only rule above. */
@media (max-width: 768px) {
	.powerx-progress__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: var(--wp--preset--spacing--sm);
	}

	.powerx-progress__stat {
		border-left: none;
		padding: 0 var(--wp--preset--spacing--xs);
	}

	.powerx-progress__stat:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, 0.14);
	}

	.powerx-progress__stat:nth-child(n + 3) {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding-top: var(--wp--preset--spacing--sm);
	}

	/* Narrow-phone floor — "Programme Target" still has room to sit on
	   one line at 320px at this size; the value shrinking slightly
	   alongside it keeps the whole strip visually lighter than the
	   Hero, not just individually not-oversized. */
	.powerx-progress__value {
		font-size: 1.625rem;
	}
}

/* =========================================================
   Hero
   ========================================================= */

.powerx-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--off-white);
	padding-top: var(--wp--preset--spacing--md);
	padding-bottom: var(--wp--preset--spacing--lg);
}

/* Orange brush/stroke language, kept to two restrained uses on the whole
   homepage: this bottom edge, and the accent behind the campaign label
   below. A flat bar rather than an irregular poster shape, so it can't
   affect responsive layout at any width. */
.powerx-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--wp--preset--color--bright-blue);
}

.powerx-hero__grid {
	/* Now that the Hero lives inside .powerx-hero-slider's raw wp:html
	   block (needed so the slider's own JS/DOM structure isn't fought by
	   WordPress's layout-support class injection — see the block comment
	   above the slider markup), this no longer gets display:flex for free
	   from a wp:group layout:{"type":"flex"} attribute the way it used to
	   — declared explicitly here instead. flex-wrap was already an
	   explicit override below regardless of the block attribute's own
	   default, so that part is unaffected. */
	display: flex;
	position: relative;
	z-index: 1;
	align-items: center;
	gap: var(--wp--preset--spacing--xl);
	flex-wrap: nowrap;
}

.powerx-hero__inner {
	/* flex-grow:38 against the visual's flex-grow:62 below gives a ~38/62
	   text/photo split once both share out any extra row width. */
	flex: 38 1 320px;
	/* Flex items default to min-width:auto, which can hold this column to
	   its content's intrinsic width and force overflow at narrow widths;
	   0 lets it shrink freely, same reasoning on every flex/grid item below. */
	min-width: 0;
	margin: 0;
	position: relative;
}

/* Brush-stroke accent, lower-left of the text column, sitting behind the
   CTA buttons. An SVG mask of a handful of tapered, irregular strokes
   (varying width/length/rotation) rather than a mechanically regular
   striped rectangle — the repeating-linear-gradient version read as a
   diagonal-hatch pattern, not a brush mark. Absolutely positioned and
   z-index:-1 so it can never push text/buttons around or add scrollable
   width; mask-image (not a background image file) keeps this a pure CSS
   decoration with no new asset. */
.powerx-hero__inner::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.75rem;
	bottom: -1.25rem;
	width: 7rem;
	height: 2.75rem;
	background-color: var(--wp--preset--color--bright-blue);
	opacity: 0.85;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M2 44C10 30 16 18 22 4c1-2 4-2 4 1-2 15-6 28-12 41-2 3-6 2-6-1Z'/%3E%3Cpath d='M24 46C33 32 40 19 47 5c1-2 4-2 4 1-3 15-8 27-15 40-2 3-6 2-6-1Z'/%3E%3Cpath d='M47 43C55 30 61 17 66 3c1-2 4-2 4 1-2 14-6 27-11 40-2 3-6 2-6-1Z'/%3E%3Cpath d='M70 46C78 33 84 20 89 6c1-2 4-2 4 1-2 15-6 27-12 40-2 3-6 2-6-1Z'/%3E%3Cpath d='M93 43C100 31 106 19 110 6c1-2 4-1 4 1-1 14-5 26-10 38-2 3-6 1-6-1Z'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M2 44C10 30 16 18 22 4c1-2 4-2 4 1-2 15-6 28-12 41-2 3-6 2-6-1Z'/%3E%3Cpath d='M24 46C33 32 40 19 47 5c1-2 4-2 4 1-3 15-8 27-15 40-2 3-6 2-6-1Z'/%3E%3Cpath d='M47 43C55 30 61 17 66 3c1-2 4-2 4 1-2 14-6 27-11 40-2 3-6 2-6-1Z'/%3E%3Cpath d='M70 46C78 33 84 20 89 6c1-2 4-2 4 1-2 15-6 27-12 40-2 3-6 2-6-1Z'/%3E%3Cpath d='M93 43C100 31 106 19 110 6c1-2 4-1 4 1-1 14-5 26-10 38-2 3-6 1-6-1Z'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Small brush-stroke accent behind the campaign label — an irregular
   border-radius rather than a plain rectangle, so it reads as a stroke
   mark rather than a highlight bar. */
.powerx-hero__campaign-label {
	position: relative;
	z-index: 0;
}

.powerx-hero__campaign-label::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.375rem;
	bottom: -0.125rem;
	width: 3rem;
	height: 0.5rem;
	background-color: var(--wp--preset--color--bright-blue);
	border-radius: 50% 40% 60% 45% / 60% 45% 55% 40%;
	opacity: 0.55;
	transform: rotate(-2deg);
}

.powerx-hero__heading {
	color: var(--powerx-heading);
	/* H1: Bold 44/52. */
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1818;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-hero__subheading {
	color: var(--wp--preset--color--dark-text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	max-width: 30rem;
	margin-bottom: var(--wp--preset--spacing--xs);
}

/* Campaign strapline, quoted from the official material. Restrained — text
   only, no background fill — per the "restrained use of orange" brand
   direction, rather than a solid orange banner. */
.powerx-hero__tagline {
	color: var(--wp--preset--color--primary-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Root cause of Slide 1's two buttons ("Get Programme Information" /
   "Get Support") colliding: this rule only ever set `gap`, which does
   nothing without a flex/grid context. Slides 2/3 never showed the
   bug because each has only one button — nothing to lay out relative
   to another. The Hero Slider is entirely raw wp:html (not a parsed
   wp:buttons block), so it never gets WordPress's own auto-generated
   is-layout-flex class the way a real Buttons block would by default
   — confirmed by reading wp-includes/blocks/buttons/style.css
   directly: core's own .wp-block-buttons selector never sets
   display:flex on its own, only via that class. Without it, the two
   `.wp-block-button` children fell back to core's plain
   `.wp-block-buttons > .wp-block-button { display:inline-block }` and
   wrapped via ordinary inline text-flow instead of a real flex row —
   explicit display:flex here is the actual fix; flex-wrap:wrap
   reproduces the same wrap-when-narrow behaviour but as a clean
   second row instead of an inline-flow wrap. */
.powerx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

/* Slide 1's two-button group ("Get Programme Information" + "Get
   Support") on mobile: flex-wrap above only sends the second button to
   its own line once it doesn't fit — each button still sizes to its
   own content width (core's own .wp-block-buttons > .wp-block-button
   { display:inline-block }, confirmed by reading wp-includes/blocks/
   buttons/style.css directly — nothing anywhere in this file ever set
   a matching/full width for these buttons), so the long primary label
   renders far wider than the short secondary one — mismatched widths,
   not a real stacked group.

   Previously scoped via :has(.wp-block-button + .wp-block-button)
   rather than a class — structurally correct (verified against the
   live rendered DOM: .powerx-hero__actions really does contain two
   flat sibling .wp-block-button divs here, nothing WordPress-injected
   in between), but didn't produce the expected result in real-browser
   testing. Replaced with an explicit, dedicated class instead
   (.powerx-hero__actions--double, front-page.html) so there's nothing
   structural left to verify — only Slide 1's wrapper carries it,
   Slides 2/3 keep the plain .powerx-hero__actions class only and are
   not addressable by any of the rules below.

   Both the outer .wp-block-button AND the inner .wp-block-button__link
   are set explicitly rather than relying on the outer alone and
   assuming the link (core's own `.wp-block-buttons .wp-block-button__
   link { width:100% }`, relative to ITS OWN parent) would inherit a
   resolved 100% from it — flex-basis is set alongside width on the
   outer element specifically because a flex item's used width in a
   column-direction container is governed by flex-basis first, with a
   plain `width` only used as an auto-basis fallback; setting both
   removes that ambiguity rather than relying on the fallback. */
@media (max-width: 600px) {
	.powerx-hero__actions--double {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		/* 8px — existing --xs token, within the requested 8-12px range. */
		gap: var(--wp--preset--spacing--xs);
		/* Extra breathing room before the decorative brush mark trailing
		   below .powerx-hero__inner (::after, further up this file) —
		   independent of that mark's own fixed offset, so the two-line
		   button stack doesn't read as crowding it. */
		margin-bottom: var(--wp--preset--spacing--sm);
	}

	.powerx-hero__actions--double > .wp-block-button {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.powerx-hero__actions--double > .wp-block-button > .wp-block-button__link {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/* The sitewide outline button style is designed for dark backgrounds
   (white border/text). On this light hero it needs its own contrast fix. */
.powerx-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--powerx-card);
	color: var(--powerx-heading);
	border-color: rgba(var(--powerx-border-rgb), 0.18);
}

.powerx-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.powerx-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--off-white);
	color: var(--powerx-heading);
	border-color: var(--powerx-heading);
}

.powerx-hero__visual {
	position: relative;
	/* flex-grow:62 against .powerx-hero__inner's flex-grow:38 gives the
	   photo the ~62% share; max-width lets it reach toward the section's
	   own edges instead of floating as a small fixed-size panel. */
	flex: 62 1 480px;
	max-width: 820px;
	min-width: 320px;
	aspect-ratio: 8 / 5;
}

.powerx-hero__visual-frame {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	height: 100%;
	/* Neutral fallback fill, visible only if the image is slow to load or
	   fails. */
	background-color: var(--powerx-surface);
	border-radius: 16px;
	/* Restrained shadow plus a thin brand-orange edge — the same "photo
	   frame" language used for the About/Announcements images. */
	border-bottom: 3px solid var(--wp--preset--color--bright-blue);
	box-shadow: 0 16px 32px rgba(var(--powerx-border-rgb), 0.12);
}

/* Crops the real event photograph (To The Power of X (AGSA)-150.jpg) to
   fill this frame. The frame's fixed aspect-ratio (8/5, set above) plus
   object-fit:cover do the final cropping — the source file itself is
   never touched, only the derivative generated from it. */
.powerx-hero__visual-image {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The derivative (2000x1457, ~1.37:1) needs mild side-cropping for the
	   desktop 8/5 frame (1.6:1, wider than the source) and more for the
	   2/1 short-landscape-phone frame below — both less aggressive than
	   the 2/1 case already verified safe by rendering the actual crop, so
	   this needed no re-check. The group's heads sit roughly a quarter to
	   a third of the way down the frame, so biasing toward the top keeps
	   them in view even at the more aggressive mobile ratios — that crop
	   comes from the bottom (legs/feet), not the top (heads). */
	object-position: center 28%;
}

.powerx-hero__visual-accent {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30%;
	background-color: rgba(var(--powerx-border-rgb), 0.18);
}

/* Slide 1's 28% vertical bias (above) was tuned for that specific
   photograph's subjects. Slides 2/3 use their own dedicated derivatives
   (powerx-hero-slide2-*/slide3-*, cropped straight from
   originals-agsa/*-227.jpg and *-243.jpg — see assets/images/README.md),
   each already framed with both subjects' faces comfortably centred, so
   plain default centring works cleanly at every hero aspect ratio (8/5
   desktop, 3/2 mobile, 2/1 short-landscape) — verified by rendering each
   actual crop, same as Slide 1's own bias was. */
#powerx-hero-slide-1 .powerx-hero__visual-image,
#powerx-hero-slide-2 .powerx-hero__visual-image {
	object-position: center;
}

/* =========================================================
   Hero slider

   Wraps the three slides (each an unmodified .powerx-hero__grid — see
   front-page.html) in a lightweight, dependency-free carousel: a flex
   track translated by measured pixel width (assets/js/hero-slider.js),
   not percentage transforms, since percentages resolve against the
   track's own (multi-slide) width rather than the viewport's, which is
   the usual source of carousel math bugs. Controls sit BELOW the slide
   rather than overlaid on the photo/text, so they can never cover a
   face or a headline at any breakpoint. No autoplay — see the JS file's
   own top comment for why. */

.powerx-hero-slider {
	position: relative;
	overflow: hidden;
}

.powerx-hero-slider__track {
	display: flex;
	/* Reduced-motion is handled globally (see the prefers-reduced-motion
	   block at the end of this file, which zeroes every transition-
	   duration site-wide) — no separate override needed here. */
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	/* Vertical page scroll still works over the slider on touch; only
	   horizontal drag is claimed for the swipe gesture (JS). */
	touch-action: pan-y;
}

.powerx-hero-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	/* .powerx-hero__inner::after and .powerx-hero__campaign-label::before
	   (both in the original single-slide Hero rules) are small brush-
	   stroke accents deliberately offset a little outside their own
	   parent's edges. With three slides now sitting directly adjacent to
	   each other in the track, an unclipped slide would let those few
	   negatively-offset pixels bleed into the PREVIOUS slide's visible
	   window. Each slide gets its own overflow:hidden so its decoration
	   stays confined to its own box, on top of .powerx-hero-slider's
	   own overflow:hidden (which only clips at the whole-track level). */
	overflow: hidden;
}

/* Matches the tallest slide (the flex track's default cross-axis
   stretch already equalises .powerx-hero-slider__slide heights to each
   other) down onto the slide's own .powerx-hero__grid, so a shorter
   slide's content is vertically centred within the shared height via
   .powerx-hero__grid's own existing align-items:center, instead of
   sitting stranded at the top with empty space below it. */
.powerx-hero-slider__slide .powerx-hero__grid {
	height: 100%;
}

.powerx-hero-slider__controls {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--md);
}

.powerx-hero-slider__prev,
.powerx-hero-slider__next {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background-color: transparent;
	border: 1.5px solid rgba(var(--powerx-border-rgb), 0.22);
	border-radius: 50%;
	color: var(--powerx-heading);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.powerx-hero-slider__prev:hover,
.powerx-hero-slider__next:hover,
.powerx-hero-slider__prev:focus-visible,
.powerx-hero-slider__next:focus-visible {
	border-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--primary-blue);
}

.powerx-hero-slider__dots {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.powerx-hero-slider__dot {
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	background-color: rgba(var(--powerx-border-rgb), 0.25);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.powerx-hero-slider__dot:hover {
	background-color: var(--wp--preset--color--primary-blue);
}

.powerx-hero-slider__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--bright-blue);
	outline-offset: 2px;
}

.powerx-hero-slider__dot[aria-current="true"] {
	background-color: var(--wp--preset--color--bright-blue);
	transform: scale(1.35);
}

@media (max-width: 600px) {
	.powerx-hero-slider__controls {
		margin-top: var(--wp--preset--spacing--sm);
	}
}

/* =========================================================
   About
   ========================================================= */

.powerx-about {
	background-color: var(--powerx-surface);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

/* Shared "photo beside content" component — used here, on Programme
   Information (photo beside .powerx-section-intro) and on Support (same).
   Collapses to one column (photo on top) at the same 1024px tablet
   breakpoint every other two-column section on the site stacks at — see
   the Responsive breakpoints section. */
.powerx-media-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--xl);
	margin-bottom: var(--wp--preset--spacing--xl);
}

/* Controlled media frame — fixed to a sensible aspect-ratio rather than
   however tall the source photo happens to be, so a portrait source
   (Programme Information, Support) renders as a landscape/near-square
   crop instead of a tall column. object-fit:cover does the actual crop;
   the derivative itself is already framed close to this ratio (see each
   page's own comment for which original + crop), so cover only needs to
   trim a little, not distort anything. */
.powerx-media-content__photo {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	border-bottom: 3px solid var(--wp--preset--color--bright-blue);
	box-shadow: 0 12px 28px rgba(var(--powerx-border-rgb), 0.1);
}

.powerx-media-content__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.powerx-about__content {
	min-width: 0;
}

.powerx-about__content::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	background-color: var(--wp--preset--color--bright-blue);
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-about__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-about__text {
	color: var(--wp--preset--color--dark-text);
	/* Normal body-text scale, not the larger "large" token — keeps line
	   length reasonable at this column width. */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-about__content .powerx-text-link {
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.1);
}

/* Editorial numbered grid — used for About's four programme facts, and
   reusable anywhere else a small set of parallel facts needs structure
   without turning into a card grid. Two columns with a rule above every
   item: on a 2-row layout that rule doubles as the divider between the
   rows, no separate "row divider" element needed. Single column on
   mobile turns the same rule into a plain vertical sequence. */
.powerx-editorial-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--xl);
	margin-top: var(--wp--preset--spacing--lg);
}

.powerx-editorial-item {
	padding-top: var(--wp--preset--spacing--lg);
	padding-bottom: var(--wp--preset--spacing--lg);
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-editorial-number {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary-blue);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.powerx-editorial-item__title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--xs);
	/* These render as <h2> (each page needs one <h1>, so the old <h3>
	   sub-headings moved up a level) — font-size/line-height/font-weight are
	   set explicitly here so they keep their original h3-scale size instead
	   of picking up the (larger) h2 default. */
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	font-weight: 600;
}

.powerx-editorial-item__text {
	color: var(--wp--preset--color--muted-text);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* =========================================================
   Journey

   Internal class names kept as "how-it-works" / "step" from an earlier
   iteration to avoid an unnecessary rename across markup and CSS; the
   section itself is labelled "Your Power of X journey" on the page.
   ========================================================= */

/* .powerx-how-it-works / __heading / __intro (the homepage section
   wrapper that used to hold this component) were removed along with
   the homepage's Journey instance — Programme Information still uses
   .powerx-steps/.powerx-step directly below, unaffected. (Application
   Status used to as well, via the now-removed .powerx-steps--4
   variant — that page no longer has a process sequence at all, see
   its own template comment.) */

/* Six stages in a single left-to-right row on desktop (>1024px) — one
   pass, 01 through 06, equal visual weight. `align:wide` on the block
   (front-page.html) gives this its own width — the theme's wideSize,
   wider than the section's normal contentSize the heading/intro above
   still use — rather than a hardcoded max-width here. The numbered
   markers double as a horizontal timeline: a thin connecting line
   (::before) sits behind them at marker-centre height (2.3125rem = half
   the marker's own height), so it only ever crosses the markers and
   never reaches down into the title/text below. Tablet (601-1024px)
   folds this into a 3x2 grid and drops the line — a line across only the
   top row would no longer relate to every stage there — and mobile
   (<=600px) drops to a single-column list; both overrides live in the
   Responsive breakpoints section further down. */
.powerx-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}

.powerx-steps::before {
	content: "";
	position: absolute;
	top: 2.3125rem;
	left: 8.333%;
	right: 8.333%;
	height: 2px;
	background-color: var(--wp--preset--color--bright-blue);
	z-index: 0;
}

.powerx-step {
	position: relative;
	z-index: 1;
	min-width: 0;
	text-align: center;
	/* .powerx-steps no longer declares a "layout" block attribute (see the
	   front-page.html comment on that block), so it falls back to
	   WordPress's default "flow" layout, which adds its own
	   margin-block-start to every direct child. Zeroed here so the grid's
	   own `gap` is the only spacing in effect. */
	margin: 0;
}

/* Journey stages are informational, not a progress tracker — keep all
   six markers visually equal, don't give one stage more weight than
   another. */
.powerx-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.625rem;
	height: 4.625rem;
	/* White numeral text fails contrast on brand orange, so charcoal instead. */
	background-color: var(--wp--preset--color--bright-blue);
	border-radius: 50%;
	color: var(--wp--preset--color--dark-text);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	box-shadow: 0 0 0 8px var(--powerx-surface);
	margin: 0 auto var(--wp--preset--spacing--md);
}

.powerx-step__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	/* Smaller than .powerx-information-row__title/
	   .powerx-announcement__title's shared "large" size (which this used
	   to match exactly) — six columns in one row need a narrower heading
	   than the rest of the site's single-column rows do. Fluid rather than
	   a flat value so it doesn't stay pinned to its smallest size all the
	   way from 1025px to 1920px+; restored to the shared "large" token at
	   the 1024px tablet tier below, where there's room for it again. */
	font-size: clamp(1rem, 0.714rem + 0.447vw, 1.25rem);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-step__text {
	color: var(--wp--preset--color--muted-text);
	margin: 0;
	/* One step down from the sitewide "medium" body-text scale — restored
	   to "medium" at the 1024px tablet tier below, same reasoning as the
	   title above. */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* Compact variant — reuses .powerx-steps/.powerx-step exactly (same
   grid, same connecting line, same responsive behaviour) for Programme
   Information's process summary, just smaller: no description text (the
   full descriptions stay in the detailed list below it on that page),
   a smaller marker, and tighter gaps so six stages plus their titles sit
   comfortably as a secondary element rather than a second full-scale
   Journey section. */
.powerx-steps--compact {
	margin-bottom: var(--wp--preset--spacing--xl);
	gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
}

.powerx-steps--compact .powerx-step__number {
	width: 3.25rem;
	height: 3.25rem;
	font-size: var(--wp--preset--font-size--medium);
	box-shadow: 0 0 0 6px var(--powerx-surface);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-steps--compact .powerx-step__title {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

.powerx-steps--compact::before {
	top: 1.625rem;
}

/* Placement disclaimer band — sits directly under the Hero, above Quick
   Actions (front-page.html). Deliberately not styled like a warning/error
   (no red/yellow): a strong orange left accent carries the emphasis
   instead, on a calm light-neutral fill, matching the same accent
   language used elsewhere on the site (.powerx-process__note,
   .powerx-placeholder-panel). */
.powerx-notice-band {
	padding-top: var(--wp--preset--spacing--md);
	padding-bottom: var(--wp--preset--spacing--sm);
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
}

.powerx-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
	/* Wide but controlled — comfortably wider than a single-sentence
	   callout, short of the section's full 1200px content width. */
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--powerx-surface);
	border: 1px solid rgba(var(--powerx-border-rgb), 0.1);
	border-left: 4px solid var(--wp--preset--color--bright-blue);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.powerx-notice__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: 0.125rem;
	color: var(--wp--preset--color--primary-blue);
}

.powerx-notice__body {
	min-width: 0;
}

.powerx-notice__heading {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--powerx-heading);
}

.powerx-notice__text {
	margin: 0;
	color: var(--wp--preset--color--dark-text);
}

.powerx-notice__text strong {
	font-weight: 700;
}

@media (max-width: 600px) {
	.powerx-notice {
		padding: var(--wp--preset--spacing--sm);
	}
}

/* =========================================================
   Opening / Programme Introduction (homepage)

   Editorial statement, not another card section — a single narrow
   reading column (44rem, well under the site's usual 1200px section
   width) so the copy reads like an opening paragraph rather than a
   component. Sits between the Hero and .powerx-glance below.
   ========================================================= */

.powerx-opening {
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--md);
}

.powerx-opening__inner {
	max-width: 44rem;
	margin: 0 auto;
}

.powerx-opening__lead {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.2;
}

/* The one stat-dense line ("20 000 graduates...") reads as a strong
   sub-headline — orange accent + bold, same weight of emphasis as
   .powerx-eyebrow elsewhere on the site, but larger since it's meant
   to be read, not skimmed past. */
.powerx-opening__stats {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--primary-blue);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.powerx-opening__text {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--dark-text);
}

.powerx-opening__text:last-of-type {
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Closing paragraph — keeps the italic emphasis from the supplied
   copy; a left accent rule (same restrained institutional language as
   .powerx-query/.powerx-glance__item's own top rules) marks it as the
   closing thought rather than just another paragraph, without resorting
   to a shadowed/boxed callout. */
.powerx-opening__closing {
	margin: 0;
	padding-left: var(--wp--preset--spacing--sm);
	border-left: 3px solid var(--wp--preset--color--bright-blue);
	color: var(--powerx-heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
}

@media (max-width: 600px) {
	.powerx-opening {
		padding-top: var(--wp--preset--spacing--lg);
	}

	.powerx-opening__lead {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* =========================================================
   At a Glance (homepage)

   Six facts as a definition list — see the accessibility note on the
   <dl> markup itself in front-page.html. Flat institutional tiles
   (thin top rule, no shadow, minimal radius) rather than floating
   SaaS-style cards, matching the same restrained language already
   used for .powerx-query and the Editorial 2x2 grid on About.
   ========================================================= */

.powerx-glance {
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
	padding-top: var(--wp--preset--spacing--md);
	padding-bottom: var(--wp--preset--spacing--lg);
}

.powerx-glance__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.powerx-glance__heading {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.powerx-glance__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Content lengths differ per fact — items size to their own
	   content rather than stretching to match the tallest in their
	   row, which would leave odd empty space in the shorter ones. */
	align-items: start;
	gap: var(--wp--preset--spacing--md);
	margin: 0;
}

.powerx-glance__item {
	margin: 0;
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
}

.powerx-glance__term {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--primary-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.powerx-glance__desc {
	margin: 0;
	color: var(--wp--preset--color--dark-text);
}

@media (max-width: 1024px) {
	.powerx-glance__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.powerx-glance__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   Registration gateway (homepage)

   Two immediate action pathways — Register as a Recruit / Express
   Interest as an Employer — surfaced right after the Hero (now
   directly below the Opening/At a Glance sections, added in a later
   pass — see .powerx-opening/.powerx-glance above) and before the
   Important Notice, for visitors who already know why they're here
   and don't want to read programme information first (CFO request).
   Deliberately not a floating-card pattern: two solid,
   full-bleed panels sharing one divider, reusing the site's own two
   existing colour identities for these exact actions instead of
   inventing a third — Recruit's solid Primary Orange (already
   .powerx-header__cta--primary / .powerx-btn-primary) and the
   dark-charcoal-with-orange-accent language already established by
   .powerx-campaign-strip.

   Text colours deliberately use the theme-CONSTANT tokens (dark-navy,
   white, bright-blue — none of which are overridden under
   [data-theme="dark"]) rather than --wp--preset--color--dark-text,
   which flips to near-white in dark mode for use on light/card
   surfaces. These two panel backgrounds don't change between themes,
   so their text tokens can't either without breaking contrast — see
   the light/dark token comment at the top of this file.

   Top/bottom padding kept to the smallest spacing token (rather than
   sm/md) so the section reads as tightly connected to whatever
   precedes it (originally the Hero directly; now .powerx-glance,
   itself close-set against the Hero — see both sections' own padding
   above) and to the Important Notice below it, per the CFO's original
   "immediately after the hero" placement — .powerx-notice-band's own
   padding-top (untouched) supplies the rest of the gap below. */
.powerx-registration-gateway {
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
	padding-top: var(--wp--preset--spacing--xs);
	padding-bottom: var(--wp--preset--spacing--xs);
}

.powerx-registration-gateway__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
}

.powerx-registration-gateway__action {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	text-decoration: none;
	transition: filter 0.15s ease;
}

.powerx-registration-gateway__action:hover {
	filter: brightness(1.06);
}

/* Inset so the ring stays inside the panel's own edge rather than
   being clipped by the adjoining panel or the section's outer edge. */
.powerx-registration-gateway__action:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.powerx-registration-gateway__action--recruit {
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-navy);
}

.powerx-registration-gateway__action--employer {
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.powerx-registration-gateway__title {
	margin: 0 0 0.375rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	font-weight: 700;
}

/* Explicit per-panel colour, not inherited: theme.json's global
   elements.heading style sets color:var(--powerx-heading) directly on
   every heading (beats plain inheritance), and that token flips
   between dark-navy and white across themes — exactly wrong for a
   permanently-orange or permanently-dark-navy panel. Same defensive
   pattern .powerx-campaign-strip__heading already uses. */
.powerx-registration-gateway__action--recruit .powerx-registration-gateway__title {
	color: var(--wp--preset--color--dark-navy);
}

.powerx-registration-gateway__action--employer .powerx-registration-gateway__title {
	color: var(--wp--preset--color--white);
}

.powerx-registration-gateway__text {
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 30rem;
}

.powerx-registration-gateway__action--employer .powerx-registration-gateway__text {
	/* Matches .powerx-campaign-strip__secondary-link's existing
	   white-on-dark-navy secondary-text treatment — same background,
	   same reduced-emphasis role, so the same value. */
	color: rgba(255, 255, 255, 0.75);
}

.powerx-registration-gateway__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.powerx-registration-gateway__action--employer .powerx-registration-gateway__cta {
	color: var(--wp--preset--color--bright-blue);
}

.powerx-registration-gateway__cta svg {
	transition: transform 0.15s ease;
}

.powerx-registration-gateway__action:hover .powerx-registration-gateway__cta svg,
.powerx-registration-gateway__action:focus-visible .powerx-registration-gateway__cta svg {
	transform: translateX(3px);
}

/* Stacked below tablet width — see the responsive-fit verification in
   this change's report for why 768px was chosen (measured, not
   assumed): full-width panels, Recruit first in source order so it
   stays first when stacked, no side-by-side squeeze. */
@media (max-width: 767px) {
	.powerx-registration-gateway__inner {
		flex-direction: column;
	}

	.powerx-registration-gateway__action--employer {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
}

/* =========================================================
   Latest Updates (homepage)

   Small preview of /announcements/ — title + date/category meta only,
   no body text, no images, no cards. Flat editorial list matching Quick
   Access's own restrained language (thin dividers, orange accent,
   corner arrow) rather than introducing a new visual pattern.
   ========================================================= */

.powerx-updates {
	padding-top: var(--wp--preset--spacing--lg);
	padding-bottom: var(--wp--preset--spacing--lg);
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
}

.powerx-updates__inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.powerx-updates__heading {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2857;
	color: var(--powerx-heading);
}

.powerx-updates__list {
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.12);
}

.powerx-updates__item {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--sm) 0;
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.12);
	text-decoration: none;
	color: var(--powerx-heading);
}

.powerx-updates__meta {
	flex: 0 0 auto;
	min-width: 11rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-text);
}

.powerx-updates__category {
	color: var(--wp--preset--color--bright-blue);
	font-weight: 700;
}

.powerx-updates__title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	color: var(--powerx-heading);
}

.powerx-updates__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--primary-blue);
	transition: transform 0.15s ease;
}

.powerx-updates__item:hover .powerx-updates__arrow,
.powerx-updates__item:focus-visible .powerx-updates__arrow {
	transform: translateX(4px);
}

.powerx-updates__item:hover .powerx-updates__title,
.powerx-updates__item:focus-visible .powerx-updates__title {
	color: var(--wp--preset--color--primary-blue);
}

.powerx-updates__view-all {
	margin: var(--wp--preset--spacing--sm) 0 0;
}

.powerx-updates__view-all a {
	color: var(--wp--preset--color--primary-blue);
	font-weight: 600;
	text-decoration: none;
}

.powerx-updates__view-all a:hover,
.powerx-updates__view-all a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.powerx-updates__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.powerx-updates__meta {
		min-width: 0;
	}

	.powerx-updates__arrow {
		display: none;
	}
}

/* =========================================================
   Support CTA (homepage)

   Closing section, replacing the removed Campaign Strip — same
   permanently-dark dark-navy/white/bright-blue combination already
   established for the footer, the Registration Gateway's Employer
   half, and the Progress counter (see that section's own comment for
   why this needs no separate dark-mode override), but deliberately
   simpler: one heading, one line, one button, no icon, no brand mark,
   no secondary links.
   ========================================================= */

.powerx-support-cta {
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
	padding-top: var(--wp--preset--spacing--lg);
	padding-bottom: var(--wp--preset--spacing--lg);
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
	text-align: center;
}

.powerx-support-cta__inner {
	max-width: 32rem;
	margin: 0 auto;
}

.powerx-support-cta__heading {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2857;
}

.powerx-support-cta__text {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: rgba(255, 255, 255, 0.75);
}

.powerx-support-cta__button {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-navy);
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.powerx-support-cta__button:hover,
.powerx-support-cta__button:focus-visible {
	background-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

/* =========================================================
   Important Information
   ========================================================= */

.powerx-info-hub {
	background-color: var(--powerx-surface);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

/* Programme Information and Support both pair their existing
   .powerx-section-intro with an event photograph using the shared
   .powerx-media-content component (defined in the About section above,
   where it's also used) instead of a page-specific component here. */
.powerx-media-content .powerx-section-intro {
	margin-bottom: 0;
}

/* Official programme overview — the six-stage process (reusing the same
   marker+text row pattern as the mobile Journey grid, but as a permanent
   compact list rather than something that only appears below a
   breakpoint) plus a placement-guarantee notice and an employer-focused
   callout. Sits above the five existing category cards below, which are
   unchanged. */
.powerx-process {
	max-width: 48rem;
	margin: 0 auto var(--wp--preset--spacing--xl);
}

.powerx-process__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Used on Programme Information for the second ("Full Process Details")
   heading, once the compact .powerx-steps--compact summary above it has
   already introduced the six stages — smaller and muted so it reads as a
   sub-heading, not a second same-weight section title. */
.powerx-process__heading--sub {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted-text);
	margin-top: var(--wp--preset--spacing--xl);
}

.powerx-process__list {
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.12);
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-process-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md) 0;
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.12);
	align-items: start;
	/* Neither this block nor its parent .powerx-process__list declares a
	   "layout" attribute, so both default to WordPress's "flow" layout,
	   which adds its own margin-block-start to direct children — zeroed
	   here so this row's spacing comes only from its own padding/border,
	   same reasoning as .powerx-step above. */
	margin: 0;
}

.powerx-process-step__number {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--powerx-surface);
	color: var(--wp--preset--color--primary-blue);
	border-radius: 50%;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	/* Same margin-block-start reasoning as .powerx-process-step itself —
	   __title/__text below already set their own margin:0 explicitly. */
	margin: 0;
}

.powerx-process-step__title {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-process-step__text {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--muted-text);
}

/* Placement-guarantee disclaimer — bordered notice, not just a plain
   paragraph, so it can't be skimmed past. Same visual language as
   .powerx-placeholder-panel's accent border. */
.powerx-process__note {
	background-color: var(--powerx-card);
	border-left: 3px solid var(--wp--preset--color--bright-blue);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--dark-text);
	margin: 0;
}

.powerx-employer-info {
	max-width: 48rem;
	margin: 0 auto var(--wp--preset--spacing--xl);
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-employer-info__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-employer-info__text {
	color: var(--wp--preset--color--dark-text);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

/* Two-audience employer/graduate split — used on Required Documents,
   Placement and Attendance Information. Each audience gets its own
   eyebrow label so the split is obvious at a glance, shared body-text/
   notice/CTA styling, and (via the adjacent-sibling rule below) a
   divider above whichever one comes SECOND. Deliberately order-based
   rather than a per-audience modifier class (the walkthrough brief
   requires employer content first on these three pages specifically,
   but nothing about the component itself is employer- or graduate-
   specific) — whichever .powerx-audience-block follows another one
   automatically gets the divider, regardless of which audience it is,
   so reordering the two blocks in markup is enough on its own; no class
   needs to move with them. No max-width constraint on the block itself
   (unlike .powerx-process/.powerx-employer-info) since Required
   Documents' two-column checklist needs the section's full width to
   breathe — audience blocks that don't need that width (Placement,
   Attendance Information) constrain their own text via
   .powerx-audience-block__text's own max-width instead. */
.powerx-audience-block {
	margin-top: var(--wp--preset--spacing--xl);
}

.powerx-audience-block + .powerx-audience-block {
	margin-top: var(--wp--preset--spacing--xxl);
	padding-top: var(--wp--preset--spacing--xl);
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-audience-block__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-audience-block__text {
	max-width: 48rem;
	color: var(--wp--preset--color--dark-text);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-audience-block .powerx-process__note {
	max-width: 48rem;
	margin-bottom: var(--wp--preset--spacing--lg);
}

/* Document checklist — numbered rows in two columns, not a grid of
   cards. Each document is a requirement to satisfy, so a restrained
   number reads more like a checklist item than a decorative marker. */
.powerx-document-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--xl);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.powerx-document-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) 0;
	margin: 0;
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-document-row__number {
	grid-row: 1 / 3;
	align-self: start;
	color: var(--wp--preset--color--primary-blue);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.powerx-document-row__title {
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	font-weight: 600;
}

/* Document-specific rules (ID front/back, no statement of results, the
   6-month certification window) — kept per-row rather than folded into
   the shared notice above, since they only apply to some documents. */
.powerx-document-card__list {
	grid-column: 2;
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding-left: 1.125rem;
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
}

.powerx-document-card__list li {
	margin-bottom: var(--wp--preset--spacing--xs);
}

.powerx-document-card__list li:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.powerx-document-list {
		grid-template-columns: 1fr;
	}
}

.powerx-audience-cta {
	margin-top: var(--wp--preset--spacing--md);
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
	text-align: center;
}

.powerx-audience-cta__text {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
	color: var(--powerx-heading);
}

/* Information list — a directory of categories as structured rows
   (title | text | link), not a grid of cards. Same left-accent-on-hover
   language as .powerx-announcement and .powerx-faq-item, so the site's
   "row" pattern reads as one family everywhere it appears. Used for the
   Programme Information hub and the Support contact directory. */
.powerx-information-list {
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-information-row {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
	align-items: start;
	column-gap: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	margin: 0;
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.15);
	border-left: 3px solid transparent;
	transition: border-left-color 0.15s ease, background-color 0.15s ease;
}

.powerx-information-row:hover,
.powerx-information-row:focus-within {
	border-left-color: var(--wp--preset--color--bright-blue);
	background-color: var(--wp--preset--color--off-white);
}

.powerx-information-row__title {
	grid-column: 1;
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-information-row__text {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--muted-text);
}

.powerx-information-row__links {
	grid-column: 3;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--xs);
	text-align: right;
}

@media (max-width: 600px) {
	.powerx-information-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--xs);
	}

	.powerx-information-row__title,
	.powerx-information-row__text,
	.powerx-information-row__links {
		grid-column: 1;
	}

	.powerx-information-row__links {
		align-items: flex-start;
		text-align: left;
	}
}

/* =========================================================
   Digital Support
   ========================================================= */

.powerx-digital-support {
	background-color: var(--powerx-card);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

/* =========================================================
   Support — query routing (Need Help?)

   Deliberately flat/institutional — thin top divider, minimal radius, no
   card/shadow treatment, matching this feature's own "no SaaS card
   aesthetic" brief. This is the Support page's one query-related
   feature — the two placeholder preview cards that used to sit above it
   have been removed entirely, along with the CSS that styled them.
   ========================================================= */

.powerx-query {
	max-width: 40rem;
	margin-top: var(--wp--preset--spacing--xxl);
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
}

.powerx-query__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-query__intro {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--muted-text);
}

.powerx-query__type {
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: 0;
	border: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
}

.powerx-query__type-legend {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--xs);
	padding: 0;
	font-weight: 600;
}

/* The actual radio input is visually hidden but stays in the accessibility
   tree and keyboard/focus path — the label around it is what's styled to
   look like a button, and :has()/:focus-within carry the selected/focus
   state onto that visible label so there is no reliance on colour alone
   (the border/background/font-weight all change together). */
.powerx-query__type-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	border: 2px solid rgba(var(--powerx-border-rgb), 0.25);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.powerx-query__type-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.powerx-query__type-option:has(.powerx-query__type-input:checked) {
	border-color: var(--wp--preset--color--primary-blue);
	background-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

.powerx-query__type-option:has(.powerx-query__type-input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--bright-blue);
	outline-offset: 2px;
}

.powerx-query__destination {
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background-color: var(--powerx-surface);
	border-left: 3px solid var(--wp--preset--color--bright-blue);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.powerx-query__field {
	margin-bottom: var(--wp--preset--spacing--md);
}

.powerx-query__field label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.powerx-query__field input[type="text"],
.powerx-query__field input[type="email"],
.powerx-query__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(var(--powerx-border-rgb), 0.25);
	border-radius: 4px;
	background-color: var(--powerx-card);
	color: var(--wp--preset--color--dark-text);
	font: inherit;
}

.powerx-query__field input[aria-invalid="true"],
.powerx-query__field textarea[aria-invalid="true"] {
	border-color: #b3261e;
}

.powerx-query__field input:focus-visible,
.powerx-query__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--bright-blue);
	outline-offset: 1px;
}

.powerx-query__error {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: #b3261e;
}

.powerx-query__privacy-note {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
}

.powerx-query__privacy-note a {
	color: inherit;
	text-decoration: underline;
}

/* Honeypot field — same visually-hidden-but-focusable-removed technique
   as .powerx-query__type-input above, except this one is also
   aria-hidden (the wrapper) since, unlike the radio inputs, there is no
   legitimate reason for any real visitor — sighted, keyboard, or screen
   reader — to ever reach it. tabindex="-1" on the input keeps it out of
   the tab order too. */
.powerx-query__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.powerx-query__submit {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-navy);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.powerx-query__submit:hover,
.powerx-query__submit:focus-visible {
	background-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

.powerx-query__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.powerx-query__submit:disabled:hover {
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-navy);
}

/* Success/error result of the actual wp_mail() send — reuses
   .powerx-query__destination's left-accent-box language rather than
   inventing a new visual treatment for it. */
.powerx-query__status {
	margin: var(--wp--preset--spacing--md) 0 0;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background-color: var(--powerx-surface);
	border-left: 3px solid;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.powerx-query__status--success {
	border-color: #1e7d34;
	color: #1e7d34;
}

.powerx-query__status--error {
	border-color: #b3261e;
	color: #b3261e;
}

@media (max-width: 600px) {
	.powerx-query__type {
		flex-direction: column;
	}

	.powerx-query__type-option {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	.powerx-query__submit {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* =========================================================
   Privacy Policy

   Long-form legal copy, so this is deliberately plain: a readable-width
   column and generous section spacing rather than a new component
   language. Headings/paragraphs/lists otherwise rely entirely on the
   theme's existing default block typography.
   ========================================================= */

.powerx-legal-page {
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

.powerx-legal {
	max-width: 48rem;
	margin-top: var(--wp--preset--spacing--lg);
}

.powerx-legal__section {
	margin-bottom: var(--wp--preset--spacing--lg);
}

.powerx-legal__section:last-child {
	margin-bottom: 0;
}

.powerx-legal__section p {
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.powerx-legal__section ul {
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.powerx-legal__section a {
	color: var(--wp--preset--color--primary-blue);
}

/* =========================================================
   Announcements
   ========================================================= */

.powerx-announcements {
	background-color: var(--powerx-surface);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

/* Intro column is wide enough for the H1 to render on one line at
   desktop widths without overflowing into the list column. Grid rather
   than flex-basis percentages: the list column's minmax(0,1fr) always
   exactly fills whatever the intro column doesn't use. */
.powerx-announcements__grid {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
}

.powerx-announcements__intro-col {
	min-width: 0;
}

.powerx-announcements__intro-col .powerx-section-intro {
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Editorial wide image — a small supporting photograph, distinct from
   .powerx-media-content's controlled photo+text pairing (About, Programme
   Information, Support): this one has no paired content column of its
   own, so it's naturally capped by sitting inside the narrow intro
   column rather than needing its own max-width. Same photo-frame
   language (radius, orange edge, shadow) as .powerx-media-content__photo
   for visual consistency across the site. */
.powerx-editorial-image {
	border-radius: 12px;
	overflow: hidden;
	border-bottom: 3px solid var(--wp--preset--color--bright-blue);
	box-shadow: 0 8px 20px rgba(var(--powerx-border-rgb), 0.08);
}

.powerx-editorial-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Sits directly on the section background — a top rule, not a card, same
   language as .powerx-information-list/.powerx-document-list. */
.powerx-announcements__list {
	min-width: 0;
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-announcement {
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.15);
	border-left: 3px solid transparent;
	transition: border-left-color 0.15s ease, background-color 0.15s ease;
}

.powerx-announcement:hover,
.powerx-announcement:focus-within {
	border-left-color: var(--wp--preset--color--bright-blue);
	background-color: var(--wp--preset--color--off-white);
}

.powerx-announcement__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.powerx-announcement__category {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background-color: var(--powerx-surface);
	color: var(--wp--preset--color--primary-blue);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}

.powerx-announcement__date {
	color: var(--wp--preset--color--muted-text);
	font-weight: 400;
}

.powerx-announcement__title {
	margin: 0;
	/* h3-scale explicitly — see .powerx-editorial-item__title above. */
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

/* Titles are now real links to each announcement's own single view
   (previously plain text, before individual pages existed) — inherits
   the heading's own colour rather than looking like a default blue
   link, with the row's own :hover/:focus-within (above) already
   providing a clear interactive state, so the text itself doesn't also
   need an underline. */
.powerx-announcement__title a {
	color: inherit;
	text-decoration: none;
}

.powerx-announcement__title a:hover,
.powerx-announcement__title a:focus-visible {
	color: var(--wp--preset--color--primary-blue);
}

.powerx-announcements__empty {
	color: var(--wp--preset--color--muted-text);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
}

/* =========================================================
   Single announcement view

   Reuses .powerx-announcement__category/__date for the meta line and
   .powerx-text-link for the closing links (both already defined above/
   near :root) — only the elements with no existing equivalent (the
   page shell, the image, the video wrapper) get new rules here.
   ========================================================= */

.powerx-announcement-single {
	background-color: var(--powerx-card);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
	padding-left: var(--powerx-gutter);
	padding-right: var(--powerx-gutter);
}

.powerx-announcement-single__title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-announcement-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.powerx-announcement-single__image {
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.powerx-announcement-single__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Same modern aspect-ratio wrapper pattern already used by Media
   Gallery's .powerx-video-embed and the homepage intro overlay's
   .powerx-intro__video-frame — independently scoped here rather than
   reusing either of those classes directly, since this is a third,
   separate context (a public archive article, not a prepared-for-later
   component or a first-visit modal). */
.powerx-announcement-single__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	overflow: hidden;
	border-radius: 4px;
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.powerx-announcement-single__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.powerx-announcement-single__content {
	color: var(--wp--preset--color--dark-text);
	max-width: 42rem;
}

.powerx-announcement-single__content p {
	margin: 0 0 var(--wp--preset--spacing--md);
	line-height: 1.7;
}

@media (max-width: 600px) {
	.powerx-announcement-single {
		padding-top: var(--wp--preset--spacing--xl);
		padding-bottom: var(--wp--preset--spacing--xl);
	}
}

/* =========================================================
   FAQ
   ========================================================= */

.powerx-faq {
	background-color: var(--powerx-card);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

.powerx-faq__grid {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xl);
	/* Same reasoning as Announcements — force nowrap, list gets most of
	   the row so longer questions don't wrap awkwardly. */
	flex-wrap: nowrap;
}

.powerx-faq__grid > .powerx-section-intro {
	flex: 1 1 28%;
	min-width: 0;
	margin-bottom: 0;
}

.powerx-faq__list {
	flex: 1 1 70%;
	min-width: 0;
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-faq-item {
	border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.15);
	border-left: 3px solid transparent;
	padding-left: var(--wp--preset--spacing--sm);
	transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

.powerx-faq-item:hover,
.powerx-faq-item[open] {
	background-color: var(--wp--preset--color--off-white);
	border-left-color: var(--wp--preset--color--bright-blue);
}

.powerx-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md) 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--powerx-heading);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}

.powerx-faq-item summary:hover,
.powerx-faq-item summary:focus-visible {
	color: var(--wp--preset--color--primary-blue);
}

/* Hide the default disclosure marker so our own circular indicator
   (::after below) is the only one shown, in both WebKit and other engines. */
.powerx-faq-item summary::-webkit-details-marker {
	display: none;
}

.powerx-faq-item summary::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--powerx-surface);
	color: var(--wp--preset--color--primary-blue);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.powerx-faq-item[open] summary::after {
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
	transform: rotate(45deg);
}

.powerx-faq-item p {
	color: var(--wp--preset--color--dark-text);
	line-height: 1.7;
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 40rem;
}

/* =========================================================
   Footer
   ========================================================= */

.powerx-footer {
	/* Top border separates the footer from whatever the page ends with,
	   rather than the two backgrounds meeting abruptly. */
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--lg);
}

/* Four columns (branding, Quick Links, Important Information, Get in
   Touch) — no "layout" attribute on this block deliberately (same
   reasoning as .powerx-steps/.powerx-quick-actions__grid elsewhere):
   WordPress's own flex/grid layout-support class would compete with this
   display:grid on specificity. */
.powerx-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.powerx-footer__col {
	min-width: 0;
}

/* Official combined branding (Services SETA + To The Power of X² +
   African Global Skills Academy). The source asset is dark lettering on
   a transparent background, so it needs a light surface to stay
   legible — literal white rather than var(--powerx-card), which flips
   dark in dark mode like every other card on the site. */
.powerx-footer__brand-logo {
	display: inline-block;
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.powerx-footer__brand-logo img {
	display: block;
	width: 100%;
	max-width: 15rem;
	height: auto;
}

.powerx-footer__tagline {
	margin: var(--wp--preset--spacing--xs) 0 0;
	color: var(--wp--preset--color--bright-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.powerx-footer__col-heading {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Quick Links / Important Information columns render vertically via the
   block's own "orientation":"vertical" attribute (header.html), which
   sets --navigation-layout-direction:column — core's own CSS already
   stacks the list; row-gap here is this theme's own spacing between
   links, not something core provides a token for. */
.powerx-footer__nav .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--xs);
}

.powerx-footer__legal .wp-block-navigation__container {
	column-gap: var(--wp--preset--spacing--md);
}

.powerx-footer__nav .wp-block-navigation-item > a,
.powerx-footer__legal .wp-block-navigation-item > a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
}

.powerx-footer__nav .wp-block-navigation-item > a:hover,
.powerx-footer__nav .wp-block-navigation-item > a:focus-visible,
.powerx-footer__legal .wp-block-navigation-item > a:hover,
.powerx-footer__legal .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.powerx-footer__contact {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--small);
}

.powerx-footer__contact a {
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.powerx-footer__contact a:hover,
.powerx-footer__contact a:focus-visible {
	color: var(--wp--preset--color--bright-blue);
}

.powerx-footer__divider {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: var(--wp--preset--spacing--md) 0;
}

.powerx-footer__bottom {
	align-items: center;
}

.powerx-footer__copyright {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* =========================================================
   Responsive breakpoints

   Consolidated here (rather than inline per-section) so every override at
   a given width is visible in one place. Ordered widest to narrowest.
   ========================================================= */

@media (max-width: 1024px) {
	/* Digital Support and FAQ's two-column grids are deliberately
	   flex-wrap:nowrap at desktop (see each rule's own comment above — it
	   stops the row wrapping unexpectedly before this breakpoint). None of
	   them ever turned wrap back on here, so the flex-basis:100% below was
	   never enough by itself: with the parent still nowrap, two
	   100%-basis children in one row just get shrunk to share it (roughly
	   half-width each) instead of actually stacking. Hero already gets
	   this right (see its own 900px block) — these needed the same reset.
	   (Announcements moved to grid — see its own single-column override
	   below instead.) */
	.powerx-faq__grid {
		flex-wrap: wrap;
	}

	/* Announcements: intro/media column and list column stack to one
	   column, photo-above-list, matching .powerx-media-content's own
	   tablet stacking elsewhere on the site. */
	.powerx-announcements__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Footer: 4 columns become 2x2 at tablet width */
	.powerx-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* About, Programme Information, Support: photo and content stack,
	   photo on top, capped so a single-column phone doesn't get a
	   full-bleed photograph. */
	.powerx-media-content {
		grid-template-columns: minmax(0, 1fr);
	}

	.powerx-media-content__photo {
		max-width: 26rem;
		margin: 0 auto;
	}

	/* FAQ: intro column and question list stack */
	.powerx-faq__grid > .powerx-section-intro,
	.powerx-faq__list {
		flex-basis: 100%;
	}

	/* Journey: the single-row 6-column desktop layout becomes a 3x2 grid
	   (01|02|03 / 04|05|06 — reading order unchanged). The connecting line
	   related every stage to one shared row on desktop; across two rows it
	   would only ever line up with the first, so it's turned off here
	   rather than carried into a layout it no longer fits. Centred text
	   reverts to the left-aligned marker+heading+description stack used
	   everywhere else on the site. */
	.powerx-steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.powerx-steps::before {
		display: none;
	}

	.powerx-step {
		text-align: left;
	}

	.powerx-step__number {
		margin-left: 0;
		margin-right: 0;
	}

	/* Restores the desktop-scale sizes (large/medium) — the 3-column
	   tablet grid has room for them, unlike the narrower desktop-only
	   6-column row above. */
	.powerx-step__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.powerx-step__text {
		font-size: var(--wp--preset--font-size--medium);
	}
}

@media (max-width: 900px) {
	/* Hero: text and image stack instead of sitting side by side. Wrap is
	   turned back on (see the "force nowrap" comment on .powerx-hero__grid
	   above) and both children pinned to a full-width row each, so the
	   stack order matches source order — text/CTAs first, image second —
	   without needing to reorder anything in the markup. The image keeps
	   a landscape-ish 3/2 frame here rather than the desktop 4/3, so a
	   full-width photo doesn't run tall enough to dominate the screen. */
	.powerx-hero__grid {
		flex-wrap: wrap;
	}

	.powerx-hero__inner,
	.powerx-hero__visual {
		flex-basis: 100%;
	}

	.powerx-hero__visual {
		max-width: 100%;
		min-width: 0;
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 600px) {
	/* Journey: the tablet 3x2 grid becomes a single-column stacked list —
	   marker on the left, heading + description on the right. The
	   connecting line is already switched off at the 1024px tablet tier
	   above, so nothing further to undo here. The grid gap (used for
	   desktop/tablet row/column spacing) is reset to 0 here since each
	   stacked row provides its own spacing via padding and a
	   border-bottom divider — a connected list, not gapped cards. */
	.powerx-steps {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Grid, not a 3-item flex row: the marker sits in column 1 spanning
	   both rows, and the heading + description share column 2, heading in
	   row 1 and description in row 2 directly beneath it. That keeps the
	   heading and description in the same text column at the row's full
	   remaining width, instead of each becoming its own horizontal column
	   squeezed to fit next to the other. */
	.powerx-step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		column-gap: var(--wp--preset--spacing--sm);
		row-gap: var(--wp--preset--spacing--xs);
		padding: var(--wp--preset--spacing--md) 0;
		border-bottom: 1px solid rgba(var(--powerx-border-rgb), 0.1);
	}

	.powerx-step:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.powerx-step:first-child {
		padding-top: 0;
	}

	.powerx-step__number {
		grid-column: 1;
		grid-row: 1 / 3;
		/* Smaller than the desktop 4.625rem marker, so the text column gets
		   more of the row's width on a narrow phone. */
		width: 3.5rem;
		height: 3.5rem;
		font-size: var(--wp--preset--font-size--medium);
		box-shadow: 0 0 0 6px var(--powerx-surface);
		margin-bottom: 0;
	}

	.powerx-step__title {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
		margin-bottom: 0;
	}

	.powerx-step__text {
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
	}

	/* Side padding no longer needs a breakpoint override here — --powerx-gutter
	   already scales down fluidly via clamp(). Vertical section padding isn't
	   fluid (it's a flat spacing-token value), so it gets one more step down
	   here specifically for small phones. */
	.powerx-about,
	.powerx-info-hub,
	.powerx-digital-support,
	.powerx-announcements,
	.powerx-faq,
	.powerx-stories,
	.powerx-media-gallery {
		padding-top: var(--wp--preset--spacing--xl);
		padding-bottom: var(--wp--preset--spacing--xl);
	}

	/* header→main already carries WordPress's own 24px site-blocks gap, so
	   a small top padding here is enough on its own at this width. */
	.powerx-hero {
		padding-top: var(--wp--preset--spacing--xs);
		padding-bottom: var(--wp--preset--spacing--md);
	}

	/* Adjacent margins collapse to whichever is larger, so tightening only
	   one side (e.g. a shared margin-block-start rule) is no-op against
	   these elements' own larger margin-bottom — both sides need the
	   smaller value for the actual on-screen gap to shrink. */
	.powerx-hero__inner > * {
		margin-block-start: var(--wp--preset--spacing--xs);
	}

	.powerx-hero__heading {
		margin-bottom: var(--wp--preset--spacing--xs);
	}

	.powerx-hero__tagline {
		margin-bottom: var(--wp--preset--spacing--sm);
	}

	.powerx-footer {
		padding-top: var(--wp--preset--spacing--xl);
		padding-bottom: var(--wp--preset--spacing--lg);
	}

	.powerx-header__inner {
		row-gap: var(--wp--preset--spacing--sm);
	}

	/* Mobile typography pins. The base rules below are fluid (WP's
	   x-large/large tokens, or a custom vw-based clamp()) that reach their
	   floor at narrow widths but that floor is still oversized here — a
	   544px max-width paragraph column doesn't constrain anything once the
	   viewport itself is narrower than that, so at 360-430px the real
	   constraint is the viewport. Pinned to explicit values rather than a
	   narrower token/clamp. */
	.powerx-hero__heading {
		font-size: 2.25rem;
		line-height: 1.1;
	}

	.powerx-hero__subheading {
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.powerx-footer__copyright {
		font-size: 0.875rem;
	}

	/* Footer's four columns stack to one; the bottom copyright/legal row
	   goes from a horizontal space-between row to a stacked column — at
	   this width "space-between" with align-items:center was centering
	   the (short) copyright against the legal nav instead of the plain
	   top-to-bottom stack a mobile footer needs. */
	.powerx-footer__top {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--lg);
	}

	.powerx-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--wp--preset--spacing--sm);
	}

	/* .powerx-footer__legal (bottom row) is still a horizontal
	   WordPress Navigation block at desktop (justify-content:right) —
	   .powerx-footer__nav (the two link columns above) is already
	   vertical at every width via its own "orientation":"vertical"
	   attribute, so it needs no override here. */
	.powerx-footer__legal {
		width: 100%;
	}

	.powerx-footer__legal .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		row-gap: var(--wp--preset--spacing--sm);
	}

	.powerx-footer__legal .wp-block-navigation-item > a {
		/* Vertical-only padding (mobile-scoped, so desktop's horizontal
		   nav spacing is untouched) — keeps each stacked link a
		   comfortable tap height without turning it into a filled button. */
		padding: 0.5rem 0;
	}

	/* About's editorial grid: single column on phones */
	.powerx-editorial-grid {
		grid-template-columns: 1fr;
	}
}

/* Nav/hamburger breakpoint — deliberately its own query, wider than the
   600px one above. With two header CTAs sitting next to a six-item nav
   (see .powerx-header__actions) and the current logo width, measured
   rendering shows the row's natural content (brand + nav row) needs
   1429px and stops fitting one line below an inner width reached at a
   1540px viewport — 1500px previously used a thinner, unmeasured margin
   above that, leaving a real ~1501-1535px trap where the row was still
   forced onto one line but didn't fit (see .powerx-header__inner's
   flex-wrap comment). 1600px gives ~60px of headroom past the measured
   fit point instead, so a few px of cross-machine font-metric variance
   can't reopen the same trap. Everything else on the page (footer,
   Journey, grids, etc.) keeps its own existing breakpoints — only the
   nav's row-vs-hamburger trigger moves. */
@media (max-width: 1600px) {
	/* Hamburger sits left of the logo, not right of it — swaps the visual
	   order of .powerx-header__inner's two children (brand, nav-group)
	   without touching source order/DOM (nav-group collapses to just the
	   open-button at this width, so this reads as "hamburger, then logo").
	   flex-wrap stays nowrap here (unchanged from the base rule above) —
	   see the dedicated @media (max-width: 600px) block further down for
	   why wrap is only ever restored at true mobile widths, not across
	   this entire 1366-1600px "small desktop/tablet" range too. */
	.powerx-header__inner {
		flex-direction: row-reverse;
	}

	/* Core's own trigger only swaps at 600px (min-width:600px shows the
	   inline row / hides the open button). Forcing that same swap back to
	   hamburger up to 1600px reuses the identical override already proven
	   at the short-landscape-phone breakpoint further down this file. */
	.powerx-header__nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* The hamburger mechanism (core, wp:navigation) only toggles the <nav>
	   element's own contents — .powerx-header__actions is the nav's
	   sibling inside .powerx-header__nav-group, not something inside it,
	   so it needs its own explicit hide here. The collapsed mobile header
	   stays logo+hamburger only; the same two Recruit/Employer actions
	   are reachable instead from inside the open hamburger overlay
	   (below), plus the Hero's own buttons and the dark CTA band further
	   down. */
	.powerx-header__actions {
		display: none;
	}

	/* Desktop theme toggle hides alongside .powerx-header__actions — its
	   mobile equivalent (.powerx-theme-toggle-mobile-wrap) only appears
	   once the hamburger overlay is actually open, below. */
	.powerx-theme-toggle:not(.powerx-theme-toggle--mobile) {
		display: none;
	}

	/* Fixed within the open overlay rather than laid out inside its
	   scrollable link list, so it can't collide with core's own
	   top-right close button or get lost below a long nav — bottom-left
	   keeps it clear of both. */
	.powerx-header__nav-group:has(.wp-block-navigation__responsive-container.is-menu-open) .powerx-theme-toggle-mobile-wrap {
		display: flex;
		position: fixed;
		left: var(--powerx-gutter);
		bottom: var(--powerx-gutter);
		z-index: 100001;
	}

	.powerx-theme-toggle-mobile-wrap .powerx-theme-toggle--mobile {
		background-color: var(--powerx-card);
		border-color: rgba(var(--powerx-border-rgb), 0.16);
		box-shadow: 0 4px 16px rgba(var(--powerx-border-rgb), 0.18);
	}

	/* Recruit/Employer actions inside the open mobile overlay, styled as
	   two stacked buttons rather than plain nav links so they read as
	   actions, not destinations — same visual language (primary orange /
	   outlined secondary) as the desktop pair in .powerx-header__actions. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.powerx-header__nav-action {
		display: block;
		width: 100%;
		margin-top: var(--wp--preset--spacing--xs);
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .powerx-header__nav-action .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.875rem 1rem;
		border-radius: 4px;
		font-weight: 700;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .powerx-header__nav-action--primary .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--bright-blue);
		color: var(--wp--preset--color--dark-text);
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .powerx-header__nav-action--secondary .wp-block-navigation-item__content {
		border: 2px solid rgba(var(--powerx-border-rgb), 0.22);
		color: var(--wp--preset--color--dark-text);
	}

	/* Mobile navigation overlay (WordPress's own full-viewport menu,
	   triggered by "overlayMenu":"mobile" on the block in header.html).
	   Positioning, z-index (100000), full-viewport coverage and
	   scroll-if-tall behaviour all come from WordPress core
	   (wp-includes/blocks/navigation/style.css) and are left alone; the
	   rules below fix the parts core leaves unbranded or actively wrong
	   for this header. */

	/* Root cause of the overlay's links reading as right-aligned: this
	   nav's desktop-only "justifyContent":"right" (so the row sits against
	   the logo) sets --navigation-layout-justification-setting: flex-end
	   at the block root. Core reuses that SAME variable for the overlay's
	   align-items once it switches to flex-direction:column — so the
	   setting meant for "push the row right against the logo" on desktop
	   becomes "right-align every stacked link" on mobile. Overridden back
	   to flex-start here, specifically for the overlay content, without
	   touching the desktop justify-content behaviour at all.

	   Every selector below re-states core's own chain
	   (.wp-block-navigation__responsive-container.is-menu-open
	   .wp-block-navigation__responsive-container-content ...) with
	   .powerx-header__nav prefixed, rather than a shorter descendant
	   selector — core's own rules for these same elements chain 4-5
	   classes deep, so a shorter override would lose the specificity
	   comparison and silently do nothing despite loading later. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		align-items: flex-start;
	}

	/* Deliberate, explicit white background rather than relying on core's
	   own #fff fallback (same colour either way, but explicit here so it
	   stays correct if the theme's white token is ever changed) — same
	   specificity-matching reasoning as above. Padding uses the site's
	   own fluid gutter instead of core's --wp--style--root--padding-*
	   (unset on this theme, since useRootPaddingAwareAlignments isn't
	   enabled), so the menu's edges line up with every other section on
	   the site rather than an unrelated fallback value. */
	.powerx-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: var(--powerx-card);
		padding: var(--powerx-gutter);
	}

	/* Predictable vertical rhythm between stacked links — core's own
	   `gap: inherit` here resolves from an unset custom property further
	   up, i.e. effectively no gap at all, leaving only each link's own
	   padding between them. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		row-gap: var(--wp--preset--spacing--xs);
	}

	/* Larger, easier-to-tap links inside the overlay specifically —
	   desktop's tighter 0.5rem padding (set above, shared with this same
	   base selector) stays as-is there; this only widens it once the menu
	   is the dedicated full-screen mobile view. min-width:0 keeps the
	   flex column from holding a link to its content's full-phrase width,
	   so a long label ("Programme Information") wraps naturally instead
	   of forcing the row wider than the viewport. width:100% turns the
	   whole row into the tap target, not just the text itself. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100%;
		min-width: 0;
	}

	/* Targets the anchor by its own class (matching core's own
	   .wp-block-navigation-item__content { padding: 0 } rule that this
	   overrides) rather than ".wp-block-navigation-item > a" — same
	   element, but core's rule is one class more specific than a
	   ">  a" type-selector chain would be, so matching its own selector
	   shape is what actually wins here. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: block;
		padding: 0.875rem 0;
		font-size: 1.125rem;
		line-height: 1.4;
		/* Pre-existing bug, only visible once dark mode exists: core's own
		   `.wp-block-navigation .wp-block-navigation-item__content.wp-
		   block-navigation-item__content { color: inherit }` (specificity
		   0-3-0, beats .powerx-header__nav .wp-block-navigation-item > a's
		   0-2-1) makes these links inherit color from the dialog wrapper
		   instead of using the site's own text-colour token — harmless in
		   light mode since that wrapper's inherited colour happens to be
		   black already, but it hid these links completely (black on a
		   dark overlay) once dark mode gave the underlying token a light
		   value. Matches core's own selector shape (one more class) so
		   this rule actually wins the comparison. */
		color: var(--wp--preset--color--dark-text);
	}

	/* Open/close icon buttons: core ships them at a bare 24x24 with no
	   padding, well under a comfortable tap target, and lets their colour
	   fall through to its own #000 fallback rather than the site's
	   charcoal token. No compensating negative margin: the close button
	   is position:absolute;top:0;right:0, so a negative margin would
	   shift its anchor point and push it partly off-screen instead of
	   just growing its box outward from that corner — box-sizing:
	   border-box (set globally) means the extra padding grows the
	   button's own box while top/right:0 keeps that corner in place, so
	   the icon simply sits with more breathing room, still fully
	   on-screen. Same padding kept on the open button for a consistent
	   tap-target size between the two; it sits in normal flow, so the
	   header row absorbs the few extra pixels without any layout risk. */
	.powerx-header__nav .wp-block-navigation__responsive-container-open,
	.powerx-header__nav .wp-block-navigation__responsive-container-close {
		padding: 0.625rem;
		color: var(--wp--preset--color--dark-text);
	}

	/* Programme/Media/Support: confirmed via the live server-rendered
	   markup (not assumed) that the label <a>, the toggle <button>, and
	   the submenu <ul> are three flat, direct children of this same
	   <li> — no wrapper around just the first two exists, and none is
	   introduced here (a JS-inserted wrapper was considered but
	   rejected: it would touch the same element WordPress's
	   Interactivity API keys its context to, for no real benefit over
	   the fix below).

	   The previous attempt used flex-wrap, which only sends an item to
	   a new line if the browser's flex algorithm decides it doesn't
	   fit on the current one — a width-dependent heuristic, not a
	   guarantee, and it stayed unreliable in the real browser. This
	   replaces it with CSS Grid and explicit placement instead: a
	   fixed 2-column, 2-row grid where the label and toggle are placed
	   into named row-1 cells and the submenu is explicitly placed on
	   row 2 spanning both columns (rules immediately below). Grid
	   placement is a coordinate, not a fit calculation, so there is no
	   longer any content-width condition under which the toggle could
	   end up on its own line below the label. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: 0.5rem;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		grid-column: 1;
		grid-row: 1;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	/* 17px padding around the 10px icon (both from the shared rule
	   above, which sets width/height:auto so this padding isn't
	   fighting a fixed box like core's own 0.6em did) reaches a
	   44x44px tap target without growing the visible arrow itself —
	   the icon stays the same 10px orange chevron; only its tappable
	   area grows. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle {
		padding: 17px;
	}

	/* Core hides this icon entirely inside the open mobile overlay —
	   .wp-block-navigation__responsive-container.is-menu-open
	   :where(:not(.disable-default-overlay))
	   .wp-block-navigation__responsive-container-content
	   .wp-block-navigation__submenu-icon { display:none }, written for
	   its own default "always open, no toggle needed" mobile submenu
	   variant — which would otherwise remove the caret the moment the
	   hamburger opens, even with the desktop fix above in place. That
	   core selector is 4 classes (:where() contributes none to
	   specificity); chaining .powerx-header__nav onto the same class
	   sequence core itself uses reaches 5 and reliably wins, matching
	   this file's existing pattern for every other mobile-overlay
	   override in this block. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: inline-flex;
	}

	/* Core's dropdown panel is position:absolute at every width (see the
	   comment above this file's main dropdown section) — overridden to
	   static/in-flow only here, inside the mobile overlay, so opening a
	   group pushes the groups below it down the page instead of
	   floating over them. Same technique core itself uses for its own
	   "open_always" submenu variant (wp-includes/blocks/navigation/
	   style.css), applied only to our hover-mode groups and scoped to
	   this breakpoint so the desktop floating-card dropdown is
	   untouched. */
	/* Two CSS-only mobile attempts (a plain override, then a higher-
	   specificity aria-expanded-gated re-assertion) were both confirmed
	   broken on a real device even though source analysis showed the
	   native click handler and aria-expanded state were wiring up
	   correctly — the actual visible result stayed unreliable. Mobile
	   open/closed here is now driven entirely by a small script
	   (assets/js/header-navigation.js) toggling one PowerX-owned class,
	   .powerx-submenu-open, rather than by WordPress's own
	   aria-expanded-reactive CSS chain — display:none/flex below reads
	   only that class, so there is nothing left in core's cascade to
	   fight. Core's own visibility/opacity/width rules for this same
	   element (still triggered because the script also sets the real
	   aria-expanded attribute, for a11y/core CSS rotation to stay
	   correct) are harmless leftovers now: display:none overrides them
	   outright when closed, and the .powerx-submenu-open rule below
	   explicitly restates width/min-width at higher specificity than
	   core's own open-state rule so core's width:auto;min-width:200px
	   can't collide with this file's width:100% children again. */
	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none;
		position: static;
		width: 100%;
		min-width: 0;
		background-color: transparent;
		border: none;
		box-shadow: none;
		padding: 0 0 0 1rem;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.powerx-submenu-open > .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: column;
		/* Explicit placement on row 2, spanning both grid columns —
		   deterministic, not dependent on any width/fit calculation
		   (see the .has-child grid rule above for why this replaced an
		   earlier flex-wrap attempt). */
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		min-width: 0;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: normal;
		font-size: 1rem;
		padding: 0.75rem 0;
	}

	/* Mobile accordion panel is transparent above (inherits the light
	   overlay's white background, correct as-is) — dark mode needs its
	   own explicit near-black fill here too, same token and same
	   reasoning as the desktop dropdown override further up this file,
	   so the expanded Programme/Media/Support rows don't stay grey
	   while the desktop dropdown is fixed. */
	[data-theme="dark"] .powerx-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--off-white);
	}
}

/* ROOT CAUSE FIX for a real-device bug (hamburger present in the DOM but
   unreachable without scrolling the page sideways): the unconditional
   base rule sets .powerx-header__inner to flex-wrap:nowrap specifically
   to stop the desktop 6-item-nav-plus-CTAs row from wrapping in the
   narrow band just above the 1600px hamburger breakpoint (see that
   rule's own comment) — it was only ever meant to protect that narrow
   desktop range, not true mobile widths. At true mobile widths,
   nav-group has already collapsed to just the hamburger button, but
   .powerx-header__brand-group (the logo + the always-visible Login to
   Portal button, both flex-shrink:0) can still be wider than the
   viewport on its own; inherited nowrap then had nowhere for the row to
   go but to overflow the page horizontally, pushing the hamburger past
   the right edge. Scoped to 600px — the same true-mobile threshold
   already used throughout this file (.powerx-information-row,
   .powerx-media-grid, etc.) — rather than reusing the wider 1600px
   hamburger breakpoint above: 600-1600px is "hamburger shown, but
   otherwise a normal-width layout" (nav-group is just one small
   button there, comfortably sharing a line with the logo), so it never
   needed or benefited from this override, and widening the wrap that
   far previously caused its own regression in that range. Restoring
   wrap only here lets the row drop the hamburger to a second line on
   truly narrow phones when it doesn't fit — the button stays visible
   either way, and .powerx-header__brand-group's own flex-wrap:wrap
   (unchanged) still independently stacks the logo and Login to Portal
   button at the very narrowest widths, same as before. */
@media (max-width: 600px) {
	.powerx-header__inner {
		flex-wrap: wrap;
	}
}

/* A width breakpoint alone can't distinguish a short landscape phone (e.g.
   844x390, or 932x430 which is wider than the 900px check above) from a
   portrait one of similar width. Height + orientation together target
   that case specifically, without adding a parallel set of width
   breakpoints. Self-contained (repeats the stack rules from the 900px
   block above) since a landscape phone can be wider than 900px, in which
   case that block never applies at all.
   The image stays visible but drops to a much shorter 2/1 crop, tighter
   than the 3/2 portrait-mobile crop.
   The same query also covers the nav: core's mobile-overlay breakpoint is
   width-only (min-width:600px for the inline row), so a landscape phone
   wider than 600px would otherwise get the full six-link inline row
   squeezed into a ~390-430px-tall viewport instead of the hamburger —
   forced back to the open-button-shown / inline-row-hidden state core
   normally reserves for <600px width. */
@media (orientation: landscape) and (max-height: 500px) {
	.powerx-header__nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.powerx-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.powerx-hero {
		padding-top: var(--wp--preset--spacing--lg);
		padding-bottom: var(--wp--preset--spacing--lg);
	}

	.powerx-hero__grid {
		flex-wrap: wrap;
	}

	.powerx-hero__inner,
	.powerx-hero__visual {
		flex-basis: 100%;
	}

	.powerx-hero__visual {
		max-width: 100%;
		min-width: 0;
		aspect-ratio: 2 / 1;
	}
}

/* =========================================================
   Programme Stories

   Page shell only — .powerx-section-intro, .powerx-process__note and
   .powerx-placeholder-panel are all reused exactly as they already
   exist elsewhere; this page introduces no new interactive component.
   (Placement/Attendance Information moved off .powerx-placeholder-panel
   to the two-audience .powerx-audience-block layout in a later pass —
   see that component's own comment above.)
   Background/padding here matches .powerx-digital-support/.powerx-faq
   exactly (both added to the shared gutter-padding and small-phone
   vertical-padding rules near :root instead of duplicated here).
   ========================================================= */

.powerx-stories {
	background-color: var(--powerx-card);
	padding-top: var(--wp--preset--spacing--xxl);
	padding-bottom: var(--wp--preset--spacing--xxl);
}

/* Narrower than the section's own contentSize and with its own
   bottom margin, matching how .powerx-process__note is already
   scoped on the audience-split pages (.powerx-audience-block
   .powerx-process__note) rather than changing the shared base rule
   itself. */
.powerx-stories__consent-note {
	max-width: 42rem;
	margin-bottom: var(--wp--preset--spacing--lg);
}

/* =========================================================
   Media Gallery

   Page shell reuses .powerx-section-intro/.powerx-eyebrow/
   .powerx-text-link exactly as elsewhere (see .powerx-media-gallery
   in the shared gutter-padding/small-phone-padding rules near :root).
   Everything below this point is genuinely new: no other page needed
   an in-page anchor nav, a photo grid, or a responsive YouTube embed
   pattern before now. Photo/video grids are prepared but currently
   unused — no image or iframe markup renders on the page yet (see
   page-media-gallery.html's own maintainer comment); the CSS exists
   so a future content addition is a markup-only change.
   ========================================================= */

.powerx-media-gallery {
	background-color: var(--powerx-card);
}

.powerx-media-gallery__note {
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--muted-text);
}

/* Provincial nav: a restrained editorial link list, not a dashboard —
   thin top rule per item (same language as .powerx-editorial-item),
   no button styling, no cards. */
.powerx-province-nav {
	margin-bottom: var(--wp--preset--spacing--xxl);
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
}

.powerx-province-nav__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-province-nav__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--lg);
}

.powerx-province-nav__item {
	margin: 0;
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-province-nav__item a {
	display: block;
	/* Comfortable tap target — this is a navigation row, not an inline
	   sentence link, so it gets its own generous vertical padding
	   rather than .powerx-text-link's tighter underline treatment. */
	padding: var(--wp--preset--spacing--sm) 0;
	color: var(--powerx-heading);
	font-weight: 600;
	text-decoration: none;
}

.powerx-province-nav__item a:hover,
.powerx-province-nav__item a:focus-visible {
	color: var(--wp--preset--color--primary-blue);
}

@media (max-width: 1024px) {
	.powerx-province-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	/* Long names (KwaZulu-Natal, Northern Cape) plus two columns at the
	   narrowest phones risks an uneven, cramped-looking list — a
	   single column keeps every province name on comfortably readable
	   lines at 320px, per the brief's explicit "prioritise readability
	   over squeezing items into too many columns". */
	.powerx-province-nav__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Each province — thin divider between sections, no card/shadow. */
.powerx-province-media {
	padding-top: var(--wp--preset--spacing--lg);
	padding-bottom: var(--wp--preset--spacing--lg);
	border-top: 1px solid rgba(var(--powerx-border-rgb), 0.15);
}

.powerx-province-media:first-of-type {
	border-top: none;
	padding-top: 0;
}

.powerx-province-media__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2857;
}

/* Used only once real content exists for a province (see the
   maintainer comment in page-media-gallery.html) — prepared now so
   adding it later is a markup-only change. */
.powerx-province-media__subheading {
	margin-top: var(--wp--preset--spacing--md);
	margin-bottom: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 600;
}

.powerx-province-media__empty {
	max-width: 42rem;
	margin: 0;
	color: var(--wp--preset--color--muted-text);
}

.powerx-province-media__back {
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
}

/* Load More — one per province, only rendered when that province has more
   published media beyond the initial batch (see class-powerx-media-
   shortcodes.php). Same restrained outlined/orange-accent language as
   .powerx-header__login-btn rather than a filled CTA — this is a
   secondary, load-more-content action, not a primary call to action. */
.powerx-province-media__load-more {
	margin-top: var(--wp--preset--spacing--md);
}

.powerx-load-more-btn {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--primary-blue);
	border-radius: 4px;
	color: var(--powerx-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.powerx-load-more-btn:hover,
.powerx-load-more-btn:focus-visible {
	background-color: var(--powerx-accent-fill);
	border-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

.powerx-load-more-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Photo grid — prepared, unused until real approved photographs are
   added. width:100%/height:auto rather than a forced aspect-ratio +
   object-fit:cover: the brief is explicit that cropping isn't the
   goal here ("the purpose is documentation, not decorative
   cropping"), so each photo keeps its natural proportions instead of
   being cropped to a uniform tile shape. */
.powerx-media-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md);
}

.powerx-media-grid__item {
	margin: 0;
}

.powerx-media-grid__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.powerx-media-grid__caption {
	margin-top: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 1024px) {
	.powerx-media-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.powerx-media-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Video grid — prepared, unused until real approved YouTube URLs are
   added (see page-media-gallery.html's maintainer comment for the
   exact markup, including youtube-nocookie.com, loading="lazy" and a
   required descriptive title — no autoplay attribute is ever used). */
.powerx-video-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--lg);
}

.powerx-video-embed__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-weight: 600;
	color: var(--powerx-heading);
}

/* Modern aspect-ratio approach rather than the old padding-top
   percentage hack — width:100% plus a fixed ratio keeps the iframe
   fully responsive at any viewport without a hard-coded desktop
   pixel width, which is exactly what would break on mobile. */
.powerx-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--powerx-surface);
	overflow: hidden;
	border-radius: 4px;
}

.powerx-video-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

@media (max-width: 900px) {
	/* One column below desktop width rather than a 1-2 mid-step: two
	   16:9 videos side by side get narrow enough on a tablet-width
	   screen that neither is comfortable to watch — full width, one
	   at a time, reads better than two small players. */
	.powerx-video-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   First-visit introduction overlay (homepage)

   Hidden by default via plain display:none — deliberately NOT the
   native `hidden` attribute for this outer element, since this class
   also needs display:flex once open, and a custom display rule at the
   same specificity as the UA [hidden] rule would win on load order and
   defeat it. assets/js/intro-video.js only ever adds .is-open; there is
   no code path that shows this without JS running, and the script
   itself is a no-op unless a real approved video is configured (see
   its CONFIG block) — so this is fully inert on the current live site.
   The inner welcome/video panels DO use the native `hidden` attribute
   safely, since neither has a competing custom `display` rule of its
   own to conflict with it.
   ========================================================= */

.powerx-intro {
	display: none;
	position: fixed;
	inset: 0;
	/* Comfortably above the mobile hamburger overlay (100001) and the
	   sticky header (45) — this must always sit on top of everything. */
	z-index: 200000;
	align-items: center;
	justify-content: center;
	padding: var(--powerx-gutter);
	background-color: rgba(0, 0, 0, 0.7);
}

.powerx-intro.is-open {
	display: flex;
}

.powerx-intro__backdrop {
	position: absolute;
	inset: 0;
}

.powerx-intro__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
	/* Short viewports (landscape phones especially) get internal
	   scrolling instead of clipped controls — a fixed max-height would
	   need a separate rule per breakpoint; this adapts to any height
	   automatically. */
	max-height: calc(100vh - (2 * var(--powerx-gutter)));
	overflow-y: auto;
	background-color: var(--wp--preset--color--dark-navy);
	color: var(--wp--preset--color--white);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
	padding: var(--wp--preset--spacing--xl);
}

.powerx-intro__close {
	position: absolute;
	top: var(--wp--preset--spacing--sm);
	right: var(--wp--preset--spacing--sm);
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px — comfortable touch target, matches the site's other icon
	   buttons (e.g. the theme toggle). */
	width: 2.75rem;
	height: 2.75rem;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.powerx-intro__close:hover,
.powerx-intro__close:focus-visible {
	border-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--bright-blue);
}

.powerx-intro__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--bright-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.powerx-intro__heading {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2857;
	/* Room for the absolutely-positioned close button above/beside it
	   at narrow widths. */
	padding-right: var(--wp--preset--spacing--xl);
}

.powerx-intro__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
}

.powerx-intro__actions {
	margin-top: var(--wp--preset--spacing--lg);
}

/* One prominent action plus a plain de-emphasised text link underneath
   — not two side-by-side buttons — deliberately avoids the button-
   width-matching class of bug this site hit on the homepage Hero;
   there is nothing here that needs two equal-width controls to line
   up. */
.powerx-intro__watch {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.875rem 1.5rem;
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-navy);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-align: center;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.powerx-intro__watch:hover,
.powerx-intro__watch:focus-visible {
	background-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

.powerx-intro__skip {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--sm);
	padding: 0.5rem;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: underline;
	text-align: center;
	cursor: pointer;
}

.powerx-intro__skip:hover,
.powerx-intro__skip:focus-visible {
	color: var(--wp--preset--color--white);
}

.powerx-intro__video-title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding-right: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

/* Modern aspect-ratio wrapper, same pattern as Media Gallery's
   .powerx-video-embed but independently scoped per this component's
   own prefix — absolute-positioned iframe fills it regardless of
   whatever width/height the YouTube IFrame API sets inline (CSS
   always wins over presentational attributes). */
.powerx-intro__video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	overflow: hidden;
	border-radius: 4px;
}

.powerx-intro__video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.powerx-intro__video-fallback {
	margin: var(--wp--preset--spacing--sm) 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
}

.powerx-intro__video-fallback a {
	color: var(--wp--preset--color--bright-blue);
	font-weight: 600;
}

@media (max-width: 600px) {
	.powerx-intro {
		padding: var(--wp--preset--spacing--sm);
	}

	.powerx-intro__dialog {
		padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	}
}

/* =========================================================
   Portal login pre-notice

   Same fixed-overlay/backdrop/dialog architecture as the first-visit
   .powerx-intro overlay above, but theme-aware (--powerx-card/--powerx-
   heading etc., which already swap between light and dark via the
   [data-theme] redefinitions near :root) rather than .powerx-intro's
   fixed always-dark treatment — this dialog must support both modes.
   assets/js/portal-login-notice.js toggles the `hidden` attribute only;
   there is no .is-open class here since nothing else needs a separate
   "hidden but taking layout space" state for this component.
   ========================================================= */

.powerx-login-notice {
	position: fixed;
	inset: 0;
	z-index: 200000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--powerx-gutter);
	background-color: rgba(0, 0, 0, 0.6);
}

.powerx-login-notice[hidden] {
	display: none;
}

.powerx-login-notice__backdrop {
	position: absolute;
	inset: 0;
}

.powerx-login-notice__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	max-height: calc(100vh - (2 * var(--powerx-gutter)));
	overflow-y: auto;
	background-color: var(--powerx-card);
	color: var(--wp--preset--color--dark-text);
	border-top: 3px solid var(--wp--preset--color--bright-blue);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--xl);
}

.powerx-login-notice__close {
	position: absolute;
	top: var(--wp--preset--spacing--sm);
	right: var(--wp--preset--spacing--sm);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: none;
	border: 1px solid rgba(var(--powerx-border-rgb), 0.25);
	border-radius: 50%;
	color: var(--powerx-heading);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.powerx-login-notice__close:hover,
.powerx-login-notice__close:focus-visible {
	border-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--primary-blue);
}

.powerx-login-notice__heading {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--powerx-heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2857;
	padding-right: var(--wp--preset--spacing--xl);
}

.powerx-login-notice__text {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--muted-text);
}

.powerx-login-notice__text:last-of-type {
	margin-bottom: 0;
}

.powerx-login-notice__secondary-links {
	margin: var(--wp--preset--spacing--md) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.powerx-login-notice__secondary-links a {
	color: var(--wp--preset--color--primary-blue);
	font-weight: 600;
	text-decoration: underline;
}

.powerx-login-notice__secondary-links a:hover,
.powerx-login-notice__secondary-links a:focus-visible {
	color: var(--powerx-accent-fill);
}

.powerx-login-notice__secondary-sep {
	margin: 0 0.5rem;
	color: var(--wp--preset--color--muted-text);
}

/* The single acknowledgement action, at the bottom of the dialog after
   every explanatory paragraph and the secondary registration links —
   deliberately the only prominent/filled button in this dialog, so it
   reads as the one deliberate action a visitor takes after reading the
   notice, not one of several equally-weighted choices. */
.powerx-login-notice__actions {
	margin-top: var(--wp--preset--spacing--lg);
}

.powerx-login-notice__understand {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.875rem 1.5rem;
	background-color: var(--wp--preset--color--bright-blue);
	color: var(--wp--preset--color--dark-navy);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.powerx-login-notice__understand:hover,
.powerx-login-notice__understand:focus-visible {
	background-color: var(--powerx-accent-fill);
	color: var(--wp--preset--color--white);
}

@media (max-width: 600px) {
	.powerx-login-notice {
		padding: var(--wp--preset--spacing--sm);
	}

	.powerx-login-notice__dialog {
		padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}