/* =========================================================
   GLOBAL HEADER + NAV PRESENTATION
   Single source of truth for all pages
   ========================================================= */

/* -------------------------
   BASE PAGE RESET (SAFE)
-------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: #271d3b; /* brand purple */
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

/* -------------------------
   HEADER CONTAINER
-------------------------- */
header {
  text-align: center;
  padding: 30px 20px 40px;
}

/* -------------------------
   LOGO
-------------------------- */
header .logo {
  max-width: 240px;
  display: block;
  margin: 0 auto 12px;
}

/* -------------------------
   TAGLINE / SUBTEXT
-------------------------- */
header p {
  color: #8360c3; /* was yellow; now brand gradient purple */
  margin: 0 0 20px;
  font-size: 1rem;
}

/* =========================================================
   NAV CORE
   ========================================================= */
#site-nav .nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* -------------------------
   NAV LINKS (STABLE)
-------------------------- */
#site-nav .nav a,
#site-nav .nav .nav-link {
  color: #8360c3; /* was red; now brand gradient purple */
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 0;

  /* Prevent movement on hover/click */
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}

/* Hover / focus — NO SIZE SHIFT */
#site-nav .nav a:hover,
#site-nav .nav .nav-link:hover,
#site-nav .nav a:focus,
#site-nav .nav .nav-link:focus {
  color: #2ebf91; /* was orange/red; now brand green */
}

/* =========================================================
   DROPDOWN (PACKS)
   ========================================================= */
#site-nav .nav-dropdown {
  position: relative;
}

#site-nav .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 120%;
  left: 0;

  background: #271d3b; /* keep on-brand */
  border: 1px solid #3a2b58; /* subtle branded border */
  border-radius: 10px;

  padding: 8px 0;
  min-width: 220px;
  z-index: 9999;
}

/* Show dropdown */
#site-nav .nav-dropdown:hover .nav-dropdown-menu,
#site-nav .nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

/* Dropdown links */
#site-nav .nav-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-weight: normal;
}

/* Dropdown hover */
#site-nav .nav-dropdown-menu a:hover {
  background: #2ebf91; /* was red; now brand green */
  color: #271d3b;      /* readable against green */
}

/* =========================================================
   CART LINK — NO DROPDOWN EVER
   ========================================================= */
#site-nav a[href="cart.html"] {
  position: relative;
}

/* Kill accidental hover behaviors */
#site-nav a[href="cart.html"] * {
  pointer-events: none;
}