/* ═══════════════════════════════════════════════════════════
   public_html/assets/nav.css

   Site navigation, shared between the public pages and the
   myAqumo login screen.

   Defined once so the header does not drift apart between the
   static site and the PHP application.

   Requires tokens.css to be loaded first.
   ═══════════════════════════════════════════════════════════ */

.aq-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 247, 251, 0.90);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--aq-border-soft);
}

.aq-nav .wrapper {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

.aq-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--aq-nav-height);
}

.aq-nav .logo { display: flex; align-items: center; text-decoration: none; }
.aq-nav .logo img { height: 38px; width: auto; display: block; }

.aq-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Typographic small caps: Barlow has no real OpenType small caps,
   so we use reduced-size uppercase with wide tracking. */
.aq-nav .nav-links a {
  font-family: var(--aq-font-body);
  font-weight: 600;
  font-size: var(--aq-nav-size);
  text-transform: uppercase;
  letter-spacing: var(--aq-nav-tracking);
  color: var(--aq-text-mid);
  text-decoration: none;
  transition: color .2s;
  position: relative;
  padding: 6px 0;
}

.aq-nav .nav-links a:hover { color: var(--aq-blue); }
.aq-nav .nav-links a.active { color: var(--aq-blue); }

.aq-nav .nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--aq-blue);
}

.aq-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ── LANGUAGE SELECTOR ─────────────────────────────────
   No flags: they stand for countries, not languages — and
   German is spoken in Switzerland too. Mono code + name,
   with the same status dot used elsewhere in the site.
   Adapted to the light navbar: the original dark-panel
   treatment would have been invisible here. */
.aq-nav .lang-selector { position: relative; }

.aq-nav .lang-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 11px;
  color: var(--aq-text-mid);
  background: transparent;
  border: 1px solid var(--aq-border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, color .18s;
}
.aq-nav .lang-trigger:hover,
.aq-nav .lang-selector.is-open .lang-trigger {
  border-color: var(--aq-border-blue);
  background: var(--aq-blue-50);
  color: var(--aq-blue);
}
.aq-nav .lang-trigger:focus-visible {
  outline: 2px solid var(--aq-blue);
  outline-offset: 2px;
}

.aq-nav .lang-code {
  font-family: var(--aq-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
}
.aq-nav .lang-name {
  font-family: var(--aq-font-body);
  font-size: 13px;
  font-weight: 500;
  opacity: .72;
}
.aq-nav .lang-chevron {
  width: 10px; height: 7px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .6;
  transition: transform .18s;
}
.aq-nav .lang-selector.is-open .lang-chevron { transform: rotate(180deg); }

.aq-nav .lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 244px;
  padding: 6px;
  background: var(--aq-white);
  border: 1px solid var(--aq-border-soft);
  border-radius: 4px;
  box-shadow: 0 18px 48px -18px rgba(10,22,40,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, visibility .16s, transform .16s;
  z-index: 200;
}
.aq-nav .lang-selector.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aq-nav .lang-menu-label {
  padding: 8px 10px 9px;
  font-family: var(--aq-font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aq-text-faint);
}

.aq-nav .lang-option {
  display: grid;
  grid-template-columns: 6px 26px 1fr auto;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 3px;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  color: var(--aq-text-mid);
  transition: background-color .15s, color .15s;
}
.aq-nav .lang-option:hover {
  background: var(--aq-blue-50);
  color: var(--aq-blue);
}

.aq-nav .lang-status {
  width: 6px; height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .32;
}
.aq-nav .lang-option.active .lang-status {
  background: var(--aq-green);
  border-color: var(--aq-green);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--aq-green-50);
}

.aq-nav .lang-option-code {
  font-family: var(--aq-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.aq-nav .lang-option-name {
  font-family: var(--aq-font-body);
  font-size: 14px;
  opacity: .78;
}
.aq-nav .lang-option.active .lang-option-name {
  opacity: 1;
  font-weight: 600;
}


/* Languages not yet published: visible but not selectable, so the
   visitor knows they are coming instead of hitting a 404. */
.aq-nav .lang-option.is-pending {
  cursor: default;
  color: var(--aq-text-faint);
}
.aq-nav .lang-option.is-pending:hover {
  background: transparent;
  color: var(--aq-text-faint);
}
.aq-nav .lang-option.is-pending .lang-status {
  opacity: .22;
}
.aq-nav .lang-option.is-pending .lang-option-name {
  opacity: .62;
}
.aq-nav .lang-soon {
  font-family: var(--aq-font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aq-text-faint);
  border: 1px solid var(--aq-border-soft);
  border-radius: 2px;
  padding: 3px 5px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .aq-nav .lang-name { display: none; }
}

.aq-nav .btn-contact {
  font-family: var(--aq-font-body);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: var(--aq-blue);
  padding: 10px 22px;
  border-radius: 3px;
  text-decoration: none;
  transition: background .2s;
}

.aq-nav .btn-contact:hover { background: var(--aq-blue-dk); }

@media (max-width: 720px) {
  .aq-nav .wrapper { padding: 0 24px; }
  .aq-nav .nav-links { display: none; }
}