/* ============================================================================
   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;
}

/* ── 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;
}