/**
 * NewsPedia - Additional Wikipedia CSS
 * Supplements the main style.css with extra styling details
 */

/* ========================================================
   VECTOR SKIN OVERRIDES & REFINEMENTS
   ======================================================== */

/* Sticky header shadow enhancement */
#mw-header-container {
    background: linear-gradient(to bottom, #fff 0%, #fafafa 100%);
}

/* Wikipedia-style primary navigation tabs under header */
.vector-page-toolbar {
    min-height: 38px;
}

.left-navigation,
.right-navigation {
    display: flex;
    align-items: stretch;
}

/* ========================================================
   MAIN PAGE — Fine-tuned color boxes
   ======================================================== */

/* Subtle animation on section hover */
.mp-box {
    transition: box-shadow .15s ease;
}

.mp-box:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Section heading with Wikipedia-blue accent */
.mp-h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Linux Libertine', Georgia, Times, serif;
    position: relative;
}

/* ITN image styling */
.itn-img .thumbinner {
    max-width: 164px;
}

/* DYK image */
.dyk-img .thumbinner {
    max-width: 121px;
}

/* OTD image */
#mp-otd-img .thumbinner {
    max-width: 181px;
}

/* ========================================================
   ARTICLE LEDE (opening paragraph with bold lead)
   ======================================================== */
.np-article-body > p:first-of-type {
    font-size: 1rem;
}

.np-article-body > p:first-of-type > b:first-child {
    font-size: 1.02rem;
}

/* Wikipedia-style Table of Contents */
.np-toc {
    background: var(--background-color-interactive-subtle);
    border: 1px solid var(--border-color-subtle);
    padding: 0.5em 1em;
    display: inline-block;
    min-width: 200px;
    max-width: 350px;
    float: right;
    margin: 0 0 1em 1.5em;
    font-size: var(--font-size-small);
    clear: right;
}

.np-toc-title {
    font-weight: bold;
    text-align: center;
    padding-bottom: 0.3em;
    margin-bottom: 0.3em;
    border-bottom: 1px solid var(--border-color-muted);
}

.np-toc ol {
    margin: 0;
    padding-left: 1.5em;
}

.np-toc li {
    margin: 0.1em 0;
}

.np-toc a {
    color: var(--color-link);
}

/* ========================================================
   INFOBOX STYLING
   ======================================================== */
.np-infobox {
    font-size: 0.875rem;
}

/* ========================================================
   CATEGORY PAGES
   ======================================================== */
.category-description {
    font-style: italic;
    color: var(--color-subtle);
    margin-bottom: 0.5em;
    padding: 0.5em;
    background: var(--background-color-interactive-subtle);
    border: 1px solid var(--border-color-muted);
    font-size: var(--font-size-small);
}

/* ========================================================
   SEARCH HIGHLIGHT
   ======================================================== */
.np-search-result-excerpt em {
    font-style: normal;
    background: #ffefd5;
    padding: 0 1px;
}

/* ========================================================
   BREADCRUMBS
   ======================================================== */
.np-breadcrumbs {
    font-size: var(--font-size-small);
    color: var(--color-subtle);
    margin-bottom: 0.5em;
    padding: 0.3em 0;
    border-bottom: 1px solid var(--border-color-muted);
}

.np-breadcrumbs a {
    color: var(--color-link);
}

.np-breadcrumbs span {
    margin: 0 0.3em;
    color: var(--color-placeholder);
}

/* ========================================================
   HORIZONTAL RULE (Wikipedia section divider)
   ======================================================== */
.np-article-body hr {
    border: none;
    border-top: 1px solid var(--border-color-subtle);
    margin: 1em 0;
}

/* ========================================================
   BLOCKQUOTE (Wikipedia-style)
   ======================================================== */
.np-article-body blockquote {
    border-left: 3px solid var(--border-color-subtle);
    margin: 0.5em 0 0.5em 1.5em;
    padding: 0.3em 0.7em;
    color: var(--color-subtle);
    font-style: italic;
}

/* ========================================================
   CODE & PRE
   ======================================================== */
.np-article-body code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background: var(--background-color-interactive-subtle);
    border: 1px solid var(--border-color-muted);
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

.np-article-body pre {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background: var(--background-color-interactive-subtle);
    border: 1px solid var(--border-color-subtle);
    padding: 0.7em;
    overflow-x: auto;
    line-height: 1.5;
}

/* ========================================================
   FIGURE / IMAGE CAPTIONS
   ======================================================== */
.np-article-body figure {
    margin: 0.5em 0 1em;
    display: table;
}

.np-article-body figure img {
    display: block;
}

.np-article-body figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.875rem;
    color: var(--color-subtle);
    line-height: 1.4;
    padding: 0.3em 0;
    text-align: center;
}

/* ========================================================
   RESPONSIVE TWEAKS
   ======================================================== */
@media (max-width: 640px) {
    .np-toc {
        float: none;
        margin: 0 0 1em;
        max-width: 100%;
        width: 100%;
    }

    .np-related-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .np-related-posts {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   DARK MODE OVERRIDES
   ======================================================== */
html.theme-dark .np-search-result-excerpt em {
    background: #443515;
    color: #f7d570;
}

html.theme-dark .category-description {
    background: var(--background-color-interactive-subtle);
    border-color: var(--border-color-muted);
    color: var(--color-subtle);
}

html.theme-dark .np-toc {
    background: var(--background-color-interactive-subtle);
    border-color: var(--border-color-subtle);
}

html.theme-dark .np-toc-title {
    border-bottom-color: var(--border-color-muted);
}

html.theme-dark .np-article-body blockquote {
    border-left-color: var(--border-color-subtle);
    color: var(--color-subtle);
}

html.theme-dark .np-article-body code {
    background: var(--background-color-interactive-subtle);
    border-color: var(--border-color-muted);
    color: #e69f80;
}

html.theme-dark .np-article-body pre {
    background: var(--background-color-interactive-subtle);
    border-color: var(--border-color-subtle);
    color: var(--color-base);
}

html.theme-dark .np-article-body hr {
    border-top-color: var(--border-color-subtle);
}