/* css/nav.css
   Mega menu and nav-specific styles.nav-social
   Loaded after styles.css so it can override where needed
*/

/* primary nav container */
#primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 80;
  margin-left: 1.25rem;
}

/* top-level links/buttons */
#primary-nav a,
#primary-nav button.top-level {
  color: var(--link-blue);
  padding: .9rem .75rem;
  border-radius: 10px;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* fix typo: correct hover selector for top-level buttons */
.top-level:hover {
  transition: transform 0.25s ease, filter 0.25s ease;
  isolation: isolate;
}


/* caret */
.caret {
  margin-left:.35rem;
  opacity:.85;
  transition: transform .18s ease, opacity .18s ease;
  font-size:.85rem;
}

/* remove bullet points inside all mega menus */
.mega ul,
.mega ul li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* top-level list */
#primary-nav > ul {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 4;
  padding: 0;
  list-style: none;
}

/* specific tighter width for the LottoGAMES menu if you want it smaller */
#mega-lotto {
  position: absolute;
  left: 0;
  top: calc(95% + 4px);
  background: #003B2E;
  border: 1px solid #00FFFF;
  border-radius: 12px;
  padding: .1px;
  min-width: 120px;
  box-shadow: 0 18px 40px rgba(2,6,23,.5);
  opacity: 0;
  transform: translateY(-12px) scale(.995);
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.9,.2,1), transform .28s cubic-bezier(.2,.9,.2,1), visibility .22s linear;
}

/* Match container size to LottoGAMES */
#mega-p2e {
   position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: #003B2E;
  border: 1px solid #00FFFF;
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 18px 40px rgba(2,6,23,.5);
  opacity: 0;
  transform: translateY(-12px) scale(.995);
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.9,.2,1), transform .28s cubic-bezier(.2,.9,.2,1), visibility .22s linear;
}

/* Make the list 2 columns of 2 */
#mega-p2e ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 equal columns */
  grid-auto-rows: auto;
  gap: 12px 14px;                          /* spacing between items */
  margin: 0;
  padding: 0;
}

/* Remove bullets + tighten layout */
#mega-p2e ul li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* Style link so it fits nicely in the grid */
#mega-p2e a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  white-space: nowrap;
}

.mega a:hover,
.mega a:focus {
  color: #10e7ff; /* ← bright green hover color */
  transform: translateY(-3px);
  outline: none;
}

/* ensure parent li is positioned */
#primary-nav > ul > li { position: relative; }

/* subtle border + shadow on hover for top-level items */
#primary-nav > ul > li:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 18px #20ff60);
  outline: ;
}

.primary-nav > ul > li:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 18px #20ff60);
  outline: ;
}

/* Desktop (hover) */
@media (hover: hover) and (min-width: 1025px) {
  #primary-nav > ul > li > .top-level,
  #primary-nav > ul > li > a {
    padding: .6rem .85rem;
  }
}

/* Mobile: stack nav */
@media (max-width: 1024px) {
  #primary-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: linear-gradient(180deg, #0b0f1a, #0b0f1a);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #primary-nav.open { display: block; }
  #primary-nav > ul { flex-direction: column; padding: 12px; gap: 6px; }

  .mega {
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    margin-top:6px;
    border-radius: 10px;
    padding: 6px;
  }
  .mega.open { display: block; }

  #primary-nav a, #primary-nav button.top-level { width:100%; text-align:left; padding:.75rem; }
  .caret { transform: rotate(0deg); }
  .caret.open { transform: rotate(90deg); }
}

/* -----------------------------
  Mega-menu hover buffer + padding
  Prevents submenu collapse while moving cursor
   ----------------------------- */

/* Increase clickable area under top-level item */
#primary-nav > ul > li.has-mega {
  /* add extra bottom padding to create a buffer zone between top-level and submenu */
  padding-bottom: 14px;      /* generous buffer — adjust 12-20px if desired */
  position: relative;       /* keep the existing positioning */
}

/* Ensure the mega panel sits above buffer but visually same */
.mega {
  top: calc(100% + 8px);    /* keep visual gap, but buffer is on li */
  padding: 10px;            /* slightly larger hit area inside submenu */
  min-width: 240px;
  pointer-events: auto;
  /* keep transition for smooth reveal */
  transition: opacity .18s ease, transform .16s cubic-bezier(.2,.9,.2,1), visibility .18s linear;
}

/* Make the buffer visually transparent but clickable (prevents flicker) */
#primary-nav > ul > li.has-mega::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;            /* matches padding-bottom */
  height: 14px;             /* same as buffer size */
  /* transparent hit area; pointer-events enabled so hover stays on parent */
  background: transparent;
  pointer-events: auto;
  /* ensure it's behind the submenu visually */
  z-index: 60;
}

/* while hovering, keep submenu visible */
#primary-nav > ul > li.has-mega:hover > .mega,
#primary-nav > ul > li.has-mega:focus-within > .mega,
.mega.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* slightly increase padding for submenu items so user can land on them easily */
.mega a { padding: .7rem 1rem; }

/* make sure buffer is not applied on very small screens (mobile stacked layout) */
@media (max-width:1024px) {
  #primary-nav > ul > li.has-mega { padding-bottom: 0; }
  #primary-nav > ul > li.has-mega::after { display: none; }
}

/* === Hamburger button – classic 3-line icon === */
.hamburger {
  display: none;                 /* hidden on desktop by default */
  background: transparent;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* show only when nav collapses */
@media (max-width: 1024px) {
  .hamburger {
    display: flex;
  }
}

/* style the built-in SVG to look like a traditional icon */
.hamburger svg {
  width: 24px;
  height: 24px;
  stroke: #f9fafb;   /* light lines */
}

/* optional hover / focus feedback */
.hamburger:hover,
.hamburger:focus-visible {
  outline: none;
  opacity: 0.85;
}


/* Mobile / tablet: show nicely styled circle button */
@media (max-width: 1024px) {
  .hamburger {
    display: flex;
  }
}
/* =========================================================
   MOBILE FLY-OUT MENUS (LottoGAMES + p2eGAMES)
   - On small screens, open the .mega panels to the RIGHT
   - Keeps the pointer inside the <li> so the menu stays open
   ========================================================= */
@media (max-width: 900px) {
  #primary-nav > ul > li.has-mega {
    position: relative;
  }

  #mega-lotto,
  #mega-p2e {
    position: absolute;
    top: 0;            /* aligned to the top of the parent li */
    left: 100%;        /* directly to the right edge */
    margin-left: 0;    /* NO gap between button and panel */

    transform: translateY(0);
    min-width: 220px;
    max-width: 260px;
    z-index: 999;
  }
}
/* =========================================
   p2eGAMES / LottoGAMES menus on small phones
   - Below ~600px, show as full-width vertical dropdown
   - Fixes items being cut off to the right
   ========================================= */
@media (max-width: 600px) {
  /* parent <li> no longer anchors an absolute fly-out */
  #primary-nav > ul > li.has-mega {
    position: static;
  }

  /* mega panels become normal block dropdowns */
  #mega-lotto,
  #mega-p2e {
    position: static;
    top: auto;
    left: auto;
    margin-left: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* make the submenu items stack vertically and wrap text nicely */
  #mega-lotto ul,
  #mega-p2e ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  #mega-lotto a,
  #mega-p2e a {
    white-space: normal;        /* allow wrapping */
    padding-right: 0.75rem;     /* little breathing room from edge */
  }
}