/*
Theme Name: iSPACE
Theme URI: https://www.ispace.co.za
Author: iSPACE (PTY) LTD
Description: Futuristic space-themed block theme for iSPACE — High Speed Internet Access and Hosting since 1998.
Version: 2.11.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ispace
*/

/* ====================================================================
   Deep space canvas: animated starfield behind everything
   ==================================================================== */
body {
	position: relative;
}
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-repeat: repeat;
}
/* Small dense stars, slow drift */
body::before {
	background-image:
		radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.8), transparent 60%),
		radial-gradient(1px 1px at 110px 90px, rgba(255, 255, 255, 0.5), transparent 60%),
		radial-gradient(1px 1px at 180px 20px, rgba(180, 220, 255, 0.7), transparent 60%),
		radial-gradient(1px 1px at 60px 140px, rgba(255, 255, 255, 0.4), transparent 60%),
		radial-gradient(1px 1px at 210px 160px, rgba(190, 230, 255, 0.6), transparent 60%);
	background-size: 240px 190px;
	animation: ispace-stars-drift 180s linear infinite;
}
/* Bigger sparse stars, twinkle */
body::after {
	background-image:
		radial-gradient(1.5px 1.5px at 70px 50px, rgba(255, 255, 255, 0.9), transparent 60%),
		radial-gradient(2px 2px at 200px 130px, rgba(160, 210, 255, 0.8), transparent 60%),
		radial-gradient(1.5px 1.5px at 320px 40px, rgba(216, 180, 254, 0.7), transparent 60%),
		radial-gradient(2px 2px at 130px 220px, rgba(255, 255, 255, 0.7), transparent 60%);
	background-size: 380px 260px;
	animation: ispace-stars-drift 240s linear infinite reverse, ispace-twinkle 5s ease-in-out infinite;
}
@keyframes ispace-stars-drift {
	from { background-position: 0 0; }
	to   { background-position: 0 -1200px; }
}

/* Canvas warp starfield (JS-injected). When active, the CSS star layers
   above are hidden — they remain as the no-JS / reduced-motion fallback. */
#ispace-starfield {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
body.ispace-canvas-stars::before,
body.ispace-canvas-stars::after {
	display: none;
}
@keyframes ispace-twinkle {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* ---- Smooth cross-page transitions ---- */
@view-transition {
	navigation: auto;
}
::view-transition-old(root) {
	animation: ispace-vt-out 0.25s ease both;
}
::view-transition-new(root) {
	animation: ispace-vt-in 0.35s ease both;
}
@keyframes ispace-vt-out {
	to { opacity: 0; transform: scale(0.99); }
}
@keyframes ispace-vt-in {
	from { opacity: 0; transform: translateY(10px); }
}

/* ====================================================================
   Glass cards with neon edges + cursor glow
   ==================================================================== */
.ispace-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(16, 28, 56, 0.72) 0%, rgba(7, 13, 28, 0.88) 100%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(59, 157, 255, 0.18);
	border-radius: 18px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Neon hairline along card top */
.ispace-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), transparent);
	pointer-events: none;
}
/* Cursor-tracking glow (coords set by JS tilt) */
.ispace-card::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	background: radial-gradient(28rem circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(34, 211, 238, 0.14), transparent 45%);
	pointer-events: none;
}
.ispace-card:hover::after {
	opacity: 1;
}
.ispace-card:hover {
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 38px rgba(34, 211, 238, 0.16);
}
.ispace-card-featured {
	border: 1px solid rgba(59, 157, 255, 0.65);
	box-shadow: 0 4px 24px rgba(11, 114, 231, 0.35), inset 0 0 40px rgba(59, 157, 255, 0.06);
}
.ispace-card-featured:hover {
	box-shadow: 0 22px 48px rgba(11, 114, 231, 0.4), 0 0 0 1px rgba(59, 157, 255, 0.8), 0 0 44px rgba(168, 85, 247, 0.3);
}
/* Solid navy inner cards keep their tone but pick up glass borders */
.ispace-card.has-navy-background-color {
	background: linear-gradient(160deg, rgba(20, 34, 66, 0.9), rgba(10, 20, 40, 0.95));
}

/* Cards that link somewhere are fully clickable */
.ispace-card-link {
	cursor: pointer;
}

/* Links on bright gradient panels must stay white, not accent cyan */
.has-cta-gradient-background a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.has-cta-gradient-background a:hover {
	color: #04070f;
}

/* ---- Video embed + first-visit welcome modal ---- */
.ispace-video {
	aspect-ratio: 16 / 9;
	max-width: 760px;
	margin: 2rem auto;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(59, 157, 255, 0.3);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(34, 211, 238, 0.12);
}
.ispace-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ispace-intro-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(2, 4, 10, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: ispace-modal-in 0.35s ease both;
}
@keyframes ispace-modal-in {
	from { opacity: 0; }
}
.ispace-intro-box {
	width: min(760px, 100%);
	background: #0a1428;
	border: 1px solid rgba(59, 157, 255, 0.4);
	border-radius: 16px;
	padding: 1rem;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(34, 211, 238, 0.15);
}
.ispace-intro-box .ispace-video {
	margin: 0;
}
.ispace-intro-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}
.ispace-intro-head strong {
	font-family: Orbitron, 'Exo 2', sans-serif;
	letter-spacing: 0.05em;
	color: #fff;
}
.ispace-intro-close {
	background: none;
	border: 1px solid rgba(143, 163, 189, 0.4);
	border-radius: 999px;
	color: #e6edf7;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.ispace-intro-close:hover {
	border-color: #22d3ee;
	color: #22d3ee;
}

/* Terms line on product cards + tap-to-open ⓘ tooltip (no JS required) */
.ispace-terms {
	font-size: 0.8rem;
	color: #8fa3bd;
	text-align: center;
	margin-bottom: 1rem;
}
.ispace-tip {
	display: inline-block;
}
.ispace-tip summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	color: #22d3ee;
	user-select: none;
	padding: 0 0.15rem;
}
.ispace-tip summary::-webkit-details-marker {
	display: none;
}
.ispace-tip[open] summary {
	color: #a855f7;
}
.ispace-tip-text {
	display: block;
	margin-top: 0.5rem;
	padding: 0.75rem 0.9rem;
	background: rgba(8, 15, 32, 0.95);
	border: 1px solid rgba(59, 157, 255, 0.3);
	border-radius: 10px;
	text-align: left;
	font-size: 0.78rem;
	line-height: 1.55;
	color: #b9c9de;
	max-width: 100%;
}
/* Figures awaiting confirmed VAT-inclusive amounts from the client render as
   nothing until the amount is filled in (Amendment 20). */
.ispace-pending:empty {
	display: none;
}

/* ====================================================================
   Tagline: "The Network Experience" — visually secondary to the hero
   heading and to the footer wordmark. No text-transform: the tagline's
   capitalisation is fixed as written.
   ==================================================================== */
/* Time-of-day greeting above the hero chip — empty (and hidden) until the
   theme JS fills it from the visitor's clock */
.ispace-greeting {
	color: #8fa3bd;
	text-align: center;
	margin: 0 0 1.2rem;
}
.ispace-greeting:empty {
	display: none;
}
/* The greeting and the "Operating since 1998…" hero sub-line share one
   size — change it here and both follow. (!important outranks the core
   .has-large-font-size utility.) */
.ispace-greeting,
.ispace-hero p.has-large-font-size {
	font-size: 1.9rem !important;
}

/* Hero tagline in the same pill format as the "Since 1998 · …" chip.
   Its capitalisation stays exactly as written — no text-transform. */
.ispace-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0.4rem;
	line-height: 1;
	background: rgba(34, 211, 238, 0.12);
	color: #22d3ee;
	border: 1px solid rgba(34, 211, 238, 0.45);
	border-radius: 999px;
	padding: 0.5rem 1.1rem 0.42rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-family: Orbitron, 'Exo 2', sans-serif;
}
.ispace-footer-tagline {
	color: #8fa3bd;
	letter-spacing: 0.12em;
}

/* ====================================================================
   Accreditation strip: vendor programme names as text chips.
   The empty .ispace-accred-tier slot is reserved for tier/year data not
   yet supplied — it renders nothing until populated.
   ==================================================================== */
.ispace-accred {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}
.ispace-accred-item {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border: 1px solid rgba(59, 157, 255, 0.35);
	border-radius: 999px;
	background: rgba(8, 15, 32, 0.6);
	color: #b9c9de;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}
.ispace-accred-tier:empty {
	display: none;
}

/* ====================================================================
   Click-to-play video facade: no iframe/network request until activated.
   Styled surface only — poster image pending from client.
   ==================================================================== */
.ispace-video-facade {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	aspect-ratio: 16 / 9;
	margin-top: 1.5rem;
	border: 1px solid rgba(59, 157, 255, 0.3);
	border-radius: 12px;
	background:
		radial-gradient(600px 300px at 80% 0%, rgba(34, 211, 238, 0.12), transparent 60%),
		linear-gradient(135deg, #04070f 0%, #0a1a3d 60%, #1a0f38 100%);
	cursor: pointer;
}
.ispace-video-facade:hover,
.ispace-video-facade:focus-visible {
	border-color: #22d3ee;
}
.ispace-video-play {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	border: 2px solid #22d3ee;
	color: #22d3ee;
	font-size: 1.6rem;
	padding-left: 0.3rem;
}
.ispace-video-note {
	color: #8fa3bd;
	font-size: 0.78rem;
}

/* ====================================================================
   FAQ accordion: native details/summary, same no-JS mechanism as the
   product-card tooltips.
   ==================================================================== */
.ispace-faq {
	margin-bottom: 0.75rem;
	border: 1px solid rgba(59, 157, 255, 0.25);
	border-radius: 10px;
	background: rgba(8, 15, 32, 0.55);
}
.ispace-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 0.9rem 1.1rem;
	font-weight: 600;
	color: #e8eefb;
	user-select: none;
}
.ispace-faq summary::-webkit-details-marker {
	display: none;
}
.ispace-faq summary::before {
	content: "+";
	color: #22d3ee;
	margin-right: 0.6rem;
}
.ispace-faq[open] summary::before {
	content: "\2212";
	color: #a855f7;
}
.ispace-faq-a {
	padding: 0 1.1rem 1rem 2.3rem;
	color: #b9c9de;
	line-height: 1.6;
}
.ispace-faq-a:empty {
	display: none;
}

/* Credential cards: detail rows render only when data exists */
.ispace-cred-meta {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0;
	color: #8fa3bd;
	font-size: 0.85rem;
}
.ispace-cred-meta li {
	margin-bottom: 0.3rem;
}
.ispace-cred-meta li:empty {
	display: none;
}

/* Orbitron runs wide — keep card headings and prices inside the frame */
.ispace-card .wp-block-heading {
	overflow-wrap: anywhere;
}
.ispace-card h2.has-large-font-size,
.ispace-card h3.has-large-font-size {
	font-size: clamp(1rem, 1.15rem + 0.3vw, 1.25rem) !important;
	letter-spacing: 0.01em;
}
.ispace-card h3.has-x-large-font-size,
.ispace-card h4.has-x-large-font-size {
	font-size: clamp(1.25rem, 1.4rem + 0.8vw, 1.8rem) !important;
}
.ispace-card h3 sub,
.ispace-card h4 sub {
	font-size: 0.55em;
	font-family: 'Exo 2', sans-serif;
}

/* ====================================================================
   Hero + page banners: nebula, grid horizon, floating orbs
   ==================================================================== */
.ispace-hero,
.ispace-page-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.04) 0 1px, transparent 1px 80px),
		repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.03) 0 1px, transparent 1px 80px),
		radial-gradient(1000px 520px at 85% -10%, rgba(34, 211, 238, 0.2), transparent 60%),
		radial-gradient(900px 480px at 10% 115%, rgba(168, 85, 247, 0.28), transparent 62%),
		linear-gradient(135deg, #04070f 0%, #0a1a3d 55%, #1a0f38 100%);
}
.ispace-hero .ispace-hero-headline,
.ispace-page-banner h1 {
	text-shadow: 0 0 34px rgba(34, 211, 238, 0.45), 0 0 80px rgba(59, 157, 255, 0.25);
}
/* The visual headline (tagline text shown big). The semantic <h1> beneath
   it wears the .ispace-tagline pill — formats swapped, heading text kept
   for search engines. */
.ispace-hero-headline {
	font-family: Orbitron, 'Exo 2', sans-serif;
	font-weight: 700;
	line-height: 1.15;
	/* Equal breathing room to the chip above and the pill below */
	margin: 0 0 1.6rem;
}
.ispace-hero::before,
.ispace-page-banner::before {
	content: "";
	position: absolute;
	width: 42rem;
	height: 42rem;
	top: -18rem;
	right: -12rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.28) 0%, rgba(34, 211, 238, 0) 65%);
	filter: blur(12px);
	animation: ispace-float-a 11s ease-in-out infinite alternate;
	z-index: -1;
	pointer-events: none;
}
.ispace-hero::after,
.ispace-page-banner::after {
	content: "";
	position: absolute;
	width: 34rem;
	height: 34rem;
	bottom: -16rem;
	left: -10rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(168, 85, 247, 0) 65%);
	filter: blur(12px);
	animation: ispace-float-b 14s ease-in-out infinite alternate;
	z-index: -1;
	pointer-events: none;
}
@keyframes ispace-float-a {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-6rem, 4rem) scale(1.15); }
}
@keyframes ispace-float-b {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(5rem, -3rem) scale(1.1); }
}

/* Hero content entrance cascade */
.ispace-hero > * {
	animation: ispace-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ispace-hero > *:nth-child(1) { animation-delay: 0.05s; }
.ispace-hero > *:nth-child(2) { animation-delay: 0.15s; }
.ispace-hero > *:nth-child(3) { animation-delay: 0.28s; }
.ispace-hero > *:nth-child(4) { animation-delay: 0.4s; }
@keyframes ispace-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ispace-hero .ispace-chip {
	animation: ispace-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both, ispace-pulse 2.6s ease-in-out 1s infinite;
	margin-bottom: 1.6rem;
}
.ispace-hero h1 {
	margin-top: 0;
}
@keyframes ispace-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35); }
	50%      { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
}

/* ====================================================================
   Header: dark glass HUD
   ==================================================================== */
.ispace-header {
	border-bottom: 1px solid rgba(59, 157, 255, 0.18);
	background: rgba(4, 7, 15, 0.95);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* Glass blur on desktop only: backdrop-filter makes the header the
   containing block for fixed descendants, which traps the mobile
   menu overlay inside the header bar (notably on iOS). The overlay
   only exists below 600px, so the blur is safe above it. */
@media (min-width: 600px) {
	.ispace-header {
		background: rgba(4, 7, 15, 0.78);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}
.ispace-header.ispace-scrolled {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(34, 211, 238, 0.25);
	background: rgba(4, 7, 15, 0.92);
}
.ispace-header .wp-block-site-title a {
	text-decoration: none;
	background: linear-gradient(90deg, #3b9dff, #22d3ee);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* ====================================================================
   Navigation: 3D holographic dropdowns
   ==================================================================== */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container {
	/* Fade only: the panel sits at its final position in both states, so
	   opening never moves the frame. */
	transform: translateY(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0s linear 0.28s;
	background: rgba(8, 15, 32, 0.95) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(59, 157, 255, 0.3) !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 24px rgba(34, 211, 238, 0.12) !important;
	padding: 0.4rem !important;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:focus-within > .wp-block-navigation__submenu-container {
	transform: translateY(6px);
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
/* Invisible hover bridge covering the gap between the menu item and the
   dropped-down panel, so the submenu doesn't close while crossing it */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	top: -16px;
	height: 16px;
	background: transparent;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	color: #e6edf7 !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-radius: 8px;
	transition: background 0.15s ease;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: rgba(34, 211, 238, 0.1);
}

/* Top-level nav links: sliding gradient underline */
.ispace-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 4px;
}
.ispace-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, #3b9dff, #22d3ee, #a855f7);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}
.ispace-header .wp-block-navigation > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.ispace-header .wp-block-navigation > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ====================================================================
   Scroll-reveal
   ==================================================================== */
.ispace-reveal {
	opacity: 0;
	transform: translateY(28px) perspective(900px) rotateX(6deg);
	transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0ms;
	will-change: opacity, transform;
}
.ispace-reveal.ispace-in-view {
	opacity: 1;
	transform: translateY(0) perspective(900px) rotateX(0);
}

/* ====================================================================
   Buttons: neon glow + sheen sweep
   ==================================================================== */
.wp-block-button .wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: filter 0.15s ease, box-shadow 0.2s ease;
}
.wp-block-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	pointer-events: none;
}
.wp-block-button .wp-block-button__link:hover::before {
	left: 130%;
}
.wp-block-button .wp-block-button__link:hover {
	filter: brightness(1.12);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: linear-gradient(90deg, #0b72e7, #22a8ee);
	color: #04070f;
	box-shadow: 0 0 16px rgba(59, 157, 255, 0.35);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(11, 114, 231, 0.5), 0 0 22px rgba(34, 211, 238, 0.45);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(59, 157, 255, 0.6);
	color: #e6edf7;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #22d3ee;
	box-shadow: 0 0 18px rgba(34, 211, 238, 0.35), inset 0 0 14px rgba(34, 211, 238, 0.08);
}
/* Dark buttons placed on bright gradient panels */
.wp-block-button__link.has-navy-background-color {
	color: #ffffff !important;
	background: #0a1428 !important;
	box-shadow: 0 0 18px rgba(4, 7, 15, 0.5) !important;
}

/* ====================================================================
   Tables (dark HUD)
   ==================================================================== */
.ispace-table table {
	border-collapse: collapse;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #1b2b4a;
}
.ispace-table thead {
	background: #0a1428;
	color: #fff;
	border-bottom: none;
}
.ispace-table th,
.ispace-table td {
	padding: 0.85rem 1.1rem;
	border: 1px solid #1b2b4a;
}
.ispace-table tbody tr:nth-child(even) {
	background: rgba(59, 157, 255, 0.05);
}

/* ====================================================================
   Footer
   ==================================================================== */
.ispace-footer {
	border-top: 1px solid rgba(59, 157, 255, 0.2);
	background:
		radial-gradient(800px 300px at 50% 0%, rgba(59, 157, 255, 0.08), transparent 70%),
		#060b18 !important;
}
.ispace-footer a {
	color: #8fa3bd;
	text-decoration: none;
}
.ispace-footer a:hover {
	color: #22d3ee;
}
.ispace-footer li a {
	display: inline-block;
	transition: color 0.18s ease;
}
.ispace-footer .wp-block-social-links .wp-social-link {
	transition: filter 0.2s ease;
}
.ispace-footer .wp-block-social-links .wp-social-link:hover {
	filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.7));
}

/* ====================================================================
   Chips
   ==================================================================== */
.ispace-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	background: rgba(34, 211, 238, 0.12);
	color: #22d3ee;
	border: 1px solid rgba(34, 211, 238, 0.45);
	border-radius: 999px;
	padding: 0.5rem 1.1rem 0.42rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-family: Orbitron, 'Exo 2', sans-serif;
}
.ispace-chip-dark {
	background: rgba(168, 85, 247, 0.12);
	color: #c084fc;
	border-color: rgba(168, 85, 247, 0.45);
}
/* A chip marked centered is truly centered as a box, not just its text */
p.ispace-chip.has-text-align-center {
	display: flex;
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ====================================================================
   Hero decorations: orbit rings, satellites, comets, progress bar
   ==================================================================== */
.ispace-orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46rem;
	height: 46rem;
	margin: -23rem 0 0 -23rem;
	border: 1px dashed rgba(59, 157, 255, 0.18);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	animation: ispace-orbit-spin 60s linear infinite;
}
.ispace-orbit::before {
	content: "";
	position: absolute;
	inset: 5rem;
	border: 1px solid rgba(34, 211, 238, 0.12);
	border-radius: 50%;
}
.ispace-orbit-dot {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: #22d3ee;
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.9), 0 0 30px rgba(34, 211, 238, 0.5);
}
.ispace-orbit-dot-2 {
	top: auto;
	bottom: 4.6rem;
	left: 18%;
	width: 6px;
	height: 6px;
	background: #a855f7;
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.9), 0 0 24px rgba(168, 85, 247, 0.5);
}
@keyframes ispace-orbit-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.ispace-comet {
	position: absolute;
	width: 130px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(160, 220, 255, 0.5), transparent);
	transform: rotate(155deg);
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(180, 230, 255, 0.8));
	pointer-events: none;
	z-index: -1;
	animation: ispace-comet-streak 6s ease-in infinite;
}
@keyframes ispace-comet-streak {
	0%   { opacity: 0; transform: rotate(155deg) translateX(0); }
	4%   { opacity: 1; }
	16%  { opacity: 0; transform: rotate(155deg) translateX(340px); }
	100% { opacity: 0; transform: rotate(155deg) translateX(340px); }
}

.ispace-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 999;
	background: linear-gradient(90deg, #0b72e7, #22d3ee, #a855f7);
	box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* ---- Planet rising at the bottom of the hero ---- */
.ispace-planet {
	position: absolute;
	left: 50%;
	top: calc(100% - 5.5rem);
	width: 150%;
	max-width: 2400px;
	margin-left: -75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(120% 120% at 50% 0%, #10264e 0%, #081226 45%, #04070f 78%);
	box-shadow:
		0 -3px 18px rgba(150, 225, 255, 0.7),
		0 -14px 70px rgba(34, 211, 238, 0.4),
		0 -40px 140px rgba(59, 157, 255, 0.22),
		inset 0 30px 90px rgba(59, 157, 255, 0.25);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 900px) {
	.ispace-planet {
		width: 220%;
		margin-left: -110%;
	}
}

/* ---- Holographic glitch on the hero headline ---- */
.ispace-holo {
	animation:
		ispace-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both,
		ispace-glitch 7s steps(1, end) 2.5s infinite;
}
@keyframes ispace-glitch {
	0%, 100% {
		transform: none;
		text-shadow: 0 0 34px rgba(34, 211, 238, 0.45), 0 0 80px rgba(59, 157, 255, 0.25);
	}
	93% {
		transform: translateX(3px) skewX(-1.5deg);
		text-shadow: -4px 0 rgba(34, 211, 238, 0.85), 4px 0 rgba(168, 85, 247, 0.85), 0 0 34px rgba(34, 211, 238, 0.45);
	}
	94.5% {
		transform: translateX(-3px);
		text-shadow: 4px 0 rgba(34, 211, 238, 0.85), -4px 0 rgba(244, 114, 182, 0.85), 0 0 34px rgba(34, 211, 238, 0.45);
	}
	96% {
		transform: none;
		text-shadow: 0 0 34px rgba(34, 211, 238, 0.45), 0 0 80px rgba(59, 157, 255, 0.25);
	}
}

/* ---- Mouse parallax (uses the `translate` property so it composes
        with each layer's own transform animations) ---- */
.ispace-orbit,
.ispace-planet,
.ispace-hero > * {
	transition: translate 0.35s ease-out;
}
.ispace-orbit {
	translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 14px);
}
.ispace-planet {
	translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -6px);
}
.ispace-hero > * {
	translate: calc(var(--mx, 0) * -7px) calc(var(--my, 0) * -5px);
}

/* ---- Warp-speed jump: stars zoom past + flash, page falls away ---- */
body.ispace-warping::before,
body.ispace-warping::after {
	animation: ispace-warp-stars 0.4s ease-in forwards !important;
}
@keyframes ispace-warp-stars {
	to {
		transform: scale(3.2);
		filter: blur(2px);
		opacity: 0.25;
	}
}
body.ispace-warping .wp-site-blocks {
	animation: ispace-warp-page 0.4s ease-in forwards;
}
@keyframes ispace-warp-page {
	to {
		opacity: 0;
		transform: scale(0.97);
		filter: blur(3px);
	}
}
body.ispace-warping .ispace-progress {
	opacity: 0;
}

/* ====================================================================
   Mobile / portrait refinements (desktop untouched at 782px+)
   ==================================================================== */
@media (max-width: 781px) {
	/* Columns always stack, with breathing room — explicit override in
	   case any layout rule keeps them side by side on small screens */
	.wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: 1.5rem;
	}
	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
		min-width: 0;
	}

	/* Homepage stats: 2 x 2 grid instead of a tall stack */
	.ispace-stats {
		row-gap: 1.25rem;
	}
	.ispace-stats > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
	}

	/* Footer: brand block full width on top, link columns two-up */
	.ispace-footer .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 1.5rem) !important;
	}
	.ispace-footer .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	/* Tighter vertical rhythm (desktop paddings are inline styles) */
	.ispace-hero {
		padding-bottom: 4.5rem !important;
	}
	.ispace-page-banner {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
	.wp-block-group[style*="padding-top:5rem"] {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	.wp-block-group[style*="padding-top:4.5rem"] {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Header: smaller pills so logo + hamburger breathe */
	.ispace-header .wp-block-button__link {
		padding: 0.45rem 0.9rem;
		font-size: 0.78rem;
	}

	/* Footer bottom row: centered instead of ragged two-sided */
	.ispace-footer .wp-block-group[style*="margin-top:1.5rem"] {
		justify-content: center;
		text-align: center;
	}

	/* Cards: slightly tighter side padding on narrow screens */
	.ispace-card {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
}

/* ====================================================================
   Tablet / iPad (782–1149px). Core columns stop stacking at 782px
   (flex-wrap: nowrap !important), so the five footer columns — brand
   pinned at 34% — crush the four link lists into letter-wide slivers
   on iPad portrait (810px) and landscape (1024px). Wrap them instead:
   brand block full width on top, link columns two-up, matching the
   phone layout's shape.
   ==================================================================== */
@media (min-width: 782px) and (max-width: 1149px) {
	.ispace-footer .wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: 2rem;
	}
	.ispace-footer .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 1.5rem) !important;
		flex-grow: 0;
		min-width: 0;
	}
	.ispace-footer .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}
}

/* ====================================================================
   Reduced motion: switch everything off
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.ispace-hero::before,
	.ispace-hero::after,
	.ispace-page-banner::before,
	.ispace-page-banner::after,
	.ispace-hero > *,
	.ispace-hero .ispace-chip {
		animation: none !important;
	}
	.ispace-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ispace-card,
	.ispace-tilt,
	.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container,
	.wp-block-button .wp-block-button__link::before,
	.ispace-footer li a {
		transition: none !important;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
	.ispace-holo,
	body.ispace-warping::before,
	body.ispace-warping::after,
	body.ispace-warping .wp-site-blocks {
		animation: none !important;
	}
	.ispace-orbit,
	.ispace-planet,
	.ispace-hero > * {
		transition: none;
		translate: none;
	}
}