/* LFH Floating Menu — v0.1.10 */

.lfh-floating-menu {
  --lfh-floating-bg: rgba(18, 34, 51, 0.96);
  --lfh-floating-text: var(--lfh-ink, #e5eaf0);
  --lfh-floating-accent: var(--lfh-blue, #006494);
  --lfh-floating-border: rgba(255, 255, 255, 0.14);
  --lfh-floating-edge-gap: 12px;

  /*
   * LFH global geometry. If the global stylesheet defines these variables,
   * the plugin uses them. Otherwise it falls back to the Cornerstone values
   * agreed for LFH: 88% width, 1440px maximum, centred.
   */
  --lfh-floating-site-width: var(--lfh-site-width, 88%);
  --lfh-floating-site-max-width: var(--lfh-site-max-width, 1440px);
  --lfh-floating-global-gutter: var(
    --lfh-site-gutter,
    max(6vw, calc((100vw - 1440px) / 2))
  );

  /* Legacy container values retained for saved menus from earlier versions. */
  --lfh-floating-site-gutter-legacy: var(--site-gutter, clamp(1rem, 3vw, 2.5rem));
  --lfh-floating-container-half: 45rem;

  position: fixed;
  top: 50%;
  z-index: 900;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: .35rem;

  padding: .45rem;
  max-width: min(18rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;

  color: var(--lfh-floating-text);
  background: var(--lfh-floating-bg);
  border: 1px solid var(--lfh-floating-border);
  border-radius: .875rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/*
 * Global LFH edge fallback.
 * JavaScript replaces this with exact live geometry and automatically chooses
 * outside-vs-inside placement according to the actual available gutter.
 */
.lfh-floating-menu--align-global.lfh-floating-menu--right {
  left: auto;
  right: max(
    calc(var(--lfh-floating-global-gutter) + var(--lfh-floating-edge-gap)),
    env(safe-area-inset-right)
  );
}

.lfh-floating-menu--align-global.lfh-floating-menu--left {
  right: auto;
  left: max(
    calc(var(--lfh-floating-global-gutter) + var(--lfh-floating-edge-gap)),
    env(safe-area-inset-left)
  );
}

/* Viewport-edge alignment. */
.lfh-floating-menu--align-viewport.lfh-floating-menu--right {
  left: auto;
  right: max(var(--lfh-floating-edge-gap), env(safe-area-inset-right));
}

.lfh-floating-menu--align-viewport.lfh-floating-menu--left {
  right: auto;
  left: max(var(--lfh-floating-edge-gap), env(safe-area-inset-left));
}

/* Legacy centred-container modes retained for existing menus. */
.lfh-floating-menu--align-standard { --lfh-floating-container-half: 45rem; }
.lfh-floating-menu--align-content  { --lfh-floating-container-half: 34rem; }
.lfh-floating-menu--align-wide     { --lfh-floating-container-half: 48rem; }

.lfh-floating-menu--align-standard.lfh-floating-menu--right,
.lfh-floating-menu--align-content.lfh-floating-menu--right,
.lfh-floating-menu--align-wide.lfh-floating-menu--right {
  left: auto;
  right: max(
    var(--lfh-floating-edge-gap),
    calc(
      50vw - min(
        var(--lfh-floating-container-half),
        calc(50vw - var(--lfh-floating-site-gutter-legacy))
      ) + var(--lfh-floating-edge-gap)
    )
  );
}

.lfh-floating-menu--align-standard.lfh-floating-menu--left,
.lfh-floating-menu--align-content.lfh-floating-menu--left,
.lfh-floating-menu--align-wide.lfh-floating-menu--left {
  right: auto;
  left: max(
    var(--lfh-floating-edge-gap),
    calc(
      50vw - min(
        var(--lfh-floating-container-half),
        calc(50vw - var(--lfh-floating-site-gutter-legacy))
      ) + var(--lfh-floating-edge-gap)
    )
  );
}

/* Custom element fallback; live element-edge positioning is handled by JS. */
.lfh-floating-menu--align-selector.lfh-floating-menu--right {
  left: auto;
  right: max(var(--lfh-floating-edge-gap), env(safe-area-inset-right));
}

.lfh-floating-menu--align-selector.lfh-floating-menu--left {
  right: auto;
  left: max(var(--lfh-floating-edge-gap), env(safe-area-inset-left));
}

/* Measurement clone used internally by responsive positioning. */
.lfh-floating-menu--measure-expanded .lfh-floating-menu__label {
  max-width: 12rem !important;
  opacity: 1 !important;
  margin-left: 0 !important;
}

/* User repositioning.
 * The complete rail is the drag surface; there is no permanent drag toolbar.
 * Normal clicks still work because JavaScript only enters drag mode after a
 * small movement threshold.
 */
.lfh-floating-menu[data-lfh-reposition="vertical"],
.lfh-floating-menu[data-lfh-reposition="sides"] {
  cursor: grab;
  -webkit-user-drag: none;
}

/* Native browser link/image dragging can otherwise steal the pointer sequence
 * before LFH's drag threshold is reached. Disable only the browser's native
 * drag ghost; normal clicks, focus and keyboard activation remain intact. */
.lfh-floating-menu[data-lfh-reposition="vertical"] a,
.lfh-floating-menu[data-lfh-reposition="sides"] a,
.lfh-floating-menu[data-lfh-reposition="vertical"] img,
.lfh-floating-menu[data-lfh-reposition="sides"] img,
.lfh-floating-menu[data-lfh-reposition="vertical"] .dashicons,
.lfh-floating-menu[data-lfh-reposition="sides"] .dashicons {
  -webkit-user-drag: none;
  user-drag: none;
}

.lfh-floating-menu[data-lfh-reposition="vertical"]:active,
.lfh-floating-menu[data-lfh-reposition="sides"]:active,
.lfh-floating-menu.is-dragging {
  cursor: grabbing;
}

/* Links remain visually identifiable as clickable even though dragging can
 * begin from them as well. */
.lfh-floating-menu__item,
.lfh-floating-menu__toggle,
.lfh-floating-menu__reset {
  cursor: pointer;
}

.lfh-floating-menu__reset {
  position: absolute;
  top: .3rem;
  right: .3rem;
  z-index: 5;

  display: none;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;

  color: rgba(229, 234, 240, .78);
  background: rgba(10, 26, 47, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .45rem;
  box-shadow: 0 .15rem .45rem rgba(0, 0, 0, .14);

  opacity: .72;
  transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}

.lfh-floating-menu.has-user-position .lfh-floating-menu__reset {
  display: inline-flex;
}

.lfh-floating-menu__reset:hover,
.lfh-floating-menu__reset:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  opacity: 1;
}

.lfh-floating-menu__reset .dashicons {
  width: .95rem;
  height: .95rem;
  font-size: .95rem;
  line-height: .95rem;
}

/* On pointer/hover devices the reset control stays out of the way until the
 * repositioned rail is deliberately hovered or focused. */
@media (hover: hover) and (pointer: fine) {
  .lfh-floating-menu.has-user-position .lfh-floating-menu__reset {
    opacity: 0;
    pointer-events: none;
  }

  .lfh-floating-menu.has-user-position:hover .lfh-floating-menu__reset,
  .lfh-floating-menu.has-user-position:focus-within .lfh-floating-menu__reset {
    opacity: .86;
    pointer-events: auto;
  }
}

.lfh-floating-menu.is-dragging {
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
}

.lfh-floating-menu.is-dragging * {
  pointer-events: none;
}

.lfh-floating-menu:focus-visible {
  outline: 2px solid var(--lfh-floating-accent);
  outline-offset: 3px;
}

.lfh-floating-menu__items {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.lfh-floating-menu__item,
.lfh-floating-menu__toggle {
  display: flex;
  align-items: center;
  gap: .55rem;

  min-height: 2.5rem;
  padding: .55rem .7rem;

  color: var(--lfh-floating-text);
  background: transparent;
  border: 0;
  border-radius: .625rem;

  font: inherit;
  font-size: var(--fs-ui, .875rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.lfh-floating-menu__item:hover,
.lfh-floating-menu__item:focus-visible,
.lfh-floating-menu__toggle:hover,
.lfh-floating-menu__toggle:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.lfh-floating-menu__item.is-active {
  color: #fff;
  background: var(--lfh-floating-accent);
}

.lfh-floating-menu__icon,
.lfh-floating-menu__toggle .dashicons {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1.125rem;
}

.lfh-floating-menu__label {
  overflow: hidden;
  max-width: 12rem;
  opacity: 1;
  transition: max-width .18s ease, opacity .14s ease, margin .18s ease;
}

.lfh-floating-menu__toggle {
  display: none;
  justify-content: center;
}

/* Desktop label modes. */
@media (min-width: 61.251rem) {
  .lfh-floating-menu.hide-desktop { display: none; }

  .lfh-floating-menu--labels-hover .lfh-floating-menu__label,
  .lfh-floating-menu--labels-icons .lfh-floating-menu__label {
    max-width: 0;
    opacity: 0;
    margin-left: -.55rem;
  }

  .lfh-floating-menu--labels-hover:hover .lfh-floating-menu__label,
  .lfh-floating-menu--labels-hover:focus-within .lfh-floating-menu__label,
  .lfh-floating-menu--measure-expanded .lfh-floating-menu__label {
    max-width: 12rem;
    opacity: 1;
    margin-left: 0;
  }
}

/* Tablet: compact icon rail, but alignment still follows the live LFH width. */
@media (min-width: 47.501rem) and (max-width: 61.25rem) {
  .lfh-floating-menu.hide-tablet { display: none; }

  .lfh-floating-menu__label {
    max-width: 0;
    opacity: 0;
    margin-left: -.55rem;
  }
}

/*
 * Mobile: side geometry is intentionally replaced by a safe bottom control.
 * This prevents the rail from fighting the narrower content width or browser
 * chrome. User desktop/tablet placement remains stored for when the viewport
 * becomes wider again.
 */
@media (max-width: 47.5rem) {
  .lfh-floating-menu.hide-mobile { display: none; }

  .lfh-floating-menu,
  .lfh-floating-menu--align-global,
  .lfh-floating-menu--align-viewport,
  .lfh-floating-menu--align-standard,
  .lfh-floating-menu--align-content,
  .lfh-floating-menu--align-wide,
  .lfh-floating-menu--align-selector {
    top: auto;
    left: auto;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: none;

    width: auto;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem - env(safe-area-inset-bottom));
  }

  .lfh-floating-menu__move-controls { display: none; }
  .lfh-floating-menu__toggle { display: flex; }
  .lfh-floating-menu:not(.is-open) .lfh-floating-menu__items { display: none; }

  .lfh-floating-menu.is-open {
    min-width: min(17rem, calc(100vw - 2rem));
  }

  .lfh-floating-menu__item { width: 100%; }

  .lfh-floating-menu__label {
    max-width: 12rem;
    opacity: 1;
    margin-left: 0;
  }
}

@media (max-width: 30rem) {
  .lfh-floating-menu,
  .lfh-floating-menu--align-global,
  .lfh-floating-menu--align-viewport,
  .lfh-floating-menu--align-standard,
  .lfh-floating-menu--align-content,
  .lfh-floating-menu--align-wide,
  .lfh-floating-menu--align-selector {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    max-width: calc(100vw - 1.5rem);
  }

  .lfh-floating-menu.is-open {
    min-width: min(17rem, calc(100vw - 1.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lfh-floating-menu *,
  .lfh-floating-menu *::before,
  .lfh-floating-menu *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}