/* ==========================================================================
   Corafter — Phase 20: Services hero + mobile navigation fixes
   Loaded last in includes/header.php.

   1. Services hero
      The decorative .page-hero-art (injected in services/index.php) was only made
      transparent by Phase 9, so it stayed in the hero's flex row and squeezed the
      text into ~246px flush against the left edge on phones. Phase 14 already hides
      it with display:none for About / Process / Blog / Contact / Portfolio; the
      Services page was missing from that list.

   2. Mobile menu (<= 760px, where the hamburger is used)
      a. The Services dropdown could never collapse: redesign.css sets
         .dropdown-menu{display:grid} with no media query and loads AFTER the
         display:none in final-responsive-seo.css, so grid always won.
      b. The drawer started at top:0, covering the header and clipping the logo.
         It now opens directly UNDER the navbar, full width.
   ========================================================================== */

/* 1. Services hero ------------------------------------------------------- */
body.page-services .page-hero-art {
  display: none !important;
}

/* 2. Mobile navigation --------------------------------------------------- */
@media (max-width: 760px) {
  /* Drawer sits under the navbar (header is 66px, 60px once scrolled). */
  .site-header .main-nav {
    top: 66px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: calc(100vh - 66px);
    height: calc(100dvh - 66px);
    padding: 8px 20px 32px;
    background: #fff;
    border-top: 1px solid #e3ebfa;
    border-radius: 0;
    box-shadow: 0 28px 50px rgba(7, 27, 69, .16);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .72, .2, 1), opacity .22s ease, visibility 0s linear .28s;
    overscroll-behavior: contain;
  }

  .site-header.scrolled .main-nav {
    top: 60px;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }

  .site-header .main-nav.open {
    right: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  /* Services dropdown: collapsed by default, opened only by .open (the toggle button). */
  .site-header .nav-dropdown > .dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    margin: 0;
    padding: 6px 0 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    left: auto;
    top: auto;
    transform: none !important;
  }

  .site-header .nav-dropdown.open > .dropdown-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Rotate the chevron with the state. */
  .site-header .nav-drop-button span {
    display: inline-block;
    transition: transform .2s ease;
  }

  .site-header .nav-dropdown.open > .nav-drop-button span {
    transform: rotate(180deg);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-header .main-nav,
  .site-header .nav-drop-button span {
    transition: none;
  }
}