/* ================================================================
   LOOM — Shared navigation (light editorial system).
   Markup is injected by assets/layout.js; behaviour by nav.js.
   Contract (do not rename): .nav, .nav-content, .nav-brand,
   .nav-links, .nav-link, .nav-right, .nav-cta, .nav-cart-btn,
   .cart-count, .lang-*, .nav-hamburger (#menuToggle),
   .mobile-* (#mobileMenu, #mobileBackdrop, #menuClose), body.menu-open
================================================================ */

/* ── Bar ─────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  min-height: var(--nav-h, 64px); height: var(--nav-h, 64px);
  background: var(--nav-bg, rgba(244, 242, 237, 0.82));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  z-index: 200;
  border-bottom: 1px solid var(--line, rgba(19,19,17,0.16));
  overflow: visible;
}
/* cheaper compositing on phones: more opaque paper, lighter blur */
@media (max-width: 767px) {
  .nav {
    background: var(--nav-bg-strong, rgba(244, 242, 237, 0.94));
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  .nav-content {
    padding-left: max(var(--gutter, 1.25rem), env(safe-area-inset-left));
    padding-right: max(var(--gutter, 1.25rem), env(safe-area-inset-right));
  }
}
.nav-content {
  max-width: var(--max-w, 1360px); margin: 0 auto; height: var(--nav-h, 64px);
  padding: 0 var(--gutter, 1.75rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-brand {
  font-family: var(--font-display, sans-serif);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--ink, #131311); text-transform: uppercase; text-decoration: none; flex-shrink: 0;
}
.nav-brand-slash { color: var(--accent, #fc5044); }

/* ── Links ───────────────────────────────────────────────────── */
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-link {
  position: relative;
  color: var(--ink-55, rgba(19,19,17,0.55)); text-decoration: none;
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color 200ms var(--ease-out, ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-link:hover, .nav-link.active { color: var(--ink, #131311); }
.nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--accent, #fc5044);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out, ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link:focus, .nav-link:focus-visible { outline: none; }

/* ── Right cluster ───────────────────────────────────────────── */
.nav-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.52rem 1.1rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink, #131311); background: transparent;
  border: 1px solid var(--ink, #131311); border-radius: var(--radius, 2px);
  text-decoration: none; white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.nav-cta:hover { background: var(--accent, #fc5044); color: var(--on-accent, #fff); border-color: var(--accent, #fc5044); }
/* mobile-only: the compact pill keeps the product CTA in the one
   persistent surface phones have. Desktop keeps its link row as-is. */
@media (min-width: 768px) { .nav-cta { display: none; } }
@media (max-width: 767px) {
  .nav-cta { padding: 0.5rem 0.8rem; font-size: 0.64rem; letter-spacing: 0.1em; }
  body[data-page="configurator"] .nav-cta,
  body[data-page="account"] .nav-cta { display: none; }
}

/* Cart button (configurator) */
.nav-cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius, 2px); background: transparent;
  border: 1px solid var(--line, rgba(19,19,17,0.16)); color: var(--ink, #131311); cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-cart-btn:hover { border-color: var(--ink, #131311); background: var(--hover-wash, rgba(19, 19, 17, 0.04)); }
.nav-cart-btn svg { width: 19px; height: 19px; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--accent, #fc5044); color: var(--on-accent, #fff);
  font-size: 0.68rem; font-weight: 700; font-family: var(--font-mono, monospace);
  display: none; align-items: center; justify-content: center; line-height: 1;
}
.cart-count.show { display: inline-flex; }

/* ── Language switcher ───────────────────────────────────────── */
.lang-switcher { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-70, rgba(19,19,17,0.7)); font-family: inherit;
  font-size: 0.76rem; letter-spacing: 0.06em; padding: 0.3rem 0.1rem;
  transition: color 150ms ease;
}
.lang-btn:hover { color: var(--ink, #131311); }
.lang-btn svg:first-child { opacity: 0.85; }
.lang-current { font-family: var(--font-mono, monospace); font-weight: 500; }
.lang-caret { opacity: 0.6; transition: transform 200ms ease; flex-shrink: 0; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 0.55rem); right: 0;
  background: var(--paper-3, #fff); border: 1px solid var(--line, rgba(19,19,17,0.16));
  border-radius: var(--radius, 2px); padding: 0.3rem 0; min-width: 140px; z-index: 9999;
  box-shadow: var(--menu-shadow, 0 14px 40px rgba(19, 19, 17, 0.14));
}
.lang-menu.open { display: block; }
.lang-option {
  display: block; width: 100%; text-align: left;
  padding: 0.65rem 1rem; background: transparent; border: none; cursor: pointer;
  color: var(--ink-55, rgba(19,19,17,0.55)); font-family: inherit; font-size: 0.82rem;
  transition: background 150ms, color 150ms; white-space: nowrap;
}
@media (pointer: coarse) {
  .lang-btn { min-height: 44px; padding: 0.5rem 0.4rem; }
}
.lang-option:hover { background: var(--paper-2, #ebe8e1); color: var(--ink, #131311); }
.lang-option.active { color: var(--accent-deep, #d63a2f); }
.lang-option.active::before { content: '✓ '; }

@media (max-width: 767px) { .nav-right .lang-switcher { display: none; } }

/* ── Hamburger ───────────────────────────────────────────────── */
.nav-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink, #131311); -webkit-tap-highlight-color: transparent; z-index: 210; padding: 0;
}
.nav-hamburger svg { width: 22px; height: 22px; }
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Mobile menu — full-screen, editorial ────────────────────── */
.mobile-backdrop {
  position: fixed; inset: 0; background: var(--scrim, rgba(19, 19, 17, 0.4));
  z-index: 250; opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  touch-action: none;
}
.mobile-backdrop.active { opacity: 1; visibility: visible; }
.mobile-menu {
  position: fixed; top: 0; right: 0; width: 100%; height: 100%;
  background: var(--paper, #f4f2ed);
  z-index: 300;
  transform: translateX(100%); transition: transform 550ms var(--ease-inout, cubic-bezier(0.77, 0, 0.18, 1));
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; border-bottom: 1px solid var(--line, rgba(19,19,17,0.16));
  min-height: 64px; flex-shrink: 0;
}
.mobile-menu-brand {
  font-family: var(--font-display, sans-serif); font-size: 1rem; font-weight: 800;
  letter-spacing: 0.14em; color: var(--ink, #131311); text-transform: uppercase;
}
.mobile-menu-close {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-right: -10px;
  background: transparent; border: none; cursor: pointer; color: var(--ink-55, rgba(19,19,17,0.55));
  border-radius: var(--radius, 2px); transition: color 200ms ease; padding: 0;
}
.mobile-menu-close:hover, .mobile-menu-close:active { color: var(--ink, #131311); }
.mobile-menu-close svg { width: 22px; height: 22px; }
.mobile-menu-links {
  display: flex; flex-direction: column; padding: 1.5rem 0 0; flex: 1;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  counter-reset: mlink;
}
/* nav links as display type — on mobile the menu IS the navigation */
.mobile-menu-link {
  display: flex; align-items: baseline; gap: 0.85rem; padding: 0.55rem 1.5rem;
  color: var(--ink, #131311); text-decoration: none;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.9rem, 9vw, 2.5rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
  opacity: 0; transform: translateY(24px);
  transition: opacity 350ms var(--ease-out, ease), transform 500ms var(--ease-out, ease), color 200ms ease;
}
.mobile-menu-link:not(.mobile-menu-link--cta)::before {
  counter-increment: mlink;
  content: '0' counter(mlink);
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.2em;
  color: var(--ink-38, rgba(19,19,17,0.38));
}
.mobile-menu.active .mobile-menu-link { opacity: 1; transform: none; }
.mobile-menu.active .mobile-menu-link:nth-child(1) { transition-delay: 80ms; }
.mobile-menu.active .mobile-menu-link:nth-child(2) { transition-delay: 140ms; }
.mobile-menu.active .mobile-menu-link:nth-child(3) { transition-delay: 200ms; }
.mobile-menu.active .mobile-menu-link:nth-child(4) { transition-delay: 260ms; }
.mobile-menu.active .mobile-menu-link:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.active .mobile-menu-link:nth-child(6) { transition-delay: 380ms; }
.mobile-menu-link:active { color: var(--accent-deep, #d63a2f); }
.mobile-menu-link.active { color: var(--accent-deep, #d63a2f); }
.mobile-menu-link svg { display: none; }
.mobile-menu-link--cta {
  margin: 1.6rem 1.5rem 0; padding: 1rem 1.5rem;
  border: 1px solid var(--ink, #131311); border-radius: var(--radius, 2px);
  justify-content: center; align-items: center; text-transform: uppercase;
  font-family: var(--font-body, sans-serif); font-size: 0.75rem;
  letter-spacing: 0.12em; font-weight: 600; color: var(--ink, #131311);
}
.mobile-menu-link--cta:active { background: var(--ink, #131311); color: var(--paper, #f4f2ed); }
.mobile-menu-link--cta.active { color: var(--ink, #131311); }

/* Language row inside the mobile menu */
.mobile-lang {
  padding: 1rem 1.5rem; border-top: 1px solid var(--line-soft, rgba(19,19,17,0.09));
  margin-top: auto;
}
.mobile-lang-label {
  display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-38, rgba(19,19,17,0.38)); font-family: var(--font-mono, monospace); margin-bottom: 0.75rem;
}
.mobile-lang .lang-switcher { width: 100%; }
.mobile-lang .lang-btn { display: none; }
.mobile-lang .lang-menu {
  display: flex; position: static; box-shadow: none; border: none; background: transparent;
  padding: 0; gap: 0.5rem; min-width: 0;
}
.mobile-lang .lang-option {
  flex: 1; text-align: center; border: 1px solid var(--line, rgba(19,19,17,0.16));
  border-radius: var(--radius, 2px); padding: 0.75rem 0; font-size: 0.78rem;
}
.mobile-lang .lang-option.active {
  background: var(--ink, #131311); color: var(--paper, #f4f2ed); border-color: var(--ink, #131311);
}
.mobile-lang .lang-option.active::before { content: ''; }

body.menu-open { overflow: hidden; }
@media (min-width: 768px) { .mobile-menu, .mobile-backdrop { display: none !important; } }

/* ── Theme switcher (reference-style dots) ───────────────────
   Markup injected by layout.js; behaviour by assets/boot.js
   (delegated [data-theme-set] click → __loomTheme.set). One dot per
   theme; the active dot carries a paper-gap accent ring. */
.theme-dots { display: inline-flex; align-items: center; gap: 9px; }
.theme-dot {
  width: 16px; height: 16px; border-radius: 50%;
  padding: 0; cursor: pointer; position: relative;
  border: 1px solid var(--line, rgba(19,19,17,0.16));
  transition: transform 200ms var(--ease-out, ease), box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* dots preview their own theme, so their colors never follow tokens */
.theme-dot--light { background: #f4f2ed; border-color: rgba(19, 19, 17, 0.35); }
.theme-dot--dark  { background: #151412; border-color: rgba(244, 242, 237, 0.35); }
.theme-dot:hover { transform: scale(1.18); }
.theme-dot.active {
  box-shadow: 0 0 0 2px var(--paper, #f4f2ed), 0 0 0 4px var(--accent, #fc5044);
}
/* comfortable touch target without growing the visual dot */
.theme-dot::after { content: ''; position: absolute; inset: -8px; }
@media (max-width: 767px) { .nav-right .theme-dots { display: none; } }

/* Theme row inside the mobile menu (mirrors .mobile-lang) */
.mobile-theme {
  padding: 1rem 1.5rem 0;
  border-top: 1px solid var(--line-soft, rgba(19,19,17,0.09));
}
.mobile-theme-label {
  display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-38, rgba(19,19,17,0.38)); font-family: var(--font-mono, monospace); margin-bottom: 0.75rem;
}
.mobile-theme .theme-dots { gap: 14px; }
.mobile-theme .theme-dot { width: 26px; height: 26px; }
@media (hover: none) { .theme-dot:hover { transform: none; } }