/* ============================================================
   EAUED OYO — Design System
   All brand colors defined as CSS custom properties first,
   then consumed throughout. Never use raw hex values below.
   ============================================================ */

/* ── 1. COLOR TOKENS ──────────────────────────────────────── */


/* ============================================================
   GLOBAL BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: max(884px, 100dvh);
  background-color: var(--color-surface);
  font-family: var(--font-body);
  color: var(--color-on-surface);
  margin: 0;
}

/* ============================================================
   MATERIAL SYMBOLS
   ============================================================ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ============================================================
   UTILITY CLASSES  (consumed in HTML via class="…")
   ============================================================ */

/* Glass navigation bar */
.glass-nav {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}

/* Academic deep-blue gradient */
.academic-gradient {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-container) 100%
  );
}

/* Ambient shadow helper */
.shadow-ambient {
  box-shadow: var(--shadow-ambient);
}

/* Strip border when not needed */
.tonal-shift-no-border {
  border: none !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

/* Desktop nav links */
.nav-link {
  color: var(--color-slate-600);
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition-base);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-primary-container);
}
.nav-link.active {
  border-bottom: 2px solid #eab308; /* yellow-500 */
  padding-bottom: 0.25rem;
}

/* CTA button in nav */
.nav-cta {
  background-color: var(--color-primary-container);
  color: var(--color-white);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.nav-cta:hover {
  transform: scale(1.05);
}

/* Mega menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-ambient);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}
.group:hover .mega-menu {
  opacity: 1;
  visibility: visible;
}

/* ── Mobile Menu ─────────────────────────────────────────── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 30, 64, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
  opacity: 1;
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 85vw);
  background: var(--color-surface-container-lowest);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-menu-drawer.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-primary);
}

.mobile-menu-logo {
  color: var(--color-white);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mobile-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-white);
  line-height: 1;
  padding: 0.25rem;
}

.mobile-nav-links {
  flex: 1;
  padding: 1.5rem 0;
  list-style: none;
  margin: 0;
}

.mobile-nav-links li {
  border-bottom: 1px solid var(--color-outline-variant);
}

.mobile-nav-links a,
.mobile-nav-links button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  color: var(--color-primary);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links button:hover {
  background: var(--color-primary-fixed);
  color: var(--color-primary-container);
}

/* Sub-menu accordion inside mobile drawer */
.mobile-sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: var(--color-surface-container-low);
}
.mobile-sub-menu.open {
  max-height: 400px;
}

.mobile-sub-menu a {
  padding-left: 2.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-outline-variant);
}
.mobile-sub-menu a:last-child {
  border-bottom: none;
}

.mobile-menu-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
}

.mobile-apply-btn {
  display: block;
  width: 100%;
  padding: 0.875rem;
  background-color: var(--color-secondary-container);
  color: var(--color-primary);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.mobile-apply-btn:hover {
  transform: scale(1.02);
}

/* Hamburger button */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-primary-container);
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
  .desktop-nav {
    display: none !important;
  }
}

/* ============================================================
   FLOATING APPLY BUTTON
   ============================================================ */
.floating-apply {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 60;
  background-color: var(--color-secondary-container);
  color: var(--color-primary);
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2xl);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.floating-apply:hover {
  transform: scale(1.05);
}
.floating-apply .material-symbols-outlined {
  transition: transform 0.3s ease;
}
.floating-apply:hover .material-symbols-outlined {
  transform: rotate(12deg);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  height: 751px;
  width: 100%;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,30,64,0.80), transparent);
}
.hero-eyebrow {
  color: var(--color-secondary-fixed);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ============================================================
   SECTION EYEBROWS & HEADINGS
   ============================================================ */
.eyebrow {
  color: var(--color-secondary);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   CARDS
   ============================================================ */
.programme-card {
  background: var(--color-surface-container-lowest);
  padding: 3rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  transition: transform 0.3s ease;
}
.programme-card:hover {
  transform: translateY(-4px);
}

.programme-card-dark {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  color: var(--color-white);
}

.news-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
}

.enterprise-card {
  background: var(--color-surface-container-lowest);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}
.enterprise-card:hover {
  box-shadow: var(--shadow-ambient);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #f8fafc; /* near-white to differentiate */
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

.footer-divider {
  border-top: 1px solid #e2e8f0;
}

/* ============================================================
   MISC HELPERS
   ============================================================ */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Scroll-to-top button (controlled by JS) */
#scroll-top-btn {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  z-index: 55;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* PAGER STYLE */
 /* Hero */
    .page-hero {
      position: relative;
      min-height: 320px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      margin-top: 72px;
    }

    .page-hero__bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-container) 100%
      );
    }

    /* Optional: swap .page-hero__bg for an image hero by adding
       an <img class="page-hero__img"> and the overlay below.*/
    .page-hero__img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
    }
    .page-hero__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top,
        rgba(0,20,48,.95) 0%, rgba(0,20,48,.55) 100%);
    } 

    /* Decorative accent line */
    .page-hero__bg::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(
        90deg,
        var(--color-secondary-container) 0%,
        var(--color-secondary) 100%
      );
    }

    .page-hero__content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 3rem 2rem 3.5rem;
    }

    /* Breadcrumb */
    .page-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 1.25rem;
    }
    .page-breadcrumb a,
    .page-breadcrumb span {
      font-family: var(--font-label);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(255,255,255,0.5);
      transition: color 0.2s;
    }
    .page-breadcrumb a:hover     { color: var(--color-secondary-container); }
    .page-breadcrumb .sep        { color: rgba(255,255,255,0.25); }
    .page-breadcrumb .current    { color: var(--color-secondary-container); pointer-events: none; }

    /* Page title */
    .page-hero__title {
      font-family: var(--font-headline);
      font-size: clamp(2rem, 4.5vw, 3.25rem);
      font-weight: 800;
      color: var(--color-white);
      line-height: 1.12;
      letter-spacing: -0.02em;
      max-width: 800px;
      margin: 0;
    }

    /* Optional subtitle — uncomment to use*/
    .page-hero__subtitle {
      margin-top: 1rem;
      font-size: 1.05rem;
      color: rgba(255,255,255,0.68);
      max-width: 600px;
      line-height: 1.7;
    } 

    /* ── Main content wrapper ── */
    .page-main {
      max-width: 1280px;
      margin: 0 auto;
      padding: 4rem 2rem 5rem;
      min-height: 40vh; /* keeps page tall while blank */
    }

    /* ── Content area placeholder ── remove once filled ── */
    .page-main:empty::before,
    .content-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 320px;
      border: 2px dashed var(--color-outline-variant);
      border-radius: var(--radius-lg);
      color: var(--color-on-surface-variant);
      font-family: var(--font-headline);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      gap: 0.75rem;
      text-align: center;
    }
    .content-placeholder .material-symbols-outlined {
      font-size: 2.5rem;
      color: var(--color-outline-variant);
    }