/**
 * OTT theme switcher widget.
 *
 * Floats top-right at all viewport sizes. On mobile it collapses to a
 * 40×40 glyph button; the label only shows at >= 600px. Popover
 * positioning is constrained to the viewport so it stays clickable
 * even when the trigger is in a corner.
 *
 * Colours intentionally use CSS variables fed by the host theme so the
 * widget itself reskins along with the rest of the site instead of
 * looking out of place.
 */

/* Bottom-right floating placement. Originally top-right but Helix
 * Justice's sticky header transitions over the widget on scroll —
 * bottom-right avoids ALL header collisions and matches the
 * standard accessibility/chat-bubble position users expect.
 *
 * Z-index intentionally very high — Helix uses z-index ~1030 for the
 * sticky header and up to 99 for menus; 2147483647 is the max signed
 * int, the conventional "above everything" value used by accessibility
 * widget libraries. */
#otttheme-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2147483647;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

#otttheme-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    height: 36px;
    border: 1px solid rgba(184, 115, 51, 0.45);
    background: rgba(15, 13, 11, 0.85);
    color: #c9b896;
    border-radius: 18px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(4px);
}

#otttheme-trigger:hover,
#otttheme-trigger:focus-visible {
    background: rgba(20, 16, 13, 0.95);
    border-color: #b87333;
}

/* Keyboard focus must be visible (WCAG 2.4.7). currentColor tracks the
 * host theme's widget text colour, so the ring stays visible on every
 * theme; theme-base.css overrides background/border/color but not outline. */
#otttheme-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#otttheme-trigger .otttheme-glyph {
    font-size: 16px;
    line-height: 1;
}

#otttheme-trigger .otttheme-trigger-label {
    font-weight: 600;
    letter-spacing: 0.04em;
}

@media (max-width: 600px) {
    #otttheme-trigger .otttheme-trigger-label {
        display: none;
    }
    #otttheme-trigger {
        padding: 6px 10px;
        width: 36px;
        justify-content: center;
    }
}

/* Menu pops UP from the bottom-right trigger so it doesn't fall
 * off the bottom of the viewport. */
#otttheme-menu {
    position: absolute;
    right: 0;
    bottom: 44px;
    min-width: 220px;
    max-width: 280px;
    /* Cap height so the 12-item grouped menu never runs off a short
     * viewport; it scrolls internally instead. */
    max-height: min(72vh, 560px);
    overflow-y: auto;
    background: rgba(15, 13, 11, 0.97);
    border: 1px solid rgba(184, 115, 51, 0.45);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    color: #c9b896;
    backdrop-filter: blur(8px);
}

/* Theme groups — a "Comfort" set and a "Pride" set, each under a subhead. */
.otttheme-group + .otttheme-group {
    border-top: 1px solid rgba(184, 115, 51, 0.2);
    margin-top: 4px;
    padding-top: 4px;
}
.otttheme-group-label {
    padding: 6px 14px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(201, 184, 150, 0.85);
}

#otttheme-menu[hidden] {
    display: none;
}

.otttheme-menu-title {
    padding: 4px 14px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(201, 184, 150, 0.85);
    border-bottom: 1px solid rgba(184, 115, 51, 0.2);
    margin-bottom: 4px;
}

.otttheme-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 8px 14px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.otttheme-item:hover,
.otttheme-item:focus-visible {
    background: rgba(184, 115, 51, 0.12);
    color: #d49656;
}

/* Inset focus ring so a keyboard user can see which theme is focused
 * (WCAG 2.4.7); offset is negative so the ring stays inside the menu. */
.otttheme-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.otttheme-item.is-active {
    background: rgba(184, 115, 51, 0.2);
    color: #d49656;
    font-weight: 600;
}

.otttheme-item.is-active::after {
    content: "\2713";
    margin-left: auto;
    color: #d49656;
}

.otttheme-item .otttheme-glyph {
    font-size: 16px;
    line-height: 1;
    width: 18px;
    text-align: center;
}

.otttheme-menu-help {
    padding: 8px 14px 4px;
    font-size: 11px;
    color: rgba(201, 184, 150, 0.85);
    border-top: 1px solid rgba(184, 115, 51, 0.2);
    margin-top: 4px;
}

/* Hide the widget on the admin login page and offline page where
 * the document is too bare-bones to make sense. */
body.com_users.view-login #otttheme-switcher,
body.body-offline #otttheme-switcher {
    display: none;
}