/* ============================================================
   Modern Footnotes — Frontend Styles
   Inspired by Grantland & FiveThirtyEight editorial design
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --mfn-accent:        #c0392b;   /* editorial red */
    --mfn-accent-light:  #e74c3c;
    --mfn-text:          #1a1a1a;
    --mfn-text-muted:    #555;
    --mfn-bg:            #fff;
    --mfn-border:        #d0d0d0;
    --mfn-rule:          #1a1a1a;
    --mfn-tooltip-bg:    #1a1a1a;
    --mfn-tooltip-text:  #f5f5f0;
    --mfn-font-body:     Georgia, 'Times New Roman', serif;
    --mfn-font-ui:       'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mfn-tooltip-width: 280px;
    --mfn-radius:        3px;
    --mfn-z:             1000;
}

/* ── Inline marker ─────────────────────────────────────────── */
.mfn-wrap {
    position: relative;
    display: inline;
}

.mfn-marker {
    text-decoration: none;
    color: var(--mfn-accent);
    cursor: pointer;
    border-bottom: none;
    transition: color 0.15s ease;
}

.mfn-marker:hover,
.mfn-marker:focus {
    color: var(--mfn-accent-light);
    outline: none;
}

.mfn-marker sup {
    font-family:     var(--mfn-font-ui);
    font-size:       0.68em;
    font-weight:     700;
    line-height:     0;
    vertical-align:  super;
    letter-spacing:  -0.01em;
}

/* ── Desktop Tooltip ───────────────────────────────────────── */
.mfn-tooltip {
    display:         none;   /* JS toggles .mfn-tooltip--visible */
    position:        absolute;
    bottom:          calc(100% + 10px);
    left:            50%;
    transform:       translateX(-50%);
    z-index:         var(--mfn-z);

    width:           var(--mfn-tooltip-width);
    background:      var(--mfn-tooltip-bg);
    color:           var(--mfn-tooltip-text);
    border-radius:   var(--mfn-radius);
    padding:         12px 14px;
    box-shadow:      0 4px 20px rgba(0,0,0,0.35);

    font-family:     var(--mfn-font-body);
    font-size:       0.85rem;
    line-height:     1.55;
    text-align:      left;

    /* Pointer arrow */
    filter:          drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}

.mfn-tooltip::after {
    content:         '';
    position:        absolute;
    top:             100%;
    left:            50%;
    transform:       translateX(-50%);
    border:          7px solid transparent;
    border-top-color: var(--mfn-tooltip-bg);
}

.mfn-tooltip--visible {
    display: block;
    animation: mfnFadeIn 0.18s ease;
}

/* Keep tooltip on-screen when near left/right viewport edge */
.mfn-tooltip--left {
    left:      0;
    transform: none;
}
.mfn-tooltip--left::after {
    left:      20px;
    transform: none;
}
.mfn-tooltip--right {
    left:  auto;
    right: 0;
    transform: none;
}
.mfn-tooltip--right::after {
    left:  auto;
    right: 20px;
    transform: none;
}

.mfn-tooltip-number {
    display:      inline-block;
    font-family:  var(--mfn-font-ui);
    font-size:    0.7rem;
    font-weight:  700;
    color:        var(--mfn-accent-light);
    margin-right: 5px;
    vertical-align: top;
    padding-top:  1px;
}

.mfn-tooltip-text {
    display: inline;
}

/* ── Mobile Inline Expand ──────────────────────────────────── */
.mfn-mobile-expand {
    display:    none;   /* hidden by default; JS + media query enable */
}

/* JS adds .mfn-mobile-expand--open to show/hide */
@media (max-width: 768px) {
    /* Hide desktop tooltip entirely on mobile */
    .mfn-tooltip { display: none !important; }

    .mfn-mobile-expand {
        display:       block;
        max-height:    0;
        overflow:      hidden;
        transition:    max-height 0.3s ease, padding 0.2s ease;
        padding:       0 14px;
        margin:        0 0 0 0.25em;
        background:    #f7f6f1;
        border-left:   3px solid var(--mfn-accent);
        border-radius: 0 var(--mfn-radius) var(--mfn-radius) 0;
        font-family:   var(--mfn-font-body);
        font-size:     0.9rem;
        line-height:   1.6;
        color:         var(--mfn-text);
    }

    .mfn-mobile-expand--open {
        max-height: 300px;
        padding:    10px 14px;
        margin:     6px 0 6px 0.25em;
    }

    .mfn-expand-number {
        font-family:  var(--mfn-font-ui);
        font-size:    0.72rem;
        font-weight:  700;
        color:        var(--mfn-accent);
        margin-right: 5px;
    }
}

/* ── Footnote List Section ─────────────────────────────────── */
.mfn-list-section {
    margin-top:  3em;
    padding-top: 0;
}

/* Separator */
.mfn-list-separator {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 1.25em;
}

.mfn-list-rule {
    display:    block;
    width:      60px;
    height:     3px;
    background: var(--mfn-rule);
    flex-shrink: 0;
}

.mfn-list-label {
    font-family:    var(--mfn-font-ui);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--mfn-text-muted);
}

/* List */
.mfn-list {
    list-style:   none;
    margin:       0;
    padding:      0;
    border-top:   1px solid var(--mfn-border);
}

.mfn-list-item {
    display:       flex;
    align-items:   baseline;
    gap:           10px;
    padding:       0.65em 0;
    border-bottom: 1px solid var(--mfn-border);
    font-family:   var(--mfn-font-body);
    font-size:     0.88rem;
    line-height:   1.6;
    color:         var(--mfn-text-muted);
}

.mfn-list-number {
    font-family:  var(--mfn-font-ui);
    font-size:    0.7rem;
    font-weight:  700;
    color:        var(--mfn-accent);
    flex-shrink:  0;
    min-width:    1.5em;
    text-align:   right;
}

.mfn-list-text {
    flex: 1;
}

.mfn-list-text a {
    color: var(--mfn-accent);
}

.mfn-backlink {
    font-family:   var(--mfn-font-ui);
    font-size:     0.85rem;
    color:         var(--mfn-text-muted);
    text-decoration: none;
    flex-shrink:   0;
    opacity:       0.5;
    transition:    opacity 0.15s;
    padding-left:  4px;
}

.mfn-backlink:hover {
    opacity: 1;
    color:   var(--mfn-accent);
}

/* ── Animation ─────────────────────────────────────────────── */
@keyframes mfnFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}