/* ============================================================================
   NEXUS — site-wide design layer for vrschool.online
   Twenty Twenty-Five child theme (vrschool-deepspace)

   Pairs with theme.json (palette + typography tokens). This file styles the
   things tokens can't: forms, tables, focus, motion, plugin output, and the
   signature "glass" surface treatment. WCAG 2.2 AA is baked in:
     - all text colors verified >= 4.5:1 on the #020617 base
     - visible :focus-visible indicators (never removed)
     - prefers-reduced-motion honored
     - readable minimum text sizes (no 9-10px body copy)
   ========================================================================== */

:root {
	--vr-base:        var(--wp--preset--color--base,        #020617);
	--vr-contrast:    var(--wp--preset--color--contrast,    #F8FAFC);
	--vr-cyan:        var(--wp--preset--color--accent-1,    #00F2FF);
	--vr-purple:      var(--wp--preset--color--accent-2,    #7000FF);
	--vr-emerald:     var(--wp--preset--color--accent-3,    #34D399);
	--vr-muted:       var(--wp--preset--color--accent-4,    #94A3B8);
	--vr-body:        #CBD5E1;
	--vr-surface:     var(--wp--preset--color--accent-5,    #0F172A);
	--vr-surface-2:   var(--wp--preset--color--accent-6,    #1E293B);

	--vr-card-bg:     rgba(15, 23, 42, 0.80);
	--vr-border:      rgba(0, 242, 255, 0.12);
	--vr-border-mid:  rgba(0, 242, 255, 0.25);
	--vr-glow:        0 0 30px rgba(0, 242, 255, 0.15);
	--vr-focus:       var(--vr-cyan);
}

/* ── Base canvas ─────────────────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
	background-color: var(--vr-base);
}
body {
	background-color: var(--vr-base);
	color: var(--vr-contrast);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: var(--vr-cyan); color: var(--vr-base); }

/* Custom scrollbar (progressive enhancement) */
* { scrollbar-color: var(--vr-cyan) var(--vr-surface); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--vr-surface); }
::-webkit-scrollbar-thumb { background: var(--vr-border-mid); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--vr-cyan); }

/* ── Links: keep affordance (underline in content) + restore focus ────────── */
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link)),
.wp-block-post-content a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration: underline;
	text-decoration-color: rgba(0, 242, 255, 0.5);
	text-underline-offset: 0.18em;
}
.entry-content a:hover,
.wp-block-post-content a:hover { text-decoration-color: var(--vr-cyan); }

/* ── Focus visibility (WCAG 2.4.7 / 2.4.11) — applied globally, never removed ─ */
:where(a, button, input, select, textarea, summary, [tabindex], .wp-block-button__link):focus-visible {
	outline: 2px solid var(--vr-focus) !important;
	outline-offset: 2px !important;
	border-radius: 3px;
}
/* Belt-and-suspenders: undo any third-party `outline:none` that lacks a replacement */
summary:focus-visible { outline: 2px solid var(--vr-focus) !important; outline-offset: 2px; }

/* ── Skip link (WCAG 2.4.1) — block themes inject the anchor; we style it ──── */
.skip-link.screen-reader-text {
	background: var(--vr-cyan);
	color: var(--vr-base);
	font-family: var(--wp--preset--font-family--orbitron, sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.85rem 1.25rem;
	z-index: 100000;
}
.skip-link.screen-reader-text:focus { outline: 3px solid var(--vr-contrast); outline-offset: 2px; }

/* ── Glass surface treatment — block style "Nexus Glass" (group/column) ───── */
.is-style-nexus-glass {
	background: var(--vr-card-bg) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--vr-border);
	border-radius: 1rem;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.4s ease, box-shadow 0.4s ease;
}
.is-style-nexus-glass:hover {
	border-color: var(--vr-cyan);
	transform: translateY(-6px);
	box-shadow: var(--vr-glow);
}

/* ── Forms & inputs — must stay legible on dark (login / PMPro / LearnPress) ─ */
input:where([type="text"], [type="email"], [type="password"], [type="search"],
			[type="url"], [type="tel"], [type="number"], [type="date"], [type="datetime-local"]),
textarea,
select,
.wp-block-search__input,
.pmpro_form input, .pmpro_form select, .pmpro_form textarea,
#loginform input[type="text"], #loginform input[type="password"],
.learn-press-form input, .lp-form input {
	background-color: var(--vr-surface) !important;
	color: var(--vr-contrast) !important;
	border: 1px solid var(--vr-border-mid) !important;
	border-radius: 6px !important;
	padding: 0.7rem 0.9rem !important;
	font-size: 1.0625rem !important; /* >= 16px: avoids iOS zoom + stays readable */
}
input::placeholder, textarea::placeholder { color: var(--vr-muted) !important; opacity: 1; }
input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--vr-cyan) !important;
	outline-offset: 1px !important;
	border-color: var(--vr-cyan) !important;
}
label, legend { color: var(--vr-contrast); }
.description, .pmpro_asterisk, small, .wp-block-post-date, figcaption, .wp-element-caption {
	color: var(--vr-muted);
}

/* Generic + plugin buttons inherit the cyan action treatment */
button:not(.is-style-outline),
input[type="submit"], input[type="button"],
.wp-block-button__link, .wp-element-button,
.pmpro_btn, .lp-button, .learn-press-button,
.button, .wp-block-search__button {
	background-color: var(--vr-cyan);
	color: var(--vr-base);
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--orbitron, sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
button:not(.is-style-outline):hover,
input[type="submit"]:hover, input[type="button"]:hover,
.wp-block-button__link:hover, .wp-element-button:hover,
.pmpro_btn:hover, .lp-button:hover, .button:hover {
	background-color: var(--vr-contrast);
	color: var(--vr-base);
}

/* ── Tables — readable dark zebra ─────────────────────────────────────────── */
table, .wp-block-table table {
	border-collapse: collapse;
	color: var(--vr-contrast);
}
th, td, .wp-block-table th, .wp-block-table td {
	border: 1px solid var(--vr-border-mid);
	padding: 0.75rem 1rem;
}
thead th { background: var(--vr-surface-2); color: var(--vr-cyan); }
tbody tr:nth-child(odd) td { background: rgba(15, 23, 42, 0.55); }

/* ── Quotes / pullquotes / code ───────────────────────────────────────────── */
blockquote, .wp-block-quote {
	border-left: 4px solid var(--vr-cyan);
	padding-left: 1.25rem;
	color: var(--vr-contrast);
}
blockquote cite, .wp-block-quote cite { color: var(--vr-muted); font-style: normal; }
code, kbd, pre, .wp-block-code {
	background: var(--vr-surface);
	color: var(--vr-contrast);
	border-radius: 6px;
}
:not(pre) > code { padding: 0.12em 0.4em; border: 1px solid var(--vr-border); }

/* ── details / accordion (used by the home page + content) ────────────────── */
details > summary {
	cursor: pointer;
	list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { color: var(--vr-cyan); }

/* ── Decorative helpers (opt-in classes; safe to reuse in HTML blocks) ─────── */
.vr-scanline {
	position: absolute;
	left: 0; width: 100%; height: 100px;
	pointer-events: none; opacity: 0.1; z-index: 10;
	background: linear-gradient(0deg,
		rgba(0,242,255,0) 0%, rgba(0,242,255,0.05) 50%, rgba(0,242,255,0) 100%);
	animation: vr-scanline 8s linear infinite;
}
@keyframes vr-scanline { 0% { top: 0; } 100% { top: 100%; } }

.vr-badge-pulse { animation: vr-pulse 2s infinite; }
@keyframes vr-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0,242,255,0.4); }
	70%  { box-shadow: 0 0 0 15px rgba(0,242,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(0,242,255,0); }
}

.vr-text-glow { text-shadow: 0 0 18px rgba(0, 242, 255, 0.45); }

/* ── Site logo (branded wordmark in the header) ───────────────────────────── */
.vr-logo {
	display: inline-block;
	font-family: var(--wp--preset--font-family--orbitron, "Orbitron", sans-serif);
	font-weight: 900;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #ffffff !important;
	text-decoration: none !important;
	line-height: 1;
}
.vr-logo:hover,
.vr-logo:focus { color: #ffffff !important; }
.vr-logo .vr-logo-accent { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Primary navigation (Nexus header menu) ───────────────────────────────── */
.wp-block-navigation { font-family: var(--wp--preset--font-family--orbitron, sans-serif); }
.wp-block-navigation .wp-block-navigation-item > a:not(.wp-element-button) {
	color: var(--vr-body) !important;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item > a:hover,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a:not(.wp-element-button) {
	color: var(--vr-cyan) !important;
}
/* "Enter The Nexus" CTA pill (li + extra class to outrank the nav-link color rule) */
.wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a,
.wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a:not(.wp-element-button) {
	background-color: var(--vr-cyan) !important;
	color: var(--vr-base) !important;
	padding: 0.55rem 1.25rem !important;
	border-radius: 4px;
	box-shadow: 0 0 18px rgba(0, 242, 255, 0.30);
}
.wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a:hover {
	background-color: var(--vr-contrast) !important;
	color: var(--vr-base) !important;
}
/* "Log In" ghost pill — sits next to the filled Join CTA for logged-out visitors */
.wp-block-navigation li.wp-block-navigation-item.vr-nav-login > a,
.wp-block-navigation li.wp-block-navigation-item.vr-nav-login > a:not(.wp-element-button) {
	border: 1px solid rgba(248,250,252,0.22) !important;
	background: transparent !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	padding: 0.5rem 1rem !important;
	border-radius: 4px;
	transition: border-color 0.2s, color 0.2s;
}
.wp-block-navigation li.wp-block-navigation-item.vr-nav-login > a:hover {
	border-color: rgba(0,242,255,0.55) !important;
	color: var(--vr-cyan, #00F2FF) !important;
}

/* ── Admin-bar offset for any sticky element (logged-in editors) ──────────── */
.admin-bar .vr-sticky-nav,
.admin-bar .is-position-sticky { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .vr-sticky-nav,
	.admin-bar .is-position-sticky { top: 46px; }
}

/* ── Outline button variant (theme.json fills all buttons; restore outline) ─ */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	color: var(--vr-cyan) !important;
	border: 2px solid var(--vr-cyan) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--vr-cyan) !important;
	color: var(--vr-base) !important;
}

/* ── Plugin & core surfaces that hardcode a light background ───────────────── */
/* Nav dropdown / mobile menu containers default to #fff — flip to dark so the
   light menu links stay visible. */
.wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	background-color: var(--vr-surface) !important;
	border: 1px solid var(--vr-border) !important;
}
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--vr-base) !important; }

/* Paid Memberships Pro — its frontend cards/tables ship a white surface that
   makes our light text and cyan headers invisible. Re-skin to the dark system. */
.pmpro_card,
.pmpro_section,
.pmpro_section_content {
	background-color: var(--vr-surface) !important;
	color: var(--vr-contrast) !important;
	border: 1px solid var(--vr-border) !important;
	border-radius: 1rem;
}
/* The inner levels table ships its own white surface — make it transparent so
   the dark card shows through (otherwise cyan/price text lands on white). */
.pmpro_table,
.pmpro_levels_table,
.pmpro_table thead, .pmpro_table tbody, .pmpro_table tr,
.pmpro_table th, .pmpro_table td,
.pmpro_levels_table th, .pmpro_levels_table td {
	background-color: transparent !important;
}
.pmpro_card_title,
.pmpro_card_content,
.pmpro_card p,
.pmpro_table td,
.pmpro_levels_table td { color: var(--vr-contrast) !important; }
.pmpro_table th,
.pmpro_levels_table th { color: var(--vr-cyan) !important; border-bottom: 1px solid var(--vr-border-mid) !important; }
/* Level-name links go cyan on the dark card — but NOT the action buttons,
   which are also <a> inside the table (cyan text on cyan = invisible). */
.pmpro_level-name,
.pmpro_table a:not(.pmpro_btn):not([class*="pmpro_btn"]),
.pmpro_levels_table a:not(.pmpro_btn):not([class*="pmpro_btn"]) { color: var(--vr-cyan) !important; }
.pmpro_level-price { color: var(--vr-emerald) !important; }
.pmpro_btn,
a.pmpro_btn,
.pmpro_btn-select,
a.pmpro_btn-select,
.pmpro_btn-submit,
a.pmpro_btn-submit,
#pmpro_btn-submit,
input.pmpro_btn,
input[type="submit"].pmpro_btn,
.pmpro_checkout input[type="submit"],
.pmpro_form input[type="submit"] {
	background-color: var(--vr-cyan) !important;
	color: var(--vr-base) !important;
	border: 1px solid transparent !important;
}
.pmpro_btn:hover,
.pmpro_btn-select:hover { background-color: var(--vr-contrast) !important; color: var(--vr-base) !important; }

/* ── Reduced motion (WCAG 2.2.2 / 2.3.3) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.vr-scanline, .vr-badge-pulse { animation: none !important; }
}

/* ── Forced-colors / high-contrast mode: keep focus + borders visible ─────── */
@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary):focus-visible {
		outline: 2px solid CanvasText !important;
	}
	.is-style-nexus-glass { border-color: CanvasText; }
}

/* ── Courses archive: equal-height cards across a multi-column row ──────────
   LearnPress lays courses out in a CSS grid, so each <li> grid cell already
   stretches to the tallest card in its row. But the inner wrapper chain
   (.wp-block-learnpress-course-item-template → the bordered .wp-block-group)
   stays auto-height, so the VISIBLE card boxes look uneven. Make that chain a
   full-height flex column so every card fills its cell — cards sitting side by
   side in a row therefore share the same height. (On a single-column / mobile
   layout each card is its own row and keeps its natural height — no padding.) */
ul.learn-press-courses[data-layout="grid"],
ul.wp-block-learn-press-courses[data-layout="grid"] {
	align-items: stretch;
}
ul.learn-press-courses[data-layout="grid"] > li.course,
ul.wp-block-learn-press-courses[data-layout="grid"] > li.course {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}
ul.learn-press-courses[data-layout="grid"] > li.course > .wp-block-learnpress-course-item-template,
ul.wp-block-learn-press-courses[data-layout="grid"] > li.course > .wp-block-learnpress-course-item-template {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
}
ul.learn-press-courses[data-layout="grid"] > li.course .wp-block-learnpress-course-item-template > .wp-block-group,
ul.wp-block-learn-press-courses[data-layout="grid"] > li.course .wp-block-learnpress-course-item-template > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}

/* Pin the "Enroll Now" pill to the bottom of every card, so all pills line up
   at the same height regardless of how much title / meta sits above them.
   The card's content wrapper (the inner group below the thumbnail) becomes a
   full-height flex column; its last child — the price + Enroll-Now group — is
   pushed to the bottom with an auto top margin. */
ul.learn-press-courses[data-layout="grid"] > li.course .wp-block-learnpress-course-item-template > .wp-block-group > .wp-block-group,
ul.wp-block-learn-press-courses[data-layout="grid"] > li.course .wp-block-learnpress-course-item-template > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
ul.learn-press-courses[data-layout="grid"] > li.course .wp-block-learnpress-course-item-template > .wp-block-group > .wp-block-group > .wp-block-group:last-child,
ul.wp-block-learn-press-courses[data-layout="grid"] > li.course .wp-block-learnpress-course-item-template > .wp-block-group > .wp-block-group > .wp-block-group:last-child {
	margin-top: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 1 — SMLF REGISTRATION FORM  (UX overhaul 2026-06-14)
   ────────────────────────────────────────────────────────────────────────
   The /register/ page renders the SMLF plugin form. Live DOM:
     .smlf-register-wrap
       .smlf-field                      → label[for] (+ span.smlf-required) + input
       .smlf-field.smlf-field--password → label + .smlf-password-wrap(input + span.smlf-eye-icon) + span.smlf-field-hint
       .smlf-field.smlf-field--submit   → button
       p.smlf-login-prompt
   Inputs + buttons inherit the global form/button treatment above; here we
   add the deep-space card frame, spacing, the password eye, and messaging.
   ════════════════════════════════════════════════════════════════════════ */
.smlf-register-wrap {
	max-width: 460px;
	margin: 2.5rem auto;
	padding: 2.25rem 2rem 2rem;
	background: var(--vr-card-bg, rgba(15,23,42,0.80));
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25));
	border-radius: 18px;
	box-shadow: var(--vr-glow, 0 0 30px rgba(0,242,255,0.15)), 0 12px 40px rgba(0,0,0,0.5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.smlf-register-wrap .smlf-field { margin-bottom: 1.15rem; }
.smlf-register-wrap label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vr-body, #CBD5E1);
}
.smlf-register-wrap .smlf-required { color: var(--vr-cyan, #00F2FF); margin-left: 0.15rem; }
.smlf-register-wrap input { width: 100%; box-sizing: border-box; }

/* Password field — position the eye toggle inside the input */
.smlf-register-wrap .smlf-password-wrap { position: relative; }
.smlf-register-wrap .smlf-password-wrap input { padding-right: 2.75rem !important; }
.smlf-register-wrap .smlf-eye-icon {
	position: absolute;
	top: 50%;
	right: 0.85rem;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--vr-muted, #94A3B8);
	line-height: 0;
	transition: color 0.18s ease;
}
.smlf-register-wrap .smlf-eye-icon:hover { color: var(--vr-cyan, #00F2FF); }
.smlf-register-wrap .smlf-field-hint {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: var(--vr-muted, #94A3B8);
}

/* Submit — full-width primary action */
.smlf-register-wrap .smlf-field--submit { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.smlf-register-wrap .smlf-field--submit button,
.smlf-register-wrap button[type="submit"] {
	width: 100%;
	padding: 0.85rem 1.5rem !important;
	font-size: 0.95rem;
	border-radius: 8px !important;
}

/* Footer prompt ("Already have an account? Log in") */
.smlf-register-wrap .smlf-login-prompt {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--vr-muted, #94A3B8);
}
.smlf-register-wrap .smlf-login-prompt a { color: var(--vr-cyan, #00F2FF); font-weight: 700; }

/* Inline validation / status messages */
.smlf-register-wrap .smlf-message,
.smlf-register-wrap .smlf-error,
.smlf-register-wrap .smlf-success,
.smlf-notice {
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}
.smlf-register-wrap .smlf-error,   .smlf-notice.smlf-error   { background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.35); color: #FECACA; }
.smlf-register-wrap .smlf-success, .smlf-notice.smlf-success { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.35); color: #A7F3D0; }

/* ════════════════════════════════════════════════════════════════════════
   /login/ PAGE  — the themed login slug (PMPro [pmpro_login] form)
   ────────────────────────────────────────────────────────────────────────
   body.pmpro-login. The form sits in .pmpro_card.pmpro_login_wrap (already
   dark via the PMPro card rules); here we centre + size it like the register
   card so login and register feel like one system. Inputs/button inherit the
   global form treatment above.
   ════════════════════════════════════════════════════════════════════════ */
body.pmpro-login .pmpro_login_wrap,
body.pmpro-login #pmpro_login_wrap {
	max-width: 460px;
	margin: 2rem auto;
	box-shadow: var(--vr-glow, 0 0 30px rgba(0,242,255,0.15)), 0 12px 40px rgba(0,0,0,0.5);
}
body.pmpro-login .pmpro_login_wrap #loginform { border: 0; background: transparent; box-shadow: none; }
body.pmpro-login .wp-block-post-title {
	text-align: center;
	font-family: var(--wp--preset--font-family--orbitron, "Orbitron", sans-serif);
	color: var(--vr-contrast, #F8FAFC);
	margin-bottom: 1.25rem;
}
body.pmpro-login #loginform label { color: var(--vr-body, #CBD5E1); font-weight: 700; }
body.pmpro-login #wp-submit,
body.pmpro-login .pmpro_login_wrap input[type="submit"] { width: 100%; margin-top: 0.5rem; }
body.pmpro-login .pmpro_actions_nav { text-align: center; margin-top: 1rem; font-size: 0.9rem; }
body.pmpro-login .pmpro_actions_nav a { color: var(--vr-cyan, #00F2FF); }
.vr-login-register-prompt {
	max-width: 460px;
	margin: 1rem auto 0;
	text-align: center;
	font-size: 0.95rem;
	color: var(--vr-muted, #94A3B8);
}
.vr-login-register-prompt a { color: var(--vr-cyan, #00F2FF); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   PER-SITE OVERRIDES  (multisite — all 13 blogs share this theme + CSS)
   ────────────────────────────────────────────────────────────────────────
   Everything above is the GLOBAL DEFAULT (the vrschool deep-space identity).
   functions.php (vrschool_site_body_classes) adds `vrsite-{blog_id}` and
   `vrsite-{host}` to <body> on every front-end + login page, so a single site
   diverges by overriding tokens here — no rule duplication. Retint a site by
   redefining its accent tokens; the whole cascade follows automatically.

   Template (copy per site that needs to diverge):
     body.vrsite-13,                     (* helpingpeople-academy — United Way *)
     body.vrsite-13.login {
         --vr-cyan:    #005191;
         --vr-emerald: #FFC20E;
         --vr-surface: #10243B;
     }
   Blog map: 1 sejalsolutions · 2 film-academy · 3 frameworkconsulting ·
   4 gbclearn · 5 lonestaracademy · 6 vrschool.online · 7 adrenaline-education ·
   8 connectstl · 9 techstl · 10 mygritacademy · 11 gsacte ·
   13 helpingpeople-academy · 14 cedge-learn
   ════════════════════════════════════════════════════════════════════════ */

/* vrsite-6 — vrschool.online */

/* Log Out nav button: .vr-nav-cta sets color:var(--vr-base) which can resolve to
   TT5's white, leaving white text on the cyan pill. The chained double-class selector
   (.vr-nav-cta.vr-nav-logout) has higher specificity (0,5,2) than the CTA rule (0,4,2)
   so it always wins regardless of source order. */
.wp-block-navigation li.wp-block-navigation-item.vr-nav-cta.vr-nav-logout > a,
.wp-block-navigation li.wp-block-navigation-item.vr-nav-cta.vr-nav-logout > a:not(.wp-element-button) {
	color: #020617 !important;
}

/* Cloudflare Turnstile: keep the widget inside narrow form cards (no h-overflow). */
.sls-turnstile-wrap{max-width:100%;overflow:hidden;box-sizing:border-box;}
.sls-turnstile-wrap .cf-turnstile,
.sls-turnstile-wrap .cf-turnstile iframe{width:100%!important;max-width:100%!important;}

/* gbclearn sticky header (blog 4) — stay pinned + clear the WP admin bar (2026-06-16) */
body.vrsite-4 .wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base, #020617);
}
body.vrsite-4.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
	body.vrsite-4.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* gbclearn logo match (blog 4) — same Inter font + white/gold as the home-page wordmark (2026-06-16) */
body.vrsite-4 .vr-logo {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 900 !important;
	font-size: 1.35rem !important;
	letter-spacing: 0.04em !important;
	color: #ffffff !important;
}
body.vrsite-4 .vr-logo .vr-logo-accent { color: #f4b400 !important; }