/* =========================================================
   pages-marejournal.css
   Styles for Views/MareJournal/Entry.cshtml
   ========================================================= */

/* Page width + spacing */
.marejournal .page-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 16px 56px;
}

/* ---------------------------------------------------------
   Header block (title plate)
--------------------------------------------------------- */
.marejournal-head {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 22px 0 12px;
}

.marejournal-title {
    position: relative;
    z-index: 2;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 14px 16px;
    border-radius: 14px;
}

/* Mare name: force readability on dark background */
.marejournal .mj-title,
.marejournal h1.mj-title {
    margin: 0 0 .35rem 0;
    color: #f9fafb !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.70) !important;
    -webkit-text-stroke: 0.4px rgba(0,0,0,0.35);
}

/* Subline + race record: readable too */
.marejournal .marejournal-sub,
.marejournal .marejournal-record,
.marejournal .mj-muted {
    margin: 6px 0 0;
    color: rgba(249,250,251,0.92) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55) !important;
}

/* ---------------------------------------------------------
   Sticky Prev / All / Next bar (always usable)
--------------------------------------------------------- */
.marejournal .marejournal-nav-wrap {
    position: sticky;
    top: calc(var(--topHeaderH, 0px) + var(--subHeaderH, 0px) + 10px);
    z-index: 90;
    padding: 10px 10px;
    border-radius: 16px;
    background: rgba(0,0,0,0.40);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
}

.marejournal .marejournal-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.marejournal .is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

/* ---------------------------------------------------------
   Sticky section chips row
--------------------------------------------------------- */
.marejournal .marejournal-sticky {
    position: sticky;
    top: calc(var(--topHeaderH, 0px) + var(--subHeaderH, 0px) + 92px);
    z-index: 80;
    padding: 10px 0;
    margin: 10px 0 14px;
}

.marejournal .marejournal-sticky-inner {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
}

/* Chips */
.marejournal .btn-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(51,204,102,.35);
    background: rgba(51,204,102,.10);
    color: rgba(249,250,251,0.92);
    text-decoration: none;
    font-weight: 800;
    font-size: .95rem;
}

    .marejournal .btn-chip:hover {
        border-color: rgba(51,204,102,.55);
        background: rgba(51,204,102,.14);
        color: #fff;
    }

/* Anchor jump offset so headers don't hide under sticky bars */
.marejournal section[id] {
    scroll-margin-top: calc(var(--topHeaderH, 0px) + var(--subHeaderH, 0px) + 140px);
}

/* ---------------------------------------------------------
   Ivory “card stock” content sections
--------------------------------------------------------- */
.marejournal .mj-card {
    background: #f7f1e6 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 16px;
    padding: 18px 18px;
    margin: 0 0 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
    color: #1f2937 !important;
}

    /* CRITICAL: override global site.css that sets p/li to light gray */
    .marejournal .mj-card,
    .marejournal .mj-card p,
    .marejournal .mj-card li,
    .marejournal .mj-card a,
    .marejournal .mj-card span,
    .marejournal .mj-card div {
        color: #1f2937 !important;
    }

        /* Headings inside ivory cards */
        .marejournal .mj-card h2,
        .marejournal .mj-card .mj-h2 {
            margin: 0 0 .75rem 0;
            color: #111827 !important;
            font-weight: 800;
        }

        .marejournal .mj-card h3,
        .marejournal .mj-card .mj-h3 {
            margin: 1rem 0 .4rem 0;
            color: #111827 !important;
            font-weight: 800;
        }

/* Body text */
.marejournal .mj-prose {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.75;
    margin: 0;
    color: #1f2937 !important;
}

/* ---------------------------------------------------------
   Short list (HTML rendered via Html.Raw)
   - force readable
   - remove bold look
   - keep bullets clean
--------------------------------------------------------- */
.marejournal .mj-shortlist,
.marejournal .mj-shortlist * {
    color: #1f2937 !important;
    opacity: 1 !important;
    font-weight: 400 !important; /* remove bold */
}

    /* Bullet formatting */
    .marejournal .mj-shortlist ul {
        margin: .4rem 0 0 1.1rem;
        padding: 0;
    }

    .marejournal .mj-shortlist li {
        margin: .55rem 0;
        line-height: 1.7;
    }

    /* If any <strong> exists in the HTML, keep it subtle */
    .marejournal .mj-shortlist strong {
        font-weight: 600 !important;
        color: #111827 !important;
    }

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 900px) {
    .marejournal-head {
        align-items: flex-start;
    }

    .marejournal-title {
        width: 100%;
    }

    .marejournal .marejournal-nav-wrap {
        width: 100%;
    }
}