:root{
  /* Typography */
  --brand-font: 'Lora', serif;                 /* body */
  --heading-font: 'Montserrat', sans-serif;    /* headings + nav */

  /* Colors */
  --brand-bg: #ffffff;                         /* navbar background */
  --brand-text: #000000;                       /* navbar/link text */
  --brand-accent: #E86AA6; 		       /* CMA pink */
  --brand-muted: #54595F;                      /* secondary gray */

  --page-bg: #ffffff;                          /* page background */
  --card-bg: #ffffff;                          /* cards / panels */

  /* Banner overlay behind hero text */
  --hero-overlay: rgba(0,0,0,.18);  


  /* Navbar height (raise if logo is tall) */
  --nav-height: 120px;
}

/* Body & headings */
body{
  font-family: var(--brand-font);
  font-size: 16px;
  line-height: 1.571;
  font-weight: 400;
  color: #919191;
  background: var(--page-bg);
  margin: 0;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--heading-font);
  color: #000;
}

/* Navbar (light) */
.navbar{
  display:flex; gap:18px; align-items:center;
  padding:0 20px;
  background: var(--brand-bg);
  color: var(--brand-text);
  height: var(--nav-height);
  position: sticky; top:0; z-index:10;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.navbar .brand{
  display:flex; align-items:center; gap:10px;
  color: var(--brand-text);
  text-decoration:none; font-weight:700; letter-spacing:.3px;
}
.navbar .brand img{ height:100px; width:auto; display:block; } /* adjust if needed */

/* Nav links (Montserrat, uppercase, letter spacing like your snippet) */
.navbar .nav-link{
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #000;
  padding: 0 3px;
  text-decoration: none;
  opacity: 1;
}
/* allow hover effects but keep them visually muted + non-navigating via onclick="return false" */
.navbar a.disabled { opacity:.65; text-decoration:none; cursor: default; }
.badge{ background: var(--brand-accent); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; }

/* Top-right nav CTAs */
.nav-ctas{display:flex;align-items:center;gap:10px;margin-left:auto}
.pill{display:inline-block;border-radius:999px;text-decoration:none;font-weight:700;letter-spacing:.02em;line-height:1;transition:opacity .15s ease}
.pill:hover{opacity:.9}

/* Bigger pink Student Portal button */
.pill-student{padding:10px 18px;font-size:14px;background:#f3a6c8;border:2px solid #f3a6c8;color:#000}

/* Keep Admin as smaller pink */
.pill-admin{padding:8px 14px;font-size:13px;background:#f3a6c8;border:2px solid #f3a6c8;color:#000}

@media (max-width:900px){
  .pill-student{font-size:13px;padding:9px 14px}
  .pill-admin{font-size:12px;padding:7px 12px}
}


/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.footer { text-align:center; padding:30px; color:#666; }

/* Hero / banner */
/* Full-width hero, consistent size on all pages */
.hero{
  /* full-bleed */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;                /* add this */
  border-radius: 0;
  box-shadow: none;

  /* background (color only; image set inline in page.ejs) */
  position: relative;
  background-color: #222;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* same size everywhere */
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 0 28px;
}
/* Mobile height control */
@media (max-width: 640px){
  .hero {
    min-height: 380px;   /* tweak to taste: 340–420px */
    padding: 0 20px;     /* slightly smaller side padding on phones */
  }
  .hero h1 {
    font-size: 28px;     /* optional: scale the title on mobile */
    line-height: 1.2;
  }
}

/* overlay & white text */
.hero::after{ content:""; position:absolute; inset:0; background: var(--hero-overlay); }
.hero, .hero h1, .hero p, .hero a { color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hero > * { position: relative; z-index: 1; }




/* Cards & buttons */
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:20px; }
.card{ background: var(--card-bg); border-radius:16px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.btn {
  display:inline-block; border:0; padding:10px 14px;
  border-radius:999px; text-decoration:none; cursor:pointer;
  font-weight:600; letter-spacing:.02em;
}

.btn-primary{
  background: var(--brand-accent);
  color:#fff;
}

.btn-primary:hover{
  filter: brightness(.95);
}

/* Soft pink secondary */
.btn-secondary{
  background: #FBE0EE;          /* light pink */
  color:#111;
  border: 1px solid #F3BCD4;     /* subtle border */
}

.btn-secondary:hover{
  filter: brightness(.97);
}

.btn-danger{ background:#ef4444; color:#fff; }
.btn-success{ background: var(--brand-accent); color:#fff; }
.btn-warning{ background:#f59e0b; color:#111; }

/* Forms & tables */
.form-row{ display:flex; gap:12px; flex-wrap:wrap; }
.form-row input, .form-row select, .form-row textarea{ padding:10px; border:1px solid #d1d5db; border-radius:8px; width:100%; }
label{ font-size: 12px; display:block; color:#374151; margin-bottom:4px; }
form .actions{ margin-top: 10px; display:flex; gap:8px; }
.note{ color:#6b7280; font-size: 13px; }
.table{ width:100%; border-collapse: collapse; background:#fff; }
.table th, .table td{ border-bottom:1px solid #e6e6ee; padding:10px 12px; font-size:14px; }
.drag-order{ font-family:monospace; font-size:12px; }

/* Mobile tweaks */
@media (max-width: 640px){
  .navbar .brand img{ height:56px; }
  :root{ --nav-height: 80px; }
}
/* --- Navbar polish --- */
.navbar { gap: 28px; }
.navbar .brand { margin-right: 8px; }
.navbar .nav-link { transition: color .15s ease, opacity .15s ease; }
.navbar .nav-link:hover { color: var(--brand-accent); opacity: 1; text-decoration: none; }

/* Active/selected page look (optional) */
.navbar .nav-link.is-active { color: var(--brand-accent); position: relative; }
.navbar .nav-link.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background: var(--brand-accent);
}


/* Mobile: scale the logo and nav height down */
@media (max-width: 640px){
  .navbar .brand img { height: 56px; }
  :root { --nav-height: 84px; }
}

/* Admin form niceties */
.form-row > div { flex: 1; min-width: 260px; }
#heroPreview { display: block; }
/* --- Dropdown nav --- */
.navbar { position: sticky; z-index: 20; } /* already sticky; ensure above hero */
.nav-item { position: relative; display: inline-block; }
.nav-item.has-children .nav-parent::after {
  content: "▾"; margin-left: 6px; font-size: .8em; opacity: .7;
}

/* the panel */
.navbar .dropdown {
  display: none;
  position: absolute; left: 0; top: 100%;
  min-width: 200px;
  background: #fff; color: #111;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: 8px;
}

/* show on hover */
.nav-item.has-children:hover > .dropdown { display: block; }

/* dropdown links */
.dropdown-link {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #111;
  border-radius: 6px;
  white-space: nowrap;
}
.dropdown-link:hover { background: #f7f7f9; color: var(--brand-accent); }

/* Optional: indent children visually in admin (not required here, but nice) */
/* .nav-link { padding: 0 3px; } already present */

/* Layout container for links */
.nav-links { display: flex; gap: 18px; align-items: center; }

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none; border: 0;
  font-size: 24px; line-height: 1;
  cursor: pointer; color: var(--brand-text);
}

/* Only show dropdown when .open on mobile (desktop hover is handled by your existing CSS) */
.nav-item.has-children.open > .dropdown { display: block; }

/* Mobile behaviour */
@media (max-width: 840px){
  .nav-toggle { display: block; margin-left: auto; }

  /* collapse the links until menu-open */
  .nav-links { display: none; width: 100%; flex-direction: column; gap: 10px; padding: 10px 0; }
  .navbar.menu-open .nav-links { display: flex; }

  /* full-width tap targets */
  .nav-links .nav-item,
  .nav-links .nav-link { display: block; width: 100%; padding: 8px 0; }

  /* dropdown sits inline on mobile */
  .navbar .dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 14px;
    display: none; /* only show when .open */
    background: transparent;
  }
  .nav-item.has-children .nav-parent {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
  }
  .nav-item.has-children .nav-parent::after {
    content: "▾"; margin-left: 8px; font-size: .8em; opacity: .7; transition: transform .15s;
  }
  .nav-item.has-children.open .nav-parent::after { transform: rotate(180deg); }
}

/* Keep disabled links non-clicky but allow hover highlight */
.navbar a.disabled { opacity:.65; text-decoration:none; cursor: default; }

/* Accordion */
.accordion .acc-item { 
  border-bottom: 1px solid #eceff3; 
}

.accordion .acc-head{
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  padding: 14px 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion .acc-icon,
.accordion .chev {
  font-weight: 700;
  transition: transform .2s ease;
}

/* Collapsible area — supports either .acc-panel or .acc-body */
.accordion .acc-panel,
.accordion .acc-body {
  overflow: hidden;
  height: 0;                 /* start closed */
  transition: height .28s ease;
  padding: 0 16px;           /* side padding only; no top/bottom so height can be 0 */
}

/* Put vertical padding on an inner wrapper so closed height can be 0 */
.accordion .acc-panel > .inner,
.accordion .acc-body > .inner {
  padding: 12px 0 16px;
}

/* Open state (JS toggles .open on .acc-item) */
.accordion .acc-item.open .acc-icon,
.accordion .acc-item.open .chev {
  transform: rotate(180deg);
}

/* --- Student Portal: program buttons (pink theme) --- */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) { .prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prog-grid { grid-template-columns: 1fr; } }

.prog-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prog-card h3 {
  margin: 0 0 8px;
  font-weight: 700;
}

.prog-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  background: #f3a6c8;        /* brand pink */
  border: 2px solid #f3a6c8;
  color: #000;                 /* readable on light pink */
  text-align: center;
}
.prog-btn:hover { opacity: .9; }

/* Navbar student portal pill */
.nav-pills .pill {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  background: #f3a6c8;
  border: 2px solid #f3a6c8;
  color: #000;
}
.nav-pills .pill:hover { opacity: .9; }
/* --- Navbar CTA pills (matches layout .nav-ctas) --- */
.nav-ctas {
  display: flex;
  gap: 10px;
  margin-left: auto;           /* pushes pills to the right */
  align-items: center;
}

.nav-ctas .pill {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  background: #f3a6c8;         /* brand pink */
  border: 2px solid #f3a6c8;
  color: #000;
  line-height: 1;              /* keeps the pill compact */
}
.nav-ctas .pill:hover { opacity: .9; }

/* Make the Student Portal pill larger than Admin */
.nav-ctas .pill-student {
  padding: 10px 16px;          /* bigger than Admin */
}

/* Optional: keep Admin a touch smaller */
.nav-ctas .pill-admin {
  padding: 8px 12px;
}
/* ===== Admin: higher-contrast nav/header ===== */
.admin-layout .admin-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}

.admin-layout .admin-top strong {
  color: #111;
  font-weight: 800;
}

.admin-layout .admin-top a,
.admin-layout .admin-nav-link {
  color: #1a1a1a;         /* dark text */
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
}

.admin-layout .admin-top a:hover,
.admin-layout .admin-nav-link:hover {
  color: #000;
  text-decoration: underline;
}

.admin-layout .admin-view-site {
  color: #0b5fff;         /* keep “View Site” blue but darker */
  font-weight: 700;
}