/* ███╗   ██╗ █████╗ ██╗   ██╗██████╗  █████╗ ██████╗  */
/* ████╗  ██║██╔══██╗██║   ██║██╔══██╗██╔══██╗██╔══██╗ */
/* ██╔██╗ ██║███████║██║   ██║██████╔╝███████║██████╔╝ */
/* ██║╚██╗██║██╔══██║╚██╗ ██╔╝██╔══██╗██╔══██║██╔══██╗ */
/* ██║ ╚████║██║  ██║ ╚████╔╝ ██████╔╝██║  ██║██║  ██║ */
/* ╚═╝  ╚═══╝╚═╝  ╚═╝  ╚═══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝ */
/*  ██████╗███████╗███████╗                            */
/* ██╔════╝██╔════╝██╔════╝                            */
/* ██║     ███████╗███████╗                            */
/* ██║     ╚════██║╚════██║                            */
/* ╚██████╗███████║███████║                            */
/*  ╚═════╝╚══════╝╚══════╝                            */
/**************************************************************
 * NAVIGATION BAR STYLES
 * Fixed pixel-art / neon-style top navigation bar.
 **************************************************************/
/* ==========================================================
   NAVBAR CONTAINER
   Fixed at the top, spans full width, always visible.
   ========================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dark-pink);
  border: 3px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  padding: 10px 16px;
  font-size: large;
}
/**************************************************************
 * LOGO
 * Bold site title block at the start of the nav.
 **************************************************************/
.logo {
  font-weight: 900;
  font-size: large;
  background: var(--neon-blue);
  height: var(--btn-nav-h);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 3px solid var(--black);
  box-shadow: var(--shadow);
  color: var(--text);
}
/**************************************************************
 * FLEX SPACER
 * Pushes right-side controls to edge of nav.
 **************************************************************/
.spacer {
  flex: 1;
}
/**************************************************************
 * NAVIGATION BUTTONS
 * Shared button style for menu links.
 **************************************************************/
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-nav-h);
  padding: 0 12px;
  font-weight: 800;
  text-decoration: none;
  color: var(--text);
  background: var(--neon-blue);
  border: 3px solid var(--black);
  box-shadow:
    4px 4px 0 var(--black),
    0 0 10px var(--neon-pink);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
/* Hover effect — swaps colors and increases glow */
.btn-nav:hover {
  background: var(--neon-pink);
  box-shadow:
    6px 6px 0 var(--black),
    0 0 14px var(--neon-blue);
}
/* Pressed effect — pixel-style push in */
.btn-nav:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
/**************************************************************
 * DARK MODE TOGGLE WRAPPER
 * Transparent button container for theme toggle.
 **************************************************************/
.dargModeToggle {
  background: transparent;
  border: 0;
}
/**************************************************************
 * MAIN MENU LIST (Desktop)
 **************************************************************/
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu > li {
  font-weight: 800;
}
/**************************************************************
 * THEME SWITCH BUTTON (Sun / Moon Toggle)
 * Circular button with two SVG icons toggled via input state.
 **************************************************************/
.theme {
  --bg: var(--neon-blue);
  --fg: var(--black);
  position: relative;
  width: var(--btn-nav-h);
  height: var(--btn-nav-h);
  border-radius: 50%;
  border: 3px solid var(--fg);
  box-shadow:
    4px 4px 0 var(--black),
    0 0 10px var(--neon-pink);
  background: var(--bg);
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* Hover and active states */
.theme:hover {
  background: var(--neon-pink);
  box-shadow:
    4px 4px 0 var(--black),
    0 0 14px var(--neon-blue);
}
.theme:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 var(--black);
}
/* Hidden input (controls which icon is shown) */
.theme input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* SVG Icon sizing */
.icon {
  width: 22px;
  height: 22px;
}
/* ☀️ SUN ICON (visible when checked) */
.sun {
  stroke: var(--black);
  fill: none;
  display: none;
}
/* MOON ICON (visible when unchecked) */
.moon {
  fill: var(--black);
}
/* Toggle visibility based on checkbox state */
.theme input:checked ~ .sun {
  display: block;
}
.theme input:checked ~ .moon {
  display: none;
}
/**************************************************************
 * BURGER MENU BUTTON (Mobile Only)
 **************************************************************/
.burger {
  width: 42px;
  height: var(--btn-nav-h);
  background: var(--neon-blue);
  border: 3px solid var(--black);
  box-shadow:
    4px 4px 0 var(--black),
    0 0 10px var(--neon-pink);
  display: none; /* hidden on desktop */
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
  padding: 6px;
  cursor: pointer;
}
/* Three stacked bars inside burger */
.burger span {
  display: block;
  background: var(--black);
  height: 3px;
}
/* Hover / active interactions */
.burger:hover {
  background: var(--neon-pink);
  box-shadow:
    4px 4px 0 var(--black),
    0 0 14px var(--neon-blue);
}
.burger:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--black);
}
/**************************************************************
 * MOBILE MENU PANEL (Hidden by default)
 **************************************************************/
.menu-panel {
  display: none;
  z-index: 1001;
}
/* Shown when toggled via JS */
.menu-panel.show {
  display: block;
}
/**************************************************************
 * RESPONSIVE NAVIGATION (Mobile Layout)
 * Trigger burger menu when viewport ≤ 820px.
 **************************************************************/
@media (max-width: 820px) {
  .menu {
    display: none; /* hide desktop nav */
  }
  .burger {
    display: grid; /* show burger icon */
  }
  .menu-panel {
    position: fixed;
    inset: 58px 0 auto 0;
    background: var(--dark-pink);
    border-left: 3px solid var(--black);
    border-right: 3px solid var(--black);
    border-bottom: 3px solid var(--black);
    box-shadow: 6px 6px 0 var(--black);
    padding: 12px 16px;
  }
  /* Vertical stack of nav links in panel */
  .menu-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Make buttons fill the width on mobile */
  .menu-panel .btn-nav {
    width: 100%;
    justify-content: flex-start;
  }
}