/* ==========================================================================
   Diplo Deep Link Finder v2.0 - Two-level highlighting
   
   Level 1: .diplo-deep-link       → subtle light background on the <p> element
   Level 2: .diplo-sentence-highlight → strong highlight on the exact sentence
   ========================================================================== */

/* Section: subtle background */
.diplo-deep-link {
    background-color: #FFFDE7 !important;  /* Pale yellow */
    border-left: 3px solid #FDD835;        /* Gold left border */
    padding-left: 8px;
    transition: background-color 0.3s ease;
}

/* Level 2: Sentence-level precise highlight */
mark.diplo-sentence-highlight {
    background-color: #FFF176;             /* Brighter yellow for the sentence */
    padding: 2px 0;
    border-radius: 2px;
    /* Animated reveal */
    -webkit-animation: sentenceReveal 0.8s ease-out 1.2s 1 both;
    animation: sentenceReveal 0.8s ease-out 1.2s 1 both;
}

@-webkit-keyframes sentenceReveal {
    from {
        background-size: 0% 100%;
    }
    to {
        background-size: 100% 100%;
    }
}

@keyframes sentenceReveal {
    from {
        background-color: transparent;
    }
    to {
        background-color: #FFF176;
    }
}

/* Paragraph containing the sentence: same as section */
.diplo-deep-link:has(mark.diplo-sentence-highlight) {
    background-color: #FFFDE7 !important;  /* Same pale yellow as section */
}