/* ============================================================
   NICE – Main Stylesheet
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-dark);
  color: var(--color-lavender);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

/* ── Canvas ──────────────────────────────────────────────── */
#liquid-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-base);
  display: block;
}

/* ── Navigation ──────────────────────────────────────────── */
/* Mobile first: centered top */
.site-nav {
  position: fixed;
  top: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  gap: var(--space-4);    /* tighter gap: 4 items fit on 375px */
  white-space: nowrap;
}

@media (min-width: 480px) {
  .site-nav {
    gap: var(--space-6);
  }
}

/* Desktop: right-aligned, no centering transform */
@media (min-width: 1024px) {
  .site-nav {
    left: auto;
    right: var(--space-6);
    transform: none;
  }

  /* Desktop order: Portfolio → Contact → About → Instagram → Discord */
  /* Mobile HTML order: Instagram Portfolio Contact About Discord (unchanged) */
  .site-nav [data-panel="portfolio"]  { order: 1; }
  .site-nav [data-panel="contact"]    { order: 2; }
  .site-nav [data-panel="about"]      { order: 3; }
  .site-nav [href*="instagram"]       { order: 4; }
  .site-nav [href*="discord"]         { order: 5; }
}

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-md);    /* 2× bigger: 16px on mobile */
  font-weight: var(--font-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-lavender);
  opacity: 0.7;
  text-decoration: none;
  /* min 44px touch target */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity     var(--duration-fast) var(--ease-out-expo),
              color       var(--duration-fast) var(--ease-out-expo),
              text-shadow var(--duration-fast) var(--ease-out-expo);
}

@media (min-width: 1024px) {
  .nav-link {
    font-size: var(--text-sm);  /* 2× bigger on desktop too: 12px */
  }
}

.nav-link:hover,
.nav-link:focus-visible {
  opacity: 1;
  color: var(--color-yellow);
  text-shadow: 0 0 18px rgba(182, 161, 205, 0.55);
  outline: none;
}

/* Smooth fade for nav/tagline/switcher when panel opens/closes */
.site-nav,
.tagline,
.lang-switcher {
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}

/* Hide nav while any panel is open */
[data-panel-open] .site-nav {
  opacity: 0;
  pointer-events: none;
}

/* Hide tagline while any panel is open */
[data-panel-open] .tagline {
  opacity: 0;
  pointer-events: none;
}

/* Hide lang switcher while any panel is open */
[data-panel-open] .lang-switcher {
  opacity: 0;
  pointer-events: none;
}

/* ── Language switcher ───────────────────────────────────── */
/* Mobile: bottom-center, BELOW the tagline                  */
/* Desktop: top-left corner, mirrors nav position            */
.lang-switcher {
  position: fixed;
  /* sits below tagline: tagline bottom=24px, text≈14px → top edge at ~38px.
     switcher min-height=36px at bottom=6px → top edge at 42px. ~4px gap. */
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 1024px) {
  .lang-switcher {
    bottom: auto;
    top: var(--space-6);
    left: var(--space-6);
    transform: none;
    gap: var(--space-2);
  }
}

/* ── Individual lang button ──────────────────────────────── */
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;              /* 12px on mobile — +2px, still discreet */
  font-weight: var(--font-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-lavender);
  opacity: 0.28;
  /* touch target */
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: opacity var(--duration-fast) var(--ease-out-expo),
              color    var(--duration-fast) var(--ease-out-expo);
}

/* Active: yellow + full opacity */
.lang-btn.is-active {
  color: var(--color-yellow);
  opacity: 1;
}

.lang-btn:hover:not(.is-active),
.lang-btn:focus-visible:not(.is-active) {
  opacity: 0.7;
  color: var(--color-lavender);
  outline: none;
}

.lang-btn:focus-visible {
  outline: none;
}

@media (min-width: 1024px) {
  .lang-btn {
    font-size: var(--text-sm);   /* 12px on desktop, matches nav */
    min-width: 36px;
    min-height: 36px;
  }
}

/* ── Tagline ─────────────────────────────────────────────── */
.tagline {
  position: fixed;
  bottom: calc(var(--space-6) + 0.5rem); /* +8px on mobile to breathe above switcher */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  font-family: var(--font-mono);
  font-size: 0.94rem;      /* mobile */
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-lavender);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 1024px) {
  .tagline {
    font-size: 1.09rem;            /* desktop */
    bottom: var(--space-6);        /* reset to original — switcher is top-left on desktop */
  }
}

/* ── Utility ─────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}