/* mega-menu.css — optimized */

:root {
  --color-blue: #003594;
  --color-cta-hover: #E7B326;
  --shadow-light: rgba(0,0,0,0.1);
  --shadow-strong: rgba(0,0,0,0.15);
  --gradient-white-opaque: rgba(255,255,255,0.95);
}

/* 1) Position header for absolute children */
.site-header {
  position: relative;
}

/* 2) Restore nav to static positioning */
.main-navigation {
  position: static;
}

/* 3) Don’t use <li> as a positioning context */
.mega-menu .has-dropdown {
  position: static;
}

/* 4) Clickable label + caret */
.mega-menu .has-dropdown .dropdown-label {
  cursor: pointer;
  position: relative;
  padding-right:1em;
}
.mega-menu .has-dropdown .dropdown-label::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.mega-menu .has-dropdown.open .dropdown-label::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Inline top-level menu */
.main-navigation .mega-menu.menu-inline {
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  font-weight: 400;
}
.main-navigation .mega-menu.menu-inline > li {
  display: inline-block;
  font-size: 1.1rem;
  color: #fff;
  padding-right:1em;
}
.main-navigation .mega-menu.menu-inline a {
  text-decoration: none;
  color: #FFFFFF;
}
.main-navigation .mega-menu.menu-inline > li:hover,
.main-navigation .mega-menu.menu-inline > li > a:hover {
  text-decoration: underline;
  color: #fff;
}

/* 5) Dropdown panel: full-width background, 50vh height */
.mega-menu .mega-dropdown {
  display: none;
  position: absolute;
  top: 6.5vh;
  left: 31%!important;
  width: 100vw;
  height: 86vh;
  box-sizing: border-box;
  overflow-y: auto;
  background: #00205B;
  box-shadow: 0 4px 8px var(--shadow-light);
  z-index: 999;
}
.mega-menu .has-dropdown.open > .mega-dropdown {
  display: block;
}

/* 6) Inner wrapper: capped at 1400px & centered */
.mega-menu .mega-dropdown-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 60px;
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
}

/* 8) Link styling inside inner (left column) */
.mega-menu .mega-dropdown-inner > a {
  display: block;
  margin-bottom: .5rem;
  text-decoration: underline;
  font-size: 2em;
  text-transform: capitalize;
  color: var(--color-blue);
}
.mega-menu .mega-dropdown-inner > a:hover {
  color: #FF5B45;
}
.mega-menu .mega-dropdown-inner > a:last-child {
  margin-bottom: 0;
}

.mega-menu .mega-dropdown-inner .mega-links-col > a {
  display: block;
  font-size: 1.5rem;
  color: #FFFFFF;
  text-decoration: none;
}
.mega-menu .mega-dropdown-inner .mega-links-col > a:hover {
  text-decoration: underline;
  color: #FFB81C;
}

h3.mega-links-col-title {
  font-size: 1.5rem;
  color: #FFB81C;
}

h3.mega-cta-title {
	color:#fff!important;
}

/* 9) CTA container (right column) */
.mega-menu .mega-cta-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

/* 10) CTA block styling and hover */
.mega-menu .mega-cta-block {
  position: relative;
  overflow: hidden;
  width: 100%;
  flex: 0 1 calc((100% - 2rem) / 3);
  max-width: calc((100% - 2rem) / 3);
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 6px solid var(--color-blue);
  box-shadow: 0 2px 4px var(--shadow-light);
  transition: transform .3s ease, box-shadow .3s ease;
  text-transform: capitalize;
}
.mega-menu .mega-cta-block:hover {
  transform: translateY(-5px);
  border: 6px solid #ffb81c;
}

.mega-menu .mega-cta-block img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Overlay gradient */
.mega-menu .mega-cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0)    100%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.mega-menu .mega-cta-block:hover::before {
  background: rgba(0, 0, 0, 0.95);
  opacity: 0.8;
}

/* bump text & link above the overlay */
.mega-menu .mega-cta-text,
.mega-menu .mega-cta-link {
  position: relative;
  z-index: 1;
}

/* 11) Title always visible, caption reveal on hover */
.mega-menu .mega-cta-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  padding: 1rem;
  box-sizing: border-box;
}
.mega-menu .mega-cta-caption {
  display: none;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}
.mega-menu .mega-cta-block:hover .mega-cta-caption {
  display: block;
}

/* 12) Full-block invisible link overlay */
.mega-menu .mega-cta-link {
  position: absolute;
  inset: 0;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}

h3.mega-cta-title {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
  color: #FFFFFF;
}

.mega-cta-container:has(.mega-cta-block:nth-child(2)):not(:has(.mega-cta-block:nth-child(3))) .mega-cta-block {
  flex: 0 1 calc((100% - 1rem) / 2);
  max-width: calc((100% - 1rem) / 2);
}

@media (max-width: 1024px) {
  .mega-menu .mega-cta-block {
    flex: 0 1 calc((100% - 1rem) / 2);
    max-width: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 768px) {
  .mega-menu .mega-cta-block {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Mega dropdown inner: CTA vs no-CTA layouts
   ----------------------------------------------------------------------- */
/* Default grid container */
.mega-menu .mega-dropdown-inner {
  display: grid;
  gap: 1rem;
}

/* With CTAs, split into links (1fr) | CTAs (2fr) */
.mega-menu .mega-dropdown-inner.has-cta {
  grid-template-columns: 1fr 2fr;
}

/* Without CTAs, single full-width column */
.mega-menu .mega-dropdown-inner.no-cta {
  grid-template-columns: 1fr;
}

/* Hide empty CTA container */
.mega-menu .mega-dropdown-inner.no-cta .mega-cta-container {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Inner links grid (left side)
   ----------------------------------------------------------------------- */
.mega-menu .mega-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

div.closing-soon-program {
	padding: 15px;
    border-radius: 10px;
}

div.closing-soon-title {
	margin-bottom: 10px;
    text-decoration: underline;
}

div.mega-links-col.closing-soon-col h3.mega-links-col-title {
    margin-bottom: 20px;
    padding: 7px 15px;
    background-color: #ffb81c;
    color: #003594;
    font-size: 1.2rem;
    width: auto;
    font-weight: 900;
    display: inline-block;
}

span.program-title {
	text-decoration: underline;
    font-size: 1.2rem;
}

span.deadline {
	color: #ffb81c;
}

/* Make sure nothing clips the dropdown */
.site-header,
.elementor-location-header { overflow: visible !important; }

/* Safety: prevent accidental horizontal scroll from any edge cases */
html, body { overflow-x: hidden; }

/* Dropdown panel: full-viewport width, centered under header */
.mega-menu .mega-dropdown {
  display: none;
  position: absolute;        /* stays tied to header bottom */
  top: 6.5vh;
  /* Center relative to header and burst to full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50svw;       /* use dynamic viewport units (no scrollbar jitter) */
  margin-right: -50svw;
  width: auto;               /* width is now governed by margins above */
  max-width: none;

  height: min(86svh, 86vh);  /* robust across mobile browser chrome */
  box-sizing: border-box;
  overflow-y: auto;
  background: #00205B;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  z-index: 9999;
}

.mega-menu .has-dropdown.open > .mega-dropdown { display: block; }

/* Inner wrapper: centered/capped grid */
.mega-menu .mega-dropdown-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px; /* add side padding so content doesn't kiss the edges */
  display: grid;
  gap: 1rem;
  box-sizing: border-box;

:root {
  --header-offset: 10svh; /* always keep this much space above the panel */
}

html, body { overflow-x: hidden; }

.mega-menu .mega-dropdown {
  position: fixed;
  top: 6.5vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100svw;
  height: calc(100svh - var(--header-offset)); /* fills below the header */
  margin: 0;
  overflow-y: auto;
  background: #00205B;
  z-index: 9999;
}

/* keep your inner wrapper the same */
.mega-menu .mega-dropdown-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  gap: 1rem;
  box-sizing: border-box;
}

}

/* --- Applications Closing Soon — visual to match screenshot --- */

/* Column container */
.mega-links-col.closing-soon-col {
  /* keep grid spacing from your system */
}

/* Section heading (yellow text, no background) */
.mega-links-col.closing-soon-col .closing-soon-title {
  background: none !important;
  color: #FFB81C !important;   /* Pitt gold */
  padding: 0 !important;
  margin: 0 0 .4rem 0 !important;
  font-weight: 800;
  font-size: 1.1rem;           /* small label size */
  text-transform: none;
}

/* Program title (big, white, like your screenshot) */
.mega-links-col.closing-soon-col .closing-soon-program .program-title {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  margin: .2rem 0 .35rem;
}
.mega-links-col.closing-soon-col .closing-soon-program .program-title:hover {
  color: #FFB81C;
  text-decoration: underline;
}

/* Deadline (muted blue) */
.mega-links-col.closing-soon-col .closing-soon-program .deadline {
  color: #8FB3FF; /* legible on navy; tweak if you prefer */
  font-size: 0.95rem;
  margin-bottom: .75rem;
}

/* Optional: give this column breathing room when it’s the only item */
.mega-links-col.closing-soon-col .closing-soon-program:last-child {
  margin-bottom: .5rem;
}

mega-links-col-title {
  background: none !important;
  color: #FFB81C !important;
  padding: 0 !important;
  margin: 0 0 .4rem 0 !important;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: none;

}