/**
 * Software Compatibility Badges — [si_product_software_badges] /
 * [si_page_software_badges]
 * Enqueued by inc/software-badges.php (SI_Software_Badges::enqueue_styles).
 * Handles the absolute-positioned hover overlay and the icon squares,
 * scoped to the .si-hover-trigger-card parent.
 *
 * NOTE: .clean-tooltip itself is NOT defined here. It already exists
 * site-wide as custom code (the canonical version also adds the
 * `overflow: visible !important` fix needed so tooltips aren't clipped
 * inside Elementor widget wrappers — see the site's Custom CSS panel).
 * Intentionally not duplicated here to avoid two copies drifting apart.
 */

/* Base target setup for the theme archive layouts */
.si-hover-trigger-card {
    position: relative !important;
}
/* The Hidden Overlay Box Container */
.si-loop-hover-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 50 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none; /* Passes clicks through safely to the product link below */
}
/* Re-enable tracking interactions directly for the individual squares when showing */
.si-loop-hover-overlay .si-icon-square {
    pointer-events: auto !important;
}
/* THE CARD HOVER TRIGGER: Reveal badges when hovering over our custom trigger card class */
.si-hover-trigger-card:hover .si-loop-hover-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Standardized Icon Core Configurations */
.si-icon-square, a.si-icon-square {
    width: 28px !important;
    height: 28px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: -0.03em !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    transition: transform 0.15s ease !important;
}
.si-icon-square:hover, a.si-icon-square:hover {
    transform: translateY(-2px) !important;
}
/* Colors & Assets definitions */
a.si-ps { background-color: #001e36 !important; color: #31a8ff !important; border: 1px solid #002c4f !important; }
a.si-ai { background-color: #261300 !important; color: #ff9a00 !important; border: 1px solid #3d1f00 !important; }
a.si-ae { background-color: #1a0029 !important; color: #d197ff !important; border: 1px solid #2b0045 !important; }
a.si-pr { background-color: #15002b !important; color: #e480ff !important; border: 1px solid #220045 !important; }
a.si-font { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #1a1a1a !important; }
a.si-blender-hosted {
    background-color: #191919 !important;
    border: 1px solid #2d2d2d !important;
    background-image: url('https://shop.studioinnate.com/wp-content/uploads/2025/04/blender.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}

/* Browser-based badges — Scene Editor / 3D Editor (contrast against the
   desktop-software badges above: same icon-square shape, shared "online
   tool" blue accent so the two badge families read as distinct groups). */
a.si-scene-editor, a.si-3d-editor {
    background-color: #001233 !important;
    color: #4d8dff !important;
    border: 1px solid #00225c !important;
}
.si-icon-square svg {
    display: block;
}

/* Compact size modifier — used when a badge sits inline in tight UI like
   the nav sidebar rather than as a hover overlay on an archive card. */
.si-icon-square--sm, span.si-icon-square--sm {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
}
.si-icon-square--sm svg {
    width: 12px !important;
    height: 12px !important;
}

/* .clean-tooltip (the ::after/::before tooltip box + arrow, and the
   hover-reveal transitions) is defined in the site's existing custom
   code — deliberately not redeclared here. Our badges just need the
   class name and a `data-tooltip` attribute; the rest is handled there. */