/* Better Ways of Working Stylesheet */
:root{
  --bg:#0b0f14; --surface:#111820; --card:#151e28; --text:#e8eef5;
  --muted:#a8b3c2; --accent:#7dd3fc; --border:#243041;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(11,15,20,.8);
  backdrop-filter: blur(6px);
  z-index: 1000;   /* keep header above all page content */
}
.logo img{height:60px;width:auto;display:block}

.hero{padding:80px 20px;text-align:center}
.hero h1{font-size:clamp(36px,5vw,64px);margin-bottom:10px}
.lead{color:var(--muted);max-width:60ch;margin:0 auto 20px}
.cta{display:inline-block;margin-top:16px;padding:14px 24px;border-radius:12px;
  background:linear-gradient(135deg,#60a5fa,#7dd3fc);color:#06101a;font-weight:600;
  transition:all .25s ease-in-out}
.cta:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(125,211,252,.3)}
.cta-secondary{display:inline-block;margin-top:16px;padding:14px 24px;border-radius:12px;
  border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);
  font-weight:600;transition:all .25s ease-in-out}
.cta-secondary:hover{background:rgba(255,255,255,.08)}
section{max-width:1100px;margin:60px auto;padding:0 20px}
.highlight{background:var(--card);padding:20px;border-radius:12px;border:1px solid var(--border)}
footer{text-align:center;padding:24px;color:var(--muted);border-top:1px solid var(--border)}
.cta-group{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:24px}
/* Extras for program page */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1.2fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(125,211,252,.15);color:var(--accent);font-weight:600;font-size:.9rem}
.muted{color:var(--muted)}
.center{text-align:center}
.small{font-size:.92rem}
hr.div{border:0;border-top:1px solid var(--border);margin:28px 0}
@media (max-width:900px){
  /* Stack header content instead of cramming into one row */
  header{
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
  }

  .logo img{
    height: 48px;
  }

  /* Make nav a flexible, wrapping row under the logo */
  nav{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
  }

  nav a{
    margin-left: 0;
    font-size: 0.9rem;
  }

  /* Existing grid behavior */
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid-3{grid-template-columns:1fr}
}

/* --- Navigation with dropdowns --- */

.main-nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 12px 24px;
}

/* Top-level nav links */
.main-nav a,
.main-nav .nav-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--text);
  opacity: 0.9;
}

/* Remove left margin from generic nav a in this specific nav */
.main-nav a {
  margin-left: 0;
}

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown .nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Dropdown panel */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 0.5rem 0;
  background: var(--card);                /* uses your dark card color */
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* stronger shadow on dark */
  border-radius: 10px;
  z-index: 9999;
}

/* Dropdown items */
.dropdown-menu a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hover on dropdown items */
.dropdown-menu a:hover {
  background-color: rgba(125,211,252,0.12); /* subtle accent tint */
  color: var(--accent);
}

/* "View all" divider */
.dropdown-menu a.view-all {
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

/* Show dropdown on hover (desktop) */
.nav-dropdown:hover .dropdown-menu {
  display: block;
}

/* Mobile tweaks: let nav wrap nicely */
@media (max-width: 900px) {
  .main-nav {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 16px;
  }
}

.nav-logo img {
  height: 40px;   /* adjust as needed */
  width: auto;
  display: block;
}