/**
 * @file
 * FF AJAX Regions — minimal offcanvas wrapper styles.
 *
 * The module owns ONLY the wrapper positioning + state transitions. Inner
 * content (block layout, typography, colors) belongs to the integrator's
 * theme. Override the CSS custom properties below to fit your design.
 *
 * CSS custom properties:
 *   --ff-ajax-top          Top offset (header height). Default 0.
 *   --ff-ajax-bottom       Bottom offset (footer height). Default 0.
 *   --ff-ajax-width-g      Left volet width. Default min(70vw, 1024px).
 *   --ff-ajax-width-d      Right volet width. Default min(30vw, 480px).
 *   --ff-ajax-z            Stacking context. Default 50.
 *   --ff-ajax-transition   Slide duration/easing. Default .3s ease-out.
 */

:root {
  /* Top/bottom offset: prefer host-theme vars when defined, fallback to 0.
     CDN Rouen / ff_rouen theme exposes:
       --hauteur-section1: sticky top banner height (header)
       --hauteur-section2: sticky bottom bar height (footer-style nav)
     Other themes can override --ff-ajax-top / --ff-ajax-bottom directly via
     theme CSS. */
  --ff-ajax-top: 0;
  --ff-ajax-bottom: 0;
  --ff-ajax-width-g: 100%;
  --ff-ajax-width-d: 100%;
  --ff-ajax-z: 10;
  --ff-ajax-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-ff-ajax-region] {
  position: fixed;
  top: var(--ff-ajax-top);
  bottom: var(--ff-ajax-bottom);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--ff-ajax-z);
  transition: var(--ff-ajax-transition);
  /* Prevent scroll chaining: page below stops scrolling when volet reaches end. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


[data-ff-ajax-region][data-ff-ajax-region-state="open"] {
  transform: translateX(0);
}

[data-ff-ajax-region][data-ff-ajax-region-state="loading"] {
  opacity: 0;
}

[data-ff-ajax-region][data-ff-ajax-region-state="closed"] {
  /* Fermeture : rapide et directe (ease-in). */
  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
  /* Off-screen wrapper still in DOM — silence pointer events to avoid stray
     clicks captured outside the viewport on touchscreens with overscroll. */
  pointer-events: none;
}

[data-ff-ajax-region][data-ff-ajax-region-state="open"],
[data-ff-ajax-region][data-ff-ajax-region-state="loading"],
[data-ff-ajax-region][data-ff-ajax-region-state="error"] {
  pointer-events: auto;
}

[data-ff-ajax-region][data-ff-ajax-region-state="error"] {
  outline: 2px solid #c00;
}

/* Screen-reader-only live region (injected by JS) — visually hidden. */
[data-ff-ajax-region-live] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-ff-ajax-region] {
    transition: none;
  }
}