/**
 * Interactive Image Accessibility front-end styles.
 *
 * Goals:
 *   - Visible, large-enough close button (44x44 target meets WCAG 2.5.5 AAA / 2.5.8 AA).
 *   - High-contrast focus ring on hotspots, zones and the close button.
 *   - Respect prefers-reduced-motion and forced-colors / high-contrast modes.
 */

/* Make room at the top of the tooltip for the close button.
 * Do NOT set `position` here - jQuery UI sets `position: absolute` inline
 * to place the tooltip in the viewport. Overriding it (e.g. with `relative`)
 * drops the tooltip into normal document flow and it ends up below the footer. */
.ui-tooltip.iia-tooltip {
    padding-top: 40px;
    position: absolute;
}

/* Close (X) button injected into the tooltip. */
.iia-close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    background: #ffffff;
    color: #1d1d1d;
    border: 2px solid #1d1d1d;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.iia-close-btn:hover {
    background: #1d1d1d;
    color: #ffffff;
}

.iia-close-btn:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    background: #1d1d1d;
    color: #ffffff;
}

/* Some themes remove default button outlines globally; restore for our button. */
.iia-close-btn:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Visible focus ring on the actual SVG triggers (paths/images). */
.interactive_image svg path:focus,
.interactive_image svg image:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.interactive_image svg path:focus-visible,
.interactive_image svg image:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Older Firefox SVG focus hint (outline doesn't render on SVG children there). */
.interactive_image svg path:focus {
    stroke: #005fcc;
    stroke-width: 2;
}
.interactive_image svg image:focus {
    filter: drop-shadow(0 0 2px #005fcc);
}

/* Honor reduced-motion: avoid any transitions on the close button. */
@media (prefers-reduced-motion: reduce) {
    .iia-close-btn {
        transition: none;
    }
}

/* Windows high-contrast / forced-colors: use system colors so the button stays visible. */
@media (forced-colors: active) {
    .iia-close-btn {
        background: ButtonFace;
        color: ButtonText;
        border-color: ButtonText;
    }
    .iia-close-btn:focus {
        outline: 3px solid Highlight;
    }
    .interactive_image svg path:focus,
    .interactive_image svg image:focus {
        outline: 3px solid Highlight;
    }
}