/* --------------------------------------------------------------------------
   News and updates

   Only covers what Tailwind classes cannot reach: the article body, which is
   HTML generated from a Word document at ingestion time. Everything else on
   the page uses the site's existing utility classes.

   Values taken from the brand palette already in use across the site.
   -------------------------------------------------------------------------- */

:root {
    --mlp-purple: #6c32a4;
    --mlp-purple-light: #9856d2;
    --mlp-green: #6ba415;
    --mlp-green-light: #82c916;
    --mlp-orange: #f69215;
}

/* --- Article body ---------------------------------------------------------
   Set for sustained reading: 17px, generous leading, measure capped at 68ch.
   Inherits Poppins from the <html> element. */

.article-body {
    color: #374151; /* gray-700 */
    font-size: 1.0625rem;
    line-height: 1.75;
}

    /* The 68ch measure is for prose only. Applying it to .article-body itself
   trapped tables in ~620px inside a 768px column, which is what made the
   Flowbite padding look cramped. Tables and their scroll wrapper now use the
   full column width. */
    .article-body > p,
    .article-body > ul,
    .article-body > ol,
    .article-body > h2,
    .article-body > h3,
    .article-body > h4,
    .article-body > blockquote {
        max-width: 68ch;
    }

    .article-body > * + * {
        margin-top: 1.15em;
    }

    .article-body h2 {
        color: #111827; /* gray-900 */
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
        margin-top: 2.5rem;
        scroll-margin-top: 6rem;
    }

    .article-body h3 {
        color: #111827;
        font-size: 1.1875rem;
        font-weight: 600;
        line-height: 1.4;
        margin-top: 2rem;
    }

    .article-body h4 {
        color: #111827;
        font-size: 1.0625rem;
        font-weight: 600;
        margin-top: 1.5rem;
    }

    .article-body p.lead {
        font-size: 1.1875rem;
        line-height: 1.65;
        color: #4b5563; /* gray-600 */
    }

    .article-body ul,
    .article-body ol {
        padding-left: 1.4rem;
    }

    .article-body ul {
        list-style: disc;
    }

    .article-body ol {
        list-style: decimal;
    }

    .article-body li + li {
        margin-top: 0.4rem;
    }

    .article-body li::marker {
        color: var(--mlp-green);
    }

    .article-body blockquote {
        border-left: 3px solid var(--mlp-green-light);
        background: rgba(130, 201, 22, 0.06);
        border-radius: 0 0.75rem 0.75rem 0;
        padding: 0.85rem 1.25rem;
        color: #4b5563;
        font-style: normal;
    }

        .article-body blockquote > * + * {
            margin-top: 0.75em;
        }

    .article-body hr {
        border: 0;
        border-top: 1px solid #f3f4f6; /* gray-100 */
        margin: 2.5rem 0;
    }

/* --- Tables inside an article --------------------------------------------
   Tables are styled with Flowbite's Tailwind classes, applied by the script in
   Article.cshtml. Nothing is styled here, deliberately -- custom CSS was
   competing with the utility classes and winning in the wrong places.

   The minimum width is set inline by that script, based on how many columns
   the table has, so a two-column table fits a phone instead of scrolling.

   The one rule below is a mobile-only padding trim: Flowbite's px-6 spends
   48px per cell, which is a lot of a 375px screen.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    #article-body th,
    #article-body td {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --- Links ---------------------------------------------------------------- */

.article-body a {
    color: var(--mlp-purple);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}

    .article-body a:hover {
        color: var(--mlp-purple-light);
        text-decoration-thickness: 2px;
    }

    .article-body a:focus-visible {
        outline: 2px solid var(--mlp-purple-light);
        outline-offset: 2px;
        border-radius: 2px;
    }

    /* Anyone leaving the site should know before they click. The sanitiser adds
   .external-link plus a screen-reader hint; this is the visual half. */
    .article-body a.external-link::after {
        content: "";
        display: inline-block;
        width: 0.7em;
        height: 0.7em;
        margin-left: 0.3em;
        vertical-align: baseline;
        background-color: currentColor;
        -webkit-mask: var(--mlp-external-icon) no-repeat center / contain;
        mask: var(--mlp-external-icon) no-repeat center / contain;
    }

:root {
    --mlp-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* --- Card helpers --------------------------------------------------------- */

/* Keeps card heights even without depending on a line-clamp plugin. */
.news-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Makes the whole card clickable while keeping one real link for screen
   readers and keyboard users. */
.news-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .article-body a,
    .news-card {
        transition-duration: 0.01ms !important;
    }
}