/* Besere Oil — mobile navigation: burger + full-screen takeover menu.
   menu.js builds the burger and overlay from each page's existing nav
   links; html gets .has-menu once that ran, so pages without JS keep
   the plain wrapped nav. Loaded by every page. */

.mnav-burger {
  display: none;
  appearance: none; -webkit-appearance: none;
  background: none; border: none; cursor: pointer; padding: 0;
  width: 2.75rem; height: 2.75rem;
  flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
}
.mnav-burger span {
  display: block; width: 1.6rem; height: 2px;
  background: var(--color-text); transition: background 0.35s ease;
}
/* over the home hero the bars are light, like the links beside them */
.hnav .mnav-burger span { background: var(--color-bg); }
.hnav.is-solid .mnav-burger span { background: var(--color-text); }

@media (max-width: 899px) {
  html.has-menu .m-nav > *:not(:first-child):not(.mnav-burger) { display: none; }
  html.has-menu .mnav-burger { display: inline-flex; }
}

/* — the takeover — */
.mnav-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--color-bg) 5%, transparent) 0,
      color-mix(in srgb, var(--color-bg) 5%, transparent) 0.0625rem,
      transparent 0.0625rem, transparent 7rem),
    var(--color-neutral-900);
  color: var(--color-bg);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.18, 1), visibility 0s linear 0.55s;
}
.mnav-overlay.is-open {
  clip-path: inset(0); visibility: visible;
  transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}
html.mnav-open { overflow: hidden; }

.mnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) clamp(var(--space-4), 5vw, var(--space-8));
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--color-bg) 16%, transparent);
}
.mnav-top img { height: 2.6rem; width: auto; display: block; }
.mnav-close {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; cursor: pointer; padding: 0;
  width: 2.75rem; height: 2.75rem; position: relative;
}
.mnav-close::before, .mnav-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.7rem; height: 2px; background: var(--color-bg);
}
.mnav-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mnav-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mnav-close:hover::before, .mnav-close:hover::after { background: var(--color-accent); }

.mnav-links {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-6) clamp(var(--space-4), 5vw, var(--space-8));
  min-height: 0; overflow-y: auto;
}
.mnav-links a {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: clamp(var(--space-2), 1.8vh, var(--space-4)) 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--color-bg) 14%, transparent);
  color: var(--color-bg); text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(1.6rem, 6.5vw, 2.6rem); line-height: 1.1; letter-spacing: -0.01em;
}
.mnav-links a:first-child { border-top: 0.0625rem solid color-mix(in srgb, var(--color-bg) 14%, transparent); }
.mnav-links a:hover, .mnav-links a[aria-current="page"] { color: var(--color-accent); }
.mnav-links a .mnav-n {
  font-size: 0.7rem; letter-spacing: 0.16em; color: var(--color-accent);
  font-variant-numeric: tabular-nums; min-width: 1.9rem;
}
.mnav-overlay.is-open .mnav-links a {
  animation: mnavRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.08s + var(--i, 0) * 0.05s);
}
@keyframes mnavRise { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } }

.mnav-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-8)) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 0.0625rem solid color-mix(in srgb, var(--color-bg) 16%, transparent);
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-bg) 65%, transparent);
}
.mnav-foot a { color: inherit; }
.mnav-foot a:hover { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .mnav-overlay { transition: none; }
  .mnav-overlay.is-open .mnav-links a { animation: none; }
}

/* — desktop nav: links spread evenly across the whole bar — */
@media (min-width: 900px) {
  .m-nav { justify-content: space-between; }
  .m-nav > a:first-child { margin-right: 0 !important; }
}

/* — fixed nav: transparent over the hero, solid once it's scrolled past
     (home.js / inner.js toggle .is-solid) — */
.hnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent; border-bottom: calc(var(--space-1) / 2) solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.hnav.is-solid { background: var(--color-bg); border-bottom-color: var(--color-divider); }
.hnav a.nlink { color: var(--color-bg); transition: color 0.35s ease; }
.hnav.is-solid a.nlink { color: var(--color-text); }
.hnav a.nlink:hover { color: var(--color-accent); }
.hnav .nlang { color: color-mix(in srgb, var(--color-bg) 72%, transparent); transition: color 0.35s ease; }
.hnav.is-solid .nlang { color: var(--color-neutral-500); }
.hnav .hnav-logo-color { opacity: 0; transition: opacity 0.35s ease; }
.hnav.is-solid .hnav-logo-color { opacity: 1; }

/* — language switcher: globe button with a small dropdown — */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  appearance: none; -webkit-appearance: none; background: none; border: none;
  cursor: pointer; padding: 0.4rem 0.2rem;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--color-neutral-600); transition: color 0.3s ease;
}
.lang-btn:hover { color: var(--color-accent); }
.lang-btn svg { display: block; }
.hnav .lang-btn { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.hnav.is-solid .lang-btn { color: var(--color-neutral-600); }
.hnav .lang-btn:hover, .hnav.is-solid .lang-btn:hover { color: var(--color-accent); }
.lang-menu {
  position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 9.5rem;
  display: none; flex-direction: column;
  background: var(--color-bg); border: 0.0625rem solid var(--color-divider);
  box-shadow: var(--shadow-md); z-index: 60;
}
.lang.is-open .lang-menu { display: flex; }
.lang-menu a {
  padding: 0.65rem 0.9rem; text-decoration: none; color: var(--color-text);
  font-size: 0.85rem;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.lang-menu a:last-child { border-bottom: none; }
.lang-menu a:hover { background: var(--color-accent); color: var(--color-bg); }
.lang-menu a[aria-current="true"] { color: var(--color-accent-700); font-weight: 600; }
.lang-menu a[aria-current="true"]:hover { color: var(--color-bg); }