/* ==========================================================================
   parts/offcanvas.css — off-canvas menu (live #wlp-h1-mobile-off-canvas; GLOBAL-SPEC §4).
   Root: a 0×0 flex item in the header; hidden (visibility) until .is-open. Panel: fixed to the right,
   400px (≥479: 500px, never wider than the viewport), #042E49, scrolls internally, slides in with
   transform .2s cubic-bezier(.25,0,.25,1). Backdrop rgba(0,0,0,.5) fades with the same timing.
   The root stays visible while the panel slides out (visibility transition delayed by the duration).
   ========================================================================== */

.offcanvas {
  visibility: hidden;
  transition: visibility 0s linear var(--offcanvas-dur);
}
.offcanvas.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.offcanvas__panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-offcanvas);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
  width: var(--offcanvas-width);
  max-width: 100%;
  overflow-x: hidden;              /* → overflow-y: auto; also clips the menu links' side focus rings, as live */
  background-color: var(--wfx-offcanvas-bg);
  transform: translateX(100%);
  transition: transform var(--offcanvas-dur) var(--offcanvas-ease);
}
.offcanvas.is-open .offcanvas__panel { transform: translateX(0); }

.offcanvas__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--black-trans-50);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--offcanvas-dur) var(--offcanvas-ease);
}
.offcanvas.is-open .offcanvas__backdrop {
  z-index: var(--z-backdrop);
  opacity: 1;
  pointer-events: auto;
}

/* live .wlp-header__wrapper */
.offcanvas__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
  width: 100%;
  max-width: 100%;
  padding-top: max(6rem, var(--offcanvas-close-clear, 0px));  /* live's 6rem; lower only when the X is (under the
                                                                 content-preview banner, main.js placeClose) */
  border-radius: var(--radius-s);
}

/* live .mobile-menu__close, redrawn (DI-U-14): the header toggle's component (header.css "Menu toggle"), held
   exactly over the burger so the icon never seems to move; only its bars morph into the X.
   - Place: main.js (placeClose) measures the burger's viewport box at every open and on resize (the compact
     header's lift and scale included) and sets, on the .offcanvas root, --offcanvas-close-x / -y (the box's
     top-left in the wrapper, the panel at rest) and --offcanvas-close-scale. Without them (no JS the menu cannot
     open) it falls back to live's 1.4rem corner.
   - Hold: the panel slides with transform: translateX(100%) → 0; the button slides the other way with `translate`
     by the panel's own width (--offcanvas-shift, main.js) on the same duration and easing, so the two cancel out
     and it stays put in the viewport. The panel clips it, so it appears where the panel's edge passes the burger,
     in the same morph state as the burger under it (both carry .is-open from the same frame).
   - z-index 1: above the menu items (position: relative, later in the DOM). */
.offcanvas__close {
  position: absolute;
  top: var(--offcanvas-close-y, 1.4rem);
  left: var(--offcanvas-close-x, calc(100% - 1.4rem - var(--menu-toggle-w)));
  z-index: 1;
  scale: var(--offcanvas-close-scale, 1);
  translate: calc(-1 * var(--offcanvas-shift, min(var(--offcanvas-width), 100vw))) 0;
}
.offcanvas.is-open .offcanvas__close { translate: none; }
@media (prefers-reduced-motion: no-preference) {
  .offcanvas__close {
    transition:
      translate var(--offcanvas-dur) var(--offcanvas-ease),
      color .3s var(--menu-icon-ease);
  }
}

/* live #brxe-13e037 nav menu */
.offcanvas__nav { width: 100%; }
.offcanvas__menu {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}
.offcanvas__menu > li {
  position: relative;
  margin: 0;
}
.offcanvas__menu > li > a {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: 1.8rem;
  --link-color: var(--secondary-semi-light);
  --link-color-hover: var(--white);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
/* Menu classes come from the menu data (data/menus.php): link--white = white label, menu-active = the
   always-on "Horses Available" highlight (not the current page). */
.offcanvas__menu > li.link--white > a { --link-color: var(--white); }
.offcanvas__menu > li.menu-active { background-color: var(--primary); }
.offcanvas__menu > li.menu-active > a { --link-color: var(--white); }
.offcanvas__menu > li:hover > a {
  background-color: var(--primary);
  color: var(--white);
}

/* live .margin-top--l block: socials row + "Enquire now" */
.offcanvas__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
  width: 100%;
  margin-top: var(--space-l);
}
.offcanvas__socials {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-s);
  width: 100%;
}
.offcanvas__social { display: block; }
.offcanvas__social-icon {           /* live i.wlp-social-icon (#brxe-enwnsg …): 50×50 white disc, 30px glyph */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  padding: .6rem;
  border-radius: var(--radius-round);
  background-color: var(--white);
  color: var(--secondary);
  fill: var(--secondary);
  font-size: 3rem;
  line-height: 1;
}

/* live a.brxe-text-link.link--white.text--uppercase.text--l.text--bold.link-hover--primary */
.offcanvas__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  --link-color: var(--white);
  --link-color-hover: var(--primary);
  font-family: var(--text-font-family);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: var(--text-line-height);
  text-transform: uppercase;
  text-decoration-color: var(--link-color);
  text-wrap: pretty;
}
.offcanvas__cta:hover { color: var(--link-color-hover); }

@media (min-width: 479px) {
  .offcanvas { --offcanvas-width: 50rem; }
}

/* Reduced motion: no transitions at all on the menu's own boxes. base.css shortens every transition to
   .01ms, which would still run the root's hidden → visible switch as a (one-frame) transition, so the close
   button could not take focus right after opening. With transition none the switch is immediate. */
@media (prefers-reduced-motion: reduce) {
  .offcanvas,
  .offcanvas__panel,
  .offcanvas__backdrop,
  .offcanvas__close { transition: none; }
}