/* ==============================================================================
 * HEADER BLOCK: "Question Before Making It"
 * ==============================================================================
 * WHAT THIS FILE DOES:
 *   Styles the modern floating island capsule navbar for ProAffiliaters, featuring
 *   frosted glassmorphism, pill navigation links, gradient CTAs, and mobile drawer.
 *
 * WHY THIS FILE EXISTS:
 *   A modern SaaS navbar provides an immediate, premium first impression. The floating
 *   island capsule (Option A) suspends the navbar cleanly above the hero canvas,
 *   letting background motion flow seamlessly underneath with full WCAG AA contrast.
 *
 * WHAT MAJOR RESPONSIBILITY IT HANDLES:
 *   - Floating Island Shell: Fixed suspended header with rounded capsule geometry.
 *   - Frosted Glassmorphism: Multi-stop backdrop blur and light border refraction.
 *   - Pill Hover Interactions: Smooth background pill transitions on navigation links.
 *   - Conversion Action Triggers: Ghost Login button and elevated gradient Get Started CTA.
 *   - Responsive Drawer Integration: Seamless adaptation for tablets and mobile screens.
 *
 * HOW IT FITS INTO THE OVERALL MARKETING WEBSITE:
 *   Loaded globally in `app/layout.tsx` (`/css/navbar.css`), styling the header component
 *   in `components/Header.tsx` and `views/partials/header.ejs`.
 * ==============================================================================
 */

header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

header.site-header nav,
nav.site-nav {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: 60px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 
    0 12px 32px -8px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.03),
    inset 0 1px 1px rgba(255, 255, 255, 1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Container ─────────────────────────────────────────── */
header.site-header .div-container,
nav.site-nav .div-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px 0 14px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* ─── Logo ───────────────────────────────────────────────── */
.nav-logo-group {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 9999px;
  transition: opacity 0.2s ease;
}

.nav-logo-group:hover {
  opacity: 0.9;
}

.nav-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(79, 110, 247, 0.25);
}

.brand-title {
  font-size: 1.18rem;
  font-weight: 850;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #3b5bfa 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Nav-menu wrapper (links + buttons together) ─────── */
.nav-menu-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  margin-left: 28px;
}

/* ─── Links ──────────────────────────────────────────────── */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.nav-links a {
  font-family: 'Camera Plain Variable', 'Camera Plain', 'ABC Camera Plain', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem;
  font-weight: 550;
  color: #475569;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 9999px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.05);
}

.nav-links a.active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  font-weight: 650;
}

/* ─── Auth Buttons ───────────────────────────────────────── */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-buttons a {
  text-decoration: none;
}

.login-btn {
  font-family: 'Camera Plain Variable', 'Camera Plain', 'ABC Camera Plain', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-btn:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.05);
}

.sign-btn {
  font-family: 'Camera Plain Variable', 'Camera Plain', 'ABC Camera Plain', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 110, 247, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sign-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 110, 247, 0.45);
  filter: brightness(1.05);
  color: #ffffff;
}

/* ─── Hamburger (hidden on desktop) ─────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 6px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 202;
  position: relative;
  transition: background 0.2s;
}

.hamburger:hover {
  background: rgba(79, 110, 247, 0.08);
}

.hamburger .bar {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #1e293b;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.2s ease,
              background-color 0.2s ease;
}

.hamburger.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: #6366f1;
}
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: #8b5cf6;
}

.nav-icon {
  display: none;
}

/* ─── Mobile Adaptations (<768px) ───────────────────────── */
@media (max-width: 768px) {
  header {
    top: 0;
    padding: 10px 14px;
  }

  nav {
    height: 56px;
    border-radius: 18px;
  }

  .div-container {
    height: 56px;
    padding: 0 12px;
  }

  .hamburger {
    display: flex;
  }
}

/* ==============================================================================
 * FOOTER BLOCK: "Answer in the End"
 * ==============================================================================
 * MAIN WORKFLOW & EXECUTION STEPS:
 *   1. Fixed Suspended Header: Floats above page content at `top: 0; padding: 12px 24px;`
 *      with pointer-events: none so clicks on sides pass to background.
 *   2. Floating Capsule Navbar: Rendered with max-width: 1240px, height: 60px, and
 *      border-radius: 9999px frosted glassmorphic capsule.
 *   3. Interactive Nav Links: Individual pill hover backgrounds and active indicators.
 *   4. Conversion Buttons: Ghost Login button and vibrant brand gradient Get Started CTA.
 *   5. Mobile Drawer: Hamburger trigger toggles side drawer for phone screens.
 *
 * KEY CSS CLASSES:
 *   - header: Top wrapper controlling fixed suspension.
 *   - nav: Floating frosted capsule container.
 *   - .div-container: Centered flex row inside nav.
 *   - .sign-btn: Primary gradient pill action.
 *
 * DEPENDENCIES & INTEGRATIONS:
 *   - Loaded via `app/layout.tsx` (`/css/navbar.css`).
 *   - Paired with `components/Header.tsx` and `views/partials/header.ejs`.
 * ==============================================================================
 */