/* ============================================================
   news.css — EW2027 news list + article page
   ============================================================ */

/* ---------- News list ---------- */
.news-list {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    border-radius: 10px;
    overflow: hidden;
}

.news-item {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background-color 120ms ease;
}

    .news-item:last-child {
        border-bottom: none;
    }

    /* alternating row shading */
    .news-item:nth-child(even) {
        background: var(--surface-alt);
    }

    .news-item:hover {
        background: var(--accent-soft, rgba(0,0,0,0.04));
    }

/* stacked date column */
.news-item-when {
    flex: 0 0 auto;
    width: 130px;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.news-when-day {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.news-when-date,
.news-when-time {
    font-size: 12px;
    color: var(--text-muted);
}

/* subject */
.news-item-subject {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    align-self: center;
}

.news-empty {
    color: var(--text-muted);
    padding: 24px 0;
    text-align: center;
}

@media (max-width: 560px) {
    .news-item {
        flex-direction: column;
        gap: 6px;
    }

    .news-item-when {
        width: auto;
        flex-direction: row;
        gap: 8px;
    }
}

/* ---------- News article page ---------- */
.news-article {
    max-width: 760px;
    margin: 8px auto 0;
}

.news-article-subject {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 10px;
}

.news-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.news-article-wire {
    font-weight: 600;
}

.news-article-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

    .news-article-body p {
        margin: 0 0 1em;
    }

.news-article-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.news-article-back {
    margin-top: 28px;
}

    .news-article-back a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 600;
    }

        .news-article-back a:hover {
            text-decoration: underline;
        }

/* ---------- News article content (rendered HTML + injected Footer CSS) ---------- */
/* Article images: blend white backgrounds into the page (as in EW2023). */
.news-article-body img,
#newscontent img {
    mix-blend-mode: multiply;
}

/* ---------- News article dark mode ---------- */
/* The theme supports dark mode two ways: a manual toggle ([data-theme="dark"])
   and the OS setting (@media prefers-color-scheme: dark). The article overrides
   must apply under BOTH, so each rule is written for the attribute selector and
   repeated inside the media query. */

/* surface + base text */
[data-theme="dark"] .news-article-body,
[data-theme="dark"] #newscontent {
    color: #f7f7f7;
}
    /* force all article text light (beats prnews_span / prngenN COLOR:BLACK) */
    [data-theme="dark"] #newscontent,
    [data-theme="dark"] #newscontent *,
    [data-theme="dark"] .news-article-body,
    [data-theme="dark"] .news-article-body * {
        color: #f7f7f7 !important;
    }
        /* lighten hardcoded black borders */
        [data-theme="dark"] #newscontent *,
        [data-theme="dark"] .news-article-body * {
            border-color: #6a6a6a !important;
        }
        /* readable link color */
        [data-theme="dark"] #newscontent a,
        [data-theme="dark"] #newscontent a.prnews_a,
        [data-theme="dark"] .news-article-body a {
            color: #7ab7ff !important;
        }

/* GUARDED with :root:not([data-theme="light"]). Without it this block fired on
   every device whose OS was in dark mode - INCLUDING when the reader had picked
   light mode with the site toggle. The background followed the toggle and stayed
   light; this block forced the article text to #f7f7f7 !important anyway.
   Near-white on white.

   It showed up as "sometimes, on Macs and iPhones" because Apple devices set to
   automatic appearance switch to dark at sunset: the article went blank in the
   evening and came back in the morning. The title and date survived because they
   use theme tokens, which were already guarded - only the rules below were not.

   The toggle is an explicit choice and has to win over the OS preference. The
   guard means this block now applies only when nobody has said "light". */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .news-article-body,
    :root:not([data-theme="light"]) #newscontent {
        color: #f7f7f7;
    }

        :root:not([data-theme="light"]) #newscontent,
        :root:not([data-theme="light"]) #newscontent *,
        :root:not([data-theme="light"]) .news-article-body,
        :root:not([data-theme="light"]) .news-article-body * {
            color: #f7f7f7 !important;
        }

            :root:not([data-theme="light"]) #newscontent *,
            :root:not([data-theme="light"]) .news-article-body * {
                border-color: #6a6a6a !important;
            }

            :root:not([data-theme="light"]) #newscontent a,
            :root:not([data-theme="light"]) #newscontent a.prnews_a,
            :root:not([data-theme="light"]) .news-article-body a {
                color: #7ab7ff !important;
            }
}

.news-h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 1.25rem 0 .35rem;
}

.news-intro {
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0 0 1.25rem;
    /*   max-width: 80ch;*/
}

.news-item-source {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ew-color);
    margin-top: .2rem;
}

.news-item.is-preview {
    border-left: 3px solid var(--ew-color);
}

/* ============================================================
   Wire content containment
   ------------------------------------------------------------
   The article body is HTML from the wire — Business Wire, PR Newswire,
   GlobeNewswire — and some of it arrives carrying the agency's own stylesheet and
   inline width attributes. Nothing here is under our control, so this is written
   defensively rather than against any one wire's markup.

   Three things overflow a phone:

   1. Long unbroken URLs. Every wire prints its source link in full, and a
      60-character URL offers no space to wrap at, so it sets the paragraph's
      min-content width and pushes the whole document wider than the screen. This
      is the one in the screenshot.
   2. Media at natural size — a 900px press photo.
   3. Agency markup: tables laid out for a desktop email template, and a top-level
      wrapper with a fixed pixel width.
   ============================================================ */

.news-article-body,
#newscontent {
    max-width: 100%;
    min-width: 0;
    /* break-word, not anywhere: it splits a long token ONLY when it would
       otherwise overflow, so ordinary prose is untouched. `anywhere` also feeds
       into min-content sizing and will break normal words mid-word — it turned
       "Vanguard" into "Vang / uard" the last time it was used this broadly. */
    overflow-wrap: break-word;
}

    /* Links get the eager version. A URL has no good break point, and breaking one
       mid-path beats a scrollbar across the entire page. Scoped to <a> so the
       mid-word breaking above stays out of the prose. */
    .news-article-body a,
    #newscontent a {
        overflow-wrap: anywhere;
    }

    .news-article-body img,
    .news-article-body video,
    .news-article-body iframe,
    .news-article-body embed,
    .news-article-body object,
    #newscontent img,
    #newscontent video,
    #newscontent iframe,
    #newscontent embed,
    #newscontent object {
        max-width: 100%;
        height: auto;
    }

    /* A wire table is built for a desktop template and usually carries a fixed
       width. display: block makes the table its own scroll container, so a wide one
       scrolls inside the article instead of dragging the page along with it. The
       rows and cells still lay out as a table via anonymous boxes. */
    .news-article-body table,
    #newscontent table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Direct children only. This catches the common wire pattern — one top-level
       wrapper div with an inline pixel width — without reaching inside the tables
       above, where a 100% cap would defeat the scroll container they just got.
       max-width beats an inline `width`, so no !important is needed. */
    .news-article-body > *,
    #newscontent > * {
        max-width: 100%;
    }

    .news-article-body pre,
    #newscontent pre {
        white-space: pre-wrap;
        overflow-x: auto;
    }