/* ============================================================
   Mobile & layout fixes — Wadlie Agency
   ============================================================ */

/* Full-width pill buttons using justify-between: label pinned to the left,
   arrow icon pinned to the right edge — consistent anchoring regardless of
   label length. Buttons that intentionally center their content
   (.justify-center) are left untouched. */
.btn.w-full.justify-between {
  justify-content: space-between;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

@media (max-width: 639px) {

  /* 1. Left-align all headings on mobile */
  h1, h2, h3 {
    text-align: left !important;
  }

  /* Eyebrow stays inline on mobile (not auto-centered by parent) */
  .eyebrow {
    display: inline-flex;
  }

  /* 2. Savoir-row expertise accordion: reduce padding + font-size to prevent overflow */
  .savoir-row {
    padding: 16px 14px;
    gap: 10px;
  }

  .savoir-title {
    font-size: clamp(1rem, 5.5vw, 1.35rem);
  }

  .savoir-arrow {
    width: 38px;
    height: 38px;
    margin-left: 4px;
  }

  /* 3. Section header wrappers: left-align on mobile */
  .text-center {
    text-align: left;
  }

  /* Keep rating stars and dot indicators centered */
  .flex.justify-center,
  [class*="justify-center"] {
    /* don't override flex justify — only text-align */
  }

  /* 4. Prevent <br> orphans in headings on mobile */
  h1 br, h2 br, h3 br {
    display: none;
  }

  /* 5. Offer banner (offres.html "Offre complète"): stack instead of
     squeezing the text into a sliver next to the button */
  .offer-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .offer-banner > a.btn {
    width: 100%;
    justify-content: center;
  }

  /* 6. Masonry project cards: the "is-tall" 2-row span is far too tall on a
     single-column mobile layout */
  .masonry-grid {
    grid-auto-rows: 220px;
  }
  .masonry-card.is-tall {
    grid-row: span 1;
  }

  /* 7. Guide/lead-magnet email forms (Wadlie + Moonwave): the email input's
     min-width (220px) plus the submit button no longer fit side by side on
     narrow screens, pushing the input off-screen instead of wrapping.
     Stack them full-width instead. */
  #guide-form input[type="email"],
  .mw-guide-form input[type="email"] {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  #guide-form button[type="submit"],
  .mw-guide-form button[type="submit"] {
    width: 100%;
    justify-content: center;
  }

}

/* ============================================================
   Mobile navigation overlay — full-screen, not an in-header
   max-height panel (which let page content bleed through beneath
   short menus and made the toggle look broken).
   ============================================================ */
@media (max-width: 1023px) {
  #mobile-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    height: auto;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  #mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Hamburger/close button: bump up to balance visually against larger
     multi-line logo lockups (e.g. Moonwave's stacked wordmark). */
  #menu-toggle {
    width: 56px;
    height: 56px;
  }
}

/* Respect prefers-reduced-motion for marquees */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation-play-state: paused;
  }
}

/* Real client logos in the "Ils nous ont fait confiance" marquee — matches
   the faded/hover-reveal treatment of the text-based trust-logo entries. */
.trust-logo-img {
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), transform 0.35s var(--bounce);
  cursor: default;
}
.trust-logo-img img {
  height: 76px;
  width: auto;
}
@media (min-width: 1024px) {
  .trust-logo-img img {
    height: 112px;
  }
}
.trust-logo-img:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-3px) scale(1.06);
}

/* Tighter gap between the two marquee rows now that logos are much taller */
.trust-rows {
  gap: 4px !important;
}

/* Active nav link */
.nav-link[aria-current="page"],
.mobile-nav-link[aria-current="page"] {
  color: var(--c-coral);
  font-weight: 700;
}

/* Header decoration: subtle dot-grid texture, light dots over the dark
   unscrolled header, dark dots once the header fills in with cream on scroll */
.site-header-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 247, 236, 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
}
#site-header.scrolled .site-header-texture,
#site-header.header-on-light .site-header-texture {
  background-image: radial-gradient(rgba(9, 29, 38, 0.07) 1px, transparent 1px);
}