/* =============================
   GLOBAL RESET
   ============================= */

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0e1218,#07090d);
  color:white;
}


a{
  color:white;
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

img{ max-width:100%; display:block; }

/* =============================
   HEADER / TOP BAR
   ============================= */
.header{
  background:white;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.header .logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:black;
}

.header .nav-buttons{
  display:flex;
  gap:10px;
}

.header button{
  background:white;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
}

/* =============================
   LAYOUT
   ============================= */
.site-container{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:20px;
  padding:20px;
}


/* =============================
   MAIN CONTENT AREA
   ============================= */
.main-content{
  background:white;
  border-radius:var(--radius);
  padding:24px;
}

.page-title{
  font-size:28px;
  margin:0 0 12px;
}

/* =============================
   CARDS
   ============================= */
.card{
  background:white;
  border:1px solid var(--brand-border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:16px;
}

/* =============================
   TABLES (Videos, Data Lists)
   ============================= */
.table{
  width:100%;
  border-collapse:collapse;
  border-radius:var(--radius);
}

.table th{
  background:#111827;
  color:#fff;
  padding:10px;
  text-align:left;
}

.table td{
  padding:10px;
  border-top:1px solid var(--brand-border);
}

/* =============================
   BUTTONS
   ============================= */
.btn{
  background:white;
  border:none;
  color:#fff;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-weight:600;
  transition:background var(--transition),transform var(--transition);
}

.btn:hover{ background:#1d4ed8; }
.btn:active{ transform:translateY(1px); }

.btn-outline{
  background:transparent;
  border:1px solid var(--brand-border);
  color:var(--brand-text);
}

/* =============================
   INPUTS & SEARCH
   ============================= */
input,select{
  background:white;
  border:1px solid var(--brand-border);
  color:black;
  padding:6px 10px;
  border-radius:var(--radius-sm);
}

input:focus{
  outline:none;
  border-color:var(--brand-accent);
}

/* =============================
   FOOTER
   ============================= */
.footer{
  margin-top:40px;
  font-size:13px;
  color:var(--brand-muted);
}
/* =============================
   FIX: NAV DROPDOWN LAYERING
   ============================= */

/* Make header sit above page content */
.header{
  position: sticky;   /* keeps it at top as you scroll; change to relative if you don't want sticky */
  top: 0;
  z-index: 9999;
  overflow: visible;  /* prevents dropdown from being clipped */
}

/* Ensure dropdown itself is above everything */
.header .dropdown,
.header .dropdown-menu,
.header .menu,
.header .nav-menu{
  position: absolute;
  z-index: 10000;
}