/* ==========================================================================
   BNE Rich Article — shared "pillar-quality" post styling
   --------------------------------------------------------------------------
   Loaded ONLY on single Posts flagged `_bne_rich_article = 1` (enqueued by
   BNE_Rich_Article::enqueue_article_css). Every rule is namespaced under
   `.bne-article` (the wrapper the the_content filter emits) so it can never
   bleed onto other post/page content. Uses the theme's --bne-* brand tokens
   from style.css. Modeled on the .mld-content-* / .mld-faq / .mld-related
   look of the content-engine pages, re-skinned to the brand palette.

   @package flavor-flavor-flavor
   @since 1.6.4
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container + base typography
   -------------------------------------------------------------------------- */
.bne-article {
    max-width: 760px;
    margin: 0 auto;
    color: var(--bne-gray-800);
    font-family: var(--bne-font-primary);
    font-size: 1.0625rem;            /* 17px reading size */
    line-height: var(--bne-leading-relaxed);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Header offset safety net: NEW pages on the flavor-flavor-flavor theme must
   clear the position:fixed .bne-header or the top gets cut off. The single-post
   .entry-content wrapper usually handles page padding, but if this article is
   rendered as the first element under a fixed header we still clear it. Scoped
   to a body class so it only fires where the header is actually fixed. */
.single-post .bne-main > .bne-article:first-child,
.single-post .entry-content > .bne-article:first-child {
    padding-top: calc(var(--bne-header-height, 80px) + 2rem);
}

.bne-article p {
    margin: 0 0 1.25rem;
}

.bne-article a {
    color: var(--bne-primary-blue);
    text-decoration: none;
}

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

.bne-article strong,
.bne-article b {
    font-weight: var(--bne-font-semibold);
    color: var(--bne-gray-900);
}

/* --------------------------------------------------------------------------
   Heading cadence — generous space above h2 so sections breathe
   -------------------------------------------------------------------------- */
.bne-article h2 {
    font-size: var(--bne-font-size-3xl);
    font-weight: var(--bne-font-bold);
    line-height: var(--bne-leading-tight);
    letter-spacing: var(--bne-tracking-tight);
    color: var(--bne-gray-900);
    margin: 2.5rem 0 0.85rem;
    padding-top: 0.25rem;
}

.bne-article h2:first-child {
    margin-top: 0;
}

.bne-article h3 {
    font-size: var(--bne-font-size-xl);
    font-weight: var(--bne-font-semibold);
    line-height: var(--bne-leading-snug);
    color: var(--bne-gray-900);
    margin: 1.85rem 0 0.6rem;
}

.bne-article h4 {
    font-size: var(--bne-font-size-lg);
    font-weight: var(--bne-font-semibold);
    color: var(--bne-gray-800);
    margin: 1.5rem 0 0.5rem;
}

/* Subtle accent rule under the first-level section headings */
.bne-article h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 0.6rem;
    background: var(--bne-gradient-primary);
    border-radius: var(--bne-radius-full);
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
.bne-article ul,
.bne-article ol {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

.bne-article li {
    margin-bottom: 0.5rem;
}

.bne-article li::marker {
    color: var(--bne-primary-blue);
}

/* --------------------------------------------------------------------------
   Blockquote / pull-quote
   -------------------------------------------------------------------------- */
.bne-article blockquote {
    margin: 1.75rem 0;
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-left: 4px solid var(--bne-primary-blue);
    color: var(--bne-gray-700);
    font-size: var(--bne-font-size-lg);
    font-style: italic;
}

.bne-article blockquote p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero / lead image + figures (NEVER stripped by the filter)
   -------------------------------------------------------------------------- */
.bne-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bne-radius-lg);
    display: block;
}

.bne-article figure {
    margin: 1.75rem 0;
}

.bne-article figure img {
    width: 100%;
    box-shadow: var(--bne-shadow-md);
}

.bne-article figcaption {
    margin-top: 0.6rem;
    font-size: var(--bne-font-size-sm);
    color: var(--bne-medium-gray);
    text-align: center;
}

/* Hero image: a leading <figure class="bne-article__hero"> or the first image
   gets a slightly larger, edge-to-edge feel within the column. */
.bne-article .bne-article__hero,
.bne-article > figure:first-child {
    margin-top: 0;
    margin-bottom: 2rem;
}

.bne-article .bne-article__hero img,
.bne-article > figure:first-child img {
    box-shadow: var(--bne-shadow-lg);
}

/* --------------------------------------------------------------------------
   Callouts — author drops a <div class="bne-callout"> (or typed variants)
   -------------------------------------------------------------------------- */
.bne-article .bne-callout {
    margin: 1.75rem 0;
    padding: var(--bne-space-5) var(--bne-space-6);
    background: var(--bne-primary-blue-50);
    border: 1px solid var(--bne-primary-blue-100);
    border-left: 4px solid var(--bne-primary-blue);
    border-radius: var(--bne-radius-lg);
    color: var(--bne-gray-800);
}

.bne-article .bne-callout > :first-child {
    margin-top: 0;
}

.bne-article .bne-callout > :last-child {
    margin-bottom: 0;
}

.bne-article .bne-callout__title {
    display: block;
    font-weight: var(--bne-font-semibold);
    color: var(--bne-primary-blue-dark);
    margin-bottom: 0.4rem;
    letter-spacing: var(--bne-tracking-wide);
    text-transform: uppercase;
    font-size: var(--bne-font-size-xs);
}

/* Tonal variants */
.bne-article .bne-callout--tip {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.25);
    border-left-color: #10b981;
}
.bne-article .bne-callout--tip .bne-callout__title {
    color: #047857;
}

.bne-article .bne-callout--warning {
    background: rgba(245, 158, 11, 0.07);
    border-color: rgba(245, 158, 11, 0.3);
    border-left-color: #f59e0b;
}
.bne-article .bne-callout--warning .bne-callout__title {
    color: #b45309;
}

/* --------------------------------------------------------------------------
   Data figures — HTML/CSS bar charts (raw inline <svg> is forbidden in bodies)
   -------------------------------------------------------------------------- */
.bne-article .bne-chart {
    margin: 1.75rem 0;
    padding: var(--bne-space-5);
    background: var(--bne-gray-50);
    border: 1px solid var(--bne-border-gray);
    border-radius: var(--bne-radius-xl);
}

.bne-article .bne-chart__title {
    font-weight: var(--bne-font-semibold);
    color: var(--bne-gray-900);
    margin-bottom: var(--bne-space-4);
}

.bne-article .bne-chart__bar {
    display: flex;
    align-items: center;
    gap: var(--bne-space-3);
    margin-bottom: var(--bne-space-3);
}

.bne-article .bne-chart__bar-label {
    flex: 0 0 30%;
    font-size: var(--bne-font-size-sm);
    color: var(--bne-gray-700);
}

.bne-article .bne-chart__bar-track {
    flex: 1;
    background: var(--bne-gray-200);
    border-radius: var(--bne-radius-full);
    overflow: hidden;
    height: 14px;
}

.bne-article .bne-chart__bar-fill {
    display: block;
    height: 100%;
    background: var(--bne-gradient-primary);
    border-radius: var(--bne-radius-full);
}

.bne-article .bne-chart__bar-value {
    flex: 0 0 auto;
    font-size: var(--bne-font-size-sm);
    font-weight: var(--bne-font-semibold);
    color: var(--bne-gray-800);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.bne-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: var(--bne-font-size-sm);
}

.bne-article th,
.bne-article td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--bne-border-gray);
}

.bne-article thead th {
    background: var(--bne-gray-50);
    color: var(--bne-gray-900);
    font-weight: var(--bne-font-semibold);
}

/* --------------------------------------------------------------------------
   FAQ — <details>/<summary>, mirrors the FAQPage schema body
   -------------------------------------------------------------------------- */
.bne-article .bne-faq {
    margin: 2rem 0 0;
}

.bne-article .bne-faq h2 {
    margin-bottom: var(--bne-space-4);
}

.bne-article .bne-faq details {
    border: 1px solid var(--bne-border-gray);
    border-radius: var(--bne-radius-xl);
    padding: var(--bne-space-4) var(--bne-space-5);
    margin-bottom: var(--bne-space-3);
    background: var(--bne-white);
    transition: box-shadow var(--bne-transition-fast);
}

.bne-article .bne-faq details[open] {
    box-shadow: var(--bne-shadow-sm);
    border-color: var(--bne-primary-blue-200);
}

.bne-article .bne-faq summary {
    font-weight: var(--bne-font-semibold);
    color: var(--bne-gray-900);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 1.75rem;
}

.bne-article .bne-faq summary::-webkit-details-marker {
    display: none;
}

.bne-article .bne-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -0.1rem;
    font-size: 1.3em;
    font-weight: var(--bne-font-regular);
    color: var(--bne-primary-blue);
    line-height: 1;
    transition: transform var(--bne-transition-fast);
}

.bne-article .bne-faq details[open] summary::after {
    content: "\2212"; /* minus */
}

.bne-article .bne-faq details p {
    margin: 0.75rem 0 0;
    color: var(--bne-gray-700);
}

/* --------------------------------------------------------------------------
   CTA block
   -------------------------------------------------------------------------- */
.bne-article .bne-article-cta {
    display: block;
    margin: 2.25rem 0;
    padding: var(--bne-space-6);
    border-radius: var(--bne-radius-2xl);
    background: var(--bne-gradient-primary);
    color: var(--bne-white);
    text-decoration: none;
    box-shadow: var(--bne-shadow-primary);
    transition: transform var(--bne-transition-fast), box-shadow var(--bne-transition-fast);
}

.bne-article .bne-article-cta:hover {
    text-decoration: none;
    color: var(--bne-white);
    transform: translateY(-2px);
    box-shadow: var(--bne-shadow-primary-lg);
}

.bne-article .bne-article-cta b {
    display: block;
    font-size: var(--bne-font-size-xl);
    margin-bottom: 0.25rem;
}

.bne-article .bne-article-cta span {
    opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Related internal-link nav
   -------------------------------------------------------------------------- */
.bne-article .bne-related {
    margin-top: 2.5rem;
    padding-top: var(--bne-space-5);
    border-top: 1px solid var(--bne-border-gray);
}

.bne-article .bne-related h2 {
    font-size: var(--bne-font-size-xl);
    margin: 0 0 var(--bne-space-3);
}

.bne-article .bne-related h2::after {
    display: none; /* no accent rule on the related heading */
}

.bne-article .bne-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bne-article .bne-related li {
    margin-bottom: 0.5rem;
}

.bne-article .bne-related a {
    display: inline-block;
    color: var(--bne-primary-blue);
    font-size: var(--bne-font-size-base);
    font-weight: var(--bne-font-medium);
}

/* --------------------------------------------------------------------------
   Ad slots — CLS-safe spacing around the injected BNE_Ad_Slots markup
   -------------------------------------------------------------------------- */
.bne-article .bne-ad-slot {
    margin: 2rem 0;
    clear: both;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .bne-article {
        font-size: 1rem;
    }

    .bne-article h2 {
        font-size: var(--bne-font-size-2xl);
    }

    .bne-article .bne-chart__bar {
        flex-wrap: wrap;
    }

    .bne-article .bne-chart__bar-label {
        flex: 0 0 100%;
    }
}