/**
 * Kinokast Learning — design system CSS.
 *
 * Tailwind's compiled utility classes (assets/css/tailwind-build.css) cover
 * spacing/layout/typography utilities used directly in the templates. This
 * file defines the semantic component classes (buttons, cards, badges,
 * dropdowns, accordion, toasts…) that replace shadcn/ui + Radix in the
 * original React app, plus the CSS custom properties that drive the whole
 * "Premium Editorial Dark Theme" palette. Every color here is edit-friendly
 * for CSS Hero: change a --variable below and it cascades everywhere.
 *
 * @package Kinokast_Learning
 */

/* -------------------------------------------------------------------------
 * Design tokens — mirrors src/index.css exactly.
 * ---------------------------------------------------------------------- */
:root {
	--background: 232 59% 10%;      /* #0a0e27 */
	--foreground: 0 0% 95%;         /* #f2f2f2 */

	--card: 231 38% 16%;            /* #1a1f3a */
	--card-foreground: 0 0% 95%;

	--popover: 231 38% 16%;
	--popover-foreground: 0 0% 95%;

	--primary: 221 83% 53%;         /* #2563eb */
	--primary-foreground: 0 0% 100%;

	--secondary: 271 91% 65%;       /* #a855f7 */
	--secondary-foreground: 0 0% 100%;

	--muted: 231 38% 16%;
	--muted-foreground: 220 13% 69%;

	--accent: 231 28% 23%;
	--accent-foreground: 0 0% 95%;

	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 0 0% 100%;

	--border: 231 28% 23%;          /* #2a2f4a */
	--input: 231 38% 16%;           /* #1a1f3a */
	--ring: 221 83% 53%;

	--radius: 0.5rem;
}

* {
	border-color: hsl(var(--border));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow;
	transition-duration: 200ms;
	transition-timing-function: ease-in-out;
}

html {
	background: hsl(var(--background));
}

body {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: 'Inter', sans-serif;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
	line-height: 1.3;
	font-weight: 600;
}

a {
	color: inherit;
	text-decoration: none;
}

img { max-width: 100%; height: auto; }

.font-playfair { font-family: 'Playfair Display', serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-mono { font-family: 'Space Mono', monospace; }

/* -------------------------------------------------------------------------
 * Accessibility helpers
 * ---------------------------------------------------------------------- */
.screen-reader-text, .sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 0.375rem 0;
}
.skip-link:focus {
	left: 0;
}

/* -------------------------------------------------------------------------
 * Header nav links
 * ---------------------------------------------------------------------- */
.kinokast-nav-link {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--foreground) / 0.8);
	border-bottom: 2px solid transparent;
	padding-bottom: 0.25rem;
	transition: all 200ms ease-in-out;
}
.kinokast-nav-link:hover {
	color: hsl(var(--primary));
	border-color: hsl(var(--primary));
}
.kinokast-nav-link.is-active {
	color: hsl(var(--primary));
	border-color: hsl(var(--primary));
}

.kinokast-nav-link-mobile {
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	padding: 0.75rem;
	color: hsl(var(--foreground));
	border-bottom: 1px solid hsl(var(--border) / 0.5);
	display: block;
}
.kinokast-nav-link-mobile:hover,
.kinokast-nav-link-mobile.is-active {
	color: hsl(var(--primary));
}

.kinokast-lang-pill {
	padding: 0.5rem 1rem;
	min-height: 44px;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-family: 'Inter', sans-serif;
	background: hsl(var(--card));
	color: hsl(var(--muted-foreground));
}
.kinokast-lang-pill.is-active {
	background: hsl(var(--primary) / 0.2);
	color: hsl(var(--primary));
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.kinokast-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: 0.375rem;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 200ms ease-in-out;
	line-height: 1.2;
}
.kinokast-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kinokast-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.kinokast-btn-primary:hover { background: hsl(var(--primary) / 0.9); }

.kinokast-btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.kinokast-btn-secondary:hover { background: hsl(var(--secondary) / 0.9); }

.kinokast-btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.kinokast-btn-outline:hover { background: hsl(var(--card)); }

.kinokast-btn-outline-primary { background: transparent; border-color: hsl(var(--primary) / 0.5); color: hsl(var(--primary)); }
.kinokast-btn-outline-primary:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.kinokast-btn-ghost { background: transparent; color: hsl(var(--foreground) / 0.8); }
.kinokast-btn-ghost:hover { color: hsl(var(--primary)); }

.kinokast-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

/* -------------------------------------------------------------------------
 * Card
 * ---------------------------------------------------------------------- */
.kinokast-card {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 0.75rem;
	color: hsl(var(--card-foreground));
}

.kinokast-glow-blue:hover { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 4px 20px rgba(37,99,235,0.15); }
.kinokast-glow-purple:hover { border-color: hsl(var(--secondary) / 0.5); box-shadow: 0 4px 20px rgba(168,85,247,0.15); }

/* -------------------------------------------------------------------------
 * Badges
 * ---------------------------------------------------------------------- */
.kinokast-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 0.125rem;
	padding: 0.125rem 0.625rem;
	font-family: 'Space Mono', monospace;
	font-size: 0.625rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
}
.kinokast-badge-blue { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.kinokast-badge-purple { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.kinokast-badge-outline { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-family: 'Space Mono', monospace; padding: 0.25rem 0.75rem; }

/* -------------------------------------------------------------------------
 * Filter buttons (Full Catalog track filter)
 * ---------------------------------------------------------------------- */
.kinokast-filter-btn {
	padding: 0.625rem 1.5rem;
	border-radius: 0.375rem;
	font-family: 'Space Mono', monospace;
	font-size: 0.875rem;
	background: hsl(var(--input));
	border: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	transition: all 200ms ease-in-out;
}
.kinokast-filter-btn.is-active { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.kinokast-filter-btn--blue.is-active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 2px 8px hsl(var(--primary) / 0.4); }
.kinokast-filter-btn--purple.is-active { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); box-shadow: 0 2px 8px hsl(var(--secondary) / 0.4); }

/* -------------------------------------------------------------------------
 * Form fields
 * ---------------------------------------------------------------------- */
.kinokast-input {
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	background: hsl(var(--input));
	border: 1px solid hsl(var(--border));
	color: hsl(var(--foreground));
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	padding: 0.625rem 1rem;
}
.kinokast-input::placeholder { color: hsl(var(--muted-foreground)); }
.kinokast-input:focus {
	outline: none;
	border-color: hsl(var(--primary));
	box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3);
}
.kinokast-label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 0.875rem;
	color: hsl(var(--foreground));
	margin-bottom: 0.375rem;
}

/* -------------------------------------------------------------------------
 * Dropdowns
 * ---------------------------------------------------------------------- */
.kinokast-dropdown-content {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	min-width: 12rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	padding: 0.375rem;
	display: none;
	z-index: 60;
}
.kinokast-dropdown-content--wide { min-width: 14rem; }
[data-dropdown].is-open .kinokast-dropdown-content { display: block; }
.kinokast-dropdown-label { display: block; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.kinokast-dropdown-sep { border: none; border-top: 1px solid hsl(var(--border)); margin: 0.25rem 0; }
.kinokast-dropdown-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	background: transparent;
	border: none;
	color: hsl(var(--foreground));
	cursor: pointer;
}
.kinokast-dropdown-item:hover { background: hsl(var(--primary) / 0.1); }
.kinokast-dropdown-item.is-active { background: hsl(var(--primary) / 0.2); color: hsl(var(--primary)); }
.kinokast-dropdown-item--danger { color: hsl(var(--destructive)); }
.kinokast-dropdown-item--danger:hover { background: hsl(var(--destructive) / 0.1); }

/* -------------------------------------------------------------------------
 * Friction Gate: option buttons, hint/error boxes
 * ---------------------------------------------------------------------- */
.kinokast-option-btn {
	border-radius: 0.5rem;
	border: 2px solid hsl(var(--border));
	background: hsl(var(--input));
	padding: 1.25rem;
	text-align: left;
	cursor: pointer;
	transition: all 200ms ease-in-out;
}
.kinokast-option-btn:hover { border-color: hsl(var(--secondary) / 0.5); background: hsl(var(--input) / 0.8); }
.kinokast-option-btn.is-selected { border-color: hsl(var(--secondary)); background: hsl(var(--secondary) / 0.1); box-shadow: 0 0 15px rgba(168,85,247,0.15); }

.kinokast-hint-box {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border-radius: 0.5rem;
	background: hsl(var(--secondary) / 0.1);
	border: 1px solid hsl(var(--secondary) / 0.2);
	padding: 1.25rem;
	font-size: 0.875rem;
	color: hsl(var(--foreground));
}

.kinokast-error-box {
	border-radius: 0.5rem;
	background: hsl(var(--destructive) / 0.1);
	border: 1px solid hsl(var(--destructive) / 0.2);
	padding: 1rem;
	font-size: 0.875rem;
	color: hsl(var(--destructive-foreground));
	margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
 * Notices (login/register/feedback server-rendered banners)
 * ---------------------------------------------------------------------- */
.kinokast-notice {
	border-radius: 0.5rem;
	padding: 0.875rem 1.125rem;
	font-size: 0.875rem;
	margin-bottom: 1.25rem;
	border: 1px solid transparent;
}
.kinokast-notice--success { background: hsl(142 76% 36% / 0.12); border-color: hsl(142 76% 36% / 0.3); color: hsl(142 76% 65%); }
.kinokast-notice--error { background: hsl(var(--destructive) / 0.12); border-color: hsl(var(--destructive) / 0.35); color: hsl(0 84% 70%); }

/* -------------------------------------------------------------------------
 * Accordion (FAQ)
 * ---------------------------------------------------------------------- */
.kinokast-accordion-trigger {
	background: transparent;
	border: none;
	color: hsl(var(--foreground));
	cursor: pointer;
}
.kinokast-accordion-chevron { transition: transform 200ms ease-in-out; }
.kinokast-accordion-item.is-open .kinokast-accordion-chevron { transform: rotate(180deg); }
.kinokast-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 250ms ease-in-out;
}

/* -------------------------------------------------------------------------
 * Toasts
 * ---------------------------------------------------------------------- */
.kinokast-toast-viewport {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 24rem;
}
.kinokast-toast {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	padding: 1rem 1.25rem;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
}
.kinokast-toast.is-visible { opacity: 1; transform: translateY(0); }
.kinokast-toast--error { border-color: hsl(var(--destructive) / 0.4); }
.kinokast-toast-title { font-weight: 600; font-size: 0.9375rem; color: hsl(var(--foreground)); margin: 0 0 0.25rem; }
.kinokast-toast-desc { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0; }

/* -------------------------------------------------------------------------
 * Prose (blog posts, FAQ answers, ai:Pod long-form content)
 * ---------------------------------------------------------------------- */
.kinokast-prose { color: hsl(var(--foreground) / 0.9); line-height: 1.8; }
.kinokast-prose p { margin: 0 0 1.25em; }
.kinokast-prose h2 { font-size: 1.5em; margin: 1.5em 0 0.75em; color: hsl(var(--foreground)); }
.kinokast-prose h3 { font-size: 1.25em; margin: 1.25em 0 0.5em; color: hsl(var(--foreground)); }
.kinokast-prose a { color: hsl(var(--primary)); text-decoration: underline; }
.kinokast-prose a:hover { color: hsl(var(--primary) / 0.8); }
.kinokast-prose strong { color: hsl(var(--foreground)); }
.kinokast-prose ul, .kinokast-prose ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.kinokast-prose li { margin-bottom: 0.5em; }

/* -------------------------------------------------------------------------
 * Comments ("replies")
 * ---------------------------------------------------------------------- */
.kinokast-comment-list { list-style: none; padding: 0; margin: 0; }
.kinokast-comment-list .comment-body { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1.25rem; }
.kinokast-comment-list .comment-author .fn { font-weight: 600; color: hsl(var(--foreground)); font-style: normal; }
.kinokast-comment-list .comment-meta { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.kinokast-comment-list .comment-content p { margin: 0.5rem 0 0; color: hsl(var(--foreground) / 0.9); }
.kinokast-comment-list ol.children { list-style: none; margin-left: 1.5rem; margin-top: 1rem; padding-left: 1rem; border-left: 2px solid hsl(var(--border)); }

/* -------------------------------------------------------------------------
 * Footer link lists
 * ---------------------------------------------------------------------- */
.kinokast-footer-menu a {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	color: hsl(var(--muted-foreground));
	transition: color 200ms ease-in-out;
}
.kinokast-footer-menu a:hover { color: hsl(var(--primary)); }

/* -------------------------------------------------------------------------
 * Motion: page fade-in + scroll reveal (replaces framer-motion)
 * ---------------------------------------------------------------------- */
@keyframes kinokast-fade-in-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
.kinokast-fade-in { animation: kinokast-fade-in-up 300ms ease-in-out both; }

.kinokast-reveal { animation: kinokast-fade-in-up 800ms ease-out both; }
.kinokast-reveal-delay-1 { animation-delay: 0.2s; }
.kinokast-reveal-delay-2 { animation-delay: 0.4s; }

.kinokast-reveal-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.kinokast-reveal-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes kinokast-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
.kinokast-pulse { animation: kinokast-pulse 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.kinokast-fade-in, .kinokast-reveal, .kinokast-reveal-on-scroll, .kinokast-pulse {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}