/* ── AAID Shared Stylesheet ── */
/* Nav, footer, theme variables */

:root {
  --purple: #9b59b6;
  --teal:   #1abc9c;
  --pink:   #e91e8c;
  --serif:  'Space Grotesk', sans-serif;
  --sans:   'Space Grotesk', system-ui, sans-serif;
  --logo:   'Montserrat Subrayada', sans-serif;
  --transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

[data-theme="dark"] {
  --bg:       #0d0d12;
  --bg2:      #13131a;
  --text:     #e8e6f0;
  --muted:    #7a7890;
  --nav-text: #e8e6f0;
  --border:   rgba(255,255,255,0.08);
}

[data-theme="light"] {
  --bg:       #f8f7f4;
  --bg2:      #efede8;
  --text:     #1a1825;
  --muted:    #6b6880;
  --nav-text: #1a1825;
  --border:   rgba(0,0,0,0.08);
}

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the links */
  position: relative; /* For absolute positioning of logo/toggle */
  padding: 1.25rem 4vw;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  transition: var(--transition);
}
.nav-logo {
  position: absolute; left: 4vw;
  font-family: var(--logo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  opacity: 1;
}
ul.nav-links {
  display: flex; gap: 2rem; align-items: center; list-style: none;
  padding: 0; margin: 0; /* remove default list styles */
}
.theme-toggle {
  position: absolute; right: 4vw;
  background: none; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  padding: 0.35rem 0.75rem; border-radius: 20px;
  font-size: 0.8rem; font-family: var(--sans); transition: all 0.2s;
}
.nav-logo {
  font-family: var(--logo);
  font-size: 1.5rem; /* 30% smaller than 2.1rem */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  opacity: 1;
}

ul.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; }
ul.nav-links a {
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
}
ul.nav-links a:hover { color: var(--nav-text); }
ul.nav-links a.active { color: #fff; font-weight: 600; }
.nav-join { color: var(--teal) !important; }
.theme-toggle {
  background: none; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  padding: 0.35rem 0.75rem; border-radius: 20px;
  font-size: 0.8rem; font-family: var(--sans); transition: all 0.2s;
}
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }

/* View Transitions ripple */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }