/* Nobal Sanat — the mobile menu. Scoped under .nsc-mm. v1.0.0
   Sliding panels inside the existing drawer: one list at a time, a back bar
   that names where you are, and photographs on the machines so the catalogue
   is browsable rather than merely listed. */

/* The drawer itself stops scrolling and stops padding: each panel fills it and
   does its own scrolling, so the back bar can stay pinned while the list under
   it moves. */
@media (max-width:1100px){
  .nsc-hd__drawer{ padding:0; overflow:hidden; }

  /* The sheet is fixed and hangs off the bar's bottom edge. If the bar is
     still riding the document — sitting under the hero, most of the way down
     the screen — that leaves the sheet a few pixels tall. Opening the menu
     pins the bar (nobal-header.js sets this class) so the sheet always gets
     the whole screen beneath it. */
  .nsc-hd.is-drawerpin{ position:fixed !important; top:var(--h-off,0px) !important; }

  /* With the sheet open the bar is that sheet's header, not a pane of glass
     floating over the page: the utility strip must not read through it. */
  .nsc-hd.nsc-hd--bar.is-open{ background:var(--h-bg,#12161B); }
  .nsc-hd.nsc-hd--bar.is-open::before{ display:none; }
}

.nsc-mm{
  --m-bg:#12161B; --m-card:#1B2028; --m-rule:#272D35; --m-rule2:#39414D;
  --m-ink:#E7ECF2; --m-soft:#8D97A4; --m-acc:#FFC61E;
  --m-mono:var(--nsc-mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace);
  position:absolute; inset:0; overflow:hidden;
  font-family:var(--nsc-font,"Vazirmatn","IRANSans",Tahoma,sans-serif);
}
.nsc-mm *,.nsc-mm *::before,.nsc-mm *::after{ box-sizing:border-box; }
.nsc-mm__stage{ position:absolute; inset:0; }

/* ------------------------------------------------------------- the panels */
.nsc-mm__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--m-bg);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.3,.85,.3,1);
  will-change:transform;
}
[dir="rtl"] .nsc-mm__panel{ transform:translateX(-100%); }
.nsc-mm__panel.is-in{ transform:none; }
/* the parent does not leave, it steps back — so the two read as one stack */
.nsc-mm__panel.is-out{ transform:translateX(-24%); }
[dir="rtl"] .nsc-mm__panel.is-out{ transform:translateX(24%); }

.nsc-mm__scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:14px clamp(14px,4vw,24px) calc(30px + env(safe-area-inset-bottom,0px));
}

/* ------------------------------------------------------ call and directions */
.nsc-mm__quick{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.nsc-mm__q{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 8px;
  background:var(--m-card); border:1px solid var(--m-rule); border-radius:11px;
  color:var(--m-ink); font-size:12.5px; font-weight:700; text-decoration:none;
  text-align:center; line-height:1.6;
}
.nsc-mm__q svg{ width:21px; height:21px; color:var(--m-acc); flex:none; }
.nsc-mm__q:active{ background:#20262F; }

/* --------------------------------------------------------- the top-level list */
.nsc-mm__list{ display:flex; flex-direction:column; gap:9px; }
.nsc-mm__row{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:14px 14px;
  background:var(--m-card); border:1px solid var(--m-rule); border-radius:11px;
  color:var(--m-ink); text-decoration:none;
  font:inherit; font-size:15px; font-weight:700; line-height:1.7;
  text-align:start; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
.nsc-mm__row:active{ background:#20262F; border-color:var(--m-rule2); }
.nsc-mm__ico{
  flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,198,30,.10); color:var(--m-acc);
}
.nsc-mm__ico svg{ width:20px; height:20px; }
.nsc-mm__lbl{ flex:1 1 auto; min-width:0; }
.nsc-mm__n{
  flex:none; font-family:var(--m-mono); font-size:11px; color:var(--m-soft);
  border:1px solid var(--m-rule); border-radius:20px; padding:1px 8px 2px;
}
.nsc-mm__go{ flex:none; color:#6B7683; }

/* ------------------------------------------------------------- the back bar */
.nsc-mm__back{
  flex:none; display:flex; align-items:center; gap:11px; width:100%;
  padding:15px clamp(14px,4vw,24px);
  background:#15191F; border:0; border-bottom:1px solid var(--m-rule);
  color:#fff; font:inherit; font-size:15px; font-weight:800; line-height:1.7;
  text-align:start; cursor:pointer;
}
.nsc-mm__back .nsc-mm__go{ color:var(--m-acc); }
.nsc-mm__back:active{ background:#1B2028; }

.nsc-mm__all{
  display:block; margin-bottom:14px; padding:12px 14px;
  border:1px dashed var(--m-rule2); border-radius:11px;
  color:var(--m-acc); font-size:13px; font-weight:700;
  text-decoration:none; text-align:center; line-height:1.7;
}
.nsc-mm__all:active{ background:rgba(255,198,30,.07); }

/* --------------------------------------------------------------- the cards */
.nsc-mm__group{
  display:flex; align-items:center; gap:10px;
  margin:18px 2px 9px;
  font-size:12.5px; font-weight:700; color:var(--m-acc);
}
/* the tracked mono label is a Latin device — Persian and Arabic are cursive and
   letter-spacing pulls the joined letters apart */
:root:not([dir="rtl"]) .nsc-mm__group{ font-family:var(--m-mono); font-size:11px; font-weight:400; letter-spacing:.14em; }
.nsc-mm__group::after{ content:""; flex:1 1 auto; height:1px; background:var(--m-rule); }
.nsc-mm__cards{ display:flex; flex-direction:column; gap:8px; }
.nsc-mm__card{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px;
  background:var(--m-card); border:1px solid var(--m-rule); border-radius:11px;
  color:var(--m-ink); text-decoration:none;
  font-size:14px; font-weight:700; line-height:1.7;
  transition:background-color .16s ease, border-color .16s ease;
}
.nsc-mm__card:active{ background:#20262F; border-color:var(--m-rule2); }
.nsc-mm__shot{
  flex:none; display:block; width:58px; height:46px;
  border-radius:8px; overflow:hidden; background:#0E1115;
}
.nsc-mm__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* a machine with no photograph gets hatching, not an empty hole */
.nsc-mm__shot--none{
  background-image:repeating-linear-gradient(45deg,#171C23 0 6px,#1E242C 6px 12px);
}
.nsc-mm__cname{ flex:1 1 auto; min-width:0; }

/* ------------------------------------------------------------------- foot */
.nsc-mm__foot{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--m-rule);
  display:flex; flex-direction:column; gap:12px;
}
.nsc-mm__cta{
  display:block; padding:15px; border-radius:11px;
  background:var(--m-acc); color:#15181D;
  font-size:15px; font-weight:800; line-height:1.6;
  text-align:center; text-decoration:none;
}
.nsc-mm__cta:active{ background:#E8B316; }
.nsc-mm__langs{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.nsc-mm__langlbl{ font-size:12px; color:var(--m-soft); }

/* The theme styles bare <button> elements — transparent ground, border in the
   current text colour — and those rules outrank a single class. The branch
   rows are buttons and the leaf rows are links, so without this the two read
   as different objects sitting in the same list. */
.nsc-mm button.nsc-mm__row,
.nsc-mm button.nsc-mm__back{
  background-color:var(--m-card); color:var(--m-ink);
  border:1px solid var(--m-rule);
  font-family:inherit; font-size:15px; font-weight:700; line-height:1.7;
  letter-spacing:normal; text-transform:none;
  -webkit-appearance:none; appearance:none; box-shadow:none;
}
.nsc-mm button.nsc-mm__back{ background-color:#15191F; border:0; border-bottom:1px solid var(--m-rule); color:#fff; border-radius:0; }
.nsc-mm button.nsc-mm__row:active{ background-color:#20262F; border-color:var(--m-rule2); }
.nsc-mm button.nsc-mm__back:active{ background-color:#1B2028; }

.nsc-mm :focus-visible{ outline:2px solid var(--m-acc); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .nsc-mm__panel{ transition:none; }
}