/* Choice Tutoring homepage animations — logo entrance, scroll reveals, hover accents */

#header-logo img {
  opacity: 0;
  transform: scale(0.96);
  animation: ct-logo-in 0.8s ease forwards 0.15s;
}

@keyframes ct-logo-in {
  to { opacity: 1; transform: scale(1); }
}

.ct-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ct-reveal.ct-visible {
  opacity: 1;
  transform: translateY(0);
}

.entry-content img.alignright {
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.entry-content img.alignright:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(30, 30, 30, 0.22);
}

#main-menu .mega-menu-link {
  position: relative;
}

#main-menu .mega-menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #dfb858;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

#main-menu .mega-menu-link:hover::after,
#main-menu .mega-menu-link:focus-visible::after {
  transform: scaleX(1);
}

/* Layout fix: keep "Log In" pinned bottom-right of the black bar at every width, matching desktop */
@media (max-width: 767px) {
  header #header-top .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  header #header-top .header-auth {
    float: none;
    clear: none;
  }
}

/* Bug fix: the site's own CSS only forces the mobile nav menu list visible up to
   600px, but the menu plugin's own JS-driven hide/show (missing from this static
   export) is what governs 601-768px, leaving the open nav panel empty in that
   range. Extend the same working patch up to 768px, matching the plugin's own
   breakpoint, so the panel shows its links instead of appearing blank. */
@media (max-width: 768px) {
  #main-menu #mega-menu-wrap-primary #mega-menu-primary {
    background: transparent !important;
    display: block !important;
  }
}

/* Bug fix: the off-canvas mobile nav is a fixed 300px-wide panel with no backdrop,
   so the rest of the page stays fully visible beside it, looking like two views
   stacked/overlapping. Add a dimming backdrop behind the panel (below its z-index
   of 5) that covers the full viewport and closes the menu when tapped. */
.ct-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ct-menu-backdrop.ct-menu-backdrop--visible {
  display: block;
  opacity: 1;
}

@media (min-width: 992px) {
  .ct-menu-backdrop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header-logo img,
  .ct-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}