/* ===========================================
   MSL Mega Menu - Mobile & Responsive Styles
   =========================================== */

/* ===========================================
   Mobile Breakpoint (< 768px)
   =========================================== */

@media (max-width: 767px) {
  /* Ensure header is positioning context for the menu */
  header,
  .site-header,
  [class*="header"] {
    position: relative;
  }

  /* Show hamburger, hide desktop nav */
  .msl-nav-toggle {
    display: flex;
  }

  .msl-nav-primary {
    display: none;
  }

  .msl-mega-menu-wrapper {
    flex: 1 1 auto; /* Grow, shrink, auto basis - fill remaining space */
    min-width: 0; /* Allow proper flex sizing */
    justify-content: flex-end; /* Push hamburger to right */
  }

  /* Position hamburger on right side of header, aligned with logo row */
  .msl-nav-toggle {
    position: absolute;
    right: var(--space-4);
    top: auto;
    bottom: var(--space-6);
  }

  /* Mobile Menu Overlay */
  .msl-nav-primary.is-open {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 100%; /* Position below the header automatically */
    left: 0;
    right: 0;
    height: calc(100vh - 100%); /* Fill remaining viewport height */
    background-color: var(--color-bg-white);
    z-index: var(--z-overlay);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mslFadeIn var(--transition-normal) ease-out;
  }

  @keyframes mslFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .msl-nav-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    padding: var(--space-4);
    gap: 0;
  }

  /* Nav Items as Accordion */
  .msl-nav-item {
    flex-direction: column;
    height: auto;
    border-bottom: 1px solid var(--color-border-light);
  }

  .msl-nav-item:last-child {
    border-bottom: none;
  }

  .msl-nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-4) var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    min-height: 44px;
  }

  .msl-nav-link[aria-haspopup="true"]::after {
    display: inline-block;
    margin-left: auto;
    border-top-color: var(--color-text-muted);
    transition: transform var(--transition-fast);
  }

  .msl-nav-item.is-open .msl-nav-link::before {
    display: none;
  }

  /* ===========================================
     Mobile Mega Menu (Accordion Style)
     =========================================== */

  .msl-mega-menu {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height var(--transition-normal), padding var(--transition-normal), background-color var(--transition-normal);
  }

  .msl-nav-item.is-open .msl-mega-menu {
    max-height: 2000px;
    padding: var(--space-3) var(--space-2);
    background-color: transparent;
    transform: none;
  }

  /* Reset all column layouts to single column */
  .msl-mega-menu--2col,
  .msl-mega-menu--3col,
  .msl-mega-menu--2plus1 {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .msl-mega-menu__column {
    gap: var(--space-5);
  }

  /* Section styling - flat list with accent border */
  .msl-mega-menu__section {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-accent);
  }

  .msl-mega-menu__header {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    padding-left: var(--space-2);
  }

  /* Links - tighter spacing with touch targets */
  .msl-mega-menu__link {
    padding: var(--space-1) 0;
    padding-left: var(--space-2);
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  /* Normalize spaced links to match regular spacing */
  .msl-mega-menu__links--spaced {
    gap: var(--space-2);
  }

  .msl-mega-menu__links--spaced .msl-mega-menu__link {
    padding: var(--space-1) 0;
    padding-left: var(--space-2);
  }

  /* Hide dividers on mobile */
  .msl-mega-menu__divider {
    display: none;
  }

  /* Remove emphasis styling on mobile */
  .msl-mega-menu__link--emphasis {
    font-weight: var(--font-normal);
  }

  /* Featured section - keep distinct but lighter */
  .msl-mega-menu__featured {
    background-color: var(--color-bg-tint);
    border: none;
    border-left: 3px solid var(--color-accent);
    padding: var(--space-3);
  }

  .msl-mega-menu__column--bordered {
    border-left: none;
    padding-left: 0;
  }

  /* Utility dropdown */
  .msl-mega-menu--utility {
    min-width: auto;
    max-width: none;
  }

  /* Book card adjustments */
  .msl-mega-menu__book-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-left: none;
  }

  .msl-mega-menu__book-image {
    max-width: 100px;
    margin-bottom: 0;
  }

  /* Podcast identity */
  .msl-mega-menu__podcast-title {
    font-size: var(--text-lg);
  }

  /* Simplify episode type cards to flat links */
  .msl-mega-menu__episode-type {
    background: none;
    border-left: none;
    border-radius: 0;
    padding: var(--space-2) 0;
    padding-left: var(--space-2);
    margin-bottom: 0;
    min-height: 36px;
  }

  .msl-mega-menu__episode-title {
    font-size: var(--text-base);
  }

  .msl-mega-menu__episode-desc {
    font-size: var(--text-xs);
  }
}

/* ===========================================
   Tablet Breakpoint (768px - 1024px)
   =========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  .msl-nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .msl-mega-menu {
    padding: var(--space-6);
  }

  .msl-mega-menu--2col {
    grid-template-columns: 60% 40%;
  }

  .msl-mega-menu--2plus1 {
    grid-template-columns: 1fr 1fr;
  }

  .msl-mega-menu--2plus1 .msl-mega-menu__featured {
    grid-column: span 2;
    margin-top: var(--space-4);
  }
}

/* ===========================================
   Body scroll lock when menu is open
   =========================================== */

body.msl-nav-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  body.msl-nav-open {
    overflow: auto;
  }
}