/*
Theme Name:        ClassFlow
Theme URI:         https://example.com/classflow
Author:            ClassFlow
Author URI:        https://example.com
Description:       A comprehensive companion theme for the ClassFlow LMS plugin. Renders the student & teacher dashboards full-screen, matches the plugin's indigo/violet design system, brands the login screen, and routes users to the right dashboard by role.
Version:           1.0.0
Requires at least: 6.0
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       classflow-theme
Tags:              education, custom-menu, custom-logo, full-width-template, translation-ready
*/

/* ===================================================================
 * ClassFlow theme — site chrome (landing, header, footer, login).
 * The plugin owns the dashboard UI (scoped under .classflow-dashboard);
 * theme chrome uses the `cft-` prefix to avoid any collision.
 * =================================================================== */

:root {
	--cft-indigo-50:  #eef2ff;
	--cft-indigo-100: #e0e7ff;
	--cft-indigo-300: #a5b4fc;
	--cft-indigo-500: #6366f1;
	--cft-indigo-600: #4f46e5;
	--cft-indigo-700: #4338ca;
	--cft-violet-600: #7c3aed;
	--cft-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);

	--cft-ink:    #1b1f33;
	--cft-ink-2:  #3a3f55;
	--cft-muted:  #6b7280;
	--cft-line:   #eceef4;
	--cft-line-2: #e3e6ef;
	--cft-bg:     #f6f7fb;
	--cft-surface:#ffffff;

	--cft-r:    14px;
	--cft-r-lg: 22px;
	--cft-shadow-sm: 0 1px 2px rgba(27,31,51,.05), 0 1px 3px rgba(27,31,51,.04);
	--cft-shadow:    0 8px 28px rgba(27,31,51,.08), 0 2px 8px rgba(27,31,51,.05);
	--cft-shadow-lg: 0 24px 60px rgba(38,30,90,.16);
	--cft-wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cft-ink);
	background: var(--cft-surface);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--cft-indigo-600); text-decoration: none; }
a:hover { color: var(--cft-indigo-700); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4em; font-weight: 800; }
p { margin: 0 0 1em; }

.cft-wrap { max-width: var(--cft-wrap); margin: 0 auto; padding: 0 24px; }
.cft-skip-link { position: absolute; left: -9999px; }
.cft-skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 10px 16px; border-radius: 10px; z-index: 1000; box-shadow: var(--cft-shadow); }

/* ---- Buttons ---- */
.cft-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 15px;
	border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s;
}
.cft-btn:active { transform: translateY(1px); }
.cft-btn-primary { background: var(--cft-grad); color: #fff; box-shadow: 0 10px 24px rgba(99,102,241,.30); }
.cft-btn-primary:hover { color: #fff; box-shadow: 0 14px 30px rgba(99,102,241,.40); }
.cft-btn-ghost { background: var(--cft-surface); color: var(--cft-ink-2); border-color: var(--cft-line-2); }
.cft-btn-ghost:hover { background: var(--cft-bg); color: var(--cft-ink); }
.cft-btn-light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); }
.cft-btn-light:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ---- Site header ---- */
.cft-site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.82); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--cft-line);
}
.cft-header-inner { display: flex; align-items: center; gap: 20px; height: 72px; }
.cft-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; color: var(--cft-ink); }
.cft-brand:hover { color: var(--cft-ink); }
.cft-brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--cft-grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 6px 16px rgba(124,58,237,.32); }
.cft-brand-logo img { max-height: 40px; width: auto; }
.cft-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cft-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cft-nav a { padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--cft-ink-2); }
.cft-nav a:hover, .cft-nav .current-menu-item > a { background: var(--cft-indigo-50); color: var(--cft-indigo-700); }
.cft-header-cta { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.cft-menu-toggle { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--cft-line-2); background: #fff; cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.cft-menu-toggle span, .cft-menu-toggle span::before, .cft-menu-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--cft-ink); position: relative; border-radius: 2px; }
.cft-menu-toggle span::before { position: absolute; top: -6px; }
.cft-menu-toggle span::after { position: absolute; top: 6px; }

/* ---- Hero / landing ---- */
.cft-hero { position: relative; overflow: hidden; background: var(--cft-bg); padding: 84px 0 72px; }
.cft-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 420px at 80% -10%, rgba(124,58,237,.12), transparent 60%), radial-gradient(520px 420px at 5% 110%, rgba(99,102,241,.12), transparent 60%); pointer-events: none; }
.cft-hero-inner { position: relative; max-width: 760px; }
.cft-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cft-indigo-700); background: var(--cft-indigo-50); padding: 7px 13px; border-radius: 999px; margin-bottom: 18px; }
.cft-hero h1 { font-size: clamp(34px, 6vw, 56px); margin-bottom: 18px; }
.cft-hero h1 .cft-grad-text { background: var(--cft-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cft-hero p { font-size: clamp(16px, 2.4vw, 20px); color: var(--cft-muted); max-width: 620px; }
.cft-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- Feature grid ---- */
.cft-section { padding: 76px 0; }
.cft-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.cft-section-head h2 { font-size: clamp(28px, 4vw, 40px); }
.cft-section-head p { color: var(--cft-muted); font-size: 17px; }
.cft-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.cft-feature { background: var(--cft-surface); border: 1px solid var(--cft-line); border-radius: var(--cft-r-lg); padding: 28px; box-shadow: var(--cft-shadow-sm); transition: transform .18s, box-shadow .18s; }
.cft-feature:hover { transform: translateY(-4px); box-shadow: var(--cft-shadow); }
.cft-feature-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--cft-indigo-50); color: var(--cft-indigo-600); margin-bottom: 18px; }
.cft-feature-ic svg { width: 26px; height: 26px; }
.cft-feature h3 { font-size: 20px; }
.cft-feature p { color: var(--cft-muted); margin: 0; font-size: 15px; }

/* ---- CTA band ---- */
.cft-cta-band { position: relative; overflow: hidden; border-radius: var(--cft-r-lg); background: var(--cft-grad); color: #fff; padding: 56px; text-align: center; box-shadow: var(--cft-shadow-lg); }
.cft-cta-band h2 { font-size: clamp(26px, 4vw, 38px); color: #fff; }
.cft-cta-band p { color: rgba(255,255,255,.9); font-size: 17px; max-width: 540px; margin: 0 auto 26px; }

/* ---- Page content ---- */
.cft-page { padding: 56px 0 72px; }
.cft-page-title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 24px; }
.cft-content { max-width: 760px; }
.cft-content :where(h2, h3) { margin-top: 1.4em; }
.cft-content img { border-radius: var(--cft-r); }

/* ---- Footer ---- */
.cft-site-footer { background: #14102d; color: rgba(255,255,255,.7); padding: 56px 0 28px; margin-top: 0; }
.cft-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.cft-footer .cft-brand, .cft-footer-brand { color: #fff; }
.cft-footer-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; color: #fff; margin-bottom: 10px; }
.cft-footer-about { max-width: 320px; font-size: 14px; }
.cft-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.cft-footer-nav a { color: rgba(255,255,255,.78); font-weight: 600; font-size: 14px; }
.cft-footer-nav a:hover { color: #fff; }
.cft-footer-bottom { padding-top: 22px; font-size: 13px; color: rgba(255,255,255,.55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---- 404 ---- */
.cft-404 { text-align: center; padding: 90px 0; }
.cft-404 .cft-big { font-size: clamp(70px, 16vw, 140px); background: var(--cft-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.cft-menu-toggle { display: flex; }
	.cft-nav { position: fixed; inset: 72px 0 auto 0; background: #fff; border-bottom: 1px solid var(--cft-line); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 18px; margin: 0; box-shadow: var(--cft-shadow); transform: translateY(-120%); transition: transform .25s ease; z-index: 99; }
	.cft-nav.is-open { transform: translateY(0); }
	.cft-nav ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
	.cft-nav a { display: block; }
	.cft-header-cta { margin: 12px 0 0; }
	.cft-cta-band { padding: 40px 24px; }
}