/* footer.css — overrides for orange icons, fixed size */

/* Reserve space when notification banner is visible (prevents overlap on participants, etc.) */
body.notif-banner-visible .mp-main,
body.notif-banner-visible .participants-container,
body.notif-banner-visible .likes-container {
  padding-bottom: 5rem !important;
}

:root {
  --mp-orange: #FF2E79;
  /* brand pink (matches logo) */
  --mp-line: rgba(255, 255, 255, .08);
}

/* Cookie consent: sit above the mobile tabbar (in-app browsers / narrow viewports) */
#cookie-banner {
  z-index: 10030 !important;
}

@media (max-width: 1024px) {
  body.mp-body:has(.mp-bottom-tabbar) #cookie-banner {
    bottom: calc(
      var(--mp-bottom-tabbar-h, 52px) + env(safe-area-inset-bottom, 0px) + var(--mp-vv-bottom-nudge, 0px)
    ) !important;
  }

  body.mp-body:has(.mp-bottom-tabbar) #enable-notifications {
    bottom: calc(
      var(--mp-bottom-tabbar-h, 52px) + env(safe-area-inset-bottom, 0px) + var(--mp-vv-bottom-nudge, 0px)
    ) !important;
    z-index: 10030 !important;
  }
}

.sep-top {
  border-top: 1px solid var(--mp-line);
}

/* ── Footer: TOUJOURS en bas, JAMAIS par-dessus le contenu ─────────────────────
   Position forcée en flux normal. Aucune page ne peut le faire chevaucher. */
.mp-footer,
footer.mp-footer,
.mp-footer.sep-top {
  background: #000;
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
  position: static !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0;
  margin-top: auto;
  z-index: 0;
}

/* Sticky footer: body en colonne flex pour pousser le footer en bas.
   html/body height: 100% (style.css) + flex row would clip content on iOS Safari;
   height: auto lets the document grow so the page can scroll to the footer. */
html:has(.mp-footer) {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(.mp-footer) {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Le footer utilise margin-top: auto pour se coller en bas quand la page est courte.
   Ne pas mettre flex-grow sur <main> : sinon le main « gonfle » et laisse un vide sombre
   entre le dernier bloc et le footer (surtout si le contenu est plus bas que la fenêtre). */
body:has(.mp-footer) > main,
body:has(.mp-footer) > .mp-main {
  flex: 0 0 auto;
  min-width: 0;
}

/* social row */
.mp-footer .footer-social-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ICON COLOR + SIZE (no hover color change) */
.mp-footer .footer-social-bar a {
  color: var(--mp-orange) !important;
  /* force orange even if HTML has text-white */
  text-decoration: none;
}

.mp-footer .footer-social-bar a svg {
  width: 40px !important;
  /* same as w-10 h-10 */
  height: 40px !important;
  display: block;
  color: inherit;
  /* use the anchor’s orange */
  fill: currentColor;
  /* keep using currentColor */
}

/* keep hover behavior neutral (no color change) */
.mp-footer .footer-social-bar a:hover,
.mp-footer .footer-social-bar a:focus {
  color: var(--mp-orange) !important;
  opacity: 1;
  transform: none;
  outline: none;
}

/* copyright */
.mp-footer .footer-copy {
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
}

/* mobile — footer compact pour ne pas dominer les pages avec peu de contenu */
@media (max-width: 768px) {
  .mp-footer {
    padding: 1rem 0.75rem !important;
  }
  .mp-footer .footer-social-bar {
    gap: 1rem;
    margin-bottom: 0.75rem;
  }
  .mp-footer .footer-social-bar a svg {
    width: 28px !important;
    height: 28px !important;
  }
  .mp-footer #newsletter {
    margin: 0.75rem auto 0.5rem !important;
    padding: 0.75rem 1rem !important;
  }
  .mp-footer #newsletter h3 {
    font-size: 0.95rem !important;
  }
  .mp-footer #newsletter p.small {
    font-size: 0.75rem !important;
  }
  .mp-footer .small {
    font-size: 0.75rem !important;
  }
  .mp-footer .footer-copy {
    font-size: 0.75rem;
    margin-top: 0.75rem;
  }
}

@media (max-width: 480px) {
  .mp-footer {
    padding: 0.75rem 0.5rem !important;
  }
  .mp-footer .footer-social-bar {
    margin-bottom: 0.5rem;
  }
  .mp-footer .footer-social-bar a svg {
    width: 24px !important;
    height: 24px !important;
  }
  .mp-footer .footer-newsletter {
    margin: 0.5rem auto 0.25rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  .mp-footer .footer-newsletter h3 {
    font-size: 0.85rem !important;
    margin-bottom: 0.2rem !important;
  }
  .mp-footer .footer-newsletter p.small {
    font-size: 0.7rem !important;
    margin-bottom: 0.4rem !important;
  }
  .mp-footer .small {
    margin-top: 0.3rem !important;
  }
  /* Masquer le bloc SEO long */
  .mp-footer .footer-seo {
    display: none;
  }
}

/* ── /client/profile/view : scroll document (priorité sur le flex sticky-footer ci-dessus)
   Chargé sur toutes les pages : en hx-boost le <style> inline du template peut ne pas
   s’appliquer au bon moment ; ces règles restent dans footer.css après body:has(.mp-footer). ── */
html:has(body.page-client-profile-view) {
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body.page-client-profile-view {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.page-client-profile-view > main.mp-main {
  display: block !important;
  flex: none !important;
}

body.page-client-profile-view.profile-view-scroll-lock {
  overflow-y: hidden !important;
}