/* =============================================================
   RUET FormKit — Shared Layout Stylesheet
   layout.css  |  Header · Footer · Dark Mode · Sidebar
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --hdr-bg: rgba(255,255,255,0.9);
  --hdr-border: rgba(0,0,0,0.07);
  --hdr-shadow: 0 2px 20px rgba(0,0,0,0.06);

  --nav-text: #374151;
  --nav-text-hover: #1d2939;
  --nav-active-bg: linear-gradient(135deg,#eff6ff,#f5f3ff);
  --nav-active-text: #3d6ef0;
  --nav-active-border: #3d6ef0;
  --nav-hover-bg: rgba(61,110,240,0.06);

  --brand-text: #111827;
  --brand-em: #3d6ef0;

  --toggle-bg: #f1f5f9;
  --toggle-border: #e2e8f0;
  --toggle-icon: #4b5563;

  --ham-line: #374151;

  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0,0,0,0.08);
  --sidebar-section-label: #9ca3af;
  --sidebar-link-hover: #f8faff;
  --sidebar-link-active: linear-gradient(135deg,#eff6ff,#f5f3ff);
  --sidebar-active-text: #3d6ef0;
  --sidebar-icon-bg: #f1f5f9;
  --sidebar-sub-text: #9ca3af;
  --sidebar-overlay: rgba(15,23,42,0.45);

  --footer-bg: #0f1e4a;
  --footer-text: #cbd5e1;
  --footer-heading-color: #f1f5f9;
  --footer-link: #94a3b8;
  --footer-link-hover: #e2e8f0;
  --footer-border: rgba(255,255,255,0.07);
  --footer-bottom-text: #64748b;
  --footer-dev-card: rgba(255,255,255,0.05);
  --footer-dev-border: rgba(255,255,255,0.1);
  --footer-contact-bg: rgba(255,255,255,0.07);
  --footer-contact-hover: rgba(255,255,255,0.12);

  --hdr-h: 68px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur: 0.22s;
}

/* ── Dark Mode Tokens ─────────────────────────────────────── */
[data-theme="dark"] {
  --hdr-bg: rgba(15,23,42,0.95);
  --hdr-border: rgba(255,255,255,0.07);
  --hdr-shadow: 0 2px 24px rgba(0,0,0,0.4);

  --nav-text: #94a3b8;
  --nav-text-hover: #e2e8f0;
  --nav-active-bg: linear-gradient(135deg,rgba(61,110,240,0.15),rgba(124,58,237,0.12));
  --nav-active-text: #60a5fa;
  --nav-active-border: #60a5fa;
  --nav-hover-bg: rgba(255,255,255,0.06);

  --brand-text: #f1f5f9;
  --brand-em: #60a5fa;

  --toggle-bg: rgba(255,255,255,0.07);
  --toggle-border: rgba(255,255,255,0.12);
  --toggle-icon: #94a3b8;

  --ham-line: #94a3b8;

  --sidebar-bg: #0f172a;
  --sidebar-border: rgba(255,255,255,0.07);
  --sidebar-section-label: #475569;
  --sidebar-link-hover: rgba(255,255,255,0.05);
  --sidebar-link-active: linear-gradient(135deg,rgba(61,110,240,0.18),rgba(124,58,237,0.12));
  --sidebar-active-text: #60a5fa;
  --sidebar-icon-bg: rgba(255,255,255,0.07);
  --sidebar-sub-text: #64748b;
  --sidebar-overlay: rgba(0,0,0,0.65);

  --footer-bg: #060d1c;
}

/* ── Base ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }

/* Make every page fill the viewport so footer sticks to bottom */
html { height: 100%; }
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--hdr-h);
}

/* The main page content area grows to push footer down */
body > *:not(.site-header):not(.site-footer):not(.sidebar-overlay):not(.mobile-sidebar) {
  flex: 1 0 auto;
}
.site-footer { flex-shrink: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  height: var(--hdr-h);
  z-index: 1000;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-border);
  box-shadow: var(--hdr-shadow);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Brand — stays on the LEFT, never grows */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--dur) var(--ease);
}
.brand:hover { opacity: 0.85; }

.brand-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-text  { display:flex; flex-direction:column; line-height:1.1; }
.brand-name {
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: 17px; font-weight: 800;
  color: var(--brand-text);
  letter-spacing: -0.3px;
  transition: color var(--dur) var(--ease);
}
.brand-name em { font-style:normal; color:var(--brand-em); }
.brand-tagline {
  font-family: 'Space Grotesk',sans-serif;
  font-size: 10px; font-weight: 500;
  color: var(--nav-text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
  transition: color var(--dur) var(--ease);
}

/* Desktop Nav — centred in remaining space */
.desktop-nav { flex:1; display:flex; justify-content:center; }
.nav-list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px;
  font-family: 'Space Grotesk',sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: var(--nav-text);
  text-decoration: none; letter-spacing: 0.1px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.nav-link:hover { background:var(--nav-hover-bg); color:var(--nav-text-hover); }
.nav-link.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border-color: rgba(61,110,240,0.2);
}
[data-theme="dark"] .nav-link.active { border-color:rgba(96,165,250,0.2); }
.nav-icon { display:flex; align-items:center; opacity:0.75; transition:opacity var(--dur) var(--ease); }
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon { opacity:1; }

/* Header Controls — always pushed to the RIGHT edge */
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;   /* guarantees right-flush even when desktop-nav is hidden */
}

/* Theme Toggle */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--toggle-border);
  background: var(--toggle-bg);
  cursor: pointer; color: var(--toggle-icon);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform 0.18s var(--ease);
}
.theme-toggle:hover  { transform:scale(1.08); }
.theme-toggle:active { transform:scale(0.95); }

.icon-sun { display:none; }
.icon-moon { display:block; }
[data-theme="dark"] .icon-sun  { display:block; }
[data-theme="dark"] .icon-moon { display:none; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 38px; height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--toggle-border);
  background: var(--toggle-bg);
  cursor: pointer; padding: 0;
  transition: background var(--dur) var(--ease);
}
.hamburger span {
  display:block; width:18px; height:2px;
  background:var(--ham-line); border-radius:2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE SIDEBAR
   ============================================================ */
.sidebar-overlay {
  position: fixed; inset:0;
  background: var(--sidebar-overlay);
  z-index: 1998; opacity:0; pointer-events:none;
  transition: opacity 0.3s var(--ease);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.sidebar-overlay.open { opacity:1; pointer-events:all; }

.mobile-sidebar {
  position:fixed; top:0; left:0;
  width:300px; max-width:85vw;
  height:100dvh;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  z-index:1999;
  transform:translateX(-100%);
  transition:transform 0.32s cubic-bezier(0.32,0,0.08,1);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:4px 0 40px rgba(0,0,0,0.15);
}
.mobile-sidebar.open { transform:translateX(0); }

.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--sidebar-border);
  flex-shrink:0;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px; font-weight:800;
  color:var(--brand-text);
}
.sidebar-brand em { font-style:normal; color:var(--brand-em); }
.sidebar-close {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:1.5px solid var(--sidebar-border);
  background:transparent; color:var(--nav-text);
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.sidebar-close:hover { background:var(--sidebar-link-hover); }

.sidebar-nav { flex:1; overflow-y:auto; padding:16px 12px; }
.sidebar-nav ul {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:4px;
}
.sidebar-section-label {
  font-family:'Space Grotesk',sans-serif;
  font-size:10px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  color:var(--sidebar-section-label);
  padding:0 10px; margin-bottom:8px;
}
.sidebar-link {
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:12px;
  text-decoration:none; color:var(--nav-text);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  border:1.5px solid transparent;
}
.sidebar-link:hover { background:var(--sidebar-link-hover); color:var(--nav-text-hover); }
.sidebar-link.active {
  background:var(--sidebar-link-active);
  color:var(--sidebar-active-text);
  border-color:rgba(61,110,240,0.18);
}
[data-theme="dark"] .sidebar-link.active { border-color:rgba(96,165,250,0.18); }
.sidebar-link-icon {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px;
  background:var(--sidebar-icon-bg); flex-shrink:0;
  transition:background var(--dur) var(--ease);
}
.sidebar-link.active .sidebar-link-icon { background:rgba(61,110,240,0.12); }
.sidebar-link-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:14px; font-weight:600; line-height:1.2;
}
.sidebar-link-sub {
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; color:var(--sidebar-sub-text);
  margin-top:2px; line-height:1.3;
}
.sidebar-footer-note {
  padding:16px 20px;
  border-top:1px solid var(--sidebar-border);
  flex-shrink:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; color:var(--sidebar-section-label);
  text-align:center;
}

/* ============================================================
   FOOTER  — always at the page bottom
   ============================================================ */
.site-footer {
  background: var(--footer-bg);
  margin-top: 0;
  padding: 52px 0 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--footer-border);
}
.footer-brand {
  display:flex; align-items:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px; font-weight:800;
  color:var(--footer-heading-color); margin-bottom:16px;
}
.footer-brand em { font-style:normal; color:#60a5fa; }
.footer-desc {
  font-family:'Space Grotesk',sans-serif;
  font-size:13.5px; color:var(--footer-text); line-height:1.75;
}
.footer-heading {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  color:var(--footer-heading-color); margin-bottom:18px;
}
.footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a {
  font-family:'Space Grotesk',sans-serif;
  font-size:13.5px; color:var(--footer-link);
  text-decoration:none; transition:color var(--dur) var(--ease);
}
.footer-links a:hover { color:var(--footer-link-hover); }

.dev-card {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px;
  background:var(--footer-dev-card);
  border:1px solid var(--footer-dev-border);
  border-radius:12px; margin-bottom:14px;
}
.dev-info { display:flex; flex-direction:column; gap:3px; }
.dev-name {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px; font-weight:700; color:var(--footer-heading-color);
}
.dev-role {
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; color:var(--footer-text); line-height:1.5;
}
.dev-contacts { display:flex; flex-direction:column; gap:8px; }
.contact-link {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:9px;
  background:var(--footer-contact-bg);
  text-decoration:none;
  font-family:'Space Grotesk',sans-serif;
  font-size:12.5px; font-weight:500;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-link:hover { background:var(--footer-contact-hover); }
.contact-linkedin { color:#60a5fa; }
.contact-email    { color:#a78bfa; }

.footer-bottom {
  padding:20px 0;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-align:center;
}
.footer-bottom p {
  font-family:'Space Grotesk',sans-serif;
  font-size:12.5px; color:var(--footer-text);
  margin:0;
}
.footer-disclaimer {
  font-size:11.5px !important;
  color:var(--footer-bottom-text) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Mobile: hide desktop nav, show hamburger */
@media (max-width:900px) {
  .desktop-nav { display:none; }
  .hamburger   { display:flex; }
  /* Controls (theme toggle + hamburger) snap to far right */
  .header-controls { margin-left:auto; }
}

@media (max-width:720px) {
  .footer-grid { grid-template-columns:1fr; gap:32px; padding-bottom:32px; }
  .brand-tagline { display:none; }
}

@media (max-width:480px) {
  .header-inner { padding:0 12px; gap:10px; }
  .footer-inner { padding:0 16px; }
  .site-footer  { padding-top:36px; margin-top:0; }
}

/* ============================================================
   DARK MODE — general page overrides
   ============================================================ */
[data-theme="dark"] body { background-color:#0d1117; color:#e2e8f0; }

[data-theme="dark"] .glass-box,
[data-theme="dark"] .modal-content {
  background:rgba(15,23,42,0.97) !important;
  border-color:rgba(255,255,255,0.08) !important;
  color:#e2e8f0 !important;
}
[data-theme="dark"] .form-section,
[data-theme="dark"] .course-card {
  background:rgba(30,41,59,0.6) !important;
  border-color:rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control::placeholder { color:#64748b; }
[data-theme="dark"] table th,
[data-theme="dark"] table td {
  color:#e2e8f0 !important;
  border-color:rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background:rgba(30,41,59,0.8) !important;
  border-color:rgba(255,255,255,0.08) !important;
}

/* ── Print: always hide header/footer ── */
@media print {
  #fk-header,#fk-footer,.site-header,.site-footer,
  .sidebar-overlay,.mobile-sidebar { display:none !important; }
}