/* =====================================================================
   DAKI HOSTING — shared navbar: modern animated burger + glass mobile menu
   Loaded on every page so the mobile navigation is consistent site-wide.
   Brand palette: #760991 #a432c0 #c026d3 (purple → magenta)
   ===================================================================== */

/* ── Animated burger button (replaces the default toggler icon) ────── */
.navbar-toggler.daki-burger {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(192, 38, 211, 0.30);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(40, 22, 49, 0.6), rgba(12, 8, 16, 0.5));
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.navbar-toggler.daki-burger:hover { border-color: rgba(192, 38, 211, 0.55); }
.navbar-toggler.daki-burger:not(.collapsed) {
  border-color: rgba(192, 38, 211, 0.6);
  background: linear-gradient(160deg, rgba(56, 28, 68, 0.7), rgba(20, 12, 26, 0.6));
}
.daki-burger-lines {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.daki-burger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #e7b6f0;
  transition: transform 0.34s cubic-bezier(0.6, 0.1, 0.3, 1.2), top 0.34s ease, opacity 0.2s ease;
}
.daki-burger-lines span:nth-child(1) { top: 0; }
.daki-burger-lines span:nth-child(2) { top: 6px; }
.daki-burger-lines span:nth-child(3) { top: 12px; }
.navbar-toggler.daki-burger:not(.collapsed) .daki-burger-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.navbar-toggler.daki-burger:not(.collapsed) .daki-burger-lines span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.navbar-toggler.daki-burger:not(.collapsed) .daki-burger-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* The burger is only for the collapsed navbar — hide it once the full nav
   expands at the md breakpoint. (Our display:inline-flex above otherwise
   overrides Bootstrap's own `display:none`, since specificity is equal.) */
@media (min-width: 768px) {
  .navbar-toggler.daki-burger { display: none; }
}

/* ── Glass dropdown menu on small screens ──────────────────────────── */
@media (max-width: 767.98px) {
  #navcol-5.navbar-collapse {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(192, 38, 211, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 18, 32, 0.94), rgba(13, 9, 17, 0.94));
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  #navcol-5 .navbar-nav { margin-bottom: 6px; }
  #navcol-5 .nav-item { width: 100%; }
  #navcol-5 .nav-item.hoverbut { top: 0; }
  #navcol-5 .nav-link {
    padding: 11px 14px !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
  }
  #navcol-5 .nav-link:hover,
  #navcol-5 .nav-link:focus {
    background: rgba(192, 38, 211, 0.12);
    color: #fff !important;
  }
  /* CTA buttons go full-width (covers .btn-nav-paid, .btn-nav-login and the
     plain Bootstrap .btn used on the legal pages) */
  #navcol-5 .btn-nav-paid,
  #navcol-5 .btn-nav-login,
  #navcol-5 .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin: 8px 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daki-burger-lines span { transition: none; }
}