/*
 * News (blog) post detail page: /news/{id}.
 *
 * Two jobs. First, page chrome (hero, title, meta, content paper) that used to live in an in-body
 * <style> block on BlogPostDetail.razor, where it missed the prerendered first paint and flashed
 * unstyled. Second, typography for the post BODY, which is stored as raw HTML and rendered through
 * a MarkupString, so nothing in MudBlazor's stylesheet reaches it: a bare <a> inherits the body
 * colour and reads as plain text, headings collapse, lists lose their markers.
 *
 * The link / blockquote / table treatment deliberately mirrors css/forum-post-content.css so
 * rendered rich content looks the same wherever it appears. That file stays scoped to the forum
 * lightbox wrapper; keep the two in step by hand rather than cross-importing.
 *
 * Everything is scoped under .news-post-page. The class names inside (.blog-title, .blog-image)
 * are shared with BlogPostCard and BlogListRow, which carry their own component-local styles, so
 * an unscoped rule here would leak onto the list page.
 */

.news-post-page {
    padding-bottom: 1rem;
}

.news-post-page .loading-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* Hero section that includes the background image. */
.news-post-page .blog-hero {
    width: 100%;
    min-height: 250px;
    border-radius: 4px;
    margin-bottom: 1rem;
    position: relative;
}

/* The hero overlay content container (title, metadata, admin buttons). */
.news-post-page .hero-content {
    color: #fff; /* White text on the dark overlay gradient. */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.news-post-page .admin-actions-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.news-post-page .blog-title {
    font-weight: 600;
    margin-bottom: 0;
}

.news-post-page .blog-author-date {
    font-style: italic;
}

.news-post-page .blog-content-container {
    padding: 1.5rem;
    border-radius: 4px;
}

.news-post-page .blog-tags {
    margin-top: 0.75rem;
}

/* ------------------------------------------------------------------------------------------
 * Post body. Author-written HTML rendered as a MarkupString.
 * ------------------------------------------------------------------------------------------ */

.news-post-page .blog-main-text {
    /* The body used to be a MudText Typo.body1; it is now a div (a <p> cannot legally hold the
       block-level HTML a post contains, and the parser hoists the whole body out of one), so it
       restates body1's typography from MudBlazor's own tokens. */
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    margin-top: 0.5rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* Posts written before the rich text editor lands are plain text, so their newlines are the only
   structure they have. BlogPostDetail adds this modifier when the body carries no markup; HTML
   bodies must NOT get it, or the newlines an author leaves between tags become blank lines. */
.news-post-page .blog-main-text.plain-text {
    white-space: pre-wrap;
}

.news-post-page .blog-main-text > :first-child {
    margin-top: 0;
}

.news-post-page .blog-main-text > :last-child {
    margin-bottom: 0;
}

.news-post-page .blog-main-text p {
    margin: 0 0 1em;
}

.news-post-page .blog-main-text h1,
.news-post-page .blog-main-text h2,
.news-post-page .blog-main-text h3,
.news-post-page .blog-main-text h4,
.news-post-page .blog-main-text h5,
.news-post-page .blog-main-text h6 {
    margin: 1.5em 0 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

.news-post-page .blog-main-text h1 { font-size: 1.9rem; }
.news-post-page .blog-main-text h2 { font-size: 1.6rem; }
.news-post-page .blog-main-text h3 { font-size: 1.35rem; }
.news-post-page .blog-main-text h4 { font-size: 1.15rem; }
.news-post-page .blog-main-text h5,
.news-post-page .blog-main-text h6 { font-size: 1rem; }

/* Link styling: use the Info palette so links read as blue, not as the theme primary. Matches
   forum-post-content.css. */
.news-post-page .blog-main-text a,
.news-post-page .blog-main-text a:visited {
    color: var(--mud-palette-info);
    text-decoration: underline;
}

.news-post-page .blog-main-text a:hover {
    color: var(--mud-palette-info);
    text-decoration: underline;
    opacity: 0.85;
}

.news-post-page .blog-main-text ul,
.news-post-page .blog-main-text ol {
    margin: 0 0 1em;
    padding-left: 1.75rem;
}

.news-post-page .blog-main-text ul { list-style: disc outside; }
.news-post-page .blog-main-text ol { list-style: decimal outside; }
.news-post-page .blog-main-text ul ul { list-style: circle outside; }

.news-post-page .blog-main-text li {
    margin-bottom: 0.35em;
}

.news-post-page .blog-main-text img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1em 0;
}

.news-post-page .blog-main-text hr {
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    margin: 1.5em 0;
}

.news-post-page .blog-main-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background-color: var(--mud-palette-background-grey);
    padding: 0.15em 0.35em;
    border-radius: 3px;
}

.news-post-page .blog-main-text pre {
    background-color: var(--mud-palette-background-grey);
    padding: 12px 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.news-post-page .blog-main-text pre code {
    background: none;
    padding: 0;
}

.news-post-page .blog-main-text blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding: 16px 20px;
    margin: 1em 0 1.5em;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.news-post-page .blog-main-text blockquote p:last-child {
    margin-bottom: 0;
}

.news-post-page .blog-main-text table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1em 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
    display: table;
}

.news-post-page .blog-main-text th {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid rgba(var(--mud-palette-primary-rgb), 0.2);
}

.news-post-page .blog-main-text td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.news-post-page .blog-main-text tr:last-child td {
    border-bottom: none;
}

/* Wide tables scroll inside the paper instead of pushing the page sideways. */
.news-post-page .blog-content-container {
    overflow-x: auto;
}

/* ---- Dark theme ---- */

html.elevate-theme-dark .news-post-page .blog-main-text blockquote {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

html.elevate-theme-dark .news-post-page .blog-main-text table {
    border-color: rgba(255, 255, 255, 0.12);
}

html.elevate-theme-dark .news-post-page .blog-main-text th {
    background-color: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

html.elevate-theme-dark .news-post-page .blog-main-text code,
html.elevate-theme-dark .news-post-page .blog-main-text pre {
    background-color: rgba(255, 255, 255, 0.06);
}