/*
Theme Name: Quantum Youth Network
Theme URI: https://quantumyouthnetwork.org
Author: Quantum Youth Network
Author URI: https://quantumyouthnetwork.org
Description: A fully editable WordPress block (Full Site Editing) theme for the Quantum Youth Network — a free, student-led community for discovering quantum science. Built entirely on core Gutenberg blocks and compatible with Spectra. Every page, section, card, color, button and image is editable in the visual block editor. Ships with 12 ready-made pages, a deep-space quantum palette, and the QYN "qubit" identity.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quantum-youth-network
Tags: full-site-editing, block-patterns, block-styles, education, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, wide-blocks, accessibility-ready
*/

/* ============================================================
   Supplemental styles only.
   All page CONTENT lives in editable blocks / patterns.
   This file adds motion, hover states and small flourishes
   that the block editor cannot express on its own.
   ============================================================ */

:root {
	--qyn-line: rgba(255, 255, 255, 0.10);
	--qyn-ease: cubic-bezier(.2, .8, .2, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Ambient deep-space glow behind everything */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(52vw 52vw at -8% -6%, rgba(13, 58, 82, 0.55), transparent 62%),
		radial-gradient(46vw 46vw at 108% 30%, rgba(58, 21, 48, 0.5), transparent 62%),
		radial-gradient(44vw 44vw at 30% 108%, rgba(26, 22, 71, 0.5), transparent 62%);
}
.wp-site-blocks { position: relative; z-index: 1; }

/* Links: animated underline for in-content links only */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):where(:hover, :focus) {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Buttons — lift + shadow on hover */
.wp-element-button,
.wp-block-button__link {
	transition: transform .25s var(--qyn-ease), box-shadow .25s var(--qyn-ease), background-color .25s var(--qyn-ease);
	will-change: transform;
}
.wp-block-button__link:where(:hover, :focus) {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -12px rgba(53, 243, 223, 0.6);
}
.wp-block-button.is-style-outline .wp-block-button__link:where(:hover, :focus) {
	box-shadow: 0 14px 34px -12px rgba(255, 125, 92, 0.55);
}

/* ---- Block style: "Card" (group) ---- */
.wp-block-group.is-style-qyn-card {
	border: 1px solid var(--qyn-line);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
	transition: transform .3s var(--qyn-ease), border-color .3s var(--qyn-ease), background .3s var(--qyn-ease);
	height: 100%;
}
.wp-block-group.is-style-qyn-card:where(:hover, :focus-within) {
	transform: translateY(-4px);
	border-color: rgba(53, 243, 223, 0.4);
	background: linear-gradient(180deg, rgba(53, 243, 223, 0.06), rgba(255, 255, 255, 0.01));
}

/* ---- Block style: "Glass panel" (group) ---- */
.wp-block-group.is-style-qyn-glass {
	border: 1px solid var(--qyn-line);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(6px);
}

/* ---- Block style: "Hairline" (group / column) — quiet outlined box ---- */
.wp-block-group.is-style-qyn-outline {
	border: 1px solid var(--qyn-line);
	border-radius: 16px;
}

/* ---- Block style: "Eyebrow" (paragraph) ---- */
.is-style-qyn-eyebrow {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.86rem !important;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan) !important;
	margin-bottom: 0.55rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}
/* little leading tick on eyebrows for a more intentional look */
.is-style-qyn-eyebrow::before {
	content: "";
	width: 1.8em;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--cyan), transparent);
	flex: none;
}
.has-text-align-center.is-style-qyn-eyebrow { justify-content: center; }
.has-text-align-center.is-style-qyn-eyebrow::after {
	content: "";
	width: 1.8em; height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--cyan));
	flex: none;
}

/* ---- Block style: "Pill / tag" (paragraph) ---- */
.is-style-qyn-pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
	border: 1px solid var(--qyn-line);
	border-radius: 100px;
	padding: 6px 14px !important;
}

/* ---- Block style: "Gradient text" (heading) ---- */
.is-style-qyn-gradient-text {
	background: linear-gradient(100deg, #35f3df, #ff7d5c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Inline gradient word inside a heading/paragraph */
.qyn-grad {
	background: linear-gradient(100deg, #35f3df, #ff7d5c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Rounded icon chip used at the top of cards (an SVG icon in a tinted tile) */
.qyn-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	font-size: 1.15rem;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--mono);
	line-height: 1;
	background: rgba(53, 243, 223, 0.14);
	color: var(--wp--preset--color--cyan);
}
.qyn-chip .qyn-ico,
.qyn-chip svg { width: 25px; height: 25px; display: block; }

/* Mono step/number marker */
.qyn-num {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--cyan);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

/* Tighten card headings a touch */
.wp-block-group.is-style-qyn-card :where(h3, h4),
.wp-block-column.is-style-qyn-card :where(h3, h4) { margin-top: 0.4rem; }

/* ---- Header / navigation ---- */
.wp-block-template-part.site-header,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(14px);
	background: rgba(5, 6, 15, 0.72);
	border-bottom: 1px solid var(--qyn-line);
}
/* Animated nav items: color shift + lift + growing gradient underline */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--muted);
	transition: color .22s var(--qyn-ease), transform .22s var(--qyn-ease);
	padding-bottom: 2px;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -2px;
	height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--cyan), var(--wp--preset--color--coral));
	transition: right .28s var(--qyn-ease);
}
.wp-block-navigation .wp-block-navigation-item__content:where(:hover, :focus) {
	color: var(--wp--preset--color--contrast);
	transform: translateY(-1px);
}
.wp-block-navigation .wp-block-navigation-item__content:where(:hover, :focus)::after { right: 0; }
.wp-block-navigation .wp-block-navigation-item:active .wp-block-navigation-item__content { transform: translateY(0) scale(.97); }
/* Current page: solid cyan with a persistent underline */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"].wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--cyan);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation [aria-current="page"].wp-block-navigation-item__content::after { right: 0; }
/* Header CTA button in the nav lifts on hover */
.site-header .wp-block-button__link { transition: transform .22s var(--qyn-ease), box-shadow .22s var(--qyn-ease); }
.site-header .wp-block-button__link:where(:hover, :focus) { transform: translateY(-2px); }

.custom-logo {
	border-radius: 11px;
	display: block;
	transition: transform .3s var(--qyn-ease), filter .3s var(--qyn-ease);
}
.site-header .wp-block-site-logo a:hover .custom-logo {
	transform: scale(1.06) rotate(-3deg);
	filter: drop-shadow(0 6px 18px rgba(53, 243, 223, 0.35));
}
.site-title a { transition: color .2s var(--qyn-ease); }
.site-title a:hover { color: var(--wp--preset--color--cyan); }

/* ---- Hero qubit orb: glowing sphere that floats, carrying the QYN logo ---- */
.qyn-orb {
	aspect-ratio: 1;
	width: 100%;
	max-width: 330px;
	margin-inline: auto;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 34% 30%, rgba(53, 243, 223, 0.55), rgba(94, 140, 255, 0.14) 46%, rgba(5, 6, 15, 0.25) 72%),
		radial-gradient(circle at 70% 76%, rgba(255, 125, 92, 0.45), transparent 50%);
	box-shadow: inset 0 0 60px rgba(53, 243, 223, 0.3), inset -10px -14px 50px rgba(255, 125, 92, 0.25), 0 0 90px -12px rgba(53, 243, 223, 0.5);
	animation: qyn-float 7s ease-in-out infinite;
}
/* one faint orbital ring around the sphere */
.qyn-orb::before {
	content: ""; position: absolute; inset: -5%; border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	animation: qyn-spin 34s linear infinite;
}
/* the logo sits on the sphere and slowly rotates */
.qyn-orb__logo {
	width: 60%;
	height: 60%;
	display: block;
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.35));
	animation: qyn-spin 40s linear infinite;
}
@keyframes qyn-float { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
@keyframes qyn-spin { to { transform: rotate(360deg); } }

/* Section rhythm helpers */
.qyn-section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Query / post cards */
.wp-block-post-template .wp-block-post {
	border: 1px solid var(--qyn-line);
	border-radius: 18px;
	padding: 1.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
	transition: transform .3s var(--qyn-ease), border-color .3s var(--qyn-ease);
}
.wp-block-post-template .wp-block-post:where(:hover, :focus-within) {
	transform: translateY(-4px);
	border-color: rgba(53, 243, 223, 0.35);
}

/* Inputs (newsletter, comments, search) */
input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, .wp-block-search__input {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--qyn-line);
	border-radius: 11px;
	color: var(--wp--preset--color--contrast);
	padding: 0.8rem 1rem;
}
input::placeholder, textarea::placeholder { color: var(--wp--preset--color--dim); }
:where(input, textarea):focus { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; border-color: transparent; }

/* Keyboard focus visibility */
a:focus-visible, button:focus-visible, .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Card lift feels snappier + a soft glow on hover */
.wp-block-group.is-style-qyn-card:where(:hover, :focus-within),
.wp-block-column.is-style-qyn-card:where(:hover, :focus-within) {
	box-shadow: 0 18px 50px -24px rgba(53, 243, 223, 0.5);
}
/* Chips scale slightly with their card */
.is-style-qyn-card:hover .qyn-chip { transform: scale(1.08) rotate(-4deg); }
.qyn-chip { transition: transform .3s var(--qyn-ease); }

/* ============================================================
   Scroll reveal — elements fade/rise in as they enter view.
   JS adds .qyn-in; without JS everything is visible.
   ============================================================ */
html.qyn-js .qyn-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--qyn-ease), transform .7s var(--qyn-ease); }
html.qyn-js .qyn-reveal.qyn-in { opacity: 1; transform: none; }
.qyn-reveal.d1 { transition-delay: .07s; }
.qyn-reveal.d2 { transition-delay: .14s; }
.qyn-reveal.d3 { transition-delay: .21s; }
.qyn-reveal.d4 { transition-delay: .28s; }

/* ============================================================
   Interactive model flow — Clubs → Ambassadors → Network → Shared
   Four connected steps. Hover/focus lifts a step and reveals a
   one-line "how". Built to work with core columns.
   ============================================================ */
.qyn-flow .wp-block-columns { align-items: stretch; gap: 1.1rem; position: relative; }
.qyn-flow-step {
	position: relative;
	border: 1px solid var(--qyn-line);
	border-radius: 18px;
	padding: 1.5rem 1.35rem 1.4rem;
	background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
	overflow: hidden;
	transition: transform .3s var(--qyn-ease), border-color .3s var(--qyn-ease), background .3s var(--qyn-ease);
	height: 100%;
}
.qyn-flow-step::after { /* progress accent at the base */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--cyan), var(--wp--preset--color--coral));
	transform: scaleX(0); transform-origin: left; transition: transform .4s var(--qyn-ease);
}
.qyn-flow-step:where(:hover, :focus-within) { transform: translateY(-5px); border-color: rgba(53,243,223,.45); background: linear-gradient(180deg, rgba(53,243,223,.07), rgba(255,255,255,.01)); }
.qyn-flow-step:where(:hover, :focus-within)::after { transform: scaleX(1); }
.qyn-flow-badge {
	width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 1.05rem;
	background: rgba(53,243,223,.14); color: var(--wp--preset--color--cyan); margin-bottom: .9rem;
}
.qyn-flow-step:nth-child(2) .qyn-flow-badge { background: rgba(94,140,255,.16); color: var(--wp--preset--color--blue); }
.qyn-flow-step:nth-child(3) .qyn-flow-badge { background: rgba(157,107,255,.16); color: var(--wp--preset--color--violet); }
.qyn-flow-step:nth-child(4) .qyn-flow-badge { background: rgba(255,125,92,.16); color: var(--wp--preset--color--coral); }
.qyn-flow-step h4 { margin: 0 0 .4rem; }
.qyn-flow-step p { margin: 0; color: var(--wp--preset--color--muted); font-size: .92rem; }
.qyn-flow-step .qyn-flow-how {
	margin-top: .8rem; max-height: 0; opacity: 0; overflow: hidden;
	color: var(--wp--preset--color--contrast); font-size: .85rem;
	transition: max-height .4s var(--qyn-ease), opacity .3s var(--qyn-ease), margin-top .4s var(--qyn-ease);
}
.qyn-flow-step:where(:hover, :focus-within) .qyn-flow-how { max-height: 7rem; opacity: 1; }
/* connector arrows between steps (desktop) */
.qyn-flow .wp-block-column { position: relative; }
.qyn-flow .wp-block-column:not(:last-child)::after {
	content: "→"; position: absolute; top: 50%; right: -0.85rem; transform: translateY(-50%);
	color: var(--wp--preset--color--coral); font-size: 1.1rem; z-index: 3; opacity: .7;
}
@media (max-width: 781px) { .qyn-flow .wp-block-column:not(:last-child)::after { content: "↓"; top: auto; bottom: -1rem; right: 50%; transform: translateX(50%); } }

/* ============================================================
   Learn · Share · Innovate — compact three-pillar band
   ============================================================ */
.qyn-lsi { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.qyn-lsi .qyn-lsi-item {
	flex: 1; min-width: 180px; text-align: center;
	border: 1px solid var(--qyn-line); border-radius: 14px; padding: 1.1rem 1rem;
	background: rgba(255,255,255,.025);
	transition: transform .3s var(--qyn-ease), border-color .3s var(--qyn-ease), background .3s var(--qyn-ease);
}
.qyn-lsi .qyn-lsi-item:hover { transform: translateY(-4px); border-color: rgba(53,243,223,.4); background: rgba(53,243,223,.05); }
.qyn-lsi .qyn-lsi-word { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.3rem; }
.qyn-lsi .w1 { color: var(--wp--preset--color--cyan); }
.qyn-lsi .w2 { color: var(--wp--preset--color--blue); }
.qyn-lsi .w3 { color: var(--wp--preset--color--coral); }
.qyn-lsi .qyn-lsi-sub { color: var(--wp--preset--color--muted); font-size: .85rem; margin-top: .25rem; }

/* Document / credential card (IRS letter) */
.qyn-doc-card {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	border: 1px solid var(--qyn-line); border-radius: 16px; padding: 1.1rem 1.3rem;
	background: linear-gradient(110deg, rgba(53,243,223,.05), rgba(255,255,255,.01));
}
.qyn-doc-card .qyn-doc-badge { display: inline-flex; color: var(--wp--preset--color--cyan); }
.qyn-doc-card .qyn-doc-badge svg { width: 30px; height: 30px; }
.qyn-doc-card .qyn-doc-meta { flex: 1; min-width: 200px; }
.qyn-doc-card .qyn-doc-meta strong { color: var(--wp--preset--color--contrast); }
.qyn-doc-card .qyn-doc-meta span { color: var(--wp--preset--color--muted); font-size: .88rem; }

/* Footer host credit (InterServer) + legal line — blends in, stays legible */
.qyn-colophon { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; color: var(--wp--preset--color--dim); font-size: .8rem; }
.qyn-colophon a { color: var(--wp--preset--color--muted); text-decoration: none; transition: color .2s var(--qyn-ease); }
.qyn-colophon a:hover { color: var(--wp--preset--color--cyan); }
.qyn-colophon .sep { opacity: .5; }

/* Give section headings a touch more presence */
.entry-content h2, main h2.wp-block-heading { letter-spacing: -0.025em; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.qyn-reveal { opacity: 1 !important; transform: none !important; }
}