/*
Theme Name: LeagueSpawn
Theme URI: https://leaguespawn.com/
Description: Standalone dark esports theme for LeagueSpawn — full site editing, own templates and template parts (no parent theme). Built for Core Web Vitals: system font stack, no jQuery, RTL-ready, AdSense-friendly reserved ad slots.
Author: LeagueSpawn
Version: 4.2.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leaguespawn
Tags: full-site-editing, block-patterns, dark-mode, rtl-language-support
*/

/* The homepage hero CTA now anchor-scrolls to the embedded tool instead of
   navigating away; make that feel deliberate instead of an abrupt jump.
   Respects reduced-motion per WCAG 2.3.3 / the site's existing pattern. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/*
 * Fonts: one distinctive display face, self-hosted; system stack for
 * everything else. Inter-for-everything is the single most common AI-slop
 * tell — it's the default of half the internet and gives an interface no
 * personality. Sora is the display face used across the site's approved
 * design reference; self-hosted (no third-party request, no external
 * DNS/connection at runtime) and used ONLY for large headings/labels,
 * never body copy or small UI text — so it adds character without the
 * LCP/CLS risk a full webfont-everywhere approach would carry. Two static
 * weights, Latin subset only, ~15KB each.
 */
/*
 * Typefaces
 *   DIN Next W1G — body copy, UI and headings.
 *   SOLARONA     — the hero H1 only.
 *
 * Both are self-hosted, converted to WOFF2 and subset to Latin + Latin-Ext
 * (SOLARONA to basic Latin, since it only ever sets an English headline).
 * DIN is ~24KB per weight after subsetting; SOLARONA is 137KB because its
 * faceted outlines are genuinely complex, which is why it is preloaded and
 * restricted to a single element.
 */
@font-face {
	font-family: 'DIN Next W1G';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/din-400.woff2') format('woff2');
}
@font-face {
	font-family: 'DIN Next W1G';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/din-500.woff2') format('woff2');
}
@font-face {
	font-family: 'DIN Next W1G';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/din-700.woff2') format('woff2');
}
@font-face {
	font-family: 'SOLARONA';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/solarona-400.woff2') format('woff2');
}

:root {
	--ls-ease: cubic-bezier(.4, 0, .2, 1);
	--ls-font-display: 'DIN Next W1G', var(--wp--preset--font-family--display, sans-serif);
	--ls-font-hero: 'SOLARONA', 'DIN Next W1G', var(--wp--preset--font-family--display, sans-serif);
	/* Faceted cut-corner treatment (replaces border-radius on cards/buttons)
	   for the site's cyberpunk identity — one clipped corner per size step. */
	--ls-clip-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
	--ls-clip-md: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	--ls-clip-lg: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
/* Arabic has no Rajdhani glyphs — fall back to the system stack rather than
   silently rendering tofu or an inconsistent mixed-script heading. */
/* Neither face ships Arabic glyphs, so RTL falls back to the system stack
   rather than rendering tofu or a mismatched mixed-script heading. */
/* Arabic: Cairo covers Arabic AND Latin, so mixed strings ("LeagueSpawn في
   دبي") set in one consistent face instead of switching mid-sentence.
   DIN Next W1G and SOLARONA contain no Arabic glyphs at all — verified — so
   RTL must not inherit them or every heading renders as tofu. */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/cairo-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF, U+2000-206F;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/cairo-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF, U+2000-206F;
}
[dir="rtl"] {
	--ls-font-display: 'Cairo', system-ui, sans-serif;
	--ls-font-hero: 'Cairo', system-ui, sans-serif;
}
[dir="rtl"] body { font-family: 'Cairo', system-ui, sans-serif; }
/* Cairo has no faceted display personality, so the neon pulse (built for
   SOLARONA's outlines) is dropped rather than applied to a text face it
   was never designed for. */
[dir="rtl"] h2, [dir="rtl"] .ls-hero-title { animation: none !important; }
[dir="rtl"] .ls-hero-title, [dir="rtl"] h2 { font-weight: 700 !important; letter-spacing: 0; }

/* ---------- Base ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Apply the display face to headings and the brand lockup only — never body
   copy, buttons, or small UI text. !important backstops theme.json's own
   :where()-wrapped heading rule, which otherwise wins on source order alone
   at equal (near-zero) specificity. */
/* Display weight caps at 600. All three reference systems studied for this
   brand (Wonder, Origin, Dimension) top out at 500–600 for display type and
   compensate with SIZE and tight tracking rather than weight — Dimension
   states it outright ("don't set headlines above weight 500"). Sora 800 at
   64px was the single loudest thing on the page and is what made large
   headings read as shouty rather than confident. */
:where(h1, h2, h3, h4),
.wp-block-post-title {
	font-family: var(--ls-font-display) !important;
	font-weight: 600 !important;
}
h5, h6 { font-family: var(--ls-font-display) !important; font-weight: 600 !important; }

/*
 * Reserve space so late-loading ads can't shift layout (CLS = 0).
 * NOTE: named .ls-adslot, NOT .ls-slot — the bracket plugin already owns
 * .ls-slot for match rows, and the collision inflated every bracket row.
 */
.ls-adslot {
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	contain: layout style;
}
@media (min-width: 782px) {
	.ls-adslot { min-height: 280px; }
}

/* ---------- Hero ---------- */
.ls-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
/* Full-bleed wash.
   .ls-hero is alignfull but still sits inside the root padding, so an
   `inset:0` layer stopped short of the window edges and read as a boxed
   panel. Pinning to 100vw and centring breaks it out to the true viewport
   width regardless of any ancestor's padding or max-width. */
.ls-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	/* Removed: the hero wash duplicated the ambient orb layer behind it and
	   read as a second, competing panel. The page-wide .ls-fx effect now
	   provides all hero atmosphere. */
	background: none;
	pointer-events: none;
}
.ls-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
	background-size: 26px 26px;
	mask-image: linear-gradient(to bottom, #000, transparent 75%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
	pointer-events: none;
}

.ls-eyebrow {
	/* display:table + auto inline margins, NOT inline-block.
	   The badge IS the <p> that carries .has-text-align-center, and
	   text-align on an inline-block only centres its own text — the box
	   itself still sat at the start of the line, which is why it hugged the
	   left while the rest of the hero was centred. */
	display: table;
	margin-inline: auto;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .35em 1em;
	clip-path: var(--ls-clip-sm);
	border: 1px solid rgba(124, 58, 237, .45);
	background: rgba(124, 58, 237, .12);
}

/* ---------- Cards ---------- */
.ls-card {
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	background: var(--wp--preset--color--surface);
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	height: 100%;
	transition: border-color .18s var(--ls-ease), transform .18s var(--ls-ease);
}
.ls-card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}
.ls-card h3 { margin-top: 0; }

/* Respect reduced-motion for every transform we introduce. */
@media (prefers-reduced-motion: reduce) {
	.ls-card, .ls-card:hover { transition: none; transform: none; }
}

/* ---------- Section rhythm ----------
 * Sections are separated by vertical rhythm (padding) alone against one
 * continuous page background — not by wrapping each one in a colored/bordered
 * panel. A full-width tinted band around a constrained-width block reads as
 * a literal box floating on the page; individual cards/tables/FAQ items
 * carry their own border instead, which is where visual structure belongs.
 * .ls-section-alt is kept as a class (existing content still carries it) but
 * intentionally does nothing beyond .ls-section now.
 */
.ls-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}
.ls-section h2 { margin-bottom: var(--wp--preset--spacing--30); }

/* A closing CTA gets a hairline top rule for separation, not a filled
   background panel — a solid-color rectangle around constrained-width
   content is exactly the "boxed section" look this theme avoids. */
.ls-cta-band { border-top: 1px solid var(--wp--preset--color--border); }

/* ---------- Numbered step cards (How-To section) ---------- */
.ls-step-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	background: var(--wp--preset--color--background);
	padding: 1.75rem 1.5rem 1.5rem;
	height: 100%;
}
.ls-step-num {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 0 .9rem !important;
	clip-path: var(--ls-clip-sm);
	background: var(--wp--preset--gradient--brand);
	color: #08080c;
	font-family: var(--ls-font-display);
	font-weight: 600;
	font-size: 1.05rem;
}
.ls-step-card h3 { margin-top: 0; margin-bottom: .5rem; }

/* ---------- Format comparison table, as a contained card ---------- */
.ls-table-card {
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.ls-table-card table { margin: 0; }
.ls-table-card th, .ls-table-card td { border-left: none; border-right: none; }
.ls-table-card tr:last-child td { border-bottom: none; }

/* ---------- FAQ accordion ----------
 * Native <details>/<summary>: zero JS, fully keyboard-operable, and every
 * answer stays present in the HTML source regardless of open/closed state —
 * search and AI crawlers read it exactly like plain prose, but visitors get
 * a scannable, modern list instead of a wall of always-open text.
 */
/* Two equal columns.
   These were laid out in a single flex column and, because the block wrapper
   centres its children, each <details> shrink-wrapped to its own question
   width — giving a ragged, centred stack. A grid with `1fr` tracks forces
   equal widths, and `align-items:start` lets an opened item grow without
   stretching its neighbour to match. */
.ls-faq-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: .75rem;
	width: 100%;
	max-width: 100%;
}
.ls-faq-list > * { width: 100%; margin: 0 !important; max-width: 100% !important; }
@media (max-width: 782px) {
	.ls-faq-list { grid-template-columns: minmax(0, 1fr); }
}
.ls-faq-item {
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	background: var(--wp--preset--color--background);
	padding: 0;
	overflow: hidden;
}
.ls-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 1.3rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: background .15s var(--ls-ease);
}
.ls-faq-item summary::-webkit-details-marker { display: none; }
.ls-faq-item summary::after {
	content: "+";
	flex: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	font-weight: 400;
	transition: transform .2s var(--ls-ease);
}
.ls-faq-item[open] summary::after { transform: rotate(45deg); }
.ls-faq-item summary:hover { background: var(--wp--preset--color--surface); }
.ls-faq-item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}
.ls-faq-item p {
	margin: 0;
	padding: 0 1.3rem 1.2rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Tables (format comparison) ---------- */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table :is(th, td) {
	border: 1px solid var(--wp--preset--color--border);
	padding: .7rem .9rem;
	vertical-align: top;
}
.wp-block-table thead th {
	background: var(--wp--preset--color--surface);
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.wp-block-table { overflow-x: auto; }

/* ---------- RTL ---------- */
/*
 * Only the page chrome mirrors. The bracket itself deliberately keeps its
 * left-to-right reading order in RTL locales — that is the convention
 * tournament organisers expect, and mirroring it makes seeding order confusing.
 */
[dir="rtl"] .ls-hero::before {
	background:
		radial-gradient(60% 80% at 80% 0%, rgba(124, 58, 237, .28), transparent 60%),
		radial-gradient(50% 70% at 15% 10%, rgba(34, 211, 238, .20), transparent 60%);
}
[dir="rtl"] #ls-app { direction: rtl; }
[dir="rtl"] #ls-app .ls-viewport,
[dir="rtl"] #ls-app .ls-stage,
[dir="rtl"] #ls-app .ls-nodes { direction: ltr; }

/* ---------- Focus visibility (a11y) ---------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Skip link ---------- */
.skip-link:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	padding: .75rem 1.25rem;
	z-index: 100000;
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE CHROME — header, footer, page shell.
   This theme has its own templates/parts (no parent theme); everything
   below is what actually renders them, not just design tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Global backdrop ----------
 * A faint fixed grid + glow wash behind the whole site so pages don't read
 * as flat solid-color panels. Fixed attachment = repaints only on resize,
 * not on scroll, so it costs nothing during scroll.
 */
body {
	background-color: var(--wp--preset--color--background);
	background-image:
		radial-gradient(60vw 40vh at 15% -10%, rgba(124, 58, 237, .16), transparent 60%),
		radial-gradient(50vw 35vh at 100% 0%, rgba(34, 211, 238, .12), transparent 60%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0);
	background-size: auto, auto, 28px 28px;
	background-attachment: fixed, fixed, fixed;
	background-repeat: no-repeat, no-repeat, repeat;
}

/* ---------- Header ---------- */
.ls-site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	padding-top: 1rem;
	padding-bottom: 1rem;
	/* No background/backdrop-filter here — see the ::before rule further
	   down. A filter on this element makes it the containing block for
	   position:fixed children, which clipped the mobile nav overlay. */
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/*
 * Brand lockup: a CSS-drawn mark + text, not an image. An uploaded wordmark
 * PNG has to be forced into a fixed header height via width/height overrides
 * that fight the image's real aspect ratio, and any mismatch between those
 * numbers renders the logo visibly stretched or squeezed. Text scales
 * perfectly at any size and needs no re-export when the header changes.
 */
.ls-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--ls-font-display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: .01em;
	color: var(--wp--preset--color--foreground);
	text-decoration: none !important;
	flex-shrink: 0;
}
/* The real LeagueSpawn mark, not a glyph stand-in. Explicit width/height
   attributes are on the <img> too so it reserves its box before decode and
   cannot shift the header (CLS). */
.ls-brand-mark {
	display: block;
	/* Height-driven, width auto. Pinning BOTH axes letterboxed a wide
	   wordmark into a square — the Customizer offers a logo picker and says
	   a wordmark will be "scaled to the height", so the CSS has to honour
	   that instead of forcing 1:1. Square marks are unaffected. */
	height: var(--ls-brand-h, 52px);
	width: auto;
	/* Generous enough for a ~5:1 wordmark at the configured height
	   (52px x 4.84 = 252px); still a guard against an absurd upload. */
	max-width: 280px;
	flex-shrink: 0;
	object-fit: contain;
}
.ls-brand-mark-sm { width: 26px; height: 26px; }
.ls-brand-footer { font-size: 1.05rem; }
.ls-nav {
	--wp--style--block-gap: 1.6rem;
}
/*
 * Specificity note: core's own navigation CSS scopes link color as
 * `.wp-block-navigation .wp-block-navigation-item__content` (two classes),
 * which beats a plain `.ls-nav a` (one class + tag) and silently wins with
 * `color: inherit`. Matching that scope — plus !important as a backstop —
 * is what actually applies the muted colour here.
 */
.ls-nav .wp-block-navigation-item__content,
.ls-nav a {
	color: var(--wp--preset--color--muted) !important;
	text-decoration: none !important;
	position: relative;
	padding-bottom: 3px;
	transition: color .15s var(--ls-ease);
}
.ls-nav .wp-block-navigation-item__content:hover,
.ls-nav .wp-block-navigation-item__content:focus-visible,
.ls-nav a:hover,
.ls-nav a:focus-visible {
	color: var(--wp--preset--color--foreground) !important;
}
.ls-nav .wp-block-navigation-item__content::after,
.ls-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 2px;
	background: var(--wp--preset--gradient--brand);
	transition: right .2s var(--ls-ease);
}
.ls-nav .wp-block-navigation-item__content:hover::after,
.ls-nav .wp-block-navigation-item__content:focus-visible::after,
.ls-nav a:hover::after,
.ls-nav a:focus-visible::after { right: 0; }

/* Give each nav item real click/tap padding instead of bare text jammed
   against its neighbours — this is most of what read as "cramped". */
.ls-nav .wp-block-navigation-item__content { padding: .5rem .15rem !important; }

/* Active page: persistent underline (not just on hover) + brighter text,
   set by the small JS in functions.php since these are custom-URL links
   WordPress can't mark current on its own. */
.ls-nav .ls-nav-current > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground) !important;
	font-weight: 700;
}
.ls-nav .ls-nav-current > .wp-block-navigation-item__content::after { right: 0; }

/* Formats submenu — core ships almost no default styling, so left unstyled
   it would render as a plain white/transparent box clashing hard with the
   dark theme. */
.ls-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
	margin-inline-start: .3rem;
	opacity: .7;
}
.ls-nav .wp-block-navigation__submenu-container {
	background: rgba(19, 23, 40, .96) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 12px;
	padding: .4rem !important;
	box-shadow: 0 0 0 1px rgba(124, 58, 237, .12), 0 16px 40px rgba(0, 0, 0, .5);
	min-width: 220px;
}
.ls-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .55rem .7rem !important;
	border-radius: 8px;
	white-space: nowrap;
}
.ls-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, .06);
}
.ls-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none; /* the underline sweep only makes sense in the horizontal top bar */
}

.ls-header-cta .wp-block-button__link {
	padding-top: .55rem;
	padding-bottom: .55rem;
	font-size: .85rem;
}

@media (max-width: 782px) {
	.ls-site-header .wp-block-group { flex-wrap: wrap; row-gap: .75rem; }
	.ls-header-cta { width: 100%; }
	.ls-header-cta .wp-block-buttons { justify-content: stretch; }
	.ls-header-cta .wp-block-button { flex: 1; }
}

/* ---------- Page shell ---------- */
.ls-page-main { padding-top: 0; padding-bottom: var(--wp--preset--spacing--50); }

/* Page head as a centred hero, mirroring the front page's treatment so
   inner pages don't open on a small left-aligned title. */
.ls-page-head {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	text-align: center;
}
.ls-page-head h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	max-width: 26ch;
	margin-inline: auto;
	text-wrap: balance;
}

/* The lead paragraph directly under a page hero: centred, readable measure. */
.ls-lead {
	max-width: 68ch;
	margin-inline: auto !important;
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

/* ---------- Breadcrumb ---------- */
.ls-breadcrumb {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.ls-breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.ls-breadcrumb a:hover,
.ls-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--foreground);
	border-bottom-color: currentColor;
}
.ls-breadcrumb .breadcrumb_last {
	color: var(--wp--preset--color--foreground);
	font-weight: 500;
}

/* ---------- 404 ---------- */
.ls-404 { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground) !important;
	background: transparent !important;
}
/* Elevation and emphasis come from SURFACE and BORDER, not from glow.
   All three reference systems build depth with a colour ladder plus 1px
   hairlines and explicitly avoid box-shadow for elevation; the previous
   cyan/violet glow on every button and card is what gave the page its
   "everything is shouting" quality. Motion + border shift carry hover now. */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	background: rgba(34, 211, 238, .08) !important;
}
.wp-block-button__link {
	clip-path: var(--ls-clip-sm);
	transition: filter .18s var(--ls-ease), transform .12s var(--ls-ease);
}
.wp-block-button__link:hover { filter: brightness(1.08); }
.wp-block-button__link:active { transform: translateY(1px); }

/* ---------- Footer ---------- */
.ls-site-footer {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	background:
		radial-gradient(45vw 30vh at 90% 0%, rgba(124, 58, 237, .10), transparent 65%);
}
.ls-footer-grid { margin-bottom: var(--wp--preset--spacing--40); }
.ls-footer-blurb { margin-top: .6rem !important; max-width: 32ch; font-size: .9rem; }
.ls-footer-heading {
	font-size: .8rem !important;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted);
	margin-bottom: .9rem !important;
}
.ls-footer-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.ls-footer-list a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: .9rem;
	opacity: .85;
	transition: opacity .15s var(--ls-ease), color .15s var(--ls-ease);
}
.ls-footer-list a:hover { opacity: 1; color: var(--wp--preset--color--accent); }
/* WP's default separator renders ~100px and centred, which reads as an
   orphaned fragment against a full-width footer — stretch it deliberately. */
.ls-footer-rule { width: 100% !important; border-color: var(--wp--preset--color--border); opacity: 1; margin-bottom: 1.25rem !important; }
.ls-footer-bottom { gap: .5rem; }
.ls-footer-copy { font-size: .78rem !important; margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE
   Implemented by re-pointing the theme.json palette custom properties on
   the root element rather than by writing a parallel set of component
   rules — every component already consumes those vars, so one block flips
   the whole site and nothing can drift out of sync.

   The cyan/violet accents are DARKENED for light mode rather than reused.
   #22d3ee on white is ~1.9:1 and fails WCAG AA badly; #0e7490 clears 4.5:1
   for body-size text. Same reasoning for the violet.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
	--wp--preset--color--background: #f6f7fb;
	--wp--preset--color--surface:    #ffffff;
	--wp--preset--color--surface-2:  #eef1f7;
	--wp--preset--color--border:     #dde2ed;
	--wp--preset--color--foreground: #141824;
	--wp--preset--color--muted:      #545c70;
	--wp--preset--color--accent:     #0e7490;
	--wp--preset--color--accent-2:   #6d28d9;
	--wp--preset--color--white:      #ffffff;
	--wp--preset--gradient--brand: linear-gradient(135deg, #6d28d9 0%, #0e7490 100%);
	color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

/* Surfaces that were hand-written in rgba (not palette vars) need their own
   light values — these are the only such cases in the stylesheet. */
html[data-theme="light"] body {
	background-color: var(--wp--preset--color--background);
	background-image:
		radial-gradient(60vw 40vh at 15% -10%, rgba(109, 40, 217, .10), transparent 60%),
		radial-gradient(50vw 35vh at 100% 0%, rgba(14, 116, 144, .09), transparent 60%),
		radial-gradient(circle at 1px 1px, rgba(20, 24, 36, .055) 1px, transparent 0);
}
html[data-theme="light"] .ls-site-header {
	background: rgba(255, 255, 255, .82);
	border-bottom-color: var(--wp--preset--color--border);
}
html[data-theme="light"] .ls-hero::before {
	background:
		radial-gradient(60% 80% at 20% 0%, rgba(109, 40, 217, .16), transparent 60%),
		radial-gradient(50% 70% at 85% 10%, rgba(14, 116, 144, .13), transparent 60%);
}
html[data-theme="light"] .ls-hero::after {
	background-image: radial-gradient(circle at 1px 1px, rgba(20, 24, 36, .07) 1px, transparent 0);
}
html[data-theme="light"] .ls-eyebrow {
	border-color: rgba(109, 40, 217, .35);
	background: rgba(109, 40, 217, .08);
}
html[data-theme="light"] .ls-nav .wp-block-navigation__submenu-container {
	background: #ffffff;
	box-shadow: 0 0 0 1px rgba(20, 24, 36, .08), 0 16px 40px rgba(20, 24, 36, .14);
}
html[data-theme="light"] .ls-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(20, 24, 36, .05);
}
html[data-theme="light"] .ls-site-footer {
	background: radial-gradient(45vw 30vh at 90% 0%, rgba(109, 40, 217, .07), transparent 65%);
}
html[data-theme="light"] .ls-step-card,
html[data-theme="light"] .ls-faq-item { background: var(--wp--preset--color--surface); }

/* ---------- Theme toggle control ---------- */
.ls-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-sm);
	transition: color .15s var(--ls-ease), border-color .15s var(--ls-ease);
}
.ls-theme-toggle:hover { color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--accent); }
.ls-theme-toggle svg { width: 17px; height: 17px; display: block; }
/* Show the icon for the mode you'd switch TO, not the one you're in. */
.ls-theme-toggle .ls-icon-sun  { display: none; }
html[data-theme="light"] .ls-theme-toggle .ls-icon-sun  { display: block; }
html[data-theme="light"] .ls-theme-toggle .ls-icon-moon { display: none; }

/* Light-mode buttons.
   theme.json sets button text to #08080c, which is correct on the bright
   dark-mode gradient but muddy on the darker light-mode gradient. White text
   on the deeper violet→teal ramp clears AA comfortably. */
html[data-theme="light"] .wp-block-button__link,
html[data-theme="light"] .wp-element-button {
	color: #ffffff !important;
}
html[data-theme="light"] .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--foreground) !important;
	border-color: #c8cfdd;
	background: #ffffff !important;
}
html[data-theme="light"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	background: #f2f7fb !important;
}
html[data-theme="light"] .ls-theme-toggle { border-color: #cfd6e4; }
html[data-theme="light"] .ls-card { box-shadow: 0 1px 2px rgba(20,24,36,.05); }
html[data-theme="light"] .ls-table-card { box-shadow: 0 1px 3px rgba(20,24,36,.08); }

/* ---------- Cookie consent notice ---------- */
.ls-consent {
	position: fixed;
	left: 1rem; right: 1rem; bottom: 1rem;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 62rem;
	margin-inline: auto;
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.ls-consent[hidden] { display: none; }
.ls-consent-text { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); flex: 1 1 22rem; }
.ls-consent-actions { display: flex; gap: .5rem; flex: none; }
.ls-consent-btn {
	cursor: pointer;
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	padding: .55rem 1.1rem;
	clip-path: var(--ls-clip-sm);
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--foreground);
}
.ls-consent-accept {
	background: var(--wp--preset--gradient--brand);
	border-color: transparent;
	color: #08080c;
}
html[data-theme="light"] .ls-consent-accept { color: #fff; }
.ls-consent-btn:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
	.ls-consent { flex-direction: column; align-items: stretch; }
	.ls-consent-actions { justify-content: stretch; }
	.ls-consent-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AMBIENT BACKGROUND — drifting orbs + rising particles
   Composited entirely on the GPU (transform/opacity only), so it costs no
   main-thread work and cannot affect INP. Fixed at z-index -1 behind all
   content; the existing body gradient still shows through beneath it.
   ═══════════════════════════════════════════════════════════════════════ */
.ls-fx {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}
.ls-fx-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: .45;
	will-change: transform;
}
.ls-fx-orb--1 {
	width: 620px; height: 620px; top: -140px; left: -160px;
	background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 70%);
	animation: ls-orb1 26s ease-in-out infinite;
}
.ls-fx-orb--2 {
	width: 480px; height: 480px; top: 12%; right: -140px;
	background: radial-gradient(circle, rgba(34, 211, 238, .40), transparent 70%);
	animation: ls-orb2 32s ease-in-out infinite;
}
.ls-fx-orb--3 {
	width: 680px; height: 680px; bottom: -300px; left: 22%;
	background: radial-gradient(circle, rgba(109, 40, 217, .36), transparent 70%);
	animation: ls-orb3 36s ease-in-out infinite;
}
.ls-fx-orb--4 {
	width: 380px; height: 380px; top: 42%; right: 8%;
	background: radial-gradient(circle, rgba(14, 165, 233, .26), transparent 70%);
	animation: ls-orb4 30s ease-in-out infinite;
}
.ls-fx-particle {
	position: absolute;
	bottom: -10px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	will-change: transform, opacity;
	animation-name: ls-particle-rise;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes ls-orb1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(70px, 50px) scale(1.10); }
	66%      { transform: translate(30px, 90px) scale(.95); }
}
@keyframes ls-orb2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	40%      { transform: translate(-80px, 60px) scale(1.12); }
	70%      { transform: translate(-30px, -40px) scale(.92); }
}
@keyframes ls-orb3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	30%      { transform: translate(50px, -70px) scale(1.08); }
	65%      { transform: translate(-60px, -30px) scale(1.18); }
}
@keyframes ls-orb4 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-40px, -60px) scale(1.15); }
}
@keyframes ls-particle-rise {
	0%   { transform: translateY(0) translateX(0); opacity: 0; }
	10%  { opacity: .5; }
	90%  { opacity: .3; }
	100% { transform: translateY(-110vh) translateX(var(--p-drift, 30px)); opacity: 0; }
}
/* Light mode: the same effect at lower intensity, or it muddies white. */
html[data-theme="light"] .ls-fx-orb { opacity: .30; }
html[data-theme="light"] .ls-fx-particle { opacity: 0; }

/* Motion sensitivity and small screens.
   Below 782px the particles are dropped entirely: 28 animating layers on a
   mid-range phone is real battery and compositor cost for decoration. */
@media (prefers-reduced-motion: reduce) {
	.ls-fx-orb, .ls-fx-particle { animation: none !important; }
	.ls-fx-particle { display: none; }
}
@media (max-width: 782px) {
	.ls-fx-particle { display: none; }
	.ls-fx-orb { filter: blur(70px); opacity: .35; }
	.ls-fx-orb--3, .ls-fx-orb--4 { display: none; }
}

/* ═══════════ Hero ═══════════ */
.ls-hero-title { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
/* Gradient on the key phrase only. background-clip:text needs a transparent
   fill; the solid colour is kept as a fallback for engines that ignore it. */
.ls-grad {
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
	.ls-grad { color: var(--wp--preset--color--accent); -webkit-text-fill-color: currentColor; }
}
.ls-hero-sub {
	max-width: 62ch;
	margin-inline: auto !important;
	font-size: var(--wp--preset--font-size--large);
}
.ls-hero-cta { margin-top: var(--wp--preset--spacing--30); }

/* Stat strip: compact, factual, and the sort of block AI answer engines lift. */
.ls-hero-stats {
	list-style: none;
	margin: var(--wp--preset--spacing--40) auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	max-width: 46rem;
	background: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	overflow: hidden;
}
.ls-hero-stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	padding: 1rem .6rem;
	background: var(--wp--preset--color--background);
	text-align: center;
}
.ls-hero-stats strong {
	font-family: var(--ls-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--foreground);
}
.ls-hero-stats span {
	font-size: .78rem;
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
}

/* ═══════════ Mobile ═══════════ */
@media (max-width: 782px) {
	.ls-hero { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; }
	.ls-hero-title { max-width: 100%; }
	.ls-hero-sub { font-size: 1rem; }
	/* Full-width stacked CTAs — the standard mobile pattern and a far larger
	   tap target than two side-by-side pills. */
	.ls-hero-cta { width: 100%; }
	.ls-hero-cta .wp-block-button { flex: 1 1 100%; }
	.ls-hero-cta .wp-block-button__link { display: block; width: 100%; }
	.ls-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ls-page-head { padding-top: var(--wp--preset--spacing--40); }
	.ls-page-head h1 { max-width: 100%; }
	.ls-section { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); }
	.ls-footer-grid { row-gap: var(--wp--preset--spacing--30); }
	/* Every tap target clears the 44px minimum. */
	.ls-nav .wp-block-navigation-item__content { padding: .7rem .15rem !important; }
	.ls-consent { left: .5rem; right: .5rem; bottom: .5rem; }
}
@media (max-width: 480px) {
	.ls-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ls-hero-stats strong { font-size: 1.25rem; }
}

/* ═══════════ Header ═══════════
   The header is a flex row of brand / nav / toggle / CTA. On small screens the
   CTA duplicates the hero's primary action, so it is dropped rather than
   wrapped onto a second line, and the nav is allowed to scroll horizontally
   instead of stacking into a tall block that pushes content below the fold. */
@media (max-width: 900px) {
	.ls-site-header .wp-block-group { gap: .6rem; }
	.ls-nav { --wp--style--block-gap: 1rem; }
}
@media (max-width: 782px) {
	/* The header CTA duplicates the hero's primary action; drop it rather
	   than wrap the header onto a second row. !important is needed because
	   core's `.wp-block-buttons{display:flex}` is inlined after the theme
	   stylesheet and wins at equal specificity on source order. */
	.ls-header-cta { display: none !important; }
	.ls-site-header { padding-top: .6rem; padding-bottom: .6rem; }
	.ls-brand-word { font-size: 1rem; }
}
@media (max-width: 340px) {
	/* Only on genuinely tiny screens do the wordmark and controls stop
	   fitting on one row. 375px phones keep the wordmark. */
	.ls-brand-word { display: none; }
}

/* Footer wordmark. The intrinsic file is 1318×271, so width/height are given
   as the REAL ratio and CSS scales it — mismatched attributes are exactly
   what squashed the original header logo. */
.ls-footer-logo { display: inline-block; }
.ls-footer-logo img {
	display: block;
	height: 30px;
	width: auto;
	max-width: 100%;
}

/* ═══════════ Mobile navigation overlay ═══════════
   Below 782px the navigation block switches to its own hamburger overlay.
   Left unstyled it renders as core's default white sheet, so it is themed
   here to match the site and to give every control a 44px tap target.  */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--foreground);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--foreground) !important;
	padding: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground) !important;
	font-size: 1.05rem;
	padding: .8rem .2rem !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .15rem;
	width: 100%;
}
/* The underline sweep is a desktop-bar affordance; inside the sheet it just
   flickers under full-width rows. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	box-shadow: none !important;
	padding-left: .75rem;
	border-left: 1px solid var(--wp--preset--color--border);
}

/* ═══════════ Hero title — SOLARONA + neon ═══════════ */
.ls-hero-title {
	font-family: var(--ls-font-hero) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	line-height: 1.08;
}
/* The plain half glows white; .ls-grad keeps its gradient fill, so its glow
   has to come from drop-shadow rather than text-shadow (text-shadow paints
   behind the transparent fill and would be clipped away by background-clip). */
.ls-hero-title {
	animation: ls-neon 3.2s ease-in-out infinite;
}
.ls-hero-title .ls-grad {
	filter: drop-shadow(0 0 18px rgba(124, 58, 237, .55));
	animation: ls-neon-grad 3.2s ease-in-out infinite;
}
@keyframes ls-neon {
	0%, 100% {
		text-shadow:
			0 0 6px rgba(255, 255, 255, .30),
			0 0 22px rgba(34, 211, 238, .22),
			0 0 48px rgba(124, 58, 237, .18);
	}
	50% {
		text-shadow:
			0 0 10px rgba(255, 255, 255, .48),
			0 0 34px rgba(34, 211, 238, .38),
			0 0 72px rgba(124, 58, 237, .30);
	}
}
@keyframes ls-neon-grad {
	0%, 100% { filter: drop-shadow(0 0 16px rgba(124, 58, 237, .45)) drop-shadow(0 0 34px rgba(34, 211, 238, .20)); }
	50%      { filter: drop-shadow(0 0 26px rgba(124, 58, 237, .70)) drop-shadow(0 0 56px rgba(34, 211, 238, .38)); }
}
@media (prefers-reduced-motion: reduce) {
	.ls-hero-title, .ls-hero-title .ls-grad { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER, BUTTONS, HEADINGS, FLOATING RAIL  (v3.1)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Glass header ---------- */
/* Glass lives on a pseudo-element, NOT on .ls-site-header itself.
   backdrop-filter establishes a containing block for position:fixed
   descendants — with it on the header, WordPress's full-screen mobile nav
   overlay was trapped inside the header's 71px box instead of covering the
   viewport, so the menu "opened" but showed almost nothing. Moving the
   filter to ::before keeps the effect and frees the overlay. */
.ls-site-header {
	position: sticky;
	isolation: isolate;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
}
.ls-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--background) 62%, transparent);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	/* A hairline highlight along the top edge is what actually sells "glass";
	   without it the bar reads as a flat translucent block. */
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--foreground) 8%, transparent);
	pointer-events: none;
}
/* Fallback for engines without backdrop-filter — stay opaque rather than
   letting content scroll through an unblurred transparent bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ls-site-header::before { background: var(--wp--preset--color--background); }
}
.ls-brand { gap: 0; }

/* ---------- Navigation ---------- */
.ls-nav .wp-block-navigation-item__content,
.ls-nav a {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem !important;
	font-weight: 700;
	/* Equal vertical padding on every item so the row shares one baseline
	   box; the parent flex row then centres them as a unit. */
	padding: .55rem .1rem !important;
	line-height: 1.2;
}
.ls-nav .wp-block-navigation__container { align-items: center; }
.ls-nav .wp-block-navigation-item { display: flex; align-items: center; }
/* Submenu items stay sentence-height and readable — uppercase is a top-bar
   treatment, not something to inherit into a dropdown list. */
.ls-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: normal;
	font-size: .85rem !important;
	padding: .55rem .9rem !important;
}

/* ---------- Buttons: one solid colour, neon on hover ---------- */
.wp-block-button__link,
.wp-element-button {
	background: var(--wp--preset--color--accent-2) !important;
	background-image: none !important;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	font-size: .82rem;
	border: 1px solid var(--wp--preset--color--accent-2);
	transition: box-shadow .2s var(--ls-ease), transform .12s var(--ls-ease), filter .2s var(--ls-ease);
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	filter: none;
	box-shadow:
		0 0 0 1px var(--wp--preset--color--accent-2),
		0 0 14px color-mix(in srgb, var(--wp--preset--color--accent-2) 70%, transparent),
		0 0 38px color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, transparent);
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--foreground) !important;
	border-color: var(--wp--preset--color--border);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	background: transparent !important;
	box-shadow:
		0 0 0 1px var(--wp--preset--color--accent),
		0 0 14px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent),
		0 0 34px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link, .wp-element-button { transition: none; }
	.wp-block-button__link:hover, .wp-element-button:hover { transform: none; }
}

/* ---------- H2 matches the hero title ---------- */
h2,
.wp-block-heading.has-text-align-center,
.ls-section h2 {
	font-family: var(--ls-font-hero) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	line-height: 1.12;
}
h2 { animation: ls-neon 3.2s ease-in-out infinite; }
/* Section H2s only — never inside the bracket tool or the FAQ summaries,
   where a glowing heading would fight the UI. */
#ls-app h2, .ls-faq-item h2 { animation: none !important; font-family: inherit !important; }
@media (prefers-reduced-motion: reduce) { h2 { animation: none !important; } }

/* ---------- Floating utility rail ---------- */
.ls-rail-fixed {
	position: fixed;
	right: clamp(.6rem, 2vw, 1.25rem);
	bottom: clamp(.6rem, 2vw, 1.25rem);
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.ls-fab {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	color: var(--wp--preset--color--foreground);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 82%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-sm);
	transition: color .15s var(--ls-ease), border-color .15s var(--ls-ease), box-shadow .2s var(--ls-ease);
}
.ls-fab:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow:
		0 0 0 1px var(--wp--preset--color--accent),
		0 0 16px color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}
.ls-fab:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.ls-fab[hidden] { display: none; }
.ls-fab svg { width: 19px; height: 19px; display: block; }
/* Show the icon for the mode you would switch TO. */
.ls-fab-theme .ls-icon-sun { display: none; }
html[data-theme="light"] .ls-fab-theme .ls-icon-sun { display: block; }
html[data-theme="light"] .ls-fab-theme .ls-icon-moon { display: none; }
/* Keep the rail clear of the consent banner while that is on screen. */
.ls-consent:not([hidden]) ~ .ls-rail-fixed { bottom: 7.5rem; }

@media (max-width: 782px) {
	.ls-brand-mark { width: 42px; height: 42px; }
	.ls-nav .wp-block-navigation-item__content, .ls-nav a { font-size: .74rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.2 — section rhythm, header tools, social rail, founder, archive, RTL
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- More air between homepage sections ---------- */
.ls-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.ls-page-main > .wp-block-post-content > * + * { margin-top: var(--wp--preset--spacing--50); }
.ls-tool-embed { margin-block: var(--wp--preset--spacing--50); }
.ls-cta-band { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); }
@media (max-width: 782px) {
	.ls-section { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
	.ls-page-main > .wp-block-post-content > * + * { margin-top: var(--wp--preset--spacing--40); }
}

/* ---------- Header tools (scheme button + language switcher) ---------- */
.ls-header-tools { display: flex; align-items: center; gap: .4rem; flex: none; }
.ls-scheme-btn,
.ls-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 36px;
	padding: 0 .7rem;
	cursor: pointer;
	font: inherit;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wp--preset--color--muted);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-sm);
	transition: color .15s var(--ls-ease), border-color .15s var(--ls-ease);
}
.ls-scheme-btn:hover, .ls-lang-btn:hover { color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--accent); }
.ls-scheme-btn:focus-visible, .ls-lang-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.ls-scheme-btn svg, .ls-lang-btn svg { width: 15px; height: 15px; flex: none; }
.ls-scheme-btn .ls-icon-sun { display: none; }
html[data-theme="light"] .ls-scheme-btn .ls-icon-sun { display: block; }
html[data-theme="light"] .ls-scheme-btn .ls-icon-moon { display: none; }

/* display:flex, not block. As a block the wrapper laid its inline-flex
   button on a text baseline, adding descender space below it — the wrapper
   measured 52px against a 36px button and sat 8px off from the scheme
   button beside it. Flex removes the baseline entirely. */
.ls-lang { position: relative; display: flex; align-items: center; }
.ls-lang > p:empty, .ls-header-tools > p:empty { display: none; }
.ls-lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 300;
	min-width: 11rem;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-sm);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.ls-lang-menu[hidden] { display: none; }
.ls-lang-menu li { margin: 0; }
.ls-lang-menu a {
	display: block;
	padding: .5rem .7rem;
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.ls-lang-menu a:hover { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--foreground); }
.ls-lang-menu a[aria-current="true"] { color: var(--wp--preset--color--accent); font-weight: 700; }

/* ---------- Sticky social rail ---------- */
.ls-social-rail {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 880;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-left: none;
	overflow: hidden;
}
.ls-social-link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	transition: color .15s var(--ls-ease), background .15s var(--ls-ease);
}
.ls-social-link svg { width: 16px; height: 16px; }
.ls-social-link:hover { color: #fff; background: var(--wp--preset--color--accent-2); }
.ls-social-link:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -2px; }
/* On phones a fixed left rail overlaps content and steals horizontal space,
   so it becomes a centred horizontal strip in the normal flow instead. */
@media (max-width: 900px) {
	.ls-social-rail {
		position: static;
		transform: none;
		flex-direction: row;
		justify-content: center;
		border: none;
		background: transparent;
		gap: .4rem;
		padding: 0 0 5.5rem;
	}
	.ls-social-link { border: 1px solid var(--wp--preset--color--border); }
}

/* ---------- Founder card ---------- */
.ls-founder {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin: var(--wp--preset--spacing--40) 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent-2);
	clip-path: var(--ls-clip-md);
}
.ls-founder-media { flex: none; }
/* Any portrait is cropped to a true square: a fixed 1:1 box plus object-fit
   cover, with the focal point biased above centre so a head is never cut. */
.ls-founder-photo,
.ls-founder-initials {
	display: block;
	width: clamp(88px, 14vw, 132px);
	height: clamp(88px, 14vw, 132px);
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent-2);
}
.ls-founder-initials {
	display: grid;
	place-items: center;
	font-family: var(--ls-font-display);
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--accent-2);
}
.ls-founder-body { min-width: 0; }
.ls-founder-eyebrow {
	margin: 0 0 .3rem !important;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.ls-founder-name {
	margin: 0 !important;
	font-family: var(--ls-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}
.ls-founder-role { margin: .15rem 0 .75rem !important; font-size: .92rem; color: var(--wp--preset--color--muted); }
.ls-founder-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ls-founder-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .8rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
	text-decoration: none !important;
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-sm);
	transition: border-color .15s var(--ls-ease), color .15s var(--ls-ease);
}
.ls-founder-link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.ls-founder-link svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 600px) {
	.ls-founder { flex-direction: column; align-items: flex-start; }
}

/* ---------- Post archive ---------- */
.ls-archive { margin-top: var(--wp--preset--spacing--40); }
.ls-archive-grid { gap: var(--wp--preset--spacing--30) !important; }
.ls-post-card {
	height: 100%;
	padding: 0 0 1.1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
	overflow: hidden;
	transition: border-color .18s var(--ls-ease), transform .18s var(--ls-ease);
}
.ls-post-card:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-2px); }
.ls-post-thumb { margin: 0 0 .9rem !important; }
.ls-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-post-card .ls-post-meta,
.ls-post-card .ls-post-title,
.ls-post-card .ls-post-excerpt { padding-inline: 1.1rem; }
.ls-post-meta { margin: 0 0 .3rem !important; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
/* Card titles are H2 in the markup but must not inherit the glowing hero
   treatment — a grid of pulsing titles would be unreadable. */
.ls-post-title {
	margin: 0 0 .5rem !important;
	font-size: 1.15rem !important;
	animation: none !important;
	font-family: var(--ls-font-display) !important;
	font-weight: 700 !important;
}
.ls-post-title a { color: var(--wp--preset--color--foreground); text-decoration: none; }
.ls-post-title a:hover { color: var(--wp--preset--color--accent); }
.ls-post-excerpt { margin: 0 !important; font-size: .9rem; color: var(--wp--preset--color--muted); }
.ls-pagination { margin-top: var(--wp--preset--spacing--40); gap: .5rem; }
.ls-pagination a, .ls-pagination span {
	padding: .45rem .8rem;
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-sm);
	text-decoration: none !important;
	color: var(--wp--preset--color--muted);
}
.ls-pagination a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--foreground); }
.ls-pagination .current { color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--accent); }

/* ---------- RTL (Arabic) ----------
   Only the chrome mirrors. Fixed rails swap sides, dropdowns re-anchor, and
   the founder card's accent edge moves to the right. */
[dir="rtl"] .ls-social-rail { left: auto; right: 0; border-left: 1px solid var(--wp--preset--color--border); border-right: none; }
[dir="rtl"] .ls-rail-fixed { right: auto; left: clamp(.6rem, 2vw, 1.25rem); }
[dir="rtl"] .ls-lang-menu { right: auto; left: 0; }
[dir="rtl"] .ls-founder { border-left: 1px solid var(--wp--preset--color--border); border-right: 3px solid var(--wp--preset--color--accent-2); }
[dir="rtl"] .ls-breadcrumb, [dir="rtl"] .ls-founder-body { text-align: right; }

/* ═══════════ Mobile navigation: placement + prominence ═══════════ */
@media (max-width: 782px) {
	/* Push the toggle to the right-hand end of the header. The header is a
	   space-between row of brand / nav / tools, so without reordering the
	   hamburger sat in the middle of the bar. */
	.ls-site-header .wp-block-group > .ls-nav { order: 5; margin-inline-start: auto; }
	.ls-site-header .wp-block-group > .ls-header-tools { order: 4; }

	/* Give it a real, tappable presence instead of a bare glyph. */
	.wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		color: var(--wp--preset--color--foreground);
		border: 1px solid var(--wp--preset--color--border);
		background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
		clip-path: var(--ls-clip-sm);
	}
	.wp-block-navigation__responsive-container-open:hover,
	.wp-block-navigation__responsive-container-open:focus-visible {
		color: var(--wp--preset--color--accent);
		border-color: var(--wp--preset--color--accent);
	}
	.wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; }
}

/* The open overlay must cover the viewport. Restated here because the theme
   sets its own background/padding on .is-menu-open and core's positioning
   must survive that. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	width: 100%;
}
.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--border);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
	clip-path: var(--ls-clip-sm);
}
.wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }

/* ═══════════ Mobile nav overlay: alignment + nested submenu ═══════════
   Two inherited behaviours had to be undone inside the open overlay:

   1. The nav block is configured justifyContent:"right" for the desktop bar,
      which sets --navigation-layout-justification-setting to flex-end. In a
      full-screen column that pushed top-level items to the right edge while
      submenu items stayed left, giving the ragged two-axis look.

   2. The submenu container keeps its desktop dropdown skin (surface fill,
      1px border, drop shadow). Core makes it static and always-visible on
      mobile, so that skin rendered as a floating panel bolted onto the list.
      Here it becomes a plain indented list with a single rule down the side. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: start;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: start !important;
	justify-content: flex-start;
}

/* Submenu as a nested list, not a popover. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding-block: .15rem !important;
	padding-inline: 0 !important;
	margin-inline-start: .4rem;
	border-inline-start: 1px solid var(--wp--preset--color--border) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline-start: .9rem !important;
	font-size: .95rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--muted) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--foreground) !important;
}

/* Give the sheet room and keep the close button clear of the first item. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	gap: .1rem;
}

/* A parent nav item is display:flex in ROW direction, so its submenu <ul>
   laid out BESIDE the parent link rather than under it — which is why the
   nested list started 120px in from the left instead of a small indent.
   Stacking the item forces the submenu onto its own line. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WPFORMS — matched to the LeagueSpawn design system
   WPForms ships light-theme defaults (white fields, near-black labels, a
   #066aab button, 3px radii). On this dark palette the labels were
   effectively invisible and the button belonged to another site. These
   rules re-skin it with the same tokens every other control uses, so the
   form inherits future palette changes automatically.
   ═══════════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.ls-form-card {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: var(--ls-clip-md);
}
.ls-form-card .wpforms-container { margin: 0; }
.ls-form-card .wpforms-container .wpforms-form { margin: 0; }

/* Labels — same treatment as the tool's field labels */
.wpforms-container .wpforms-field-label {
	color: var(--wp--preset--color--muted) !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: .4rem;
}
.wpforms-container .wpforms-required-label { color: var(--wp--preset--color--accent) !important; }
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
	color: var(--wp--preset--color--muted) !important;
	font-size: .8rem !important;
}

/* Inputs */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	background: var(--wp--preset--color--surface-2) !important;
	color: var(--wp--preset--color--foreground) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 0 !important;
	clip-path: var(--ls-clip-sm);
	padding: .7rem .85rem !important;
	font-family: inherit !important;
	font-size: .95rem !important;
	box-shadow: none !important;
	transition: border-color .15s var(--ls-ease);
}
.wpforms-container textarea { min-height: 9rem !important; }
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: var(--wp--preset--color--muted); opacity: .75; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--wp--preset--color--accent) !important;
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	outline-offset: 1px;
}

/* Submit — identical language to the site's primary buttons */
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
	background: var(--wp--preset--color--accent-2) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-2) !important;
	border-radius: 0 !important;
	clip-path: var(--ls-clip-sm);
	padding: .85rem 1.75rem !important;
	font-family: inherit !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .07em;
	cursor: pointer;
	transition: box-shadow .2s var(--ls-ease), transform .12s var(--ls-ease);
}
.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover {
	background: var(--wp--preset--color--accent-2) !important;
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px var(--wp--preset--color--accent-2),
		0 0 14px color-mix(in srgb, var(--wp--preset--color--accent-2) 70%, transparent),
		0 0 38px color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.wpforms-container .wpforms-submit { transition: none; }
	.wpforms-container .wpforms-submit:hover { transform: none; }
}

/* Validation + confirmation */
.wpforms-container label.wpforms-error {
	color: var(--wp--preset--color--danger) !important;
	font-size: .8rem !important;
	margin-top: .35rem;
}
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
	border-color: var(--wp--preset--color--danger) !important;
}
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
	background: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--success) 55%, transparent) !important;
	color: var(--wp--preset--color--foreground) !important;
	clip-path: var(--ls-clip-sm);
}
.wpforms-confirmation-container-full p { color: inherit !important; }

/* Light mode: fields sit on white cards, so borders need more contrast. */
html[data-theme="light"] .wpforms-container input[type="text"],
html[data-theme="light"] .wpforms-container input[type="email"],
html[data-theme="light"] .wpforms-container input[type="url"],
html[data-theme="light"] .wpforms-container select,
html[data-theme="light"] .wpforms-container textarea {
	background: #ffffff !important;
	border-color: #cfd6e4 !important;
}

/* RTL: WPForms sets left-aligned text explicitly in places. */
[dir="rtl"] .wpforms-container .wpforms-field-label,
[dir="rtl"] .wpforms-container input,
[dir="rtl"] .wpforms-container textarea { text-align: right; }