/* ============================================================
   main.css — Shared styles for Skolarhub
   Include on every page via:
   <link rel="stylesheet" href="/css/main.css">
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:#0d0d1c;
  --surface:rgba(24,24,44,0.85);
  --surface-solid:#181830;
  --border:rgba(255,255,255,0.10);
  --border-focus:#a78bfa;
  --text:#f0f0f5;
  --text-sub:#8b8ba7;
  --text-muted:#5a5a78;
  --accent:#a78bfa;
  --accent-2:#f472b6;
  --accent-dim:rgba(167,139,250,0.15);
  --nav-bg:rgba(13,13,28,0.85);
  --radius-sm:8px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-pill:999px;
  --transition:0.2s cubic-bezier(.25,.8,.25,1);
  --font:'Inter',system-ui,sans-serif;
}
[data-theme="light"] {
  --bg:#f5f4ff;
  --surface:rgba(255,255,255,0.92);
  --surface-solid:#ffffff;
  --border:rgba(0,0,0,0.09);
  --text:#1a1a2e;
  --text-sub:#5a5a78;
  --text-muted:#9090ab;
  --accent-dim:rgba(167,139,250,0.12);
  --nav-bg:rgba(245,244,255,0.92);
}

html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition),color var(--transition);
  font-size:15px;
}
[data-theme="dark"] body {
  background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(167,139,250,0.12) 0%,transparent 70%);
}
*:focus-visible { outline:2px solid var(--border-focus);outline-offset:2px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position:sticky;top:0;z-index:100;
  background:transparent;
}
[data-theme="light"] .navbar {
  background:transparent;
}
.nav-inner {
  max-width:1100px;margin:0 auto;
  padding:0 1.5rem;
  height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-logo {
  display:flex;align-items:center;gap:10px;
  text-decoration:none;flex-shrink:0;
}
.nav-logo img {
  height:34px;
  width:auto;
  border-radius:8px;
  display:block;
  object-fit:contain;
}
.nav-logo-text {
  font-size:18px;font-weight:800;letter-spacing:-0.4px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Desktop nav links */
.nav-links {
  display:flex;align-items:center;gap:4px;
  list-style:none;
}
.nav-links a {
  font-size:13.5px;font-weight:500;color:var(--text-sub);
  text-decoration:none;padding:6px 12px;border-radius:var(--radius-pill);
  transition:color var(--transition),background var(--transition);
  white-space:nowrap;
}
.nav-links a:hover { color:var(--text);background:var(--accent-dim); }
.nav-links a.active { color:var(--accent);background:var(--accent-dim); }
@media(max-width:768px){ .nav-links{display:none;} }

/* Nav right */
.nav-right { display:flex;align-items:center;gap:8px; }
.icon-btn {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-pill);width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-sub);flex-shrink:0;
  transition:color var(--transition),transform var(--transition),background var(--transition);
}
.icon-btn:hover { color:var(--accent); }
.theme-btn:hover { transform:rotate(12deg); }

/* Mobile menu toggle */
.menu-btn { display:none; }
@media(max-width:768px){ .menu-btn{display:flex;} }

/* Mobile drawer */
.mobile-menu {
  display:none;
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
}
.mobile-menu.open { display:flex; }
.mobile-drawer {
  background:var(--surface-solid);
  width:min(280px,85vw);
  height:100%;
  padding:1.5rem;
  display:flex;flex-direction:column;gap:6px;
  border-right:1px solid var(--border);
  animation:slideIn 0.2s ease;
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.drawer-logo {
  font-size:16px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.drawer-close {
  background:none;border:none;color:var(--text-muted);
  cursor:pointer;font-size:20px;display:flex;
}
.drawer-link {
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:var(--radius-md);
  font-size:14px;font-weight:500;color:var(--text-sub);
  text-decoration:none;transition:all var(--transition);
}
.drawer-link:hover { background:var(--accent-dim);color:var(--accent); }
.drawer-link.active { background:var(--accent-dim);color:var(--accent); }
.drawer-link i { font-size:18px;flex-shrink:0; }
.drawer-section {
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.8px;
  padding:8px 14px 4px;margin-top:6px;
}

/* ============================================================
   SHARED BUTTONS
   ============================================================ */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;padding:13px 28px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;border-radius:var(--radius-pill);color:#fff;
  font-family:var(--font);font-size:15px;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition);
  box-shadow:0 4px 20px rgba(167,139,250,0.35);
}
.btn-primary:hover { opacity:.9;transform:translateY(-2px);box-shadow:0 8px 28px rgba(167,139,250,0.45); }
.btn-primary:disabled { opacity:.4;cursor:not-allowed; }
.btn-ghost {
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--text-sub);
  font-family:var(--font);font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:border-color var(--transition),color var(--transition);
}
.btn-ghost:hover { border-color:var(--accent);color:var(--accent); }

/* ============================================================
   SHARED WRAP / LAYOUT
   ============================================================ */
.wrap { max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem; }
@media(min-width:640px){ .wrap{padding:2.5rem 2rem 4rem;} }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:var(--surface-solid);
  border-top:1px solid var(--border);
  padding:2.5rem 0 2rem;
  margin-top:2rem;
}
.footer-inner {
  max-width:1100px;margin:0 auto;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;align-items:start;
}
@media(max-width:600px){ .footer-inner{grid-template-columns:1fr;gap:1.5rem;} }

.footer-brand { display:flex;flex-direction:column;gap:10px; }
.footer-logo {
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.footer-logo img {
  height:28px;width:auto;border-radius:6px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  padding:2px;
}
.footer-logo-text {
  font-size:16px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-tagline { font-size:13px;color:var(--text-muted);line-height:1.5;max-width:260px; }
.footer-copy { font-size:12px;color:var(--text-muted);margin-top:4px; }
.footer-copy a { color:var(--accent);text-decoration:none; }
.footer-copy a:hover { text-decoration:underline; }

.footer-links { display:flex;flex-direction:column;gap:6px; }
.footer-links-title { font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px; }
.footer-link {
  font-size:13.5px;font-weight:500;color:var(--text-sub);
  text-decoration:none;padding:3px 0;
  transition:color var(--transition);display:flex;align-items:center;gap:6px;
}
.footer-link:hover { color:var(--accent); }
.footer-link i { font-size:15px; }

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