/* ─────────────────────────────────────────────────────────
   BPX Header & Footer Plugin — integration stylesheet v1.1
   ───────────────────────────────────────────────────────── */

/* ───── 1. HARD-HIDE the theme's own header & footer ─────
   Kadence uses many wrappers and IDs; cover them all.        */
#masthead,
header#masthead,
.site-header,
#main-header,
.kb-header,
.kadence-header-wrap,
.site-header-wrap,
.site-header-row-container,
.site-top-header-wrap,
.site-main-header-wrap,
.site-below-header-wrap,
.site-header-inner-wrap,
.site-header-row-tablet-layout,
.site-header-row-mobile-layout,
.header-design-1,
.header-design-2,
header[role="banner"],
.elementor-location-header,
#colophon,
footer#colophon,
.site-footer,
.kb-footer,
.kadence-footer-wrap,
.site-footer-row-container,
.site-footer-wrap,
.site-footer-inner-wrap,
.elementor-location-footer {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Kadence's skip-link is duplicated by us; hide its version. */
.skip-link {
  display: none !important;
}

/* ───── 2. Reset wrapper paddings ─────
   Kadence's #page / .site / #content add their own top spacing. */
#page,
.site,
.wp-site-blocks,
#inner-wrap,
.content-wrap,
#content,
.site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ───── 3. Top spacing for the page content area ─────
   The BPX nav is position:fixed and 68px tall. We need page content
   to start 68px down. Setting it on body covers all themes. */
body {
  padding-top: 68px !important;
}

/* If logged in (admin bar present), add to the offset. */
body.admin-bar {
  padding-top: 100px !important;
}

@media (max-width: 782px) {
  body.admin-bar {
    padding-top: 114px !important;
  }
}

/* But the BPX nav itself should sit at the very top (or below admin bar). */
#site-nav {
  top: 0 !important;
}

body.admin-bar #site-nav {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar #site-nav {
    top: 46px !important;
  }
}

/* ───── 4. Page content full-width ─────
   Custom HTML blocks bring their own .container with explicit max-widths,
   so don't let Kadence constrain the outer wrapper. */
.entry-content,
.entry-content > .wp-block-html,
.entry-content > * {
  max-width: none !important;
}

.entry-content,
.entry-content > .wp-block-html {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kadence usually wraps the article in .content-container — make full-width. */
.content-container,
.entry-content-wrap,
article.entry,
article.page,
.single-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ───── 5. Hide WP page title & meta (the BPX hero handles this) ─────
   Kadence renders the page title above the content; the BPX templates
   already include their own hero/header section, so we hide WP's. */
.entry-header,
.page-title,
.entry-title,
.entry-meta,
.wp-block-post-title,
.entry-footer,
.post-thumbnail {
  display: none !important;
}

/* ───── 5b. Dropdown hover-bridge fix ─────
   The original dropdown sits 8px below its parent button (top: calc(100% + 8px)).
   When the cursor moves down from the button into the dropdown, it crosses that
   empty 8px gap and :hover is lost → dropdown disappears. Two fixes:

   (1) Make the parent <li>'s ::before fill that gap so :hover is continuous.
   (2) Give the dropdown a transparent top-padding so its visible area starts
       lower but its hit-area starts at the button. */
@media (min-width: 901px) {
  #site-nav .nav-links > li {
    position: relative;
  }
  #site-nav .nav-links > li > .nav-dropdown {
    /* Pull the dropdown up so it touches the button. */
    top: 100% !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
    background-clip: padding-box !important;
    /* Keep the original 8px visual gap by using a transparent padding zone. */
  }
  /* Pseudo-element bridge below the button to maintain hover. */
  #site-nav .nav-links > li > button::after,
  #site-nav .nav-links > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
    pointer-events: auto;
  }
  /* Keep dropdown open while cursor is anywhere over the parent li. */
  #site-nav .nav-links > li:hover > .nav-dropdown,
  #site-nav .nav-links > li:focus-within > .nav-dropdown {
    display: block !important;
  }
}

/* ───── 6. Mobile menu toggle behaviour ───── */
@media (max-width: 900px) {
  #site-nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--navy, #0A1E36);
    padding: 16px 24px;
    gap: 12px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  #site-nav.is-open .nav-links {
    display: flex;
  }
  #site-nav .nav-dropdown {
    position: static !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
    margin-top: 4px;
  }
  #nav-mobile-btn {
    display: block !important;
  }
}

@media (min-width: 901px) {
  #nav-mobile-btn {
    display: none !important;
  }
}