/* Mirrors Hostinger Horizons helpers used by the live React bundle (not in the Vite CSS chunk). */

/*
 * The vendored plombier-live.css is content-scoped and omits utilities like `lg:sticky` / `lg:top-28`.
 * Recherche fuite: left “Sommaire” must stick while the article scrolls (same as production).
 * `overflow-x: clip` on html/body breaks `position: sticky` (Sommaire recherche-fuite). Live CSS clips body; override both axes on root to visible.
 */
html {
  overflow-x: visible;
}
body {
  overflow-x: visible;
}

/*
 * Hero vertical centering (align with plombier-saintmaurdesfosses.fr).
 * Avoid pt-20 / mt-12 on heroes: header is already in document flow above <main>.
 */
:root {
  --site-header-h: 4.5rem;
}
@media (min-width: 768px) {
  :root {
    --site-header-h: 6.25rem;
  }
}

.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.page-hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
}

.page-hero--full {
  min-height: calc(100vh - var(--site-header-h));
  min-height: calc(100dvh - var(--site-header-h));
}

/* Inner pages with image hero (source site uses ~52dvh, not 70dvh) */
.page-hero--70 {
  min-height: 52vh;
  min-height: 52dvh;
}

/* Compact solid heroes (contact, réalisations, zone) — proportional to 52dvh @ 70% */
.page-hero--50 {
  min-height: 38vh;
  min-height: 38dvh;
}

.page-hero--solid {
  background-color: hsl(var(--primary));
}

/* Leaflet map hosts (contact + zone-intervention): tile layer + cercle orange #f97316 */
.intervention-map {
  min-height: 12rem;
  background: hsl(var(--muted));
}

@media (min-width: 1024px) {
  /*
   * Sticky needs a tall ancestor: if the aside is align-self:start / shrink-wrapped,
   * its height equals the Sommaire block — sticky has no scroll range and appears broken.
   * Let grid items stretch to the row height (taller article column) so .rf-fuite-sommaire can stick.
   */
  .rf-fuite-sommaire {
    position: sticky;
    top: 7rem;
    z-index: 2;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.site-header-inner {
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
}
.site-header-inner.is-pinned {
  position: fixed;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
}

/* Sprite sheet root: do NOT use overflow:hidden + 0×0 — WebKit often fails to paint <use href="#…"> clones. */
.svg-icon-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

/* Inline Lucide-style SVGs (stroke icons): ensure Tailwind text-* drives stroke */
svg.lucide {
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
svg.lucide circle,
svg.lucide ellipse,
svg.lucide line,
svg.lucide path,
svg.lucide polygon,
svg.lucide polyline,
svg.lucide rect {
  fill: none;
  stroke: currentColor;
}

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.site-nav-mobile > summary {
  list-style: none;
}
.site-nav-mobile > summary::-webkit-details-marker {
  display: none;
}

.site-nav-mobile > summary .nav-ico-close {
  display: none;
}
.site-nav-mobile[open] > summary .nav-ico-menu {
  display: none;
}
.site-nav-mobile[open] > summary .nav-ico-close {
  display: block;
}

/* Full-viewport mobile menu: the <details> sits in a narrow flex slot, so avoid `absolute left-0 right-0` on the panel (would match button width only). */
.site-nav-mobile-panel {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40; /* below header (z-50) so the close button stays usable */
  top: 4.5rem; /* mobile: top bar hidden, one nav row (~py-3 + h-12 logo) */
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100dvh - 4.5rem);
  border-radius: 0 0 1rem 1rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav-mobile-panel {
    top: 7rem; /* md: phone strip + nav */
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
  }
}
.site-nav-mobile-panel-inner {
  max-height: inherit;
}

.site-nav-dropdown > summary svg,
.site-nav-services-mobile > summary svg {
  transition: transform 0.3s ease;
}
.site-nav-dropdown[open] > summary svg,
.site-nav-services-mobile[open] > summary svg {
  transform: rotate(180deg);
}

/* Stand in for @tailwindcss/typography (used as class names on the live React site). */
.prose.prose-lg p {
  margin-bottom: 1rem;
  line-height: 1.625;
}
.prose.prose-lg h3 {
  margin-top: 2rem;
}