/* =========================================================
   SuperTwentyPlus · PassGen Neon Theme
   - Futuristic cyan / magenta glow styling
   - Fixed hamburger navigation
   - Responsive neon cards and controls
========================================================= */

/* =========================
   CSS VARIABLES (ROOT)
   ========================= */
:root {
  --bg: #04012b;                          /* Primary background base color */
  --panel: #0f1324cc;                     /* Semi-transparent panel background */
  --line: #1c2140;                        /* Divider / line color */
  --text: #dcf9ff;                        /* Primary text color */
  --muted: #89b6c2;                       /* Muted / secondary text */
  --accent: #00ffff;                     /* Cyan accent glow */
  --accent2: #ff00ff;                    /* Magenta accent glow */
  --danger: #ff4d6d;                     /* Danger / error color */
  --brand: #7c4dff;                      /* Brand violet accent */
  --shadow:                              /* Global neon shadow */
    0 0 24px rgba(0,174,255,.95),
    0 0 48px rgba(0,174,255,.95);
}

/* =========================
   GLOBAL RESET
   ========================= */
* {
  box-sizing: border-box;                /* Include padding & border in sizing */
}

html,
body {
  height: 100%;                          /* Full-height layout base */
}

/* =========================
   BODY STYLING
   ========================= */
body {
  margin: 0;                             /* Remove default browser margin */
  font-family:                           /* Primary UI font stack */
    'Montserrat',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  background:                            /* Neon radial gradient backdrop */
    radial-gradient(
      1200px 600px at 20% -10%,
      #0d1736 0%,
      #0b0f1a 50%
    ),
    #0b0f1a;
  color: var(--text);                    /* Apply global text color */
}

/* ===============================================================
   HAMBURGER MENU — PASSGEN NEON THEME (FIXED HEADER)
   =============================================================== */

/* Navigation container */
.hamburger-nav {
  position: fixed;                       /* Stick menu to viewport */
  top: 0;                                /* Align to top edge */
  left: 0;                               /* Full-width left */
  right: 0;                              /* Full-width right */
  height: 70px;                          /* Fixed nav height */
  background: rgba(0,0,0,0.75);          /* Semi-transparent black */
  border-bottom: 2px solid var(--accent);/* Cyan neon underline */
  display: flex;                         /* Flex layout */
  justify-content: space-between;        /* Brand left, button right */
  align-items: center;                   /* Vertical centering */
  padding: 0 22px;                       /* Horizontal spacing */
  z-index: 99999;                        /* Force top stacking */
}

/* Brand / logo text */
.hamburger-brand {
  font-size: 1.1rem;                     /* Slightly larger text */
  color: var(--accent);                  /* Cyan glow color */
  font-family: 'Orbitron', monospace;    /* Futuristic font */
}

/* Hamburger button */
.hamburger-btn {
  background: none;                      /* Remove default button bg */
  border: none;                          /* Remove default border */
  font-size: 1.8rem;                     /* Icon size */
  color: var(--accent);                  /* Cyan icon color */
  cursor: pointer;                       /* Pointer cursor */
}

/* Dropdown menu container */
.hamburger-menu {
  position: absolute;                    /* Anchor to nav */
  right: 22px;                           /* Align with padding */
  top: 70px;                             /* Below navbar */
  background: rgba(0,0,0,0.92);          /* Dark translucent panel */
  border: 1px solid var(--accent);       /* Neon cyan border */
  border-radius: 12px;                   /* Rounded corners */
  padding: 10px 0;                       /* Vertical padding */
  min-width: 180px;                      /* Minimum menu width */
  display: none;                         /* Hidden by default */
  flex-direction: column;                /* Vertical links */
  z-index: 99999;                        /* Above content */
  box-shadow:                            /* Soft neon glow */
    0 0 20px rgba(0,255,255,0.25);
}

/* Menu visible state */
.hamburger-menu.open {
  display: flex;                         /* Reveal menu */
}

/* Menu links */
.hamburger-menu a {
  padding: 10px 18px;                    /* Clickable spacing */
  font-size: 0.8rem;                     /* Compact text */
  color: var(--muted);                   /* Muted cyan text */
  text-decoration: none;                /* Remove underline */
  font-weight: 500;                     /* Medium weight */
}

/* Menu hover effect */
.hamburger-menu a:hover {
  background: rgba(0,255,255,0.15);      /* Cyan hover glow */
  color: var(--text);                    /* Bright text on hover */
}

/* =========================
   LAYOUT
   ========================= */
.container {
  max-width: 960px;                      /* Desktop content width */
  margin: 110px auto 80px;               /* Clear fixed header */
  padding: 0 16px;                       /* Mobile side padding */
}

/* Hero section */
.hero {
  text-align: center;                    /* Center text */
  margin-bottom: 18px;                  /* Spacing below hero */
}

/* Hero title */
.hero h1 {
  font-family: 'Orbitron', monospace;    /* Neon heading font */
  font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem); /* Responsive size */
  color: #e7faff;                        /* Bright cyan-white */
  text-shadow:                           /* Dual neon glow */
    0 0 16px rgba(0,255,255,.35),
    0 0 22px rgba(255,0,255,.2);
  margin: 0 0 6px;                       /* Tight spacing */
}

/* Hero subtitle */
.tagline {
  color: var(--muted);                   /* Muted descriptive text */
  margin: 0 0 18px;                      /* Bottom spacing */
}

/* =========================
   CARD COMPONENT
   ========================= */
.card {
  background:                             /* Glass neon gradient */
    linear-gradient(
      180deg,
      rgba(4, 1, 43,.85),
      rgba(9,12,26,.85)
    );
  border: 1px solid #00c3ff;             /* Subtle border */
  border-radius: 18px;                  /* Rounded card */
  padding: 18px;                        /* Inner spacing */
  margin: 18px 0;                       /* Vertical separation */
  box-shadow: var(--shadow);             /* Neon glow */
}

/* =========================
   ROWS & STACKS
   ========================= */
.row {
  display: flex;                         /* Horizontal layout */
  gap: 12px;                             /* Element spacing */
  align-items: center;                   /* Vertical alignment */
  flex-wrap: wrap;                       /* Wrap on small screens */
}

.stack {
  display: grid;                         /* Vertical stacking */
  gap: 10px;                             /* Stack spacing */
  margin-top: 6px;                      /* Separation from label */
}

/* =========================
   INPUT FIELDS
   ========================= */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  width: 100%;                           /* Full width */
  background: #04012b;                   /* Dark input bg */
  border: 1px solid #203259;             /* Input border */
  color: var(--text);                    /* Text color */
  padding: 12px 14px;                   /* Comfortable spacing */
  border-radius: 12px;                  /* Rounded edges */
  font-size: 1rem;                      /* Standard size */
  outline: none;                        /* Remove default focus */
  box-shadow:                            /* Inner neon inset */
    inset 0 0 18px rgba(0,255,255,.08);
}

/* Input focus state */
input:focus,
textarea:focus {
  border-color: var(--accent);           /* Cyan focus border */
  box-shadow: 0 0 16px rgba(0,255,255,.35); /* Outer glow */
}

/* =========================
   LABELS
   ========================= */
.label {
  color: #b8dbe6;                        /* Soft cyan */
  font-weight: 600;                     /* Semi-bold */
  margin-top: 6px;                      /* Spacing above */
}

/* =========================
   PILLS (CHECKBOX / RADIO)
   ========================= */
.pills {
  gap: 10px;                            /* Pill spacing */
}

.pill {
  padding: 8px 12px;                    /* Pill size */
  border: 1px solid #233664;            /* Outline */
  border-radius: 999px;                 /* Fully rounded */
  background: #0b1024;                  /* Dark base */
  color: #dff7ff;                       /* Bright text */
  cursor: pointer;                     /* Clickable */
  user-select: none;                   /* Prevent selection */
  box-shadow:                            /* Subtle inset glow */
    inset 0 0 10px rgba(0,255,255,.06);
}

.pill input {
  margin-right: 6px;                    /* Space before label */
}

/* =========================
   BUTTONS
   ========================= */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger {
  border-radius: 12px;                  /* Rounded buttons */
  padding: 12px 16px;                  /* Click size */
  cursor: pointer;                     /* Pointer cursor */
  border: 1px solid transparent;        /* Default border */
  font-weight: 700;                    /* Bold text */
  letter-spacing: .02em;               /* Slight spacing */
  transition: .2s;                     /* Smooth effects */
  white-space: nowrap;                 /* Prevent wrapping */
}

/* Primary CTA */
.btn-primary {
  background:                            /* Neon gradient */
    linear-gradient(
      135deg,
      #00f0ff 0%,
      #7c4dff 100%
    );
  color: #031018;                       /* Dark text */
  border-color: #00e6ff;               /* Cyan border */
  box-shadow:                            /* Dual glow */
    0 0 18px rgba(0,255,255,.35),
    0 0 24px rgba(124,77,255,.25);
}

.btn-primary:hover {
  transform: translateY(-1px);          /* Lift effect */
  filter: brightness(1.06);             /* Slight brighten */
}

/* Secondary button */
.btn-secondary {
  background: #0b1024;                  /* Dark base */
  color: #e3f7ff;                       /* Light text */
  border-color: #28457a;               /* Blue border */
  box-shadow:                            /* Inset glow */
    inset 0 0 14px rgba(0,255,255,.08);
}

.btn-secondary:hover {
  border-color: var(--accent);           /* Cyan border */
  box-shadow: 0 0 14px rgba(0,255,255,.35);
}

/* Outline button */
.btn-outline {
  background: transparent;              /* No fill */
  color: #c9eefe;                       /* Cyan text */
  border-color: #2a4a81;               /* Outline */
}

.btn-outline:hover {
  border-color: var(--accent2);          /* Magenta */
  box-shadow: 0 0 14px rgba(255,0,255,.35);
}

/* Danger button */
.btn-danger {
  background: #220912;                  /* Dark red base */
  color: #ffd9df;                       /* Light red text */
  border-color: #531c2a;               /* Border */
  box-shadow:                            /* Inset danger glow */
    inset 0 0 14px rgba(255,77,109,.18);
}

.btn-danger:hover {
  border-color: var(--danger);           /* Bright red */
  box-shadow: 0 0 16px rgba(255,77,109,.35);
}

/* =========================
   PASSWORD DISPLAY
   ========================= */
.password-display input {
  flex: 1;                              /* Grow to fill */
  min-width: 220px;                    /* Prevent collapse */
}

.password-display button {
  flex: 0;                              /* Fixed size */
}

/* =========================
   LISTS & CTA
   ========================= */
.why {
  margin: 10px 0 0 0;                  /* Top spacing */
  padding-left: 18px;                  /* Indentation */
}

.why li {
  margin: 8px 0;                       /* Item spacing */
}

/* CTA panel */
.cta {
  margin-top: 18px;                    /* Separation */
  padding: 14px;                       /* Inner padding */
  border-left: 4px solid var(--brand); /* Brand accent */
  background:                           /* Gradient highlight */
    linear-gradient(
      90deg,
      rgba(124,77,255,.12),
      rgba(0,255,255,.08)
    );
  border-radius: 12px;                /* Rounded */
}

/* Text link button */
.btn-link {
  display: inline-block;               /* Inline CTA */
  margin-top: 10px;                    /* Spacing */
  text-decoration: none;              /* Remove underline */
  font-weight: 700;                   /* Bold */
  color: #eaffff;                     /* Bright text */
  border-bottom: 2px solid transparent;/* Hover underline */
}

.btn-link:hover {
  border-bottom-color: var(--accent);  /* Cyan underline */
}

/* =========================
   LEGAL
   ========================= */
.legal ul {
  padding-left: 18px;                  /* Indent list */
}

.legal .fineprint {
  opacity: .8;                         /* Subtle text */
  margin-top: 8px;                    /* Separation */
  font-size: .95rem;                  /* Slightly smaller */
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 600px) {

  .floating-menu {
    inset: 12px 12px auto auto;        /* Compact positioning */
    padding: 8px 10px;                /* Reduced padding */
  }

  .floating-menu .brand {
    display: none;                    /* Hide brand on mobile */
  }

  .container {
    margin-top: 92px;                 /* Adjust for header */
  }

}