/* MOBILE FIXES — L'Horlogerie Luxembourgeoise
   -------------------------------------------------------------
   Two separate issues from custom.css, both caused by the new
   name being longer than the original site's brand name:

   1) "#hero-home div, #hero-restauration div, #hero-reparation div"
      is positioned with left:50% and no explicit width, so its
      auto/shrink-to-fit width is computed from only the RIGHT HALF
      of the viewport (that's how CSS resolves an auto-width
      absolutely-positioned box when only "left" is set) before the
      translate(-50%) recenters it. On desktop that half is still
      wide enough; on a phone it's ~180px, far too narrow for
      "L'Horlogerie Luxembourgeoise" or the subtitle, which forces
      the box (and the page) to overflow horizontally. Giving it an
      explicit width fixes the available space; text-align:center
      still centers the text inside it exactly as before.

   2) ".fake-title" is the decorative serif heading class reused on
      every section title across the whole site (homepage sections,
      Galerie, Restauration, Réparation) as well as the footer brand
      name, all at a fixed 3rem (48px), with a 2.5rem footer-only
      override — but no override at all for narrow phones. Several
      of these headings contain "Luxembourgeoise" / "LUXEMBOURGEOISE"
      as one unbroken word, which no longer fits at 48px (or even
      40px) on a phone, so the page overflows horizontally wherever
      that heading appears. Same story for the homepage hero title
      (#hero-home .hero-section h1).

   Loaded after custom.css so these rules win. */

@media screen and (max-width: 767px) {
  #hero-home .hero-section,
  #hero-restauration .hero-section,
  #hero-reparation .hero-section {
    width: 90%;
  }

  #hero-home .hero-section h1 {
    font-size: 2.4rem;
  }

  .fake-title {
    font-size: 2.1rem;
  }

  footer .fake-title {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 400px) {
  #hero-home .hero-section h1 {
    font-size: 2rem;
  }

  .fake-title {
    font-size: 1.8rem;
  }

  footer .fake-title {
    font-size: 1.6rem;
  }
}

/* 5) Footer brand heading ("L'HORLOGERIE<br>DU LUXEMBOURG") breaking
      mid-word on tablet / narrow-desktop widths.
      Bootstrap's own ".col-sm-2" class (used on each of the 3 footer
      columns between 576px and 767px) squeezes the brand column down to
      roughly 90px, while the query above only shrinks the heading's font
      to 1.9rem for that same range — far too big to fit "LUXEMBOURG" on
      one line at that width, so the ".fake-title" safety-net rule below
      (word-break:break-word) was breaking it mid-word instead ("LUXEM" /
      "BOURG"). The same thing happens again between 768px and ~1300px
      (the md/lg/xl breakpoints), where ".col-md-4" gives the column only
      216–380px while the heading is back to its full 2.5rem desktop size.
      Fix: stack the footer columns full-width for anything under 768px
      (matching how they already stack correctly below 576px, where no
      column class applies at all), and let the footer heading wrap at
      word boundaries instead of mid-word — worst case it takes 3 lines
      ("L'Horlogerie" / "du" / "Luxembourg") instead of the intended 2,
      but it never cuts a word in half again. */
@media screen and (max-width: 767px) {
  footer .footer-colum {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

footer .fake-title {
  word-break: normal;
  overflow-wrap: normal;
}

/* Safety net: never let a single long word force horizontal scroll again */
.hero-section h1,
.fake-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 3) AOS scroll-in animations ("fade-left"/"fade-right", used for the
      two-column layout on Contact and on Restauration's "Notre approche"
      section) start each element pre-shifted 100px sideways and at
      opacity:0, then animate to their normal position once AOS detects
      the element has entered the viewport. On phones this detection can
      fail to ever fire for a column that's already inside the very
      first viewport at load (nothing scrolls, so there's no scroll
      event to re-check visibility on) — leaving that column both
      invisible and still shifted 100px off-canvas, which is exactly
      what makes the page scrollable sideways into a blank margin.
      Disabling the animation on mobile guarantees the content is
      always visible and never pushes the layout wider than the
      screen, regardless of whether AOS's own JS timing works out. */
/* 4) Phone number in the mobile header bar.
      ".navbar-nav-wrap-secondary-content" is the Unify theme's own slot for
      content next to the toggler, and by default theme.css gives it
      "margin-left:auto" (pushing it flush against the toggler on the
      right) below the lg breakpoint. Per request, the phone number should
      instead sit centered across the whole header bar, with the burger
      staying on the far right on its own. ".js-mega-menu.navbar-nav-wrap"
      is already "position:relative" (theme default), so the phone link is
      taken out of the flex flow and centered absolutely within it; the
      toggler's own margin-left is forced back to auto so it still sits
      flush right (the theme's sibling-combinator rule would otherwise
      shrink that margin now that a "secondary-content" sibling exists in
      the DOM before it). */
@media screen and (max-width: 991.98px) {
  .navbar-nav-wrap-secondary-content.d-lg-none {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
    z-index: 0;
  }

  .navbar-nav-wrap > .navbar-toggler {
    margin-left: auto !important;
  }

  /* Bug fix: the phone number is centered on the NAV element's own box
     (top:50%/left:50%), but that box is also what contains the dropdown
     menu — so once the menu opens and the nav grows to fit the menu
     links, "centered" recalculates against that new, much taller box and
     the phone number drifts down into the middle of the open menu,
     overlapping "Réparation" etc. Rather than rebuild the positioning
     context, simply hide the phone number for as long as the menu is
     open: Bootstrap sets aria-expanded="true" on the toggler button the
     moment the menu opens (and back to "false" on close), and in the
     markup the toggler comes right before this element, so this selector
     tracks that state with no JS of our own needed. */
  .navbar-toggler[aria-expanded="true"] ~ .navbar-nav-wrap-secondary-content {
    display: none;
  }
}

.navbar-header-phone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* The hero-section div inside each hero also carries data-aos="fade-in"
     (for its own fade-in-on-load effect), but its transform isn't just an
     AOS animation offset — it's what centers the box via
     "left:50%; transform:translate(-50%,-50%)" in custom.css. The blanket
     "transform:none" above (needed to cancel AOS's fade-left/fade-right
     offsets elsewhere) was also wiping out that centering transform,
     pinning the hero content to the left half of the screen and pushing
     it off-canvas — this restores it, since this selector's higher
     specificity wins over the plain "[data-aos]" rule above. */
  #hero-home .hero-section[data-aos],
  #hero-restauration .hero-section[data-aos],
  #hero-reparation .hero-section[data-aos] {
    transform: translate(-50%, -50%) !important;
  }
}