/**
 * OS Panel — Floating Menu (frontend).
 *
 * Desktop: a right-anchored vertical stack of icon squares. Each item is
 * semi-transparent and collapsed to a square by default; on hover/focus it
 * smoothly expands leftward to reveal its label (fading in) and becomes fully
 * opaque. No box-shadow in any state.
 *
 * Mobile:
 *   - "floating": icon-only squares on the right (no expand).
 *   - "fixed": a full-width, edge-to-edge grid bar docked at the bottom,
 *     icon-only (no labels). Used to replace the Pinned Contact Bar on mobile.
 *   - Optional Back-to-Top item (last), shown on mobile only.
 *
 * Tunable values come from CSS custom properties set inline on the container:
 *   --fm-size --fm-bottom --fm-right --fm-gap --fm-radius --fm-bg --fm-text
 *   --fm-bottom-m --fm-right-m --fm-gap-m
 * Per-item overrides re-set --fm-bg / --fm-text inline on the <a>.
 *
 * Theme root font-size is 62.5% (1rem = 10px).
 */
.one-floating-menu {
    position: fixed;
    right: var(--fm-right, 14px);
    bottom: var(--fm-bottom, 30px);
    z-index: 3; /* above back-to-top (z-index: 2), below site nav/modals */
    display: flex;
    flex-direction: column;
    gap: var(--fm-gap, 12px);
    align-items: flex-end; /* right-anchored so items expand leftward */
    max-width: calc(100vw - 2.8rem);
    margin: 0;
    padding: 0;
}

.one-floating-menu__item {
    display: flex;
    flex-direction: row-reverse; /* icon pinned to the right, label reveals left */
    align-items: center;
    overflow: hidden;
    height: var(--fm-size, 56px);
    max-width: var(--fm-size, 56px); /* collapsed = square (icon only) */
    background-color: var(--fm-bg, #d52838);
    color: var(--fm-text, #fff);
    border: 0;
    border-radius: var(--fm-radius, 0);
    text-decoration: none;
    opacity: .85; /* moderate transparency by default */
    cursor: pointer;
    will-change: max-width;
    transition: max-width .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}

.one-floating-menu__item:hover,
.one-floating-menu__item:focus-within {
    max-width: 42rem; /* room to reveal the label */
    opacity: 1;
}

.one-floating-menu__icon {
    flex: 0 0 var(--fm-size, 56px);
    width: var(--fm-size, 56px);
    height: var(--fm-size, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.one-floating-menu__icon .dashicons {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 2.4rem;
    line-height: 1;
}

.one-floating-menu__label {
    white-space: nowrap;
    padding: 0 1.4rem 0 2rem;
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* Label fades in as the item expands (smoother than a hard clip reveal). */
.one-floating-menu__item--has-icon .one-floating-menu__label {
    opacity: 0;
    transform: translateX(.6rem);
    transition: opacity .4s ease .06s, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.one-floating-menu__item--has-icon:hover .one-floating-menu__label,
.one-floating-menu__item--has-icon:focus-within .one-floating-menu__label {
    opacity: 1;
    transform: none;
}

/* Items without an icon are plain, always-visible text buttons. */
.one-floating-menu__item--no-icon {
    flex-direction: row;
    max-width: none;
}

.one-floating-menu__item--no-icon .one-floating-menu__label {
    padding: 0 2rem;
}

/* Back-to-Top item is mobile-only. */
@media (min-width: 768px) {
    .one-floating-menu__item--back-to-top {
        display: none !important;
    }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Floating (right) — icon-only squares, no hover expand. */
    .one-floating-menu--mobile-floating {
        right: var(--fm-right-m, 12px);
        bottom: var(--fm-bottom-m, 16px);
        gap: var(--fm-gap-m, 10px);
        align-items: flex-end;
    }

    .one-floating-menu--mobile-floating .one-floating-menu__item--has-icon {
        max-width: var(--fm-size, 56px);
        opacity: 1;
    }

    /* Fixed — full-width, edge-to-edge, icon-only bottom bar (equal columns). */
    .one-floating-menu--mobile-fixed {
        right: 0;
        left: 0;
        bottom: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
        padding: 0;
        max-width: none;
        align-items: stretch;
    }

    .one-floating-menu--mobile-fixed .one-floating-menu__item {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: none;
        width: auto;
        height: var(--fm-size, 56px);
        opacity: 1;
        overflow: hidden;
    }

    /* Icon only — hide the label on the fixed bottom bar (items that have an
       icon). Items without an icon keep their label so the cell is never empty. */
    .one-floating-menu--mobile-fixed .one-floating-menu__item--has-icon .one-floating-menu__label {
        display: none;
    }

    .one-floating-menu--mobile-fixed .one-floating-menu__icon {
        flex: 0 0 auto;
        width: auto;
        height: auto;
    }

    /* When enabled, hide the One Pinned Contact Bar's visible bar on mobile
       (its popup <dialog> is a sibling and stays available). */
    body.one-fm-hide-pinned-mobile .pinned-contact-callout__wrapper {
        display: none !important;
    }

    /* When the mobile Back-to-Top item is enabled, hide the theme's default
       back-to-top button on mobile so there is no duplicate. */
    body.one-fm-mobile-top .back-to-top__wrapper {
        display: none !important;
    }
}