/* ==========================================================================
   MIMSHACK FORGE — MEGA MENU
   ========================================================================== */

.ms-nav{ position: sticky; top:0; z-index: 999; background: var(--ms-color-white); border-bottom: 1px solid transparent; transition: box-shadow var(--ms-duration-menu) var(--ms-ease), border-color var(--ms-duration-menu) var(--ms-ease); }
.ms-nav.is-scrolled{ box-shadow: var(--ms-shadow-sm); border-color: var(--ms-color-border); }

.ms-nav__bar{
  max-width: var(--ms-container-max); margin: 0 auto;
  display:flex; align-items:center; gap: var(--ms-space-md);
  padding: 0.9rem var(--ms-space-md);
  transition: padding var(--ms-duration-menu) var(--ms-ease);
}
.ms-nav.is-scrolled .ms-nav__bar{ padding-top: 0.55rem; padding-bottom: 0.55rem; }

.ms-nav__logo{ font-family: var(--ms-font-display); font-weight:700; font-size:1.15rem; color: var(--ms-color-deep-navy); text-decoration:none; margin-right: auto; }

.ms-nav__primary{ display:flex; align-items:center; gap: var(--ms-space-md); }
.ms-nav__primary a, .ms-nav__trigger{
  background:none; border:none; cursor:pointer;
  font: inherit; font-size: 0.95rem; font-weight: 500;
  color: var(--ms-color-text); text-decoration:none; padding: 0.4rem 0;
  position: relative;
}
.ms-nav__primary a:hover, .ms-nav__trigger:hover, .ms-nav__trigger[aria-expanded="true"]{ color: var(--ms-color-primary-blue); }
.ms-nav__trigger[aria-expanded="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--ms-color-primary-blue);
}

.ms-nav__cta{ white-space: nowrap; }
.ms-nav__hamburger{ position:relative; z-index:1001; display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; width:34px; height:34px; justify-content:center; align-items:center; }
.ms-nav__hamburger span{ width:22px; height:2px; background: var(--ms-color-deep-navy); display:block; transition: transform var(--ms-duration-hover) var(--ms-ease), opacity var(--ms-duration-hover) var(--ms-ease); }
.ms-nav__hamburger.is-active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.ms-nav__hamburger.is-active span:nth-child(2){ opacity:0; }
.ms-nav__hamburger.is-active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---- Backdrop ---- */
.ms-nav__backdrop{
  position: fixed; inset: 0; background: rgba(11,23,48,0.35);
  opacity:0; pointer-events:none; transition: opacity var(--ms-duration-menu) var(--ms-ease);
  z-index: 900;
}
.ms-nav__backdrop.is-active{ opacity:1; pointer-events:auto; }

/* ---- Mega panels ---- */
.ms-mega{
  position:absolute; left:0; right:0; top:100%;
  background: var(--ms-color-white); border-top:1px solid var(--ms-color-border);
  box-shadow: var(--ms-shadow-md);
  display:grid; grid-template-columns: 3fr 1fr;
  max-width: var(--ms-container-max); margin:0 auto; left:0; right:0;
  padding: var(--ms-space-lg) var(--ms-space-md);
  opacity:0; visibility:hidden; transform: translateY(-8px) scale(0.99);
  transition: opacity var(--ms-duration-menu) var(--ms-ease), transform var(--ms-duration-menu) var(--ms-ease), visibility var(--ms-duration-menu);
  z-index: 950; border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
}
.ms-mega.is-active{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }

.ms-mega__columns{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--ms-space-lg); }
.ms-mega__columns--work{ grid-template-columns: repeat(3, 1fr); }
.ms-mega__col h4{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-sm); }
.ms-mega__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 0.5rem; }
.ms-mega__col a{ color: var(--ms-color-text); text-decoration:none; font-size:0.92rem; }
.ms-mega__col a:hover{ color: var(--ms-color-primary-blue); }
.ms-mega__desc{ color: var(--ms-color-text-muted); font-size:0.8rem; }
.ms-mega__col-cta{ display:inline-block; margin-top: var(--ms-space-sm); font-weight:600; color: var(--ms-color-primary-blue) !important; }
.ms-mega__preview{ display:block; text-decoration:none; color:inherit; margin-bottom: var(--ms-space-sm); }
.ms-mega__preview img{ border-radius: var(--ms-radius-sm); margin-bottom: 0.4rem; }
.ms-mega__preview span{ font-size:0.85rem; font-weight:600; color: var(--ms-color-deep-navy); }

.ms-mega__feature{
  background: var(--ms-color-deep-navy); color: var(--ms-color-white);
  border-radius: var(--ms-radius-md); padding: var(--ms-space-md);
  display:flex; flex-direction:column; justify-content:center; gap: 0.6rem;
}
.ms-mega__feature h3{ color: var(--ms-color-white); margin:0; }
.ms-mega__feature p{ margin:0; font-size:0.88rem; color: rgba(255,255,255,0.8); }
.ms-mega__eyebrow{ text-transform: uppercase; font-size:0.72rem; letter-spacing:0.06em; color: var(--ms-color-gold-accent) !important; font-weight:700; }
.ms-mega__feature .ms-btn{ align-self:flex-start; }

/* ---- Mobile ---- */
.ms-nav__mobile{ display:none; }

@media (max-width: 960px){
  .ms-nav__primary, .ms-nav__cta{ display:none; }
  .ms-nav__hamburger{ display:flex; }
  .ms-mega{ display:none !important; }

  .ms-nav__mobile{
    display:block; position: fixed; top:0; right:-100%; width:min(360px,90vw); height:100vh;
    background: var(--ms-color-white); box-shadow: var(--ms-shadow-md);
    transition: right var(--ms-duration-menu) var(--ms-ease);
    overflow:hidden; z-index: 960;
  }
  .ms-nav__mobile.is-active{ right:0; }
  .ms-nav__mobile-scroll{
    height:100%; overflow-y:auto;
    padding: 5rem var(--ms-space-md) var(--ms-space-md);
  }
  .ms-nav__accordion{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    background:none; border:none; border-bottom:1px solid var(--ms-color-border);
    padding: var(--ms-space-sm) 0; font-size:1rem; font-weight:600; cursor:pointer;
  }
  .ms-nav__accordion-panel{ max-height:0; overflow:hidden; transition: max-height var(--ms-duration-menu) var(--ms-ease); display:flex; flex-direction:column; gap:0.5rem; }
  .ms-nav__accordion-panel.is-open{ max-height: 400px; padding: 0.6rem 0; }
  .ms-nav__accordion-heading{ font-weight:600; margin:0.4rem 0 0; color: var(--ms-color-text-muted); font-size:0.8rem; text-transform:uppercase; }
  .ms-nav__mobile-link{ display:block; padding: var(--ms-space-sm) 0; border-bottom:1px solid var(--ms-color-border); color: var(--ms-color-text); text-decoration:none; font-weight:600; }
  .ms-nav__mobile-cta{ display:block; text-align:center; margin-top: var(--ms-space-md); }
  body.ms-nav-open{ overflow:hidden; }
}

/* Mobile accordion links: real link styling, not browser defaults */
@media (max-width: 960px){
  .ms-nav__accordion-panel a{ display:block; padding: 0.55rem 0; color: var(--ms-color-primary-blue); font-weight:600; text-decoration:none; }
  .ms-nav__accordion-panel a:hover{ text-decoration:underline; }
}

/* Desktop: the header bar stays above the page backdrop, so header links
   can still be clicked while a mega panel is open. Mobile is unchanged. */
@media (min-width: 961px){
  .ms-nav__bar{ position:relative; z-index:1000; }
  /* On desktop the backdrop must not catch the pointer: that would keep the menu open
     after the pointer leaves. Outside clicks still close the menu via the document listener. */
  .ms-nav__backdrop, .ms-nav__backdrop.is-active{ pointer-events:none; }
}