/* ============================================================
   Midnyte — shared site shell
   Header, navigation, footer and page grain. Loaded by every page
   so the whole site reads as one thing. Namespaced .mn-* so it can
   never collide with a page's own styles.
   ============================================================ */

.mn-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.mn-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(22px, 6vw, 120px);
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mn-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; min-height: 44px; }
.mn-brand img { height: 19px; flex-shrink: 0; width: auto; display: block; filter: brightness(0) invert(1);
  opacity: 0.95; transition: opacity 0.3s; }
.mn-brand:hover img { opacity: 1; }

.mn-nav {
  display: flex; align-items: center; border-radius: 50px; padding: 6px 8px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.035) 100%);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.mn-nav::-webkit-scrollbar { display: none; }
.mn-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 20px; border-radius: 40px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(245,245,245,0.7); white-space: nowrap; text-decoration: none;
  line-height: 1.15; transition: background 0.3s, color 0.3s;
}
.mn-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mn-nav a.mn-on { background: rgba(255,255,255,0.12); color: #fff; }

.mn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; min-height: 44px; border-radius: 50px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; line-height: 1.15;
  background: linear-gradient(180deg, #ffffff, #e4ddff); color: #050505; border: 1px solid transparent;
  transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1), box-shadow 0.4s;
}
.mn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(100,60,255,0.28); color: #050505; }

/* ---------- footer ---------- */
.mn-footer {
  position: relative; padding: clamp(34px,4vw,46px) clamp(22px,6vw,120px) clamp(40px,4vw,56px);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.mn-footer-rule {
  position: absolute; top: 0; left: clamp(22px,6vw,120px); right: clamp(22px,6vw,120px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,120,255,0.45), rgba(255,255,255,0.12), transparent);
}
.mn-foot { max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.mn-foot nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  font-size: 13px; font-weight: 500; color: rgba(245,245,245,0.55); }
.mn-foot nav a { display: inline-block; min-height: 44px; line-height: 44px; color: inherit;
  text-decoration: none; overflow-wrap: anywhere; transition: color 0.3s; }
.mn-foot nav a:hover { color: #c3b0ff; }
.mn-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  font-size: 13px; font-weight: 300; color: rgba(245,245,245,0.4); }
.mn-copy img { height: 16px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.5; }

/* ---------- mobile menu ----------
   The five-item nav plus .mn-lang plus the CTA does not fit the header row
   below ~1230px. Between 820 and 1230 the nav drops to its own full-width row;
   below 820 it collapses behind a disclosure button that assets/midnyte-v2.js
   injects. No JS means no .mn-js, and the nav simply stays on its own row —
   so the navigation is never lost. */
.mn-menu {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  color: #f5f5f5; -webkit-appearance: none; appearance: none;
  transition: border-color 0.3s, background 0.3s;
}
.mn-menu:hover { border-color: rgba(150,120,255,0.45); background: rgba(255,255,255,0.08); }
.mn-menu-ico { position: relative; display: block; width: 17px; height: 11px; }
.mn-menu-ico::before, .mn-menu-ico::after,
.mn-menu-ico span {
  content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.mn-menu-ico::before { top: 0; }
.mn-menu-ico span { top: 50%; margin-top: -0.75px; }
.mn-menu-ico::after { bottom: 0; }
.mn-header.mn-open .mn-menu-ico::before { transform: translateY(4.75px) rotate(45deg); }
.mn-header.mn-open .mn-menu-ico span { opacity: 0; }
.mn-header.mn-open .mn-menu-ico::after { transform: translateY(-4.75px) rotate(-45deg); }

@media (max-width: 1230px) {
  .mn-header { flex-wrap: wrap; }
  .mn-brand { order: 1; margin-right: auto; }
  .mn-lang   { order: 2; }
  .mn-menu   { order: 3; }
  .mn-cta    { order: 4; }
  .mn-nav    { order: 5; width: 100%; justify-content: flex-start; }
}
@media (max-width: 820px) {
  .mn-header.mn-js .mn-menu { display: inline-flex; }
  .mn-header.mn-js .mn-nav {
    display: none; flex-direction: column; align-items: stretch;
    overflow-x: visible; overflow-y: auto; -webkit-overflow-scrolling: touch;
    max-height: calc(100svh - 150px);
    border-radius: 18px; padding: 7px; margin-top: 12px;
  }
  .mn-header.mn-js.mn-open .mn-nav { display: flex; }
  .mn-header.mn-js .mn-nav a { width: 100%; border-radius: 13px; min-height: 48px; }
}
@media (max-width: 400px) {
  .mn-header { padding-left: 16px; padding-right: 16px; }
  .mn-footer { padding-left: 16px; padding-right: 16px; }
  .mn-footer-rule { left: 16px; right: 16px; }
}
@media (max-width: 560px) {
  .mn-header { row-gap: 10px; }
  /* The CTA used to stretch edge to edge here, which put a full-width white slab
     under the logo and made three rows of chrome before any content. It fits
     beside the burger at these widths, so keep it inline and just tighten it. */
  .mn-cta { padding: 12px 16px; font-size: 12.5px; }
  /* no JS: keep the scrollable pill from eating the whole screen */
  .mn-header:not(.mn-js) .mn-nav { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .mn-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mn-foot nav { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-cta, .mn-brand img, .mn-nav a, .mn-menu,
  .mn-menu-ico::before, .mn-menu-ico::after, .mn-menu-ico span { transition: none !important; }
}

/* language / currency switch in the header */
.mn-lang { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-right:10px; padding:8px 13px; min-height:44px; min-width:44px; border-radius:40px;
  border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.03);
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(245,245,245,0.72); text-decoration:none; white-space:nowrap; line-height:1;
  transition:border-color .3s, color .3s, background .3s; }
.mn-lang:hover { border-color:rgba(150,120,255,0.45); color:#fff; background:rgba(255,255,255,0.06); }
@media (max-width: 900px) { .mn-lang { padding:7px 11px; font-size:12px; margin-right:6px; } }