/**
 * FreeGameLoop — Bug Fixes (loaded after style.css and components.css)
 *
 * Fixes identified from live screenshots:
 *  1. Search panel not anchoring below header (floating mid-screen)
 *  2. Mobile search panel appearing as a bubble overlay instead of full-width panel
 *  3. Mega menu column overflow / z-index stacking on desktop
 *  4. Mobile header icon spacing (cramped on small screens)
 *
 * @package FreeGameLoop
 */

/* ============================================================
   FIX 1 — HEADER: must be position:relative so absolute children
   (.fgl-header-search-panel and .fgl-mega-menu) anchor to it correctly.
   overflow must NOT be hidden — the mega/search panel must bleed out.
   ============================================================ */
.fgl-header {
  position: sticky; /* keep sticky */
  overflow: visible !important; /* panels must escape header box */
}

/* The header wrapper itself needs position:relative so the panel's
   position:absolute top:100% is relative to the header element,
   not the nearest positioned ancestor further up the DOM. */
.fgl-header {
  position: sticky;
}

/* Wrap position context — the inner div is what we make relative */
.fgl-header-inner {
  position: relative;
}

/* ============================================================
   FIX 2 — SEARCH PANEL: re-anchor to the header element properly.
   The panel must span the full viewport width regardless of where
   the toggle button sits in the flex layout.
   ============================================================ */
.fgl-header-search-panel {
  /* Break out of the inner flex container and span full width */
  position: fixed !important;
  top: var(--fgl-header-height) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: calc(var(--fgl-z-header) - 1) !important;

  /* Reset transform origin so slide animation is correct */
  transform: translateY(-8px) !important;
  border-top: none;
  border-bottom: 1px solid var(--fgl-border);
  border-radius: 0;
  padding: var(--fgl-space-5) var(--fgl-space-5);
  background: var(--fgl-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.fgl-header-search-panel.is-open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Live results must appear inside the panel, not behind it */
#fgl-live-search-results {
  position: relative !important;
  top: auto !important;
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--fgl-card);
  border: 1px solid var(--fgl-border);
  border-radius: var(--fgl-radius-md);
  box-shadow: var(--fgl-shadow-md);
}

/* ============================================================
   FIX 3 — MEGA MENU: position relative to the header element,
   not to individual <li> items. The .fgl-has-mega li should be
   position:static so the mega anchors to .fgl-primary-menu's
   nearest positioned ancestor = the header.
   ============================================================ */
.fgl-primary-menu {
  position: static;
}

.fgl-has-mega {
  position: static !important;
}

/* Mega menu must anchor to header bottom, full width */
.fgl-mega-menu {
  position: fixed !important;
  top: var(--fgl-header-height) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: var(--fgl-z-mega) !important;
  max-height: calc(100vh - var(--fgl-header-height));
  overflow-y: auto;
}

/* Mega menu inner grid: give each column enough min-width to not wrap */
.fgl-mega-menu-inner {
  grid-template-columns: repeat(3, 1fr) 280px !important;
  max-width: var(--fgl-container);
  gap: var(--fgl-space-6);
}

/* Column category lists: tighter spacing so more items fit */
.fgl-mega-col ul li a {
  padding: 6px 0;
  font-size: 0.88rem;
}

/* Promo card in mega menu: fixed height, no overflow */
.fgl-mega-promo {
  min-height: 160px;
  max-height: 200px;
}

/* ============================================================
   FIX 4 — MOBILE HEADER: icon row spacing and search panel
   on mobile must NOT show as a floating circle — it should be
   a full-width panel below the header.
   ============================================================ */
@media (max-width: 767px) {
  /* Tighten icon gap on mobile so they don't overflow */
  .fgl-header-actions {
    gap: 6px !important;
  }

  .fgl-header-search-toggle,
  .fgl-theme-toggle,
  .fgl-mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  .fgl-user-account a {
    width: 36px !important;
    height: 36px !important;
  }

  /* Search panel on mobile: full-width dropdown below header */
  .fgl-header-search-panel {
    position: fixed !important;
    top: var(--fgl-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    padding: var(--fgl-space-4) !important;
    border-radius: 0 !important;
    /* Override any circle/bubble appearance from button styles */
    width: 100vw !important;
    border-top: 1px solid var(--fgl-border) !important;
  }

  /* Make sure the search INPUT itself is full width on mobile */
  .fgl-header-search-panel .fgl-search-form {
    width: 100%;
    max-width: 100% !important;
  }

  .fgl-header-search-panel .fgl-input {
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom-in on focus */
  }

  /* Logo text: shrink slightly on very small screens */
  .fgl-logo .fgl-logo-text {
    font-size: 1.1rem;
  }

  /* Admin bar offset on mobile */
  .admin-bar .fgl-header {
    top: 46px;
  }
}

@media (max-width: 380px) {
  /* Extra small: hide theme toggle to save space, keep search + menu */
  .fgl-theme-toggle {
    display: none !important;
  }

  .fgl-logo .fgl-logo-text {
    font-size: 1rem;
  }
}

/* ============================================================
   FIX 5 — ADMIN BAR: when WP admin bar is visible, the fixed
   search panel and mega menu must clear it.
   ============================================================ */
.admin-bar .fgl-header-search-panel,
.admin-bar .fgl-mega-menu {
  top: calc(var(--fgl-header-height) + 32px) !important;
}

@media screen and (max-width: 782px) {
  .admin-bar .fgl-header-search-panel,
  .admin-bar .fgl-mega-menu {
    top: calc(var(--fgl-header-height) + 46px) !important;
  }
}

/* ============================================================
   FIX 6 — MOBILE MENU SEARCH: the mobile menu's own search form
   (inside the slide-in drawer) should NOT trigger the header
   search panel — it is its own standalone form.
   ============================================================ */
.fgl-mobile-menu .fgl-search-form {
  position: relative;
  /* Ensure it doesn't inherit the panel's fixed positioning */
}

.fgl-mobile-menu .fgl-search-form .fgl-input {
  font-size: 16px; /* prevent iOS zoom */
  background: var(--fgl-card-alt);
  border-color: var(--fgl-border);
}

/* ============================================================
   FIX 7 — HERO SECTION: when search panel or mega menu is
   open, the hero content should NOT bleed above them.
   z-index stacking correction:
     sticky header:  z-index 100
     mega menu:      z-index 110  (fixed, so above header content)
     search panel:   z-index  99  (just below header)
     mobile menu:    z-index 120
   ============================================================ */
.fgl-hero {
  position: relative;
  z-index: 1; /* below header stack */
}