/* ==========================================================================
   MEENA DIGI SOLUTIONS — Services sub-menu inside the fullscreen nav
   Injected by js/submenu.js. Desktop: hovering "Services" reveals a
   categorised panel in the empty right space. Touch/mobile: a chevron
   toggles an inline accordion. Nothing here alters the base menu design.
   ========================================================================== */

/* chevron toggle appended to the Services row (touch only) */
.menu-sub-toggle{
  margin-left:16px; width:36px; height:36px; border-radius:50%; flex:none;
  border:1px solid var(--border); background:transparent; color:var(--text-dim);
  display:none; place-items:center; cursor:pointer; align-self:center;
  transition:transform .35s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.menu-sub-toggle svg{ width:15px; height:15px; }
.menu-sub-toggle[aria-expanded="true"]{ transform:rotate(180deg); border-color:var(--accent); color:var(--accent); }

/* ---------- desktop reveal panel ---------- */
.menu-sub-panel{
  position:absolute; top:50%; right:0; transform:translateY(-46%);
  width:min(40%, 400px); z-index:4;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.menu-overlay-inner.sub-open .menu-sub-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(-50%);
}
.menu-sub-eyebrow{
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:20px;
}
.menu-sub-col{ margin-bottom:24px; }
.menu-sub-col:last-child{ margin-bottom:0; }
.menu-sub-head{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  font-weight:700; font-size:1.02rem; letter-spacing:0.03em; color:var(--text);
  margin-bottom:10px; padding-bottom:3px;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.menu-sub-head:hover{ border-color:var(--accent); color:var(--accent); }
.menu-sub-items{ display:flex; flex-direction:column; gap:7px; }
.menu-sub-items a{
  color:var(--text-dim); font-size:0.92rem; width:fit-content;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.menu-sub-items a:hover{ color:var(--accent); transform:translateX(5px); }

/* staggered fade of columns when the panel opens */
.menu-overlay-inner.sub-open .menu-sub-col{ animation:menuSubIn .5s var(--ease) both; }
.menu-overlay-inner.sub-open .menu-sub-col:nth-child(2){ animation-delay:.04s; }
.menu-overlay-inner.sub-open .menu-sub-col:nth-child(3){ animation-delay:.09s; }
.menu-overlay-inner.sub-open .menu-sub-col:nth-child(4){ animation-delay:.14s; }
@keyframes menuSubIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- touch / small screens: inline accordion ---------- */
.menu-sub-accordion{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
}
.menu-sub-accordion.is-open{ max-height:1600px; opacity:1; margin:4px 0 14px; }
.menu-sub-accordion .menu-sub-col{ margin-bottom:16px; }
.menu-sub-accordion .menu-sub-head{ font-size:0.95rem; margin-top:8px; }
.menu-sub-accordion .menu-sub-items a{ font-size:1.02rem; padding:5px 0; }

@media (hover:hover) and (min-width:981px){
  .menu-sub-accordion{ display:none; }   /* desktop uses the panel, not the accordion */
}
@media (max-width:980px), (hover:none){
  .menu-sub-panel{ display:none; }         /* touch uses the accordion, not the panel */
  .menu-sub-toggle{ display:grid; }

  /* Stack the nav from the top and let the overlay scroll, so an open
     accordion pushes the remaining rows down instead of overlapping the
     footer. (Base menu centres its rows; that only fits when nothing is
     expanded.) */
  .menu-overlay-inner{ justify-content:flex-start; padding-top:96px; padding-bottom:48px; }
  .menu-list{ flex:0 0 auto; justify-content:flex-start; }
  /* smaller display type on phones so 5 rows + an open sub-menu breathe */
  .menu-link{ font-size:clamp(1.7rem, 8.5vw, 2.4rem); padding:9px 0; }
  .menu-sub-toggle{ width:32px; height:32px; margin-left:12px; }
  .menu-sub-accordion .menu-sub-items a{ font-size:0.98rem; padding:4px 0; }
  .menu-sub-accordion .menu-sub-col{ margin-bottom:12px; }
}

@media (prefers-reduced-motion: reduce){
  .menu-sub-panel, .menu-sub-accordion, .menu-sub-toggle, .menu-sub-col{ transition:none; animation:none; }
}