/* layout.css — accessibility / layout corrections on top of the Pixieset theme.
 *
 * Loaded after motion.css on all 11 pages. Nothing here is required for the
 * site to function: remove the <link> and you get the theme's own layout back.
 *
 * Rules this file must not break (see CLAUDE.md):
 *   - never restyle .fb-element itself (it carries the theme's rotation var)
 *   - never hide anything with display/visibility (the theme's lazy init is
 *     IntersectionObserver-based and purely geometric)
 *   - the header must not move while the mobile menu is open
 *
 * Hit areas are therefore enlarged with absolutely-positioned ::after overlays
 * rather than padding wherever the element sits in the header: an overlay adds
 * no layout box, so nothing reflows and the header cannot shift.
 */

/* ------------------------------------------------------------------ *
 * 1. Tap targets — WCAG 2.5.8 asks for 44x44 CSS px.
 * ------------------------------------------------------------------ */

/* The hamburger: 30x20 as shipped, and it is the only way into the mobile nav. */
.nav-toggle {
  position: relative;
}
.nav-toggle::after {
  content: "";
  position: absolute;
  inset: -12px -7px;
  /* no background: this is a hit area, not a visual */
}

/* Submenu expander next to "Portfolio" / "Prestations": 11x9 as shipped, and
   its box collapses to 0 wide once the icon font loads - hence the wider
   horizontal inset. */
.navigation__link-group .navigation__link--icon {
  position: relative;
}
.navigation__link-group .navigation__link--icon::after {
  content: "";
  position: absolute;
  inset: -18px -24px;
}

/* Social icons: 16x16 as shipped. */
.fb-element-type-social-links__link {
  position: relative;
}
.fb-element-type-social-links__link::after {
  content: "";
  position: absolute;
  inset: -14px;
}

/* Back-to-top: the <i role="button"> is the click handler, 24x24 as shipped.
   Scroll behaviour is untouched — the theme relies on CSS smooth scrolling. */
.fb-element-type-back-to-top .fb-icon-to-top {
  position: relative;
}
.fb-element-type-back-to-top .fb-icon-to-top::after {
  content: "";
  position: absolute;
  inset: -10px;
}

/* Menu links sit inside the popup overlay, so real padding is safe here and
   gives a genuinely larger target rather than an invisible overlay that would
   collide with its neighbours. */
@media (max-width: 1024px) {
  .fb-element-type-menu--popup .navigation__link {
    padding-block: 0.85rem;
  }
  /* …which can make a long menu taller than the viewport. */
  .fb-element-type-menu--popup .navigation__items {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phone and e-mail are conversion links, not prose — give them a real target. */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-block;
  padding-block: 0.7rem;
}

/* ------------------------------------------------------------------ *
 * 2. Minimum legible type on small screens.
 *
 * The theme renders button labels, nav items and captions at 11.4px. Typography
 * here is tag-bound and fragile, so this is deliberately scoped to interactive
 * labels only — not to body copy or headings, which would drift page heights.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .ps-button__text,
  .button__text,
  .navigation__link .page-name {
    font-size: max(12px, 1em);
  }
}

/* ------------------------------------------------------------------ *
 * 3. End-of-gallery call to action.
 *
 * The galleries ended at the footer: someone who had just scrolled 20 wedding
 * photos had no way to act on it. Deliberately built from our own class names
 * so no theme JS, hashed block CSS, masonry or PhotoSwipe logic can touch it.
 * The wording is Malik's own, lifted verbatim from /evenements/.
 * ------------------------------------------------------------------ */
.mrx-cta {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(2.5rem, 7vw, 5rem) 1.25rem;
  text-align: center;

}

/* This CTA deliberately sits outside the .fb-block system, so the theme's own
   colour rules - which are selector-scoped to .fb-element - do not reach it and
   the link falls back to the browser's default blue. Typography, tracking,
   uppercasing and the underline all still come from the theme; only the colour
   has to be restated. #101010 is the theme's heading/paragraph ink, measured
   from the identical button on /evenements/. */
.mrx-cta .ps-button,
.mrx-cta .ps-button__text {
  color: #101010;
}
.mrx-cta__inner {
  margin: 0 auto;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.mrx-cta .ps-button {
  /* inherits the theme's button skin; only guarantee the tap target */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The reveal layer hides pre-animation content until motion.js boots; opt this
   block in so it fades with everything else, and stays visible if JS fails. */
html:not(.mrx-ready) .mrx-cta {
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * 4. Legal pages (politique de confidentialité).
 *
 * Same escape hatch as the CTA: the theme's grid cells are sized for one short
 * paragraph, so a long legal notice is rendered outside the block system
 * entirely. Typography is restated here for the same reason the CTA's colour
 * had to be - the theme's rules are selector-scoped to .fb-element.
 * ------------------------------------------------------------------ */
.mrx-legal {
  box-sizing: border-box;
  padding: clamp(3rem, 8vw, 6rem) 1.25rem clamp(4rem, 9vw, 7rem);
  color: #101010;
}
.mrx-legal__inner {
  margin: 0 auto;
  max-width: 44rem;
}
.mrx-legal h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  font-weight: 400;
}
.mrx-legal h2 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.3;
  margin: 2.5rem 0 0.6rem;
  font-weight: 500;
}
.mrx-legal p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.mrx-legal__meta {
  opacity: 0.65;
  font-size: 0.875rem;
}
.mrx-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Legal prose is the one place long inline links are unavoidable; the global
   tel:/mailto: tap padding would otherwise break up the line boxes. */
.mrx-legal a[href^="tel:"],
.mrx-legal a[href^="mailto:"] {
  display: inline;
  padding-block: 0;
}

/* Footer legal link, injected next to the copyright line. */
.mrx-legal-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
}
.mrx-legal-link:hover,
.mrx-legal-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .mrx-cta {
    transition: none;
  }
}