/* ═══════════════════════════════════════════════
   DYNAMIC ISLAND NAVBAR — v2  (modern + mobile fix)
   ═══════════════════════════════════════════════ */

/* ── Shared base: both headers become fixed ── */
.header-area,
.header-area-2 {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 14px 20px 0;
  pointer-events: none;
  background: transparent !important;
}

/* ── The pill ─────────────────────────────── */
.header-area .header-main,
.header-area-2 .header-main {
  pointer-events: all;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 100px;
  padding: 0 8px 0 6px;
  /* lighter, more transparent */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease, background 0.3s ease, border-radius 0.35s ease;
  overflow: hidden;
}

html.dark .header-area .header-main,
html.dark .header-area-2 .header-main {
  background: rgba(18, 4, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

/* Scrolled state — slightly more opaque */
.header-area.scrolled .header-main,
.header-area-2.scrolled .header-main {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.08);
}
html.dark .header-area.scrolled .header-main,
html.dark .header-area-2.scrolled .header-main {
  background: rgba(18, 4, 36, 0.72);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.40);
}

/* Open state — square bottom corners so dropdown merges */
.header-area.nav-open .header-main,
.header-area-2.nav-open .header-main {
  border-radius: 28px 28px 0 0;
}

/* ── Inner row ─────────────────────────────── */
.header-area .header-area__inner,
.header-area-2 .header-area-2__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  height: 68px !important;
  gap: 4px;
}

/* ── Logo pill-inside-pill ─────────────────── */
.header-area .header__logo {
  flex-shrink: 0;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 60px;
  padding: 10px 22px;
  transition: border-color 0.2s;
}
html.dark .header-area .header__logo {
  border-color: rgba(255, 255, 255, 0.12);
}

.header-area-2 .header__logo {
  flex-shrink: 0;
}

.header-area .header__logo img,
.header-area-2 .header__logo img {
  max-width: 115px;
  display: block;
}

/* ── Nav centered ─────────────────────────── */
.header-area .header__nav,
.header-area-2 .header__nav {
  flex: 1;
  display: flex !important;
  justify-content: center;
  border: none !important;
  padding: 0 !important;
}

.header-area .main-menu ul,
.header-area-2 .main-menu ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-area .main-menu li a,
.header-area-2 .main-menu li a {
  font-size: 15px;
  font-weight: 400;
  padding: 8px 15px;
  border-radius: 60px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.header-area .main-menu li a:hover,
.header-area-2 .main-menu li a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--action, #6d28d9);
}
html.dark .header-area .main-menu li a:hover,
html.dark .header-area-2 .main-menu li a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--action, #a78bfa);
}

/* ── Right controls ──────────────────────── */
.header-area .header__button,
.header-area-2 .header__button {
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.header-area .rr-btn,
.header-area-2 .rr-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 60px;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* ── Hamburger ────────────────────────────── */
.header-area .header__navicon button.pill-toggle,
.header-area-2 .header__navicon button.pill-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  background: transparent;
  cursor: pointer;
  transition: background 0.18s;
}
html.dark .header-area .header__navicon button.pill-toggle,
html.dark .header-area-2 .header__navicon button.pill-toggle {
  border-color: rgba(255, 255, 255, 0.12);
}
.header-area .header__navicon button.pill-toggle:hover,
.header-area-2 .header__navicon button.pill-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}
html.dark .header-area .header__navicon button.pill-toggle:hover,
html.dark .header-area-2 .header__navicon button.pill-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}
.header-area .header__navicon i,
.header-area-2 .header__navicon i {
  font-size: 18px;
  color: var(--primary, #1a1a1a);
}

/* Kill old sticky/transformed bg override */
.header-area .sticky,
.header-area .transformed,
.header-area-2 .sticky,
.header-area-2 .transformed {
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════
   MOBILE COLLAPSIBLE NAV DROPDOWN
   ═══════════════════════════════════════════════ */
.mobile-nav {
  pointer-events: all;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  /* only shown on ≤ 1199px */
  display: none;
}

@media (max-width: 1199px) {
  .mobile-nav {
    display: block;
    /* Align with the pill */
    max-width: 1240px;
    margin: 0 auto;
    /* Match the pill glass — same opacity */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: none;
    border-radius: 0 0 28px 28px;
    /* Start collapsed */
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.dark .mobile-nav {
    background: rgba(18, 4, 36, 0.55);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .header-area.nav-open .mobile-nav,
  .header-area-2.nav-open .mobile-nav {
    max-height: 500px;
  }

  /* dropdown body */
  .mobile-nav nav {
    padding: 6px 20px 18px;
  }

  .mobile-nav nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .mobile-nav nav ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }
  html.dark .mobile-nav nav ul li {
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }
  .mobile-nav nav ul li:last-child {
    border-bottom: none;
  }

  .mobile-nav nav ul li a {
    display: block;
    padding: 13px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary, #1a1a1a);
    text-decoration: none;
    transition: color 0.15s;
  }
  .mobile-nav nav ul li a:hover {
    color: var(--action, #6d28d9);
  }
  html.dark .mobile-nav nav ul li a {
    color: rgba(255, 255, 255, 0.88);
  }
  html.dark .mobile-nav nav ul li a:hover {
    color: var(--action, #a78bfa);
  }

  /* CTA at bottom of dropdown */
  .mobile-nav__cta {
    padding-top: 14px;
    padding-bottom: 4px;
  }
  .mobile-nav__cta .rr-btn {
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 60px;
    letter-spacing: -0.02em;
  }
}

/* ═══════════════════════════════════════════════
   BODY OFFSET
   ═══════════════════════════════════════════════ */
body {
  padding-top: 96px;
}

/* ═══════════════════════════════════════════════
   DESKTOP (≥ 1200px) — hide hamburger, show nav
   ═══════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* header-area uses d-xl-none on navicon already;
     header-area-2 needs explicit hide */
  .header-area-2 .header__navicon {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════
   TABLET  (≤ 1199px) — hide nav, hide CTA button
   ═══════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .header-area .header__nav,
  .header-area-2 .header__nav {
    display: none !important;
  }

  .header-area .header__button,
  .header-area-2 .header__button {
    margin-left: auto;
    justify-content: flex-end;
  }

  .header-area .header__button .rr-btn,
  .header-area-2 .header__button .rr-btn {
    display: none !important;
  }

  .header-area .header-area__inner,
  .header-area-2 .header-area-2__inner {
    height: 62px !important;
  }

  /* logo: remove inner border on smaller screens */
  .header-area .header__logo {
    border: none;
    padding: 0 8px;
  }

  body {
    padding-top: 86px;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE  (≤ 767px)
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .header-area,
  .header-area-2 {
    padding: 10px 10px 0;
  }

  .header-area .header-main,
  .header-area-2 .header-main {
    border-radius: 50px;
    padding: 0 6px;
  }

  .header-area .header-area__inner,
  .header-area-2 .header-area-2__inner {
    height: 56px !important;
    gap: 6px;
  }

  .header-area .header__logo img,
  .header-area-2 .header__logo img {
    max-width: 96px;
  }

  /* On mobile show navicon (hamburger) always — override d-xl-none */
  .header-area .header__navicon,
  .header-area-2 .header__navicon {
    display: flex !important;
    align-items: center;
  }

  .header-area .header__button,
  .header-area-2 .header__button {
    margin-left: auto;
    gap: 6px;
  }

  .header-area .header__navicon button.side-toggle,
  .header-area-2 .header__navicon button.side-toggle {
    width: 40px;
    height: 40px;
  }

  body {
    padding-top: 76px;
  }
}

/* ═══════════════════════════════════════════════
   SMALL MOBILE  (≤ 480px)
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .header-area,
  .header-area-2 {
    padding: 8px 8px 0;
  }

  .header-area .header-main,
  .header-area-2 .header-main {
    border-radius: 40px;
    padding: 0 4px;
  }

  .header-area .header-area__inner,
  .header-area-2 .header-area-2__inner {
    height: 52px !important;
    gap: 4px;
  }

  .header-area .header__logo img,
  .header-area-2 .header__logo img {
    max-width: 84px;
  }

  .header-area .header__navicon button.side-toggle,
  .header-area-2 .header__navicon button.side-toggle {
    width: 36px;
    height: 36px;
  }

  .header-area .header__button,
  .header-area-2 .header__button {
    gap: 4px;
  }

  body {
    padding-top: 68px;
  }
}