/* ============================================================
   APEX FLIGHT ACADEMY — SHARED DESIGN SYSTEM
   Version 1.0 | April 2026
   Used across: Hub, KAPA, KSDL, KFXE, KEDC, KBED, Jet Academy
   ============================================================ */

/* ── NETWORK COLOR TOKENS ────────────────────────────────────── */
:root {
  --navy:       #0B1829;
  --navy-mid:   #13284a;
  --blue:       #185FA5;
  --blue-mid:   #2471C8;
  --blue-light: #D9E8F6;
  --sky:        #EBF4FF;
  --white:      #FFFFFF;
  --off-white:  #F8FAFC;
  --gray:       #64748B;
  --gray-light: #E2E8F0;
  --teal:       #0F6E56;
  --amber:      #854F0B;
  --red:        #DC2626;
  --green:      #16A34A;
  --text:       #0F172A;

  /* Location accent — overridden per campus via data-campus attr */
  --accent:     #993C1D;
  --accent-bg:  rgba(153,60,29,0.08);
  --accent-dim: rgba(153,60,29,0.15);

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --container: 1280px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
}

/* ── CAMPUS ACCENT OVERRIDES ─────────────────────────────────── */
[data-campus="kapa"] { --accent:#993C1D; --accent-bg:rgba(153,60,29,0.08);  --accent-dim:rgba(153,60,29,0.15); }
[data-campus="ksdl"] { --accent:#C4830A; --accent-bg:rgba(196,131,10,0.08); --accent-dim:rgba(196,131,10,0.15); }
[data-campus="kfxe"] { --accent:#0A7A6E; --accent-bg:rgba(10,122,110,0.08); --accent-dim:rgba(10,122,110,0.15); }
[data-campus="kedc"] { --accent:#1B5E8A; --accent-bg:rgba(27,94,138,0.08);  --accent-dim:rgba(27,94,138,0.15); }
[data-campus="kbed"] { --accent:#4A2D8F; --accent-bg:rgba(74,45,143,0.08);  --accent-dim:rgba(74,45,143,0.15); }
[data-campus="jet"]  { --accent:#C4973A; --accent-bg:rgba(196,151,58,0.08); --accent-dim:rgba(196,151,58,0.15); }
[data-campus="hub"]  { --accent:#993C1D; --accent-bg:rgba(153,60,29,0.08);  --accent-dim:rgba(153,60,29,0.15); }

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html  { font-size:16px; scroll-behavior:smooth; }
body  { font-family:var(--font-body); color:var(--text); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
img   { display:block; max-width:100%; }
a     { color:var(--accent); text-decoration:none; }
a:hover { opacity:.85; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
.display-xl { font-family:var(--font-display); font-size:clamp(64px,10vw,128px); letter-spacing:4px;   line-height:.9; }
.display-lg { font-family:var(--font-display); font-size:clamp(48px,7vw,84px);   letter-spacing:3px;   line-height:.95; }
.display-md { font-family:var(--font-display); font-size:clamp(32px,5vw,56px);   letter-spacing:2px;   line-height:1; }
.display-sm { font-family:var(--font-display); font-size:clamp(22px,3vw,36px);   letter-spacing:1.5px; line-height:1.05; }
.label       { font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gray); }
.label-accent{ font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container    { max-width:var(--container); margin:0 auto; padding:0 2rem; }
.container-sm { max-width:960px; margin:0 auto; padding:0 2rem; }
.section      { padding:5rem 0; }
.section-sm   { padding:3rem 0; }
.divider      { height:1px; background:var(--gray-light); }
.grid-2       { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3       { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4       { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-sm { gap:.5rem; } .gap-md { gap:1rem; } .gap-lg { gap:2rem; }

/* ── HEADER ──────────────────────────────────────────────────── */
.apex-header {
  background:var(--navy); position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(255,255,255,0.08);
  height:64px; display:flex; align-items:center;
}
.apex-header-inner {
  max-width:var(--container); margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.apex-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.apex-logo-mark {
  width:36px; height:36px; background:var(--accent);
  clip-path:polygon(50% 0%,100% 100%,0% 100%); flex-shrink:0;
}
.apex-logo-text { color:white; font-family:var(--font-display); font-size:20px; letter-spacing:2px; }
.apex-logo-sub  { color:rgba(255,255,255,0.4); font-size:9px; font-family:var(--font-mono); letter-spacing:1px; }
.apex-campus-tag {
  background:var(--accent-dim); color:var(--accent);
  border:1px solid var(--accent-bg); border-radius:20px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:2px; padding:3px 10px; margin-left:8px;
}

/* ── HAMBURGER ───────────────────────────────────────────────── */
.apex-hamburger {
  background:none; border:none; cursor:pointer;
  padding:8px; display:flex; flex-direction:column; gap:5px; z-index:200;
}
.apex-hamburger span { display:block; width:24px; height:2px; background:white; border-radius:2px; transition:all .3s; }
.apex-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.apex-hamburger.open span:nth-child(2) { opacity:0; }
.apex-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── SIDEBAR NAV ─────────────────────────────────────────────── */
.apex-nav-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:150;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.apex-nav-overlay.open { opacity:1; pointer-events:all; }
.apex-nav-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:300px;
  background:var(--navy); z-index:160;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,0.08); overflow-y:auto;
}
.apex-nav-sidebar.open { transform:translateX(0); }
.apex-nav-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.apex-nav-logo-mark { width:38px; height:38px; background:var(--accent); clip-path:polygon(50% 0%,100% 100%,0% 100%); flex-shrink:0; }
.apex-nav-logo-text { color:white; font-family:var(--font-display); font-size:20px; letter-spacing:2px; }
.apex-nav-logo-sub  { color:rgba(255,255,255,0.4); font-size:9px; font-family:var(--font-mono); letter-spacing:1px; }
.apex-nav-section   { padding:.625rem 1.5rem .375rem; color:rgba(255,255,255,0.25); font-size:10px; font-family:var(--font-mono); letter-spacing:2px; text-transform:uppercase; margin-top:.5rem; }
.apex-nav-item      { display:flex; align-items:center; gap:12px; padding:11px 1.5rem; color:rgba(255,255,255,0.6); text-decoration:none; font-size:14px; font-weight:500; transition:all .15s; border-left:3px solid transparent; }
.apex-nav-item:hover{ color:white; background:rgba(255,255,255,0.04); opacity:1; }
.apex-nav-item.active { color:white; background:var(--accent-dim); border-left-color:var(--accent); }
.apex-nav-item .nav-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.apex-nav-footer    { margin-top:auto; padding:1.25rem 1.5rem; border-top:1px solid rgba(255,255,255,0.08); }
.apex-nav-footer a  { display:block; color:rgba(255,255,255,0.3); font-size:12px; text-decoration:none; margin-bottom:.375rem; font-family:var(--font-mono); }
.apex-nav-footer a:hover { color:rgba(255,255,255,0.7); opacity:1; }

/* ── ANNOUNCEMENT BANNER ─────────────────────────────────────── */
.apex-banner { display:none; width:100%; padding:.75rem 3rem; text-align:center; font-size:14px; font-weight:500; position:relative; align-items:center; justify-content:center; }
.apex-banner.visible { display:flex; }
.apex-banner a { font-weight:700; text-decoration:underline; color:inherit; }
.apex-banner-dismiss { position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:18px; opacity:.7; color:inherit; padding:0 .5rem; }
.apex-banner-dismiss:hover { opacity:1; }
.apex-banner-coral { background:#993C1D; color:white; }
.apex-banner-navy  { background:#0B1829; color:white; border-bottom:1px solid rgba(255,255,255,0.1); }
.apex-banner-amber { background:#854F0B; color:white; }
.apex-banner-teal  { background:#0F6E56; color:white; }
.apex-banner-red   { background:#DC2626; color:white; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:10px 20px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; font-family:var(--font-body); cursor:pointer; border:none; transition:all .15s; text-decoration:none; letter-spacing:.5px; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); opacity:1; }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-lg { padding:14px 32px; font-size:14px; }
.btn-primary   { background:var(--accent); color:white; }
.btn-secondary { background:var(--navy); color:white; }
.btn-ghost     { background:var(--off-white); color:var(--navy); border:1px solid var(--gray-light); }
.btn-outline   { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn-danger    { background:#FEE2E2; color:var(--red); border:1px solid #FECACA; }
.btn-success   { background:var(--teal); color:white; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card { background:white; border:1px solid var(--gray-light); border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card-body   { padding:1.5rem; }
.card-footer { padding:1rem 1.5rem; border-top:1px solid var(--gray-light); }
.card-accent { border-left:4px solid var(--accent); }
.card-dark   { background:var(--navy); color:white; border-color:rgba(255,255,255,0.08); }

/* ── STATS ───────────────────────────────────────────────────── */
.stat-val   { font-family:var(--font-display); font-size:48px; color:var(--accent); line-height:1; }
.stat-label { font-family:var(--font-mono); font-size:10px; color:var(--gray); letter-spacing:2px; margin-top:.375rem; }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge        { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-family:var(--font-mono); font-weight:600; }
.badge-green  { background:#DCFCE7; color:#15803D; }
.badge-red    { background:#FEE2E2; color:#991B1B; }
.badge-amber  { background:#FEF3C7; color:#854F0B; }
.badge-blue   { background:#DBEAFE; color:#1D4ED8; }
.badge-navy   { background:var(--navy); color:white; }
.badge-accent { background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-bg); }

/* ── FORMS ───────────────────────────────────────────────────── */
.field-group    { margin-bottom:1rem; }
.field-label    { display:block; font-size:10px; font-family:var(--font-mono); color:var(--gray); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.field-input    { width:100%; padding:9px 12px; border:1.5px solid var(--gray-light); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body); outline:none; transition:border-color .15s; }
.field-input:focus { border-color:var(--accent); }
.field-select   { width:100%; padding:9px 12px; border:1.5px solid var(--gray-light); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body); outline:none; background:white; cursor:pointer; }
.field-textarea { width:100%; padding:9px 12px; border:1.5px solid var(--gray-light); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body); resize:vertical; outline:none; min-height:80px; }

/* ── TABLES ──────────────────────────────────────────────────── */
.apex-table    { width:100%; border-collapse:collapse; background:white; border:1px solid var(--gray-light); border-radius:var(--radius-md); overflow:hidden; }
.apex-table th { background:var(--off-white); padding:9px 14px; text-align:left; font-size:11px; font-family:var(--font-mono); color:var(--gray); letter-spacing:.5px; border-bottom:2px solid var(--gray-light); }
.apex-table td { padding:10px 14px; font-size:14px; border-bottom:1px solid var(--gray-light); vertical-align:middle; }
.apex-table tr:last-child td { border-bottom:none; }
.apex-table tr:hover td { background:#FAFBFD; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero-dark { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%); color:white; padding:7rem 2rem 5rem; text-align:center; border-bottom:4px solid var(--accent); position:relative; overflow:hidden; }
.hero-dark::before { content:''; position:absolute; top:-50%; right:-20%; width:400px; height:400px; background:radial-gradient(circle,var(--accent-dim) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.hero-label { color:var(--accent); font-size:11px; letter-spacing:4px; font-family:var(--font-mono); margin-bottom:1.25rem; }
.hero-sub   { font-size:18px; color:rgba(255,255,255,0.75); max-width:720px; margin:0 auto; font-weight:300; line-height:1.65; }

/* ── CALLOUTS ────────────────────────────────────────────────── */
.callout        { padding:1.25rem 1.5rem; border-radius:var(--radius-sm); margin:1.25rem 0; }
.callout-blue   { background:var(--sky); border-left:4px solid var(--blue); }
.callout-amber  { background:#FEF3C7; border-left:4px solid var(--amber); }
.callout-red    { background:#FEE2E2; border-left:4px solid var(--red); }
.callout-green  { background:#DCFCE7; border-left:4px solid var(--teal); }
.callout-accent { background:var(--accent-bg); border-left:4px solid var(--accent); }
.callout-title  { font-weight:700; color:var(--navy); font-size:14px; margin-bottom:.375rem; }

/* ── TOAST ───────────────────────────────────────────────────── */
.apex-toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--navy); color:white; padding:.75rem 1.25rem; border-radius:var(--radius-md); font-size:13px; font-weight:500; z-index:600; transform:translateY(80px); opacity:0; transition:all .3s; pointer-events:none; border-left:4px solid var(--accent); }
.apex-toast.show { transform:translateY(0); opacity:1; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.apex-footer        { background:var(--navy); color:white; padding:3rem 2rem 2rem; }
.apex-footer-inner  { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
.apex-footer h4     { font-family:var(--font-display); font-size:16px; letter-spacing:2px; color:white; margin-bottom:1rem; }
.apex-footer p,.apex-footer a { color:rgba(255,255,255,0.55); font-size:13px; text-decoration:none; display:block; margin-bottom:.5rem; line-height:1.7; }
.apex-footer a:hover { color:white; opacity:1; }
.apex-footer-bottom { border-top:1px solid rgba(255,255,255,0.08); margin-top:2rem; padding-top:1.5rem; color:rgba(255,255,255,0.3); font-size:11px; font-family:var(--font-mono); text-align:center; letter-spacing:1px; }
.apex-footer-accent-bar { height:3px; background:var(--accent); }

/* ── CAMPUS NETWORK BAR ──────────────────────────────────────── */
.campus-network-bar   { background:rgba(255,255,255,0.04); border-top:1px solid rgba(255,255,255,0.06); padding:.75rem 2rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.campus-network-label { font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,0.3); letter-spacing:2px; white-space:nowrap; }
.campus-network-link  { font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,0.4); text-decoration:none; letter-spacing:1px; transition:color .15s; }
.campus-network-link:hover { color:white; opacity:1; }
.campus-network-link.current { color:var(--accent); }

/* ── SKELETON LOADING ────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,var(--gray-light) 25%,#f0f4f8 50%,var(--gray-light) 75%); background-size:200% 100%; animation:skeleton-loading 1.5s infinite; border-radius:var(--radius-sm); }
@keyframes skeleton-loading { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px){ .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .apex-footer-inner { grid-template-columns:1fr; }
  .container,.container-sm { padding:0 1.25rem; }
  .section { padding:3rem 0; }
  .hero-dark { padding:5rem 1.25rem 3rem; }
}