/* ============================================================
   Highlights Block – front-end & TinyMCE editor styles
   File: tinymce/highlights-block.css

   ✏️  CUSTOMISATION
   Override any of these variables in your child theme's
   main style.css to restyle the block without touching
   this file:

   .highlights-block {
       --hb-bg:           #ffffff;
       --hb-border:       #e5e7eb;
       --hb-radius:       12px;
       --hb-padding:      28px 32px 24px;
       --hb-shadow:       0 1px 4px rgba(0,0,0,.06);
       --hb-title-color:  #111827;
       --hb-title-size:   1.35rem;
       --hb-text-color:   #374151;
       --hb-text-size:    0.95rem;
       --hb-check-color:  #111827;
       --hb-divider:      #f3f4f6;
   }
   ============================================================ */

.highlights-block {
    /* — Layout tokens — */
    --hb-bg:           #ffffff;
    --hb-border:       #e5e7eb;
    --hb-radius:       12px;
    --hb-padding:      28px 32px 24px;
    --hb-shadow:       0 1px 4px rgba(0, 0, 0, 0.06);

    /* — Typography tokens — */
    --hb-title-color:  #111827;
    --hb-title-size:   1.875rem;
    --hb-text-color:   #374151;
    --hb-text-size:    0.95rem;

    /* — Accent tokens — */
    --hb-check-color:  #111827;
    --hb-divider:      #f3f4f6;

    /* — Applied styles — */
    background:    var(--hb-bg);
    border:        1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    padding:       var(--hb-padding);
    margin:        24px 0;
    box-shadow:    var(--hb-shadow);
    font-family:   inherit;
}

/* ── Headline ───────────────────────────────────────────────────────────── */

.highlights-block .highlights-title {
    font-size:   var(--hb-title-size);
    font-weight: 700;
    color:       var(--hb-title-color);
    margin:      0 0 20px 0;
    padding:     0;
    line-height: 1.3;
    border:      none;          /* reset theme borders */
}

/* ── List ───────────────────────────────────────────────────────────────── */

.highlights-block .highlights-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.highlights-block .highlights-list li {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    padding:     7px 0;
    font-size:   var(--hb-text-size);
    color:       var(--hb-text-color);
    line-height: 1.55;
    border:      none;   /* reset */
    margin:      0;
}

/* Checkmark via CSS – no image dependency */
.highlights-block .highlights-list li::before {
    content:     '\2713'; /* ✓ */
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    margin-top:  2px;
    color:       var(--hb-check-color);
    font-size:   13px;
    font-weight: 700;
}

.highlights-block .highlights-list li strong {
    font-weight:   700;
    color:         var(--hb-title-color);
    white-space:   nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .highlights-block {
        padding: 20px 18px 16px;
    }

    .highlights-block .highlights-title {
        font-size: 1.15rem;
    }

    .highlights-block .highlights-list li {
        font-size: 0.875rem;
    }
}