/* =============================================
   HEADER.CSS — Site Header & Navigation
   Gigi's Sweets & Treats
   ============================================= */

#site-header {
  background: var(--white);
  box-shadow: 0 2px 20px var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ---- Header Top Row ---- */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px 0;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--brown-light);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.social-links a {
  color: var(--mauve);
  text-decoration: none;
  font-size: 20px;
  transition: color 0.2s, transform 0.2s;
}
.social-links a:hover {
  color: var(--pink-deep);
  transform: scale(1.15);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Admin Gear Button ---- */
#admin-gear-btn {
  display: none;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--mauve);
  transition: color 0.2s, transform 0.3s;
  padding: 4px;
}
#admin-gear-btn:hover {
  color: var(--brown);
  transform: rotate(60deg);
}
#admin-gear-btn.visible {
  display: flex;
}

/* ---- Logo ---- */
.logo-area {
  text-align: center;
  padding: 8px 0 4px;
  flex: 1;
}

.logo-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--brown);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.logo-cupcake { font-size: 0.75em; }

.logo-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  letter-spacing: 0.25em;
  color: var(--pink);
  text-transform: uppercase;
  margin-top: -4px;
}

/* ---- Nav Bar ---- */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 40px 12px;
  flex-wrap: wrap;
}

.nav-tab {
  padding: 8px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--pink-light);
  color: var(--mauve);
  transition: all 0.2s;
  text-decoration: none;
  user-select: none;
}
.nav-tab:hover {
  background: var(--pink);
  color: var(--white);
  transform: translateY(-1px);
}
.nav-tab.active {
  background: var(--brown);
  color: var(--white);
}

.nav-order-btn {
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--pink);
  background: var(--pink-light);
  color: var(--mauve);
  transition: all 0.2s;
  margin-left: 20px;
}
.nav-order-btn:hover {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--white);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .header-top { padding: 8px 16px 0; }
  .nav-bar { padding: 8px 12px; gap: 4px; }
  .nav-tab { padding: 6px 14px; font-size: 11px; }
}