/* ===========================================================================
 * Litigation Logic post components
 * ---------------------------------------------------------------------------
 * Drop this file into your active theme (or child theme) and enqueue it.
 * The verdicts pipeline emits semantic class names with NO inline styles, so
 * every visual change is driven from this file alone. Old posts pick up new
 * styling on the next page load.
 *
 * Component classes:
 *   .ll-factbox            Verdict at a Glance panel at the top of a post
 *   .ll-references         Bibliography section at the bottom of a post
 *   .ll-photo-credit       Italic photo attribution line above references
 *   .ll-footnote-ref       Superscript wrapping the inline citation marker
 *
 * Color palette is subdued and neutral so the components inherit your
 * theme's reading colors. Override anywhere you want a different look.
 * ===========================================================================
 */

/* ---------- shared tokens ----------------------------------------------- */
:root {
    --ll-border:        #d1d5db;
    --ll-bg-soft:       #f9fafb;
    --ll-text:          #111827;
    --ll-text-muted:    #6b7280;
    --ll-text-strong:   #374151;
    --ll-link:          #1d4ed8;
    --ll-link-hover:    #1e40af;
    --ll-rule:          #e5e7eb;
    --ll-radius:        6px;
    --ll-gap:           1rem;
}

/* ---------- Fact Box ---------------------------------------------------- */
.ll-factbox {
    border: 1px solid var(--ll-border);
    background: var(--ll-bg-soft);
    border-radius: var(--ll-radius);
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.75rem 0;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--ll-text);
}
.ll-factbox-title {
    margin: 0 0 0.85rem 0;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ll-text-muted);
    border: 0;
}
.ll-factbox-list {
    display: grid;
    grid-template-columns: minmax(8.5rem, 30%) 1fr;
    gap: 0.45rem var(--ll-gap);
    margin: 0;
}
.ll-factbox-label {
    font-weight: 600;
    color: var(--ll-text-strong);
    margin: 0;
}
.ll-factbox-value {
    margin: 0;
    color: var(--ll-text);
    overflow-wrap: anywhere;
}

/* ---------- References (bibliography) ----------------------------------- */
.ll-references {
    margin: 2.25rem 0 1rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ll-rule);
}
.ll-references-title {
    margin: 0 0 0.85rem 0;
    font-size: 1em;
    font-weight: 700;
    color: var(--ll-text);
    letter-spacing: 0.01em;
    border: 0;
}
.ll-reference {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 0.5rem;
    margin: 0 0 0.55rem 0;
    font-size: 0.92em;
    line-height: 1.55;
    color: var(--ll-text-strong);
}
.ll-reference:target {
    background: #fffbeb;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    margin-left: -0.4rem;
}
.ll-reference-num {
    color: var(--ll-text-muted);
    font-weight: 600;
    text-align: right;
    user-select: none;
}
.ll-reference-body {
    overflow-wrap: anywhere;
}
.ll-reference-link {
    color: var(--ll-link);
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.35);
    text-underline-offset: 0.18em;
    word-break: break-all;
}
.ll-reference-link:hover {
    text-decoration-color: currentColor;
    color: var(--ll-link-hover);
}

/* ---------- Inline footnote markers ------------------------------------- */
.ll-footnote-ref {
    line-height: 1;
}
.ll-footnote-ref-link {
    text-decoration: none;
    color: var(--ll-link);
    font-weight: 600;
    font-size: 0.7em;
    padding: 0 1px;
}
.ll-footnote-ref-link:hover {
    text-decoration: underline;
}

/* ---------- Photo credit ------------------------------------------------ */
.ll-photo-credit {
    margin: 1.25rem 0 1.5rem 0;
    font-size: 0.88em;
    font-style: italic;
    color: var(--ll-text-muted);
}
.ll-photo-credit-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}
.ll-photo-credit-link:hover {
    text-decoration-color: currentColor;
}

/* ---------- Mobile (single-column fact box) ----------------------------- */
@media (max-width: 640px) {
    .ll-factbox-list {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }
    .ll-factbox-label {
        margin-top: 0.6rem;
        font-size: 0.78em;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ll-text-muted);
        font-weight: 700;
    }
    .ll-factbox-list .ll-factbox-label:first-child {
        margin-top: 0;
    }
    .ll-reference {
        grid-template-columns: 1.75rem 1fr;
    }
}

/* ---------- Print ------------------------------------------------------- */
@media print {
    .ll-factbox {
        background: transparent;
        border-color: #999;
    }
    .ll-reference-link,
    .ll-photo-credit-link {
        color: #000;
    }
    .ll-footnote-ref-link {
        color: #000;
        font-weight: 700;
    }
}