/* ===============================
   HEADER LAYOUT & GENERAL STYLES
   =============================== */

/* Remove unwanted bottom spacing */
header {
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  margin-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  /* prevent overlap */
  will-change: auto !important;
  /* prevent flickering */
  transform: translateZ(0) !important;
  /* hardware acceleration */
  backface-visibility: hidden !important;
  /* prevent flicker */
}

/* Ensure header grid remains fixed height */
.header-grid {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===============================
   PAGE CONTAINER & BODY FIXES
   =============================== */
html,
body {
  margin: 0;
  padding: 0;
  height: auto !important;
  min-height: 100%;
  overflow-y: scroll !important;
  /* always show vertical scroll */
}

.page-container {
  display: block !important;
  min-height: auto !important;
  margin: 0;
  padding: 0;
}

/* ===============================
   HEADER CELL ALIGNMENT
   =============================== */
.cell.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* REDUCED: Compact padding for 80px height */
  padding: 5px 20px !important;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  gap: 15px;
  /* FORCE 80px HEIGHT */
  height: 80px !important;
  max-height: 80px !important;
  min-height: 80px !important;
}

.cell.center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px !important;
  /* Tight spacing between nav buttons */
  position: relative;
}

.cell.right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex: 0 0 auto;
  /* prevents stretching */
}

/* ===============================
   NAVIGATION DROPDOWN GRID
   =============================== */
.nav-item.position-relative,
.nav-item {
  position: relative !important;
  /* Anchor for absolute dropdown */
  margin: 0 !important;
  /* No margin - tight spacing */
  padding: 0 !important;
  /* No padding */
  display: flex !important;
  /* Flex item in flex container */
  flex-direction: row !important;
  /* Horizontal */
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Hidden dropdown container - FIXED POSITIONING - COMPLETELY REMOVED FROM DOCUMENT FLOW */
.nav-item-grid {
  display: none !important;
  position: fixed !important;
  /* FIXED - Completely removed from document flow, overlays everything */
  top: -9999px !important;
  /* Hide off-screen when not active */
  left: -9999px !important;
  /* Hide off-screen when not active */
  width: 420px !important;
  /* HARD FIXED WIDTH - NO EXPANSION */
  min-width: 420px !important;
  max-width: 420px !important;
  /* HARD MAX - prevents any expansion */
  background: #fff !important;
  padding: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 100000 !important;
  /* Very high - floats above content */
  margin: 0 !important;
  /* NO MARGIN - prevents pushing content */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  will-change: auto !important;
  /* NO WILL-CHANGE - prevents flickering */
  transform: none !important;
  /* NO TRANSFORM - prevents flickering */
  backface-visibility: visible !important;
  /* Prevent flickering */
  transition: none !important;
  /* NO TRANSITIONS - prevents flickering */
  pointer-events: none !important;
  /* CRITICAL - Disable when hidden, don't block clicks */
  overflow: hidden !important;
  /* HARD - Prevent expansion */
  overflow-x: hidden !important;
  /* HARD - Prevent horizontal scroll */
  overflow-y: auto !important;
  /* Allow vertical scroll if needed */
  max-height: 80vh !important;
  /* Prevent vertical expansion */
  box-sizing: border-box !important;
  /* Include padding in width */
  contain: strict !important;
  /* STRICT CONTAINMENT - Isolate from document flow */
  resize: none !important;
  /* Prevent resizing */
  /* CRITICAL: Ensure it doesn't affect layout at all */
  float: none !important;
  clear: none !important;
  isolation: isolate !important;
  /* Create new stacking context */
}

/* CRITICAL OVERRIDE: Force fixed positioning - NEVER allow absolute */
.nav-item:hover .nav-item-grid,
.nav-item-grid:hover,
.nav-item-grid.active {
  position: fixed !important;
  /* ALWAYS FIXED - NEVER ABSOLUTE */
  pointer-events: auto !important;
  /* Only when visible */
}

/* Show dropdown on hover - DISABLED - JavaScript handles with FIXED positioning */
/* CRITICAL: This was causing buttons to move - completely disabled */
/* .nav-btn:not(.home-btn):hover .nav-item-grid,
.nav-item:hover .nav-item-grid {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  margin: 0 !important;
  margin-top: 0 !important;
  top: 100% !important;
  left: 0 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
} */

/* CRITICAL OVERRIDE: Force fixed positioning - NEVER allow absolute */
.nav-item:hover .nav-item-grid,
.nav-item-grid,
.nav-item-grid:hover,
.nav-btn:hover .nav-item-grid {
  position: fixed !important;
  /* ALWAYS FIXED - NEVER ABSOLUTE */
}

/* Prevent flickering on navigation buttons */
.nav-btn {
  will-change: auto !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  transition: none !important;
  /* remove transitions that cause flicker */
  margin: 0 !important;
  /* Tight spacing */
  padding: 6px 12px !important;
  /* Tighter padding for compact header */
  padding: 4px 8px !important;
  /* Inline flex for horizontal layout */
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  /* Tight gap inside button */
  white-space: nowrap !important;
  /* Don't wrap text */
  width: auto !important;
  /* Auto width */
  height: auto !important;
  /* Auto height */
  min-width: auto !important;
  min-height: auto !important;
  line-height: normal !important;
  /* Normal line height */
  text-decoration: none !important;
  color: inherit !important;
  visibility: visible !important;
  /* Ensure visibility */
  opacity: 1 !important;
  /* Ensure opacity */
}

/* Ensure nav items don't have extra spacing and don't expand - CONSOLIDATED */
.nav-item {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  /* For positioning reference */
  display: flex !important;
  /* Flex item in flex container */
  flex-direction: row !important;
  /* Horizontal */
  align-items: center !important;
  height: auto !important;
  /* Natural height - don't expand for mega menu */
  min-height: auto !important;
  max-height: none !important;
  width: auto !important;
  /* Auto width */
  overflow: visible !important;
  /* Allow mega menu to overflow */
  z-index: auto !important;
  contain: layout style paint !important;
  /* CRITICAL - Prevent layout changes from mega menu */
  flex-shrink: 0 !important;
  /* Don't shrink in flex container - FIXED POSITION */
  flex-grow: 0 !important;
  /* Don't grow in flex container - FIXED POSITION */
  flex-basis: auto !important;
  /* Natural size */
  align-self: center !important;
  /* Center align in flex container */
  visibility: visible !important;
  /* Ensure visibility */
  opacity: 1 !important;
  /* Ensure opacity */
  top: 0 !important;
  /* Don't move down */
  left: auto !important;
  /* Natural position */
  float: none !important;
  /* No float */
  clear: none !important;
  /* No clear */
}

/* Individual grid items */
.nav-item-grid .grid-item {
  text-align: center;
  font-size: 12px;
}

/* Grid images */
.nav-item-grid .grid-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 5px;
}

/* Navigator grid general visibility control - ABSOLUTE - NO DOCUMENT FLOW */
.navigator-grid {
  display: none !important;
  position: absolute !important;
  /* CRITICAL: Remove from document flow */
  z-index: 1000 !important;
  margin: 0 !important;
  /* No margin */
  margin-top: 0 !important;
  top: 100% !important;
  left: 0 !important;
}

/* Mega menu grid - also absolute */
.mega-menu-grid {
  position: relative !important;
  /* Relative to nav-item-grid */
  margin: 0 !important;
  padding: 0 !important;
}

/* ===============================
   FOOTER BEHAVIOR
   =============================== */
footer {
  margin-top: auto;
  /* keeps footer pushed down */
}

/* ===============================
   PREVENT CONTENT SHIFT FROM MEGA MENU
   =============================== */
/* Ensure mega menu dropdowns don't affect page layout - CRITICAL FIX */
.nav-item-grid,
.navigator-grid {
  position: absolute !important;
  /* CRITICAL: Remove from document flow */
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  top: 100% !important;
  /* Position below nav button */
  left: 0 !important;
}

/* Mega menu grid is relative to nav-item-grid, not document - HARD FIXED WIDTH */
.mega-menu-grid {
  position: relative !important;
  /* Relative to nav-item-grid */
  display: grid !important;
  /* CRITICAL: Grid layout for mega menu */
  grid-template-columns: repeat(2, 1fr) !important;
  /* 2 columns */
  gap: 8px 16px !important;
  /* Row and column gaps */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  /* Full width of nav-item-grid */
  max-width: 100% !important;
  /* HARD - Don't exceed parent */
  min-width: 0 !important;
  /* Allow grid to shrink */
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* HARD - Prevent expansion */
  overflow-x: hidden !important;
  /* HARD - Prevent horizontal scroll */
  word-wrap: break-word !important;
  /* Break long words */
  word-break: break-word !important;
  /* Break words if needed */
  contain: layout style paint !important;
  /* Strict containment */
}

/* Ensure grid items don't expand beyond container */
.mega-menu-grid>* {
  min-width: 0 !important;
  /* Allow grid items to shrink */
  max-width: 100% !important;
  /* HARD - Don't exceed grid cell */
  overflow: hidden !important;
  /* Prevent content overflow */
  word-wrap: break-word !important;
  /* Break long words */
  word-break: break-word !important;
  /* Break words if needed */
  box-sizing: border-box !important;
}

/* Mega menu links - prevent expansion */
.mega-menu-grid a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* Prevent text wrapping that could expand */
  box-sizing: border-box !important;
}

/* Ensure header doesn't grow when mega menu appears - FIXED HEIGHT */
/* Ensure header doesn't grow when mega menu appears - FIXED HEIGHT */
header,
.header-container {
  position: relative !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  z-index: 10000 !important;
  /* Header above sidebar */
  /* FORCE 80px HEIGHT */
  height: 80px !important;
  max-height: 80px !important;
  min-height: 80px !important;
}

.header-second-row {
  position: relative !important;
  display: flex !important;
  /* Ensure flex layout */
  flex-direction: row !important;
  /* Horizontal */
  align-items: center !important;
  /* Center items vertically */
  justify-content: center !important;
  /* Center items horizontally */
  height: auto !important;
  /* Reduced height for 80px header */
  min-height: 34px !important;
  max-height: 34px !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  contain: none !important;
  /* Remove containment to allow proper flex layout */
}

.header-center {
  position: relative !important;
  display: flex !important;
  /* CRITICAL: Horizontal layout */
  flex-direction: row !important;
  /* Horizontal direction */
  flex-wrap: nowrap !important;
  /* Don't wrap to new line */
  align-items: center !important;
  /* Center vertically */
  justify-content: center !important;
  /* Center horizontally */
  gap: 8px !important;
  /* Tighter spacing for compact header */
  gap: 4px !important;
  /* Reduced height for 80px header */
  min-height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  contain: none !important;
  /* Remove containment to allow proper flex layout */
}

/* REMOVED: Duplicate .nav-item rule - using consolidated version above */

/* Main content should not be affected by mega menu */
.main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  clear: both !important;
  top: 0 !important;
  /* Start at top, not pushed down */
}

/* CRITICAL: Ensure mega menu never affects document flow - FINAL FIX */
/* UFO Panel styles removed - now handled in ufo_control_panel.php */

/* ================================================================
   FIX: Search-bar row (row 2) drifting up into row 1 on some pages
   The middle panel is a flex-column container (76px tall).
   When the top-bar or search row grows slightly (e.g. due to page-
   specific content), flex compression pushes the nav row up.
   Solution: anchor the nav row to the bottom of the panel with
   margin-top:auto and align-self:flex-end so it always stays below.
   ================================================================ */

/* Lock the top-bar to a fixed height so it never steals extra space */
#headerMiddlePanel .header-top-bar,
.header-top-bar {
  flex-shrink: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Lock the search row to a fixed height */
#headerMiddlePanel .header-row1,
.header-row1 {
  flex-shrink: 0 !important;
  min-height: 28px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
}

/* Anchor the nav-link row (row 2) to the absolute bottom of the panel.
   margin-top: auto in a flex-column pushes it down past everything above. */
#headerMiddlePanel .header-second-row,
#headerSecondRow {
  align-self: flex-end !important;
  /* Push to bottom of the flex-column container */
  margin-top: auto !important;
  /* Do not let it overlap row 1 by having a minimum separation */
  padding-top: 0 !important;
  margin-bottom: 2px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  /* Hard lock on height so it never grows and accidentally overlaps */
  min-height: 20px !important;
  max-height: 24px !important;
  height: 20px !important;
  /* Ensure it stays within the panel visually */
  position: relative !important;
  z-index: 10000 !important;
  overflow: visible !important;
  /* Allow dropdown menus to overflow */
}

/* On desktop, also ensure the middle panel is a proper flex column */
@media (min-width: 981px) {
  #headerMiddlePanel {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: hide the search row (header-row1 is already hidden by mobile-enhancements.css),
   ensure the nav row fills available space properly */
@media (max-width: 980px) {

  #headerMiddlePanel .header-second-row,
  #headerSecondRow {
    margin-top: 0 !important;
    align-self: auto !important;
    margin-left: 0 !important;
    /* Override desktop left-margin hack */
  }
}

/* 5. Mobile: Force Desktop-like Layout but with Responsive Scaling */
@media (max-width: 980px) {

  #headerMiddlePanel .header-second-row,
  #headerSecondRow {
    margin-top: 0 !important;
    align-self: auto !important;
    padding: 0 5px !important;
    /* Reduce 220px padding */
    left: 0 !important;
    /* Remove 125px offset */
    width: 100% !important;
    justify-content: center !important;
  }

  /* Reduce large horizontal paddings that break mobile */
  .hamburger-search-wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .search-filter-container {
    min-width: 0 !important;
    /* Remove 825px min-width */
    width: 100% !important;
  }

  #searchWrapper {
    min-width: 0 !important;
    /* Remove 743px min-width */
    flex: 1 !important;
  }

  #searchForm .search-box {
    min-width: 0 !important;
  }

  /* Make header ultra-compact to fit everything on mobile */
  #mainHeader {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 2px !important;
  }

  #headerMiddlePanel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* Reset desktop offsets that shift content off-screen on mobile */
  #mainHeader #headerSecondRow,
  .header-second-row {
    margin-top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    padding: 0 5px !important;
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
  }

  /* Make logo smaller to fit alongside search */
  .logo-wrapper img {
    height: 24px !important;
    width: auto !important;
  }

  .logo-expanded-title {
    display: none !important;
    /* Hide title text on mobile to save space */
  }
}


/* ============================================================ 
   GLOBAL STANDARDIZATION: Aeris Floating UI & Chat Suite
   Ensures ALL floating panels (AI Chat, Smartphone, Freebies)
   stay fixed to the viewport and are NEVER hidden by layout containers.
   ============================================================ */
/* Always-visible panels — beacon, AI chat, smartphone, freebies stay on screen */
#ufoPremiumAIChat, 
#ufoPanelSmartphone, 
#ufoPanelFreebies,
#glrcf_assist_beacon {
    position: fixed !important;
    z-index: 2147483647 !important;
    display: flex;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* JS-toggled panels — CSS must NOT force visibility (JS toggle controls open/close state) */
#ufoPanelTV,
#ufoPanelNotifications,
#ufoPanelQuickChat {
    position: fixed !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    /* display/visibility/opacity controlled exclusively by toggleTVPanel() and friends */
}

/* Specific positioning for floating panels when independent */
.ufo-control-panel-independent {
    top: 100px !important;
    right: 30px !important;
    pointer-events: auto !important;
}

/* Force ALL children of independent panels to be interactive */
.ufo-control-panel-independent * {
    pointer-events: auto !important;
}

/* Ensure the beacon is always in the bottom right corner (safe-area aware; footer uses higher-specificity #id rules) */
#glrcf_assist_beacon, .glrcf-assist-beacon {
    bottom: max(30px, env(safe-area-inset-bottom, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    top: auto !important;
}

/* NUCLEAR OVERRIDE: Prevent any legacy elements from hiding these */
#mainHeader, #mainFooter, .main-container, .content-wrapper, .ufo-layout-engine {
    overflow: visible !important;
}

/* AGGRESSIVE LEGACY CHAT HIDING */
/* Hide ANY old chat bubbles that might conflict with the new Aeris suite */
#floatingChatToggle, #floatingChatWidget, #chat-widget-container, .fb_dialog, .fb-customer-chat {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* === WHITE PANEL + BRAND ACCENT THEME (auto-applied) ===
   RULE: border on #headerMiddlePanel ONLY. Never on <header> or #mainHeader.
   === */
:root {
    --glrcf-header-bg: #ffffff;
    --glrcf-middle-bg: #ffffff;
    --glrcf-footer-bg: #ffffff;
    --ufo-panel-bg: #ffffff;
    --glrcf-header-fg: #db2777;
    --glrcf-footer-fg: #db2777;
    --glrcf-header-border: #db2777;
    --glrcf-footer-border: #db2777;
}

/* The VISIBLE center panel: white + brand border */
#headerMiddlePanel,
.header-middle-panel {
    background: #ffffff !important;
    background-image: none !important;
    border: 2px solid #db2777 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* The full-width transparent wrapper: NO border, NO background */
header, #mainHeader {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* UFO side covers: white, borderless */
#ufoControlPanel, #ufoControlPanelLeft {
    background: #ffffff !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Nav link colors */
#mainHeader a, #mainHeader i, #mainHeader .nav-btn, #mainHeader .top-bar-link,
#headerMiddlePanel a, #headerMiddlePanel i, #headerMiddlePanel .nav-btn {
    color: #db2777 !important;
}

/* Footer */
footer, #mainFooter, .main-footer, .site-footer {
    background: #ffffff !important;
    background-image: none !important;
    border-top: 3px solid #db2777 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
footer *, #mainFooter * { color: #db2777 !important; }
/* === END WHITE PANEL + BRAND ACCENT THEME === */