/* Alphabetz Montessori site overrides */

/* ---- Header / menu ---- */
#main-nav {
  position: relative;
  z-index: 1000;
  width: 100%;
  background: #fff;
}
/* Sticky header on scroll (theme JS adds .fixed-top) — ID must not override Bootstrap */
#main-nav.fixed-top {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 1030 !important;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  animation: alphabetzNavIn 0.25s ease;
}
@keyframes alphabetzNavIn {
  from { transform: translateY(-8px); opacity: 0.85; }
  to { transform: translateY(0); opacity: 1; }
}
#main-nav.fixed-top .top-bar {
  display: none !important;
}
/* Avoid white blank strip under sticky nav */
body.nav-is-fixed {
  padding-top: 0;
}
#main-nav.fixed-top + #page-wrapper,
body.nav-is-fixed #page-wrapper {
  /* content scrolls under sticky nav naturally */
}
#main-nav > .row {
  margin: 0;
  width: 100%;
}
#main-nav .navbar {
  position: relative;
  z-index: 1001;
  background-color: #fff !important;
  box-shadow: 1px 5px 10px rgba(49, 49, 49, 0.21);
  min-height: 72px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  display: block;
  width: 100%;
}
#main-nav.fixed-top .navbar {
  box-shadow: none;
}
#main-nav .navbar > .container,
#main-nav .navbar > .nav-bar-inner {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#main-nav .navbar-collapse {
  flex-grow: 1;
  flex-basis: auto;
}
#page-wrapper {
  position: relative;
  z-index: 1;
  clear: both;
}

.nav-cta {
  white-space: nowrap;
  margin-top: 0.25rem;
}

.logo-footer {
  max-height: 70px;
  width: auto;
  height: auto;
  background: transparent;
  padding: 0;
}

.nav-brand.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.nav-brand img,
.nav-brand .brand-logo-dark,
.nav-brand .brand-logo-light {
  max-height: 80px !important;
  /* max-width: 58px !important; */
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Header is light: show dark logo, hide light logo */
.nav-brand .brand-logo-dark {
  display: inline-block;
}
.nav-brand .brand-logo-light {
  display: none;
}

footer .logo-footer {
  max-height: 72px;
}

.location-pick .btn {
  min-width: 220px;
  margin: 0.35rem;
}

.coming-soon-badge {
  display: inline-block;
  font-size: 0.90rem;
  background: #f5a623;
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.35rem;
  /* updates */
}

@media (max-width: 1199.98px) {
  #main-nav .navbar > .container,
  #main-nav .navbar > .nav-bar-inner {
    flex-wrap: wrap;
  }
  #main-nav .navbar-collapse {
    width: 100%;
    background: #fff;
  }
}

/* =========================================================
   Menu — match ABC Tots template (up / down active + hover)
   Active: gold BOTTOM underline only, dark text (no gold fill)
   Hover/open: full-height gold bar from TOP→BOTTOM + white text
   Dropdown: dark blue panel sliding under the item
   ========================================================= */
@media (min-width: 1200px) {
  #main-nav .navbar {
    height: 86px !important;
    min-height: 86px !important;
    padding: 0 !important;
  }
  #main-nav .navbar > .container,
  #main-nav .navbar > .nav-bar-inner {
    align-items: center !important;
    height: 86px;
    min-height: 86px;
  }
  #main-nav .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: stretch;
    align-self: stretch;
    height: 86px;
  }
  #main-nav .navbar-nav {
    align-items: stretch !important;
    height: 86px;
    margin-left: auto;
    margin-bottom: 0;
  }
  #main-nav .navbar-nav > .nav-item {
    display: flex;
    align-items: stretch;
    margin-top: 0 !important;
    height: 86px;
    background: transparent !important;
    border-bottom: 0;
  }
  #main-nav .navbar-nav > .nav-item > .nav-link {
    display: block;
    padding: 0 1.15rem !important;
    margin: 0;
    line-height: 86px !important;
    height: 86px;
    color: #404044 !important;
    white-space: nowrap;
    font-size: 16.5px;
    letter-spacing: 0.5px;
    background: transparent !important;
  }

  /* ACTIVE = bottom gold underline only (like reference About) */
  #main-nav .navbar-nav > .nav-item.active {
    background: transparent !important;
    border-bottom: 6px solid #e4a40f !important;
  }
  #main-nav .navbar-nav > .nav-item.active > .nav-link {
    line-height: 80px !important;
    height: 80px;
    color: #404044 !important;
    background: transparent !important;
  }

  /* HOVER / OPEN = full gold fill top→bottom + white text */
  #main-nav .navbar-nav > .nav-item:hover,
  #main-nav .navbar-nav > .nav-item.show {
    background-color: #e4a40f !important;
  }
  #main-nav .navbar-nav > .nav-item:hover > .nav-link,
  #main-nav .navbar-nav > .nav-item.show > .nav-link,
  #main-nav .navbar-nav > .nav-item:hover > .nav-link:focus,
  #main-nav .navbar-nav > .nav-item.show > .nav-link:focus {
    color: #fff !important;
    background: transparent !important;
  }
  #main-nav .navbar-nav > .nav-item.active:hover,
  #main-nav .navbar-nav > .nav-item.active.show {
    background-color: #e4a40f !important;
    border-bottom-color: #e4a40f !important;
  }
  #main-nav .navbar-nav > .nav-item.active:hover > .nav-link,
  #main-nav .navbar-nav > .nav-item.active.show > .nav-link {
    color: #fff !important;
  }

  /* Kill Bootstrap / maincolors blue */
  #main-nav .navbar-nav .nav-link.active,
  #main-nav .navbar-nav .nav-link:focus {
    color: inherit !important;
    background: transparent !important;
  }
  #main-nav .navbar-nav > .nav-item.show > .nav-link {
    color: #fff !important;
  }

  /* Dropdown flush under gold bar */
  #main-nav .navbar-nav .dropdown-menu {
    margin-top: 0 !important;
    top: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: #035392 !important;
    min-width: 330px;
    box-shadow: 1px -1px 10px 4px rgba(49, 49, 49, 0.21);
  }
  #main-nav .navbar-nav .dropdown-item {
    color: #fff !important;
    padding: 0 1.25rem !important;
    line-height: 45px !important;
    white-space: normal;
    background: transparent !important;
  }
  #main-nav .navbar-nav .dropdown-item:hover,
  #main-nav .navbar-nav .dropdown-item:focus,
  #main-nav .navbar-nav .dropdown-item.active {
    background-color: #e4a40f !important;
    color: #fff !important;
  }

  /* CTA: never gold-fill */
  #main-nav .navbar-nav > .nav-item-cta {
    align-items: center;
    border-bottom: 0 !important;
    height: 86px;
  }
  #main-nav .navbar-nav > .nav-item-cta:hover,
  #main-nav .navbar-nav > .nav-item-cta.show {
    background: transparent !important;
  }
  #main-nav .navbar-nav > .nav-item-cta .nav-cta {
    margin-left: 0.5rem;
    color: #fff !important;
    line-height: normal !important;
    height: auto !important;
    display: inline-block;
  }
}

/* =========================================================
   Page banner — kids collage 1900x560 (all inner pages)
   Uses real <img class="jumbotron-bg-img"> so it cannot stay blank
   ========================================================= */
.jumbotron.jumbotron-fluid,
.jumbotron {
  position: relative !important;
  overflow: hidden !important;
  background-color: #fff !important;
  /* background-image: url("../img/banner-kids-collage.jpg") !important; */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  width: 100%;
  min-height: 220px;
  height: auto;
  aspect-ratio: 1900 / 560;
  max-height: 560px;
  margin-bottom: 0 !important;
}
.jumbotron .jumbotron-bg-img {
  /* position: absolute; */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.jumbotron > .row,
.jumbotron .jumbo-heading {
  position: relative;
  z-index: 2;
}
.jumbotron .jumbo-heading {
  margin-top: -2% !important;
  top: 50%;
  /* transform: translateY(-50%); */
}
@media (min-width: 767px) {
  .jumbotron.jumbotron-fluid,
  .jumbotron {
    min-height: 230px;
    /* height: 230px; */
    aspect-ratio: auto;
    max-height: none;
  }
  
}
@media (max-width: 767px) {
  .jumbotron.jumbotron-fluid,
  .jumbotron {
   
    aspect-ratio: auto;
    
  }
  
}
@media (min-width: 1200px) {
  .jumbotron.jumbotron-fluid,
  .jumbotron {
    /* height: 448px !important;
    min-height: 448px !important; */
  }
}
@media (max-width: 768px)
{

}


/* Footer location map — all campuses */
#footer-map-canvas,
.footer-map {
  width: 100%;
  height: 320px;
  background: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}
#map-canvas {
  min-height: 320px;
}
.footer-locations .coming-soon-badge {
  font-size: 0.85rem;
  vertical-align: middle;
  /* updates */
}
footer .footer-locations a {
  color: #fff;
}
footer .footer-locations small {
  opacity: 0.85;
}