/*
 * DigitMak — Mobile Menu
 * Styles for the full-screen mobile navigation overlay.
 * Loaded on all pages, activates at ≤768px via header.css media query.
 */

/* Body lock when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Mobile menu overlay */
@media (max-width: 768px) {

  .site-header__nav {
    animation: none;
  }

  .site-header__nav.is-open {
    animation: slideDown 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Each nav item as a full-width row */
  .nav__item {
    width: 100%;
    border-bottom: 0.5px solid var(--clr-border);
  }

  .nav__item:last-child {
    border-bottom: none;
  }

  /* Active state: left red border */
  .nav__item--active > .nav__link {
    border-left: 3px solid var(--clr-red);
    padding-left: calc(var(--sp-3) - 3px);
    color: var(--clr-red);
    background: var(--clr-red-light);
  }

  /* Dropdown toggle via aria-expanded */
  .nav__item--has-dropdown > .nav__link[aria-expanded="true"] {
    color: var(--clr-red);
    background: var(--clr-light);
  }

  .nav__item--has-dropdown > .nav__link[aria-expanded="true"] .nav__chevron {
    transform: rotate(180deg);
  }

  /* Sub-menu */
  .nav__dropdown {
    background: var(--clr-light);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 var(--sp-2) var(--sp-4);
  }

  .nav__link--sub {
    padding: var(--sp-3) var(--sp-3);
    font-size: var(--fs-sm);
    border-radius: 0;
    border-bottom: 0.5px solid var(--clr-border);
    color: var(--clr-text-muted);
  }

  .nav__link--sub:hover {
    color: var(--clr-red);
    background: transparent;
  }

  /* Mobile CTA */
  .site-header__nav .btn--primary {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    font-size: var(--fs-base);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .site-header__nav.is-open {
      animation: none;
    }
  }
}