/*
Theme Name: Tutoline
Theme URI: https://tutoline.com
Author: Tutoline
Description: A futuristic, dark cyberpunk theme for Tutoline.com — written programming courses with lesson-by-lesson navigation, internship programs, and certifications.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tutoline
*/

/* ==========================================================
   0. TOKENS
   ========================================================== */
:root {
	/* Color */
	--void:        #05070c;
	--panel:       #0c111b;
	--panel-2:     #10182a;
	--line:        rgba(0, 240, 255, 0.14);
	--cyan:        #00f0ff;
	--magenta:     #ff2fd6;
	--violet:      #7b2ff7;
	--amber:       #ffb347;
	--text:        #e8f4ff;
	--text-muted:  #a6b3ca;
	--text-dim:    #7885a3;

	/* Type */
	--font-display: 'Orbitron', sans-serif;
	--font-body:    'Sora', sans-serif;
	--font-mono:    'Space Mono', monospace;

	/* Layout */
	--container: 1180px;
	--radius: 14px;
	--gap: 24px;
}

/* ==========================================================
   1. RESET / BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--void);
	background-image:
		radial-gradient(circle at 15% 0%, rgba(123,47,247,0.16), transparent 45%),
		radial-gradient(circle at 85% 20%, rgba(0,240,255,0.10), transparent 40%),
		linear-gradient(rgba(0,240,255,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,240,255,0.035) 1px, transparent 1px);
	background-size: auto, auto, 42px 42px, 42px 42px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: #fff;
}
h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; color: var(--text); }
code, pre {
	font-family: var(--font-mono);
}
::selection { background: var(--magenta); color: #05070c; }

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cyan);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.eyebrow::before {
	content: '';
	width: 22px; height: 1px;
	background: var(--cyan);
	box-shadow: 0 0 8px var(--cyan);
}

/* ==========================================================
   2. BUTTONS
   ========================================================== */
.btn {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 8px;
	border: 1px solid var(--cyan);
	background: rgba(0, 240, 255, 0.07);
	color: #eafcff;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s ease;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(0,240,255,0.35);
}
.btn:hover { background: rgba(0,240,255,0.16); box-shadow: 0 0 22px rgba(0,240,255,0.35); color: #fff; }
.btn--solid {
	/* Solid bright cyan, not a gradient — a gradient under the text meant
	   the label had strong contrast on the cyan end but weak contrast on
	   the violet end. Solid color guarantees it reads clearly everywhere,
	   with the violet kept as an outer glow instead. */
	background: var(--cyan);
	color: #041014;
	border: none;
	font-weight: 800;
	text-shadow: none;
	box-shadow: 0 0 18px rgba(0,240,255,0.45), 0 4px 14px rgba(123,47,247,0.35);
}
.btn--solid:hover { background: #33f5ff; box-shadow: 0 0 30px rgba(0,240,255,0.6), 0 4px 20px rgba(123,47,247,0.5); color: #041014; }
.btn--ghost { border-color: var(--text-dim); background: rgba(255,255,255,0.03); color: var(--text); text-shadow: none; }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,240,255,0.08); box-shadow: none; }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ==========================================================
   3. HEADER
   ========================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(5,7,12,0.82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 24px;
	max-width: var(--container); margin: 0 auto;
}
.site-logo { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; color: #fff; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 10px; }
.site-logo__mark { filter: drop-shadow(0 0 6px rgba(0,240,255,0.55)); flex-shrink: 0; }
.site-logo__text span, .site-logo span { color: var(--cyan); text-shadow: 0 0 14px rgba(0,240,255,0.6); }

.skip-link {
	position: absolute; left: -999px; top: -999px;
	background: var(--cyan); color: #04060a; font-family: var(--font-mono);
	font-weight: 700; padding: 12px 20px; border-radius: 6px; z-index: 1000;
}
.skip-link:focus {
	left: 16px; top: 16px;
}
.primary-menu { display: flex; gap: 30px; align-items: center; }
.primary-menu a {
	font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--text-muted);
	position: relative; padding: 6px 0;
}
.primary-menu a:hover { color: var(--cyan); }
.primary-menu a::after {
	content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
	background: var(--cyan); box-shadow: 0 0 6px var(--cyan); transition: width .2s;
}
.primary-menu a:hover::after { width: 100%; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--cyan); padding: 8px 12px; border-radius: 6px; }

@media (max-width: 860px) {
	.primary-menu { position: fixed; inset: 64px 0 0 0; flex-direction: column; background: var(--void); padding: 30px 24px; gap: 22px; transform: translateY(-110%); transition: transform .25s ease; }
	.primary-menu.is-open { transform: translateY(0); }
	.menu-toggle { display: block; }
}

/* ==========================================================
   4. HERO
   ========================================================== */
.hero { padding: 90px 0 70px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero h1 .glow { color: var(--cyan); text-shadow: 0 0 26px rgba(0,240,255,0.65); }
.hero p.lead { font-size: 1.1rem; color: var(--text-muted); max-width: 480px; }
.hero__actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 34px; margin-top: 46px; }
.hero__stats div strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: #fff; }
.hero__stats div span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* Signature: circuit console panel */
.circuit-panel {
	background: linear-gradient(180deg, var(--panel), var(--panel-2));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: 0 0 60px rgba(123,47,247,0.15), inset 0 0 40px rgba(0,240,255,0.03);
	font-family: var(--font-mono);
	font-size: 0.82rem;
}
.circuit-panel__bar { display: flex; gap: 6px; margin-bottom: 18px; }
.circuit-panel__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); }
.circuit-panel__bar span:nth-child(1) { background: var(--magenta); }
.circuit-panel__bar span:nth-child(2) { background: var(--amber); }
.circuit-panel__bar span:nth-child(3) { background: var(--cyan); }
.circuit-panel__line { color: var(--text-muted); margin-bottom: 6px; white-space: pre; }
.circuit-panel__line .kw { color: var(--violet); }
.circuit-panel__line .str { color: var(--cyan); }
.circuit-panel__line .cm { color: var(--text-dim); }
.circuit-panel__cursor { display: inline-block; width: 8px; height: 15px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink 1.1s steps(2) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================
   5. SECTIONS / CARDS
   ========================================================== */
.section { padding: 64px 0; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 20px; flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap); align-items: stretch; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } .hero__grid { grid-template-columns: 1fr; } }

.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 24px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card::before {
	content: ''; position: absolute; inset: 0; border-radius: var(--radius);
	padding: 1px; background: linear-gradient(135deg, var(--cyan), transparent 40%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(0,240,255,0.4); box-shadow: 0 12px 40px rgba(0,240,255,0.12); }
.card:hover::before { opacity: 1; }
.card__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(0,240,255,0.08); border: 1px solid var(--line); margin-bottom: 14px; font-family: var(--font-mono); color: var(--cyan); }
.card__tag { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); border: 1px solid rgba(123,47,247,0.4); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; align-self: flex-start; }
.card h3 {
	font-size: 1.08rem;
	margin-bottom: 8px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.card p {
	margin-bottom: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden;
}
.card__meta { display: flex; gap: 16px; margin-top: auto; padding-top: 16px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.internship-card__meta-row { margin-top: auto; padding-top: 4px; }

/* ==========================================================
   6. COURSE PAGE / LESSON LIST
   ========================================================== */
.course-hero { padding: 70px 0 40px; border-bottom: 1px solid var(--line); }
.lesson-list { margin-top: 30px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lesson-list__item {
	display: flex; align-items: center; gap: 18px;
	padding: 18px 22px; border-bottom: 1px solid var(--line);
	background: var(--panel); transition: background .2s;
}
.lesson-list__item:last-child { border-bottom: none; }
.lesson-list__item:hover { background: var(--panel-2); }
.lesson-list__num { font-family: var(--font-mono); color: var(--cyan); font-size: 0.85rem; width: 32px; }
.lesson-list__title { flex: 1; color: var(--text); font-weight: 500; }
.lesson-list__time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); }

/* ==========================================================
   7. SINGLE LESSON — reading view + prev/next
   ========================================================== */
.lesson-shell { padding: 50px 0 100px; }
.lesson-shell__inner { max-width: 760px; margin: 0 auto; }
/* The global h1 rule uses a viewport-relative clamp() sized for the
   full-width hero — inside the narrower lesson content column (next to
   the sidebar) that computes far too large and wraps onto many lines.
   Give lesson titles their own fixed, column-appropriate size instead. */
.lesson-shell__inner h1 {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.25;
	margin-bottom: 24px;
}
.tl-progress { position: relative; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); margin-bottom: 34px; }
.tl-progress__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(0,240,255,0.5); }
.tl-progress__label { position: absolute; top: -26px; right: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }

.lesson-content { font-size: 1.05rem; }
.lesson-content h2 { margin-top: 2em; color: var(--cyan); }
.lesson-content h3 { margin-top: 1.6em; color: #fff; }
.lesson-content pre {
	background: #070b12; border: 1px solid var(--line); border-radius: 10px;
	padding: 18px 20px; overflow-x: auto; font-size: 0.88rem; color: #b6e6ff; line-height: 1.55;
	box-shadow: inset 0 0 30px rgba(0,240,255,0.04);
}
.lesson-content code { background: rgba(0,240,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; color: var(--cyan); }
.lesson-content pre code { background: none; padding: 0; color: inherit; }
.lesson-content blockquote { border-left: 3px solid var(--violet); margin: 1.6em 0; padding: 4px 20px; color: var(--text-muted); font-style: italic; }
.lesson-content ul, .lesson-content ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.lesson-content li { margin-bottom: 0.4em; }

/* Prev / Next navigation — the "forward / backward buttons" */
.lesson-nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--line);
}
.lesson-nav__btn {
	display: flex; flex-direction: column; gap: 6px;
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 18px 20px; background: var(--panel);
	transition: border-color .2s, box-shadow .2s, transform .15s;
}
.lesson-nav__btn:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(0,240,255,0.15); transform: translateY(-2px); }
.lesson-nav__btn--next { text-align: right; align-items: flex-end; }
.lesson-nav__dir { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.lesson-nav__title { font-family: var(--font-display); font-size: 0.95rem; color: #fff; }
.lesson-nav__btn--disabled { opacity: 0.45; pointer-events: none; }
.lesson-nav__btn--disabled .lesson-nav__dir { color: var(--text-dim); }
.lesson-nav__btn--disabled .lesson-nav__title { color: var(--text-muted); }
@media (max-width: 640px) { .lesson-nav { grid-template-columns: 1fr; } }

/* ==========================================================
   7b. LESSON SIDEBAR (table of contents) + mobile drawer
   ========================================================== */
.lesson-shell__layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 50px; align-items: start; }
.lesson-shell__layout .lesson-shell__inner { max-width: 760px; margin: 0; min-width: 0; }
.lesson-shell__layout .lesson-toc { min-width: 0; }

.toc-toggle {
	display: none;
	width: 100%;
	margin-bottom: 26px;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cyan);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 16px;
	text-align: left;
	cursor: pointer;
}

/* Hidden by default (desktop). It's only a real element on mobile, where
   the media query below turns it into a fixed full-screen overlay behind
   the slide-in drawer. Without this base rule it defaults to a visible
   block box and becomes an uncounted 3rd item in the 2-column grid below,
   which pushes the real columns out of place. */
.toc-overlay { display: none; }

.lesson-toc {
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 4px;
}
.lesson-toc::-webkit-scrollbar { width: 6px; }
.lesson-toc::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.lesson-toc__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px 10px;
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--text-dim);
}
.lesson-toc__close { display: none; background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }

.lesson-toc__list { padding: 4px; }
.lesson-toc__item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 8px;
	color: var(--text-muted); font-size: 0.86rem;
	transition: background .15s, color .15s;
}
.lesson-toc__item:hover { background: var(--panel-2); color: var(--text); }
.lesson-toc__item.is-active { background: rgba(0,240,255,0.08); color: var(--cyan); box-shadow: inset 2px 0 0 var(--cyan); }

.lesson-toc__check {
	flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
	border: 1px solid var(--text-dim);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; color: transparent;
}
.lesson-toc__item.is-done .lesson-toc__check {
	border-color: var(--cyan);
	background: var(--cyan);
	color: var(--void);
}
.lesson-toc__item.is-done .lesson-toc__check::after { content: '✓'; }
.lesson-toc__num { font-family: var(--font-mono); color: var(--text-dim); font-size: 0.72rem; width: 18px; flex-shrink: 0; }
.lesson-toc__item.is-active .lesson-toc__num { color: var(--cyan); }
.lesson-toc__title { flex: 1; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }

@media (max-width: 980px) {
	.lesson-shell__layout { grid-template-columns: 1fr; }
	.toc-toggle { display: block; }
	.lesson-toc {
		position: fixed; top: 0; left: 0; height: 100vh; width: 300px;
		max-height: none; z-index: 200;
		border-radius: 0; border-right: 1px solid var(--line);
		transform: translateX(-100%); transition: transform .25s ease;
		box-shadow: 20px 0 60px rgba(0,0,0,0.5);
	}
	.lesson-toc.is-open { transform: translateX(0); }
	.lesson-toc__head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
	.lesson-toc__close { display: block; }
	.toc-overlay {
		display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
		z-index: 190; backdrop-filter: blur(2px);
	}
	.toc-overlay.is-open { display: block; }
}

/* Continue-learning button on course pages */
.continue-btn[data-state="continue"] .continue-btn__label--start { display: none; }
.continue-btn[data-state="start"] .continue-btn__label--continue { display: none; }
.continue-btn__label--start, .continue-btn__label--continue { display: inline; }

/* checkmarks reused on the course lesson list */
.lesson-list__item.is-done .lesson-list__num { color: var(--cyan); position: relative; }
.lesson-list__item.is-done .lesson-list__num::after { content: '✓'; margin-left: 4px; }

/* ==========================================================
   7c. BREADCRUMBS
   ========================================================== */
.breadcrumbs { margin-bottom: 18px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.75rem; }
.breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--text-dim); margin-left: 6px; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--cyan); }
.breadcrumbs span[aria-current] { color: var(--cyan); }

/* ==========================================================
   8. INTERNSHIPS / CERTIFICATIONS
   ========================================================== */
.cert-card { text-align: center; }
.cert-card__badge {
	width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: conic-gradient(from 180deg, var(--cyan), var(--violet), var(--magenta), var(--cyan));
	color: var(--void); font-family: var(--font-display); font-weight: 900;
}
.internship-card__meta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pill { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--text-muted); }

/* ==========================================================
   9. FOOTER
   ========================================================== */
.site-footer { border-top: 1px solid var(--line); padding: 60px 0 30px; margin-top: 60px; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; }
.site-footer a { color: var(--text-muted); font-size: 0.92rem; }
.site-footer a:hover { color: var(--cyan); }
.site-footer li { margin-bottom: 10px; }
.site-footer__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); flex-wrap: wrap; gap: 10px; }
@media (max-width: 780px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================
   10. MISC
   ========================================================== */
.page-hero { padding: 90px 0 50px; text-align: center; }
.page-hero p { max-width: 640px; margin: 0 auto; color: var(--text-muted); }
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); font-family: var(--font-mono); }

/* ==========================================================
   11b. COURSE FILTERS
   ========================================================== */
.course-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.course-filters__btn {
	font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em;
	padding: 9px 18px; border-radius: 20px;
	border: 1px solid var(--line); background: var(--panel); color: var(--text-muted);
	cursor: pointer; transition: all .15s ease;
}
.course-filters__btn:hover { border-color: rgba(0,240,255,0.4); color: var(--text); }
.course-filters__btn.is-active { background: var(--cyan); border-color: var(--cyan); color: #041014; font-weight: 700; }
.card.is-filtered-out { display: none; }

/* ==========================================================
   12. SEARCH
   ========================================================== */
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.search-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 8px;
	background: none; border: 1px solid var(--line); color: var(--text-muted);
	cursor: pointer; transition: all .15s ease;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: var(--cyan); border-color: rgba(0,240,255,0.4); background: rgba(0,240,255,0.06); }

.header-search {
	max-height: 0; overflow: hidden;
	border-bottom: 0 solid var(--line);
	transition: max-height .25s ease, border-color .25s ease;
	background: rgba(5,7,12,0.98);
}
.header-search.is-open { max-height: 90px; border-bottom: 1px solid var(--line); }
.header-search__inner { max-width: var(--container); margin: 0 auto; padding: 16px 24px; }

.search-form { display: flex; gap: 10px; }
.search-form__input {
	flex: 1; padding: 12px 16px; border-radius: 8px;
	border: 1px solid var(--line); background: var(--void); color: var(--text);
	font-family: var(--font-body); font-size: 0.95rem;
}
.search-form__input::placeholder { color: var(--text-dim); }
.search-form__input:focus { border-color: var(--cyan); outline: none; }
.search-form__submit {
	display: flex; align-items: center; justify-content: center;
	width: 44px; border-radius: 8px; border: none;
	background: var(--cyan); color: #041014; cursor: pointer; flex-shrink: 0;
}
.search-form__submit:hover { background: #33f5ff; }
.consent-banner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
	background: rgba(5,7,12,0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
	transform: translateY(100%);
	transition: transform .3s ease;
}
.consent-banner.is-visible { transform: translateY(0); }
.consent-banner__inner {
	max-width: var(--container); margin: 0 auto; padding: 18px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.consent-banner p { margin: 0; font-size: 0.88rem; color: var(--text-muted); max-width: 640px; }
.consent-banner a { color: var(--cyan); }
.consent-banner .btn { flex-shrink: 0; padding: 10px 22px; }
@media (max-width: 640px) { .consent-banner__inner { flex-direction: column; align-items: stretch; text-align: center; } }

/* ==========================================================
   13. FAQ ACCORDION
   ========================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 4px 22px;
}
.faq-item[open] { border-color: rgba(0,240,255,0.35); }
.faq-item__question {
	padding: 18px 0; cursor: pointer; list-style: none;
	font-family: var(--font-display); font-size: 1rem; color: var(--text);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
	content: '+'; flex-shrink: 0; color: var(--cyan); font-size: 1.3rem; font-weight: 300;
	transition: transform .2s ease;
}
.faq-item[open] .faq-item__question::after { transform: rotate(45deg); }
.faq-item__answer { padding-bottom: 18px; color: var(--text-muted); }
.faq-item__answer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}