/*
=================================================
04-footer.css
Footer grid and menu styling
Site: fishbucklake.com (staging)
=================================================
*/

/* =========================================================
   MOBILE — HIDE FOOTER MENUS (THEY'RE IN DRAWER INSTEAD)
   BUT KEEP COPYRIGHT/LEGAL SECTION VISIBLE
   ========================================================= */
@media (max-width: 980px) {
  /* Hide the 5-column footer menu grid */
  .fbl-footer-grid {
    display: none !important;
  }
  
  /* Hide menu modules that are duplicated in drawer */
  .fbl-footer-grid .fbl-menu-footer {
    display: none !important;
  }
  
  /* NUCLEAR: Force copyright row to use flexbox for inline columns */
  .fbl-copyright-row,
  .fbl-copyright-row.et_pb_row,
  div.fbl-copyright-row.et_pb_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Force ALL columns in copyright row to be inline */
  .fbl-copyright-row .et_pb_column,
  .fbl-copyright-row .fbl-copyright-column,
  .fbl-copyright-row .fbl-menu-column,
  .fbl-copyright-row > .et_pb_column {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    text-align: left !important;
  }
  
  /* Style the menu column content */
  .fbl-copyright-row .fbl-menu-column {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    color: var(--fbl-text-main) !important;
  }
  
  /* Force text color on all text elements */
  .fbl-copyright-row .fbl-menu-column,
  .fbl-copyright-row .fbl-menu-column *,
  .fbl-copyright-row .fbl-menu-column p,
  .fbl-copyright-row .fbl-menu-column span,
  .fbl-copyright-row .fbl-menu-column div {
    color: var(--fbl-text-main) !important;
  }
  
  /* Force Divi menu to display properly - LEFT ALIGNED */
  .fbl-copyright-row .fbl-menu-column .et_pb_menu,
  .fbl-copyright-row .fbl-menu-column .et_pb_menu_inner_container,
  .fbl-copyright-row .fbl-menu-column .et_pb_menu__wrap,
  .fbl-copyright-row .fbl-menu-column .et_pb_menu__menu,
  .fbl-copyright-row .fbl-menu-column nav {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* NUCLEAR: Force menu wrapper containers to left align */
  .fbl-copyright-row .fbl-menu-column .et_pb_menu_inner_container,
  .fbl-copyright-row .fbl-menu-column .et_pb_menu__wrap {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  
  /* Force menu list to be HORIZONTAL and visible - HARD LEFT */
  .fbl-copyright-row .fbl-menu-column ul.et-menu,
  .fbl-copyright-row .fbl-menu-column .et_pb_menu ul,
  .fbl-copyright-row .fbl-menu-column nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: center !important;
  }
  
  /* ULTRA SPECIFIC: Force list items to be inline and auto-width */
  .fbl-copyright-row .fbl-menu-column li,
  .fbl-copyright-row .fbl-menu-column .et-menu li,
  .fbl-copyright-row .fbl-menu-column ul li,
  .fbl-copyright-row .fbl-menu-column nav li,
  .fbl-copyright-row .fbl-menu-column .et_pb_menu li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--fbl-text-main) !important;
    float: none !important;
    text-align: left !important;
    list-style: none !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  
  .fbl-copyright-row .fbl-menu-column li::before {
    display: none !important;
  }
  
  .fbl-copyright-row .fbl-menu-column li:last-child {
    padding-right: 0 !important;
  }
  
  /* Force links to be visible - LEFT ALIGNED - UNDERLINED */
  .fbl-copyright-row .fbl-menu-column a,
  .fbl-copyright-row .fbl-menu-column .et-menu a {
    color: var(--fbl-footer-text) !important;
    text-decoration: underline !important;
    display: inline-block !important;
    padding: 0.25rem 0 !important;
    font-size: 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
  
  .fbl-copyright-row .fbl-menu-column a:hover {
    color: var(--fbl-footer-link-hover) !important;
    text-decoration: underline !important;
  }
  
  /* Remove separator between items */
  .fbl-copyright-row .fbl-menu-column li:not(:last-child)::after {
    display: none !important;
  }
  
  /* Ensure text and modules inside are visible */
  .fbl-copyright-row .et_pb_module,
  .fbl-copyright-row .et_pb_text,
  .fbl-copyright-row .et_pb_menu {
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
  }
}

/* =========================================================
   FBL FOOTER GRID (5 columns)
   ========================================================= */
.fbl-footer-grid .et_pb_column {
  background: var(--fbl-footer-bg);
  padding: var(--fbl-space-sm) var(--fbl-space-md);
  border-radius: var(--fbl-radius);
  margin-bottom: var(--fbl-space-sm);
}

.fbl-footer-grid h5 {
  margin-bottom: 0.6rem;
  font-style: italic;
  font-size: .95rem;
  color: var(--fbl-footer-text);
}

.fbl-footer-grid ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.fbl-footer-grid li { 
  margin: 0.15rem 0; 
}

/* Footer grid links — use footer-text token */
.fbl-footer-grid a {
  color: var(--fbl-footer-text);
}

/* Footer grid link hover — use footer-link-hover token */
.fbl-footer-grid a:hover {
  color: var(--fbl-footer-link-hover) !important;
}

/* Active/current page — URL-based, all footer menus */
#fbl-footer-menus a.fbl-active-link {
  color: var(--fbl-sidemenu-link-active) !important;
  font-weight: bold !important;
}

/* ==========================================================
   FBL FOOTER MENUS – SPACING & READABILITY
   Centralized control (no Divi per-module tweaking)
========================================================== */

/* Tighten spacing between footer heading and menu */
.fbl-menu-footer .et_pb_heading {
  margin-bottom: 6px !important;
  padding-bottom: 0;
}

/* Normalize menu list spacing - AGGRESSIVE */
.fbl-menu-footer .et-menu > li {
  margin-bottom: 0 !important;
  padding-bottom: 1px !important;
}

/* Improve readability of menu items - AGGRESSIVE */
.fbl-menu-footer .et-menu a {
  line-height: 1.2 !important;
  padding: 0 !important;
  display: block !important;
}

/* Fine-tune item spacing (now that Divi gap is neutralized) */
.fbl-menu-footer .et-menu > li > a {
  padding: 1px 0 !important;
  line-height: 1.2 !important;
}

/* Safety: remove any inherited top spacing from menu modules */
.fbl-menu-footer .et_pb_menu {
  margin-top: 0;
  padding-top: 0;
}

/* Optional: tighten column vertical flow without breaking layout */
.fbl-menu-footer.et_pb_row {
  row-gap: 0;
}

/* =====================================================
   FBL FOOTER MENUS — FORCE VERTICAL STACKING
   ===================================================== */

/* Ensure footer menu lists stack vertically */
.fbl-menu-footer .et-menu,
.fbl-menu-footer .et_mobile_menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.fbl-menu-footer .et-menu > li {
  display: block !important;
}

/* =========================================
   FBL FOOTER MENU – CENTERED LIST MARKERS
   ========================================= */

.fbl-menu-footer .et-menu > li {
  position: relative;
  padding-left: 18px;
}

.fbl-menu-footer .et-menu > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 20% !important;
  transform: translateY(-50%);
  color: var(--fbl-gold);
  font-size: 1.2em !important;
  line-height: 1 !important;
  pointer-events: none;
}

/* Apply side-menu styling to footer drawer menus */
.fbl-footer-mm .fbl-mm-list {
  list-style: none;
  padding-left: 0;
}

.fbl-footer-mm .fbl-mm-item {
  position: relative;
  padding-left: 18px;
}

.fbl-footer-mm .fbl-mm-item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--fbl-gold);
}

/*
=================================================
Footer Menu Row - Force Centering
=================================================
*/

/* Force footer menu row to center and respect width */
.fbl-menu-footer {
  width: var(--fbl-content-width) !important;
  max-width: var(--fbl-content-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* HIDE on mobile - only show in drawer */
@media (max-width: 980px) {
  .fbl-menu-footer,
  .et_pb_section:has(.fbl-menu-footer) {
    display: none !important;
  }
}

/* Desktop only - force columns to stay within row bounds */
@media (min-width: 981px) {
  .fbl-menu-footer .et_pb_column {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* Make sure section doesn't force full width on children */
.et_pb_section:has(.fbl-menu-footer) {
  display: block !important;
  width: 100% !important;
}

.et_pb_section:has(.fbl-menu-footer) > .et_pb_row {
  width: var(--fbl-content-width) !important;
  max-width: var(--fbl-content-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   FOOTER LEGAL MENU - HORIZONTAL LAYOUT (DESKTOP)
   ========================================================= */
@media (min-width: 981px) {
  .fbl-menu-column .et_pb_menu ul,
  .fbl-menu-column .et-menu,
  .fbl-menu-column nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1.5rem !important;
    justify-content: flex-end !important;
    align-items: center !important;
    list-style: none !important;
  }
  
  .fbl-menu-column li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  .fbl-menu-column li::before {
    display: none !important;
  }
  
  .fbl-menu-column li:not(:last-child)::after {
    display: none !important;
  }
  
  /* Footer legal links — use footer-text token */
  .fbl-menu-column a {
    padding: 0.25rem 0 !important;
    white-space: nowrap;
    text-decoration: underline !important;
    color: var(--fbl-footer-text) !important;
  }
  
  /* Footer legal link hover — use footer-link-hover token */
  .fbl-menu-column a:hover {
    color: var(--fbl-footer-link-hover) !important;
  }
}

/* =========================================================
   SHOW/HIDE COPYRIGHT ROWS BY DEVICE
   ========================================================= */

/* Desktop: Hide header copyright row, show footer copyright row */
@media (min-width: 981px) {
  /* Hide copyright row in header */
  .et-l--header .fbl-copyright-row,
  header .fbl-copyright-row {
    display: none !important;
  }
  
  /* Show copyright row in footer - with inline columns */
  .et-l--footer .fbl-copyright-row,
  footer .fbl-copyright-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: var(--fbl-content-width) !important;
    margin: 0 auto !important;
  }
  
  /* Force footer columns to be inline */
  .et-l--footer .fbl-copyright-row .et_pb_column,
  footer .fbl-copyright-row .et_pb_column {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 1.5rem !important;
    padding: 0 0.25rem !important;
  }
  
  /* Remove left margin from first column */
  .et-l--footer .fbl-copyright-row .et_pb_column:first-child,
  footer .fbl-copyright-row .et_pb_column:first-child {
    margin-left: 0 !important;
  }
}

/* Tablet & Mobile: Show header copyright row, hide footer copyright row */
@media (max-width: 980px) {
  /* Show copyright row in header - with inline columns */
  .et-l--header .fbl-copyright-row,
  header .fbl-copyright-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Force header columns to be inline */
  .et-l--header .fbl-copyright-row .et_pb_column,
  header .fbl-copyright-row .et_pb_column {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 0.25rem !important;
    padding: 0 0.1rem !important;
  }
  
  /* Hide copyright row in footer */
  .et-l--footer .fbl-copyright-row,
  footer .fbl-copyright-row {
    display: none !important;
  }
}

/* Stack legal menu when drawers appear */
@media (max-width: 980px) {
  /* Ensure footer is above main-content */
  .et-l--footer,
  footer {
    position: relative !important;
    z-index: 10003 !important;
  }
  
  /* Push footer content above drawer buttons */
  .et-l--footer .et_pb_section,
  footer .et_pb_section {
    padding-bottom: 180px !important;
  }
  
  /* Stack copyright row vertically */
  .et-l--footer .fbl-copyright-row,
  footer .fbl-copyright-row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* Stack menu items vertically */
  .et-l--footer .fbl-copyright-row .et_pb_column,
  footer .fbl-copyright-row .et_pb_column {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Stack menu links vertically */
  .et-l--footer .fbl-copyright-row .et_pb_menu ul,
  footer .fbl-copyright-row .et_pb_menu ul {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .et-l--footer .fbl-copyright-row .et_pb_menu li,
  footer .fbl-copyright-row .et_pb_menu li {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
}