/*
Theme Name: 21Platform
Author: created21
Author URI: http://www.created21.com/
Version: 1.3.5.129
Text Domain: voxel
*/

.breadcrumb-back::before {
    content: "";
    position: absolute;
    width: 105%;
    height: 105%;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.dark-text .breadcrumb-back::before {
    filter: invert(1);
}
/*
 * Cloak links are divs (the destination must stay cloaked), so they carry role="link"
 * and tabindex="0" instead of being anchors. Tailwind's focus:outline-none on the CTA
 * would leave keyboard focus invisible, so restore an explicit indicator here.
 */
.cloak-link[tabindex="0"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Fallback for browsers without :focus-visible support. */
.cloak-link[tabindex="0"]:focus:not(:focus-visible) {
    outline: none;
}

/*
 * Hero jump links (sections/partials/hero-anchor-links.php) scroll to headings inside
 * editorial content, which cannot carry a Tailwind scroll-margin class of their own.
 * The offset keeps the target heading off the very top edge of the viewport.
 */
html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/*
 * Comparison-table highlights (app/utils/entity-table.php).
 *
 * Deliberately not Tailwind's green/red scales: bg-green-50 is not in the compiled
 * stylesheet, and bg-green-100 resolves to the saturated brand green, which reads as
 * a status badge rather than a table tint. These are fixed, very light washes of the
 * brand colours so the strongest value stays readable next to the runner-up.
 */
.c21-cell-best    { background-color: #dff7ea; }
.c21-cell-best-2  { background-color: #eefaf3; }
.c21-cell-worst   { background-color: #fce9eb; }
.c21-cell-worst-2 { background-color: #fdf4f5; }

/* the row hover would otherwise sit on top of the tint */
.c21-entity-table tbody tr:hover .c21-cell-best    { background-color: #d3f3e1; }
.c21-entity-table tbody tr:hover .c21-cell-best-2  { background-color: #e6f7ee; }
.c21-entity-table tbody tr:hover .c21-cell-worst   { background-color: #f9dde0; }
.c21-entity-table tbody tr:hover .c21-cell-worst-2 { background-color: #fbecee; }