/* Fix page layout */

.cell.center {
  flex: 1 !important;
  /* take all available space */
  display: flex !important;
  justify-content: center !important;
  /* keeps nav links centered in column */
  align-items: center !important;
  gap: 5px !important;
  /* TIGHT SPACING - buttons close together */
  position: relative !important;
  /* for dropdown absolute positioning */
}

.cell.right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  /* aligns icons to the right */
  flex: 0 0 auto;
  /* prevent it from expanding */
}

html,
body {
  margin: 0;
  padding: 0;
  height: auto !important;
  /* ensure body can grow */
  min-height: 100%;
  overflow-y: scroll !important;
  /* force vertical scroll */
}

.page-container {
  display: block !important;
  /* disable flex temporarily */
  min-height: auto !important;
  /* allow natural height */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

.page-container {
  margin: 0;
  padding: 0;
}

header {
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  position: relative !important;
  /* prevent overlap from absolute elements */
}

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

.nav-item-grid {
  display: none !important;
  position: absolute !important;
  /* ABSOLUTE - Removed from document flow */
  top: 100% !important;
  /* Below nav button */
  left: 0 !important;
  /* Align with nav button */
  width: auto !important;
  min-width: 420px !important;
  max-width: 600px !important;
  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;
  overflow: hidden !important;
  /* Prevent expansion */
  box-sizing: border-box !important;
  /* Include padding in width */
  contain: layout style paint !important;
  /* Isolate from document flow */
}

.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;
  height: auto !important;
  /* Natural height - don't expand for mega menu */
  min-height: auto !important;
  overflow: visible !important;
  /* Allow mega menu to overflow */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
}

.nav-item:hover .navigator-grid {
  display: block;
}

/* Navigation dropdown grid for all navigator buttons except Home */
.nav-btn:not(.home-btn) {
  position: relative !important;
  /* parent must be relative */
  z-index: 10 !important;
  /* above normal content */
  margin: 0 !important;
  /* No margin */
  padding: 4px 8px !important;
  /* Compact padding */
}

/* Show dropdown grid on hover - ABSOLUTE - NO DOCUMENT FLOW */
/* DISABLED: Let JavaScript handle hover to prevent all menus showing at once */
/* .nav-btn:not(.home-btn):hover .nav-item-grid,
.nav-item:hover .nav-item-grid {
    display: grid !important;
    position: absolute !important;
    margin: 0 !important;
    margin-top: 0 !important;
} */

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

.navigator-grid {
  display: none !important;
  /* hide on page load */
  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;
}

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

footer {
  margin-top: auto;
  /* pushes footer down if content is less than viewport height */
}

/* ===============================
   NAV LINK HOVER + ACTIVE (RESTORED)
   - Hover turns blue
   - Current page stays blue
   =============================== */
#mainHeader .cell.center a.nav-link {
  color: #111827 !important;
  text-decoration: none !important;
}

#mainHeader .cell.center a.nav-link:visited {
  color: #111827 !important;
}

#mainHeader .cell.center a.nav-link:hover,
#mainHeader .cell.center a.nav-link:focus,
#mainHeader .cell.center a.nav-link:focus-visible {
  color: #007bff !important;
  text-decoration: none !important;
}

#mainHeader .cell.center .nav-item.active>a.nav-link,
#mainHeader .cell.center a.nav-link.active,
#mainHeader .cell.center a.nav-link[aria-current="page"] {
  color: #007bff !important;
}

/* ===============================
   NAV-BTN HOVER + ACTIVE (HEADER ROW 2 NAVIGATOR) - RESTORED
   =============================== */
#mainHeader a.nav-btn {
  color: #111827 !important;
  text-decoration: none !important;
}

#mainHeader a.nav-btn:visited {
  color: #111827 !important;
}

#mainHeader a.nav-btn:hover,
#mainHeader a.nav-btn:focus,
#mainHeader a.nav-btn:focus-visible {
  color: #007bff !important;
  text-decoration: none !important;
}

#mainHeader a.nav-btn.active,
#mainHeader a.nav-btn[aria-current="page"],
#mainHeader .nav-item.active>a.nav-btn {
  color: #007bff !important;
}

/* Header icon buttons (mobile header icons) */
#mainHeader .header-icon-btn:hover,
#mainHeader .header-icon-btn:focus,
#mainHeader .header-icon-btn:focus-visible {
  color: #007bff !important;
}

#mainHeader .header-icon-btn:hover i,
#mainHeader .header-icon-btn:focus i,
#mainHeader .header-icon-btn:focus-visible i {
  color: #007bff !important;
}