/* ==========================================================================
   Muse Paint Bar — Site Header + Footer Styles
   Path: assets/css/mpb_site_header_footer.css
   All selectors use the `mpb-site-header` / `mpb-site-footer` prefixes to
   avoid any collision with the existing theme. Uses !important on key visual
   rules because the surrounding BackendPro/admin template ships its own
   button + nav + list styles that would otherwise bleed in.

   Media queries are consolidated: one @media block per breakpoint
   (768px, 560px, 420px) holds both header and footer overrides.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.mpb-site-header,
.mpb-site-header *,
.mpb-site-header *::before,
.mpb-site-header *::after {
  box-sizing: border-box;
}
/* ---------- Bar ---------- */
.mpb-site-header {
  position: relative !important;
  z-index: 100 !important;
  background: #333 !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) !important;
  /* Parent theme stylesheet sets `header { height: 140px }`. Override so our
     bar collapses to the natural height of its inner flex row. */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.mpb-site-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 19px 24px !important;
  gap: 16px !important;
}
/* Spacer is a no-op now that the header isn't fixed; kept in markup
   for backward compatibility but takes no vertical space. */
.mpb-site-header__spacer {
  display: none !important;
}
/* ---------- Hamburger toggle ---------- */
.mpb-site-header__menu-toggle {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: background 0.15s ease;
}
.mpb-site-header__menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.mpb-site-header__menu-bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 1px !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Animate hamburger -> X when open */
.mpb-site-header__menu-toggle[aria-expanded="true"] .mpb-site-header__menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mpb-site-header__menu-toggle[aria-expanded="true"] .mpb-site-header__menu-bar:nth-child(2) {
  opacity: 0;
}
.mpb-site-header__menu-toggle[aria-expanded="true"] .mpb-site-header__menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* ---------- Logo ---------- */
.mpb-site-header__logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  margin-right: auto !important;     /* pushes CTAs to the right */
}
.mpb-site-header__logo-img {
  display: block !important;
  height: 42px !important;
  width: auto !important;
  user-select: none;
}
/* Hide existing theme off-canvas wrapper on pages where this header is in use */
.off-canvas-wrap {
  display: none !important;
}
/* ---------- CTA buttons ---------- */
.mpb-site-header__ctas {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.mpb-site-header__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 5px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.mpb-site-header__btn--outline {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}
.mpb-site-header__btn--filled {
  background: #fff !important;
  color: #333 !important;
  border-color: #fff !important;
}
/* ---------- Slide-down nav ---------- */
.mpb-site-header__nav {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #333 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease;
}
.mpb-site-header__nav[data-open="true"] {
  max-height: 500px !important;
}
.mpb-site-header__nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.mpb-site-header__nav-item {
  margin: 0 !important;
  padding: 0 !important;
}
.mpb-site-header__nav-link {
  display: block !important;
  padding: 16px 24px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease;
}
.mpb-site-header__nav-link:hover,
.mpb-site-header__nav-link:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
/* ---------- Backdrop when nav is open (mobile) ---------- */
.mpb-site-header__nav[data-open="true"]::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.mpb-site-footer,
.mpb-site-footer *,
.mpb-site-footer *::before,
.mpb-site-footer *::after {
  box-sizing: border-box;
}
/* ---------- Bar ---------- */
.mpb-site-footer {
  position: relative !important;
  z-index: 100 !important;
  background: #333 !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #fff !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 40px 0 0 0 !important;
  display: block !important;
}
.mpb-site-footer__inner {
  display: flex !important;
  /* DOM order = brand first, nav second -> desktop renders the brand (logo)
     section hard-LEFT and the link section filling the RIGHT. align-items:
     stretch makes both sections share the same height. On mobile we switch
     to column and pull the nav to the top via `order` (see @media below). */
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 56px 24px !important;
  gap: 40px !important;
}
/* ---------- Brand block (logo + social + legal) ---------- */
/* Left section: content pinned left, spread top-to-bottom so the legal line
   sits at the bottom and both sections' heights line up. */
.mpb-site-footer__brand {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 26px !important;
}
.mpb-site-footer__logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 0 !important;
}
.mpb-site-footer__logo-img {
  display: block !important;
  width: 207px !important;
  height: auto !important;
  user-select: none;
}
/* ---------- Social ---------- */
.mpb-site-footer__social {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}
.mpb-site-footer__social-link {
  display: inline-flex !important;
  line-height: 0 !important;
  text-decoration: none !important;
}
.mpb-site-footer__social-img {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.mpb-site-footer__social-link:hover .mpb-site-footer__social-img {
  transform: translateY(-3px);
  opacity: 0.85;
}
/* ---------- Legal ---------- */
.mpb-site-footer__legal {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
  font-size: 15px !important;
}
.mpb-site-footer__legal-link {
  color: #e6e6e6 !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}
.mpb-site-footer__legal-link:hover,
.mpb-site-footer__legal-link:focus {
  color: #0091F1 !important;
}
.mpb-site-footer__copyright {
  color: #e6e6e6 !important;      /* match Privacy Policy / Terms links */
}
/* ---------- Link columns ---------- */
/* Right section: fills remaining width; the two columns are centered
   horizontally within it, and stretch to match the left section's height. */
.mpb-site-footer__nav {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 80px !important;
}
.mpb-site-footer__col {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 22px !important;
}
.mpb-site-footer__item {
  margin: 0 !important;
  padding: 0 !important;
}
.mpb-site-footer__link {
  display: inline-block !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: 0.5px !important;
  transition: color 0.18s ease;
}
.mpb-site-footer__link:hover,
.mpb-site-footer__link:focus {
  color: #0091F1 !important;
}

/* ==========================================================================
   RESPONSIVE — consolidated (one block per breakpoint)
   ========================================================================== */
@media (max-width: 900px) {
  /* Footer: stack, and pull link columns above the brand block */
  .mpb-site-footer__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 48px 20px !important;
    gap: 48px !important;
  }
  /* Stacked: link columns on top, left-aligned (not centered) */
  .mpb-site-footer__nav {
    order: -1 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 60px !important;
  }
  .mpb-site-footer__brand { order: 0 !important; justify-content: flex-start !important; }
  .mpb-site-footer__link { font-size: 22px !important; }
}

@media (max-width: 768px) {
  /* Header */
  .mpb-site-header__inner {
    padding: 16px 10px !important;
    height: auto !important;
    gap: 8px !important;
  }
  .mpb-site-header__logo-img { height: 36px !important; }
  .mpb-site-header__btn,
  a.mpb-site-header__btn,
  a.mpb-site-header__btn:link,
  a.mpb-site-header__btn:visited,
  a.mpb-site-header__btn:hover,
  a.mpb-site-header__btn:focus,
  a.mpb-site-header__btn:active {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 560px) {
  /* Footer — matches mobile design: 24px padding, 32px between the link
     columns and the brand block, legal on a single wrapping row. */
  .mpb-site-footer__inner {
    padding: 24px !important;
    gap: 32px !important;
  }
  .mpb-site-footer__nav {
    gap: 24px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .mpb-site-footer__col { flex: 1 1 0 !important; gap: 20px !important; }
  .mpb-site-footer__social { gap: 26px !important; }
  .mpb-site-footer__social-img { width: 30px !important; height: 30px !important; }
  /* Legal must stay on ONE line on phones. nowrap + a viewport-scaled font
     size guarantees the three items fit across iPhone widths (SE 375 ->
     Pro Max 430) without wrapping. */
  .mpb-site-footer__legal {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    gap: 0 8px !important;
    font-size: clamp(9px, 2.6vw, 14px) !important;
  }
  .mpb-site-footer__legal-link,
  .mpb-site-footer__copyright { white-space: nowrap !important; }
}

@media (max-width: 420px) {
  /* Header */
  .mpb-site-header__inner {
    padding: 12px 8px !important;
    gap: 6px !important;
  }
  .mpb-site-header__menu-toggle {
    width: 32px !important;
    height: 32px !important;
  }
  .mpb-site-header__logo-img { height: 28px !important; }
  .mpb-site-header__btn,
  a.mpb-site-header__btn,
  a.mpb-site-header__btn:link,
  a.mpb-site-header__btn:visited,
  a.mpb-site-header__btn:hover,
  a.mpb-site-header__btn:focus,
  a.mpb-site-header__btn:active {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }
  /* Footer */
  .mpb-site-footer__inner { padding: 32px 12px !important; }
  .mpb-site-footer__logo-img { width: 170px !important; }
  .mpb-site-footer__link { font-size: 18px !important; }
  .mpb-site-footer__nav { gap: 24px !important; }
}