/* ==========================================================================
   EduLeave — mobile banner + navigation overrides
   Loaded AFTER templatemo-grad-school.css so it wins on equal specificity.
   Keep theme edits here, not in the vendored theme file.

   Theme tokens (from templatemo-grad-school.css):
     navy   #172238    deep navy  #0c1228    amber  #f5a425
   ========================================================================== */

:root {
  --el-navy: #172238;
  --el-navy-deep: #0c1228;
  --el-amber: #f5a425;
  --el-rule: rgba(250, 250, 250, 0.25);
  --el-nav-breakpoint: 950px;
  --el-tap: 44px;
}

/* Bootstrap 5 removed .sr-only in favour of .visually-hidden; the theme predates
   that, so define it rather than depending on either. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   0. Desktop defaults
   The theme hides the trigger with `a.menu-link { display: none }`. It is now a
   <button>, so that selector no longer reaches it — hide it here instead.
   Above the breakpoint the submenu stays hover-driven via the original anchor,
   and the accordion button is not rendered.
   -------------------------------------------------------------------------- */
.menu-link.el-menu-btn { display: none; }
.el-submenu-toggle { display: none; }

/* --------------------------------------------------------------------------
   1. Scroll lock
   The banner partial used to set `html, body { overflow: hidden }` globally and
   only release it at 768px, while the nav collapses at 950px — leaving 769-950px
   unscrollable. Scroll locking now applies only while the mobile menu is open,
   and is driven by a class on <body> rather than a viewport guess.
   -------------------------------------------------------------------------- */
body.el-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* Scrim. The panel shrink-wraps its items, so the hero sat directly beneath it and
   its amber CTA read as a stray block. Dimming the page makes the panel deliberate.
   .main-header is z-index 12 and the nav lives inside it, so 10 sits under both. */
body.el-nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(9, 14, 26, 0.62);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Collapsed-by-default nav, without waiting on JS
   The theme gates the collapsed state behind `.js`, which custom.js only adds at
   $(document).ready — so the menu paints fully open first. Gate on the media
   query instead; JS readiness is no longer part of the initial paint.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {

  nav#menu.main-nav {
    max-height: 0;
    height: auto;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.22s;
  }

  /* Sized to content, capped by viewport — replaces the theme's fixed 20em.
     The header is ~80px, so the panel may use everything below it. */
  nav#menu.main-nav.active {
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    visibility: visible;
    transition:
      max-height 0.24s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Fallback for browsers without svh (pre-2022 Safari/Chrome). */
  @supports not (height: 100svh) {
    nav#menu.main-nav.active { max-height: calc(100vh - 80px); }
  }

  /* ---- Hamburger: real button, real target, morphing glyph ---------------- */
  .menu-link.el-menu-btn {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--el-tap);
    height: var(--el-tap);
    margin: 12px 18px 0 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .menu-link.el-menu-btn:hover,
  .menu-link.el-menu-btn[aria-expanded="true"] {
    border-color: var(--el-amber);
    background-color: rgba(245, 164, 37, 0.12);
  }

  .menu-link.el-menu-btn:focus-visible {
    outline: 2px solid var(--el-amber);
    outline-offset: 2px;
  }

  /* Three bars that fold into an X. Cheaper and crisper than swapping icons. */
  .el-burger {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background-color 0.2s ease;
  }

  .el-burger::before,
  .el-burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .el-burger::before { transform: translateY(-7px); }
  .el-burger::after  { transform: translateY(7px); }

  [aria-expanded="true"] .el-burger { background-color: transparent; }
  [aria-expanded="true"] .el-burger::before { transform: rotate(45deg); }
  [aria-expanded="true"] .el-burger::after  { transform: rotate(-45deg); }

  /* ---- Menu panel -------------------------------------------------------- */
  nav#menu .main-menu {
    background-color: var(--el-navy);
    border-top: 1px solid var(--el-rule);
  }

  /* Theme puts padding:15px 0 on every nav anchor; combined with a 44px min-height
     the top-level rows ran tall too. 46px is still a comfortable tap target. */
  nav#menu .main-menu > li > a,
  nav#menu .main-menu .el-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 12px;
    line-height: 1.4;
  }

  /* ---- Submenus as real accordions --------------------------------------
     The theme forces `.sub-menu { opacity:1; visibility:visible; position:static }`
     at this width, so every submenu is permanently expanded — 8 stacked rows for a
     logged-out visitor, which overflowed the old fixed 20em panel and buried
     "Log in / Register" in an inner scroll. Collapse them; open on tap.
     ---------------------------------------------------------------------- */
  nav#menu .main-menu li.has-submenu > .sub-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    position: static;
    width: 100%;
    background-color: var(--el-navy-deep);
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* max-height, not `grid-template-rows: 0fr`. The grid trick defines a SINGLE
     explicit track, so with three <li> children only the first one collapsed and
     the rest fell into implicit auto rows that never hid — which rendered the
     first item as a blank strip and left items 2-3 permanently visible.
     3 items x 44px tap target = 132px, so 24rem clears any submenu here. */
  nav#menu .main-menu li.has-submenu.el-open > .sub-menu {
    max-height: 24rem;
  }

  /* Below the breakpoint the accordion button replaces the href="#" anchor,
     which did nothing on tap. */
  .el-submenu-label { display: none !important; }

  .el-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 11px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--el-rule);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.5px;
    cursor: pointer;
  }

  .el-submenu-toggle:focus-visible {
    outline: 2px solid var(--el-amber);
    outline-offset: -2px;
  }

  .el-submenu-toggle[aria-expanded="true"] { color: var(--el-amber); }

  .el-caret {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .el-submenu-toggle[aria-expanded="true"] .el-caret {
    transform: translateY(2px) rotate(-135deg);
  }

  /* Child rows read as recessed: inset shadow, quieter type, and a small amber
     marker set against the centred label. The previous 3px border-left sat at the
     panel edge while the text was centred, so it read as a stray artifact rather
     than as hierarchy. */
  nav#menu .sub-menu {
    box-shadow: inset 0 6px 10px -8px rgba(0, 0, 0, 0.8);
  }

  /* The theme gives each .sub-menu li margin-bottom:15px + padding-bottom:15px
     (+15px padding-top on :first-child). Stacked on the anchor's own box that
     produced ~89px rows. Zero the li spacing and let the anchor own the height. */
  nav#menu .sub-menu li {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    line-height: 1;
  }

  nav#menu .sub-menu li:first-child { padding-top: 0; }

  nav#menu .sub-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 24px;
    line-height: 1.4;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(250, 250, 250, 0.1);
  }

  nav#menu .sub-menu li a::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--el-amber);
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }

  nav#menu .sub-menu li a:hover,
  nav#menu .sub-menu li a:active {
    color: #fff;
  }

  nav#menu .sub-menu li a:hover::before {
    opacity: 0.9;
  }

  /* Parent row stays the anchor of the group while its children are open —
     a quiet rule change, no fill. */
  .has-submenu.el-open > .el-submenu-toggle {
    border-bottom-color: rgba(245, 164, 37, 0.3);
  }

  nav#menu .main-menu li a:focus-visible {
    outline: 2px solid var(--el-amber);
    outline-offset: -2px;
  }
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

/* Gradient stands in for the video: same navy family as the .video-overlay that
   sits on top of it, so the hero reads identically whether or not video plays. */
.main-banner {
  background:
    radial-gradient(115% 85% at 78% 12%, #223354 0%, rgba(34, 51, 84, 0) 58%),
    linear-gradient(168deg, var(--el-navy) 0%, var(--el-navy-deep) 100%);
}

/* Mobile viewport units: 100vh includes the retracting URL bar, so the hero
   jumped on first scroll. svh is the stable small-viewport height. */
@supports (height: 100svh) {
  #bg-video { min-height: 100svh; max-height: 100svh; }
}

/* Long single words ("Hassle") can exceed 320px at the theme's 36px. Scale
   fluidly instead of stepping, and allow a break rather than overflowing. */
@media screen and (max-width: 767px) {
  .main-banner .caption h2 {
    font-size: clamp(1.75rem, 8.5vw, 2.25rem);
    margin-top: 18px;
    margin-bottom: 18px;
    overflow-wrap: break-word;
  }

  .main-banner .caption h6 {
    font-size: clamp(0.875rem, 3.6vw, 1.125rem);
  }

  .main-banner .caption { width: 88%; }

  .main-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--el-tap);
  }
}

/* Phones never download the 8 MB MP4 — the gradient above is the hero.
   #bg-video's min-height:100vh was the ONLY thing giving .main-banner its height,
   so hiding it collapsed the hero to nothing and let the features section slide up
   under the fixed 80px header. The banner now carries its own height. */
.main-banner {
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .main-banner { min-height: 100svh; }
}

@media screen and (max-width: 767px) {
  /* The theme's max-height:100% resolves to none against body's auto height, but
     pin it explicitly so the min-height above cannot be clamped away. */
  .main-banner { max-height: none; }

  /* Video plays at phone widths too. Absolutely positioned so the banner's own
     min-height governs the hero box and the video simply fills it.

     z-index MUST be reset. The theme sets z-index:-1, which is inert while the
     video is static (as it is on desktop) but takes effect the moment it becomes
     positioned — painting the video behind .main-banner's own gradient, i.e.
     invisible. z-index:0 puts it above the background, below the overlay. */
  #bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    object-fit: cover;
  }

  .video-overlay { z-index: 1; }
  .main-banner .caption { z-index: 2; }

  /* Contain those three. .main-banner is position:relative with z-index:auto, so
     without this the caption's z-index:2 competed globally and painted over
     anything lower — the contact modal included. */
  .main-banner { z-index: 0; }
}

/* --------------------------------------------------------------------------
   5. Features section ("What we do? / Who we are? / How it works?")
   The theme positions .features-content absolutely against a .features-thumb
   image that this project's markup does not include, so every .features-post is
   zero-height and all three panels collapse onto the same point. Restoring flow
   layout when the thumb is genuinely absent fixes it at every width without
   changing the theme's behaviour where a thumb IS present.
   -------------------------------------------------------------------------- */
/* Desktop keeps the theme's bottom-anchored panel: .features-content is absolute
   at bottom:0, so slideDown grows it UPWARD out of the bar — the "pops out from
   bottom to top" behaviour. That only works if .features-post has height of its
   own; the theme relied on a .features-thumb image this markup does not have, so
   every post was 0px tall and the three panels collapsed onto one point. Giving
   the post an explicit min-height restores the effect without the image. */
@media screen and (min-width: 993px) {
  .features-post {
    min-height: 104px;
  }

  .features-post > .features-content:only-child {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  /* The expanding panel rises over the banner above, so it must paint on top. */
  section.features { position: relative; z-index: 3; }
  .features-post { z-index: 1; }
  .features-post:hover,
  .features-post.el-open { z-index: 4; }
}

/* Below the desktop breakpoint the cards stack and flow normally — a bottom-
   anchored panel has nothing to anchor against once they are full-width. */
@media screen and (max-width: 992px) {
  .features-post > .features-content:only-child {
    position: static;
  }
}

/* White gutters at desktop: the theme zeroes padding on `section.features .col-4`,
   but this markup uses `col-lg-4 col-12`, so that rule has never matched. Bootstrap's
   gutter padding plus the container's own padding let the page background show
   between and beside the three cards. Zero the gutters and back the whole section
   in the same navy so nothing can show through. */
section.features {
  background-color: var(--el-navy-deep);
}

section.features [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

section.features .row {
  margin-left: 0;
  margin-right: 0;
}

/* Hover-tint is a trap on touch: the amber sticks after the tap that opened a
   panel. Reserve it for real pointers and give touch an explicit pressed state. */
.features-content:hover { background-color: #0c1228; }

@media (hover: hover) and (pointer: fine) {
  .features-content:hover {
    background-color: var(--el-amber);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  }
}

@media screen and (max-width: 992px) {
  /* Stacked, so the theme's column divider points the wrong way. */
  .second-features,
  .third-features {
    border-left: 0;
    border-top: 1px solid rgba(250, 250, 250, 0.1);
  }

  .features-post {
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .features-post:active .features-content {
    background-color: #16203a;
  }

  .features-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--el-tap);
    padding: 18px 20px;
  }

  /* Signals the panel expands — the theme gives no affordance at all. */
  .features-content .content-show h4 {
    display: flex;
    align-items: center;
    margin: 0;
  }

  .features-content .content-show h4::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--el-amber);
    border-bottom: 2px solid var(--el-amber);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s ease;
  }

  .features-post.el-open .features-content .content-show h4::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .features-content h4 i {
    display: inline-block !important;
    margin-bottom: 0 !important;
    margin-right: 12px;
    color: var(--el-amber);
    width: 22px;
    text-align: center;
  }

  /* Open card is marked by a thin edge and a slightly raised surface — no fill,
     no colour flip on the label. */
  .features-post.el-open .features-content {
    background-color: #111a2e;
    box-shadow: inset 2px 0 0 var(--el-amber);
  }

  .features-content .content-hide {
    margin-top: 0;
  }

  .features-content .content-hide p {
    display: block;
    margin: 14px 0 0 34px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.74);
    text-align: left;
  }

  /* Aligns the copy under the label rather than under the icon. */
  .features-content .content-hide p:last-of-type {
    margin-bottom: 4px;
  }
}

/* --------------------------------------------------------------------------
   4. Reduced motion — honour the OS setting for the video and every transition
      added above.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #bg-video { display: none; }

  nav#menu.main-nav,
  nav#menu .main-menu li.has-submenu > .sub-menu,
  nav#menu .sub-menu li a::before,
  .el-burger,
  .el-burger::before,
  .el-burger::after,
  .el-caret,
  .features-post,
  .features-content,
  .features-content .content-show h4::after {
    transition-duration: 0.01ms !important;
  }
}
