/* ==========================================================================
   Moniex — Glass drawer menu (tablet + mobile)
   Shown wherever the hamburger is shown (same condition as the header rules in
   01-foundation-and-sections.css): width <= 1024px OR touch-only devices.
   Desktop keeps the original inline nav; nothing here applies there.
   Tweak the look from the variables just below.
   ========================================================================== */

.mnx-drawer-root{
  --mnx-edge:10px;                      /* gap between the panel and the screen edge */
  --mnx-w:min(82vw,360px);              /* panel width */
  --mnx-radius:32px;
  --mnx-navy-0:#020916;
  --mnx-navy-1:#04142c;
  --mnx-blue:#087bff;                   /* neon blue (lines, glow) */
  --mnx-cyan:#00c8ff;                   /* neon cyan (accents) */
  --mnx-ink:#f4f7ff;                    /* link text */
  --mnx-ink-dim:#fff;                   /* tagline */
  --mnx-icon:#86baff;                   /* link icons */
  --mnx-line:rgba(72,137,223,.16);      /* header rule */
  --mnx-hair:rgba(70,126,194,.14);      /* row separators */
  --mnx-ease:cubic-bezier(.22,1,.36,1);
  display:none;
}
@media (max-width:1024px),(hover:none) and (pointer:coarse){
  .mnx-drawer-root{display:block}
}

/* Page scroll lock while open */
html.mnx-menu-open,
html.mnx-menu-open body{overflow:hidden}

/* ---------- Backdrop: the page behind stays visible but blurred ---------- */
.mnx-drawer-backdrop{
  position:fixed;inset:0;z-index:1200;
  background:radial-gradient(ellipse at 6% 46%,rgba(0,89,255,.26),transparent 42%),rgba(2,6,14,.58);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.mnx-drawer-root.is-open .mnx-drawer-backdrop{
  opacity:1;visibility:visible;
  transition:opacity .3s ease,visibility 0s;
}

/* ---------- Panel ---------- */
.mnx-drawer{
  position:fixed;z-index:1201;
  top:calc(var(--mnx-edge) + env(safe-area-inset-top,0px));
  right:calc(var(--mnx-edge) + env(safe-area-inset-right,0px));
  bottom:auto;
  max-height:calc(100dvh - 2*var(--mnx-edge) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  width:var(--mnx-w);
  display:flex;flex-direction:column;
  overflow:hidden;
  border-radius:var(--mnx-radius);
  color:var(--mnx-ink);
  background:
    radial-gradient(circle at 0% 100%,rgba(10,100,255,.22),rgba(0,64,210,.07) 24%,transparent 40%),
    linear-gradient(135deg,rgba(3,20,43,.97),rgba(2,11,32,.985) 60%,rgba(4,16,51,.98));
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  border:1.5px solid #1a7dff;
  box-shadow:0 0 0 1px rgba(0,65,180,.14),0 30px 100px rgba(0,0,0,.46),0 0 10px rgba(10,120,255,.55),0 0 28px rgba(0,95,255,.28),inset 0 0 14px rgba(10,120,255,.32),inset 0 0 50px rgba(0,85,255,.08);
  touch-action:pan-y;
  transform:translate3d(calc(100% + 40px),0,0);
  visibility:hidden;
  transition:transform .38s var(--mnx-ease),visibility 0s linear .38s;
}
.mnx-drawer-root.is-open .mnx-drawer{
  transform:none;visibility:visible;
  transition:transform .42s var(--mnx-ease),visibility 0s;
}

/* Neon background: one huge, tilted ellipse drawn in SVG (see .mnx-drawer__sheen in index.html).
   Only its right part shows: the line comes in from the top, leaves through the right edge,
   comes back and ends on the bottom edge, so it reads as a big semicircle behind the menu.
   Corners stay the same dark navy as the rest of the panel (only the bottom-left has a soft glow).
   The SVG is stretched to the panel (preserveAspectRatio="none"), so the line always starts and
   ends at the same relative spots whatever the screen size. */
.mnx-drawer__sheen{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mnx-drawer__sheen svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mnx-drawer__neon{
  /* one cheap blur only: the wide soft layers of the glow are plain strokes in the SVG (kind to phones' GPUs) */
  filter:drop-shadow(0 0 4px #0a84ff);
}
/* gentle neon "breathing" while the menu is open */
@keyframes mnxNeon{0%,100%{opacity:1}50%{opacity:.86}}
.mnx-drawer-root.is-open .mnx-drawer__neon{animation:mnxNeon 3.8s ease-in-out infinite}

.mnx-drawer__scroll{
  position:relative;z-index:1;flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:14px 18px 16px;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mnx-drawer__scroll::-webkit-scrollbar{display:none}

/* ---------- Top row: close button + brand ---------- */
.mnx-drawer__top{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:16px;
}
.mnx-drawer__top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--mnx-line);
}
.mnx-drawer__close{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(18,48,91,.46);
  border:1px solid rgba(78,149,237,.17);
  box-shadow:inset 0 0 18px rgba(28,105,204,.08);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,transform .2s ease;
}
.mnx-drawer__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnx-drawer__close:active{transform:scale(.92);background:rgba(255,255,255,.14)}

.mnx-drawer__brand{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  width:96px;margin-top:6px;margin-inline-end:18px;
  container-type:inline-size;           /* lets the tagline size itself from the logo width */
}
.mnx-drawer__brand img{display:block;width:100%;height:auto}
.mnx-drawer__tag{
  /* Tagline spans exactly the logo width (icon edge -> end of the MONIEX wordmark).
     The Persian line is ~9.1em wide in Peyda 500, so font-size = logo width / 9.2.
     Change the brand width above and the tagline follows automatically. */
  font-size:10.4px;                     /* fallback for browsers without container units */
  font-size:calc(100cqw / 9.2);
  line-height:1.5;font-weight:500;text-align:center;white-space:nowrap;
  color:var(--mnx-ink-dim);
}

/* ---------- Links ---------- */
.mnx-drawer__nav{padding-top:6px;padding-bottom:16px}
.mnx-drawer__list{list-style:none;margin:0;padding:0}
.mnx-drawer__list + .mnx-drawer__list{position:relative;margin-top:8px;padding-top:8px}
.mnx-drawer__list + .mnx-drawer__list::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(60,132,213,.45);
}
.mnx-drawer__item{position:relative}
.mnx-drawer__item + .mnx-drawer__item::before{
  content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--mnx-hair);
}
/* hide the hairlines that touch the highlighted row */
.mnx-drawer__item:has(> [aria-current="true"])::before,
.mnx-drawer__item:has(> [aria-current="true"]) + .mnx-drawer__item::before{opacity:0}

.mnx-drawer__link{
  display:flex;align-items:center;gap:16px;
  min-height:44px;padding:0 14px;
  border:1px solid transparent;border-radius:16px;
  color:var(--mnx-ink);font-size:15px;font-weight:500;line-height:1.4;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.mnx-drawer__link svg{
  flex:none;width:23px;height:23px;fill:none;stroke:var(--mnx-icon);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .25s ease;
}
.mnx-drawer__link:active{background:rgba(22,136,255,.14)}
@media (hover:hover){
  .mnx-drawer__link:hover{background:rgba(22,136,255,.10)}
}
.mnx-drawer__link[aria-current="true"]{
  color:#a9d5ff;
  border-color:rgba(0,119,255,.62);
  border-left:2px solid var(--mnx-cyan);
  background:linear-gradient(100deg,rgba(0,112,255,.55),rgba(0,53,132,.16) 75%);
  box-shadow:inset 0 0 26px rgba(0,117,255,.16),0 0 20px rgba(0,98,255,.22);
}
.mnx-drawer__link[aria-current="true"] svg{stroke:#a9d5ff}

/* ---------- CTA ---------- */
.mnx-drawer__cta{
  display:block;margin-top:auto;padding:5px;
  border:1px solid rgba(0,120,255,.35);border-radius:30px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease;
}
.mnx-drawer__cta-body{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;min-height:50px;padding-inline:8px 0;
  border:1px solid rgba(0,195,255,.85);border-radius:25px;
  background:linear-gradient(110deg,rgba(0,116,255,.92),rgba(0,47,153,.96) 52%,rgba(0,82,255,.88));
  box-shadow:0 0 0 1px rgba(0,90,255,.25),0 0 26px rgba(0,96,255,.32),inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff;font-size:16px;font-weight:600;
  transition:box-shadow .25s ease,filter .25s ease;
}
.mnx-drawer__cta-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.09) 50%,transparent 72%);
}
@media (hover:hover){
  .mnx-drawer__cta:hover .mnx-drawer__cta-body{
    filter:brightness(1.12);
    box-shadow:0 0 0 1px rgba(0,90,255,.3),0 0 34px rgba(0,110,255,.5),inset 0 1px 0 rgba(255,255,255,.2);
  }
}
.mnx-drawer__cta-arrow{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,32,127,.28);
}
.mnx-drawer__cta-arrow svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mnx-drawer__cta-label{
  flex:1;align-self:stretch;display:grid;place-items:center;
  margin-block:12px;padding-inline:4px;
  border-inline-end:1px solid rgba(255,255,255,.16);
  white-space:nowrap;
}
.mnx-drawer__cta-icon{
  flex:none;align-self:stretch;width:58px;
  display:grid;place-items:center;
  border-radius:22px;
  background:linear-gradient(145deg,#0b7dff,#0436c8);
  border:1px solid rgba(93,204,255,.65);
  box-shadow:0 0 16px rgba(0,170,255,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.mnx-drawer__cta-icon svg{width:24px;height:24px;fill:#fff}

/* ---------- Focus ---------- */
.mnx-drawer a:focus-visible,
.mnx-drawer button:focus-visible{outline:2px solid rgba(92,200,255,.85);outline-offset:3px}

/* ---------- Entrance: links settle in one after another ---------- */
.mnx-drawer__item,.mnx-drawer__cta{
  opacity:0;transform:translate3d(16px,0,0);
  transition:opacity .2s ease,transform .2s ease;
}
.mnx-drawer-root.is-open .mnx-drawer__item,
.mnx-drawer-root.is-open .mnx-drawer__cta{
  opacity:1;transform:none;
  transition:opacity .4s ease calc(.14s + var(--i,0)*.04s),transform .5s var(--mnx-ease) calc(.14s + var(--i,0)*.04s);
}
.mnx-drawer-root.is-open .mnx-drawer__cta:active{transform:scale(.98);transition-delay:0s}

/* ---------- Compact screens ---------- */
@media (max-height:700px){
  .mnx-drawer__scroll{padding-top:12px;padding-bottom:14px}
  .mnx-drawer__top{padding-bottom:14px}
  .mnx-drawer__link{min-height:42px}
  .mnx-drawer__nav{padding-bottom:16px}
}
@media (max-width:360px){
  .mnx-drawer-root{--mnx-w:calc(100vw - 2*var(--mnx-edge) - 28px)}
  .mnx-drawer__link{gap:12px;font-size:14px}
}
@media (min-width:700px){
  .mnx-drawer-root{--mnx-w:380px}
  .mnx-drawer{
    bottom:auto;
    max-height:calc(100dvh - 2*var(--mnx-edge) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }
  .mnx-drawer__link{min-height:48px}
}

/* Landscape phones: two columns so the CTA is visible without scrolling */
@media (max-height:520px) and (orientation:landscape){
  .mnx-drawer-root{--mnx-w:min(92vw,600px)}
  .mnx-drawer{bottom:calc(var(--mnx-edge) + env(safe-area-inset-bottom,0px));max-height:none}
  .mnx-drawer__scroll{padding:10px 16px 12px}
  .mnx-drawer__top{padding-bottom:10px}
  .mnx-drawer__brand{width:88px;margin-top:0;gap:3px}
  .mnx-drawer__nav{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start;padding-top:6px;padding-bottom:10px}
  .mnx-drawer__list + .mnx-drawer__list{margin-top:0;padding-top:0}
  .mnx-drawer__list + .mnx-drawer__list::before{display:none}
  .mnx-drawer__link{min-height:38px;font-size:14px}
  .mnx-drawer__cta-body{min-height:46px}
  .mnx-drawer__cta-label{margin-block:9px}
}

@media (prefers-reduced-motion:reduce){
  .mnx-drawer-root.is-open .mnx-drawer__neon{animation:none}
  .mnx-drawer,.mnx-drawer-backdrop,.mnx-drawer__item,.mnx-drawer__cta,.mnx-drawer__link{transition:none!important}
  .mnx-drawer__item,.mnx-drawer__cta{transform:none}
}