/*
 * Raffle Generator — WP-Specific Nav Overrides
 * Visual nav styles live in style.css.
 * This file only adds WP-specific behaviour: sticky wrapper, mobile panel, toggle.
 * @package rafflegenerator-child
 */

/* ── Sticky header wrapper ─────────────────────────────────────────────── */
.rg-site-header { position: relative; z-index: 200; width: 100%; }
body > .rg-site-header { position: sticky; top: 0; }

/* ── Mobile toggle button ─────────────────────────────────────────────── */
.rg-nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.75);
  font-size: 1.125rem;
  padding: 6px 10px;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease;
}
.rg-nav-toggle:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* ── Nav menu wrapper (desktop = inline) ──────────────────────────────── */
#rg-nav-menu { display: flex; align-items: center; gap: 1.25rem; }

/* ── Mobile breakpoint ────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .rg-nav-toggle { display: flex; align-items: center; justify-content: center; }

  #rg-nav-menu {
    display: none;
    position: absolute;
    top: var(--nav-h, 58px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--dark, #0D0B2B);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: .75rem 1rem 1.25rem;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 199;
  }

  #rg-nav-menu.rg-nav--open { display: flex; }

  #rg-nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  #rg-nav-menu .nav-links ul { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; margin: 0; }
  #rg-nav-menu .nav-links li,
  #rg-nav-menu .nav-links ul li { display: block !important; border-bottom: 1px solid rgba(255,255,255,.05); }
  #rg-nav-menu .nav-links a { display: block; padding: .75rem .25rem !important; font-size: .9375rem !important; color: rgba(255,255,255,.72) !important; }
  #rg-nav-menu .nav-cta { display: block !important; text-align: center !important; justify-content: center; margin-top: 1rem !important; width: 100%; padding: 12px 18px !important; font-size: .875rem !important; }
}