/* ============================================================
   highlights.css  ·  colour: var(--highlight-color, #d9eb63)
   Works with highlights.js which draws SVG paths into
   a layer div anchored to document body.

   Usage:
     <span class="highlight-marker-streaky">some words</span>

   To change the colour globally:
     :root { --highlight-color: #F4A261; }

   To change per-element:
     <span class="highlight-marker-flat" data-highlight-colour="#FF6B6B">…</span>
============================================================ */

/* ── Shared base ─────────────────────────────────────────── */
@layer highlight-base {
    :where([class^="highlight-"]),
    :where([class*=" highlight-"]) {
        display: inline;
    }
}

[class^="highlight-"],
[class*=" highlight-"] {
    position: relative;
    z-index: 1;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Once JS injects the SVG, strip ALL CSS decoration so only
   the SVG shows. !important overrides Astro scoped styles. */
[data-highlight-svg="true"] {
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    padding: 0 !important;
    -webkit-user-select: none;
    user-select: none;
    /* Make browser selection colour transparent on this span */
    -webkit-tap-highlight-color: transparent;
}

[data-highlight-svg="true"]::selection,
[data-highlight-svg="true"] *::selection {
    background: transparent;
}

/* Restore selectability for .redacted — overrides the [data-highlight-svg] user-select:none */
.redacted[data-highlight-svg="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
}
.redacted[data-highlight-svg="true"]::selection,
.redacted[data-highlight-svg="true"] *::selection {
    background: var(--color-accent);
    color: var(--color-text);
}

/* Wavy underline — pure CSS, no JS involvement */
.highlight-wavy-underline {
    background: none !important;
    text-decoration: underline wavy 3px var(--highlight-color, #d9eb63) !important;
    text-underline-offset: 4px;
}

/* ── No-JS fallbacks ─────────────────────────────────────── */
.highlight-marker-flat,
.highlight-marker-soft,
.highlight-marker-streaky,
.highlight-marker-thick,
.highlight-marker-rolled,
.highlight-marker,
.highlight-marker-bottom,
.highlight-marker-bottom-streaky,
.highlight-thick-chalk,
.highlight-scribble {
    background: var(--highlight-color, #d9eb63);
    padding: 2px 4px;
}

.highlight-thin-crayon {
    background: linear-gradient(
        105deg,
        var(--highlight-color, #d9eb63) 0%,
        var(--highlight-color, #d9eb63) 50%,
        var(--highlight-color, #d9eb63) 100%
    );
    padding: 1px 3px;
}

.highlight-bottom-brush {
    background: linear-gradient(
        to bottom,
        transparent 55%,
        var(--highlight-color, #d9eb63) 55%
    );
    padding: 0 3px;
}

.highlight-double {
    background: linear-gradient(
        to bottom,
        transparent 15%,
        var(--highlight-color, #d9eb63) 15%,
        var(--highlight-color, #d9eb63) 32%,
        transparent 32%,
        transparent 62%,
        var(--highlight-color, #d9eb63) 62%,
        var(--highlight-color, #d9eb63) 80%,
        transparent 80%
    );
    padding: 0 2px;
}