/* ===========================================================================
   Mobile navigation.

   Every page hid .nav-links below 768px and put nothing in their place, so
   phones had no navigation at all — only the logo. This adds the missing
   control. The panel contents are cloned at runtime from whatever nav the page
   already has, so index.php, blog.php, blog-post.php and the newer pages all
   get the same behaviour without duplicating their link lists.
   =========================================================================== */

.nav-burger{
  display:none;                     /* desktop: the real nav is visible */
  position:relative;
  width:42px;height:42px;flex-shrink:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;
  z-index:1002;
}
.nav-burger:focus-visible{outline:2px solid #d63765;outline-offset:2px}
.nav-burger span{
  display:block;position:absolute;left:11px;width:20px;height:1.5px;
  background:#fff;border-radius:2px;
  transition:transform .28s ease,opacity .2s ease,top .28s ease;
}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:20px}
.nav-burger span:nth-child(3){top:26px}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

.mnav-backdrop{
  /* Sized in viewport units rather than inset:0. On pages with body
     overflow-x:hidden the fixed containing block came out wider than the
     viewport, so inset:0 stretched past the screen and created a horizontal
     scrollbar. */
  position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  z-index:1000;
}
.mnav-backdrop.open{opacity:1;visibility:visible}

.mnav{
  /* Placed from the left using viewport units for the same reason as the
     backdrop: right:0 anchored to a containing block wider than the screen. */
  position:fixed;top:0;bottom:auto;right:auto;
  width:min(84vw,330px);
  left:calc(100vw - min(84vw,330px));
  height:100vh;
  align-items:stretch;text-align:left;
  background:#0e0e12;
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.32,.72,.28,1);
  z-index:1001;
  display:flex;flex-direction:column;
  padding:88px 26px 32px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mnav.open{transform:none}
/* `display:flex` above outranks the browser's own [hidden] rule, so the closed
   panel stayed in the layout and intruded into the viewport. Restore it. */
.mnav[hidden]{display:none}

.mnav a{
  display:block;
  padding:15px 0;
  font-size:1rem;font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mnav a:active,.mnav a:hover{color:#d63765}
.mnav a.active{color:#d63765}

.mnav-foot{margin-top:auto;padding-top:26px}
.mnav-tel{
  display:inline-block;margin-bottom:18px;
  font-size:.9rem;color:rgba(255,255,255,.6);text-decoration:none;
}
.mnav-lang{display:flex;gap:8px}
.mnav-lang button{
  flex:1;padding:10px 0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);
  font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:.1em;
}
.mnav-lang button.on{background:#d63765;border-color:#d63765;color:#fff}

@media(max-width:768px){
  .nav-burger{display:flex}
  /* The panel is fixed-position, so stop the page scrolling behind it. */
  body.mnav-lock{overflow:hidden}
}

@media (prefers-reduced-motion: reduce){
  .mnav,.mnav-backdrop,.nav-burger span{transition:none}
}

/* ---------------------------------------------------------------------------
   Shared nav logo sizing.

   /uploads/logo.png is a 1080x1350 canvas whose wordmark occupies only
   806x222 in the middle — 16% of the height. At the old 52px that rendered a
   ~9px tall mark, which is why the homepage carried an inline height:200px to
   compensate. /uploads/logo-mark.png is the same artwork cropped to its
   bounds, so a normal height now produces a correctly sized logo everywhere.
   The original file is untouched; og:image and JSON-LD still reference it.
   --------------------------------------------------------------------------- */
.nav-logo img{height:38px;width:auto;display:block}
@media(max-width:768px){ .nav-logo img{height:30px} }

/* The bar now carries eight items including the two analyzer tools. Tighten
   the spacing on mid-size desktops so it never wraps onto a second line. */
@media(min-width:769px) and (max-width:1300px){
  .nav-links{gap:22px}
  .nav-links a{font-size:.74rem;letter-spacing:.06em}
  .nav-tel{display:none}
}