/**
 * brutonaarnetto.be - Premium Dark Black Theme
 * Deep dark backgrounds (#08070d / #110f1a / #161424), crisp contrast, and subtle purple accents
 */

:root {
    --bg-base: #08070d;
    --bg-surface: #100e1a;
    --bg-card: #141224;
    --bg-card-hover: #1c1830;
    --bg-input: #161426;
    --border-subtle: #241f38;
    --border-card: #2b2542;
    --border-focus: #6366f1;
    --text-pure: #ffffff;
    --text-primary: #f1f5f9;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    --accent-link: #38bdf8;
    --accent-link-hover: #7dd3fc;
    --accent-purple: #6366f1;
    --accent-purple-light: #818cf8;
    --accent-purple-glow: rgba(99, 102, 241, 0.25);

    /* Override framework CSS variables */
    --ind-theme-color-background-default: #08070d !important;
    --ind-theme-color-text-default: #f1f5f9 !important;
    --ind-theme-color-text-default-inverted: #08070d !important;
    --ind-theme-color-text-default-subtle: #cbd5e1 !important;
    --ind-theme-color-text-brand-primary: #38bdf8 !important;
    --ind-theme-color-text-brand-primary-strong: #7dd3fc !important;
    --ind-theme-color-background-brand-primary: #6366f1 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. Base & Global Layout
───────────────────────────────────────────────────────────────────────────── */
html, body {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pageContainer, .page-container, main, .view-container, #icp-container,
.article-page-wrap, .salary-page-wrap, .blog-wrap, .bn-seo-section {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.bn-hero-title, .art-h1, .sp-h1, .blog-hero h1,
.bn-reviews-head h2, .bnn-promo-banner-title,
.art-toc-title, .sp-toc-title, .sidebar-widget__title,
.bn-tools-heading h3, .bn-seo-wrap h2, .bn-seo-wrap h3, .bn-seo-wrap h4,
.tool-title, .tp-title {
    color: var(--text-pure) !important;
}

/* Paragraphs & Text - Crisp Slate Off-White (100% Zero-Purple, Effortlessly Readable) */
p, .art-lead, .blog-hero p, .bn-hero-sub, .sp-lead, .bn-seo-wrap {
    color: var(--text-primary) !important;
}

strong, b {
    color: var(--text-pure) !important;
}

/* Links - High Contrast Sky Blue */
a {
    color: var(--accent-link);
}
a:hover {
    color: var(--accent-link-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Header & Navigation (Reduced Shadow & Dark Theme)
───────────────────────────────────────────────────────────────────────────── */
.site-header {
    background-color: #000000 !important;
    border-bottom: 1px solid #1f1b2e !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.site-header__logo {
    color: #ffffff !important;
}

.nav-link, .nav-btn {
    color: #ffffff !important;
}
.nav-link:hover, .nav-btn:hover {
    background: #191428 !important;
    color: #ffffff !important;
}

.nav-dropdown-content {
    background-color: #0d0b16 !important;
    border: 1.5px solid #282142 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85) !important;
}
.nav-dropdown-content a {
    color: #f1f5f9 !important;
}
.nav-dropdown-content a:hover {
    background-color: #1c1633 !important;
    color: #ffffff !important;
}
.nav-dd-col {
    border-right-color: #231b38 !important;
}
.nav-dd-heading {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Cards, Containers & Sections
───────────────────────────────────────────────────────────────────────────── */
.bn-calc-split-card,
.bn-calc-form-side,
.bn-calc-result-side,
.blog-card,
.sp-card,
.sp-calc-card,
.sidebar-widget,
.art-author-box,
.art-toc,
.sp-toc,
.bn-review-card,
.product-tile,
.bn-bd-card,
.sp-bd-card,
.art-sidebar-card,
.tp-cluster,
.nl-card,
.bnn-ad-wrapper,
.bn-tool-card,
.sp-faq-item,
.tp-card {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.bn-calc-result-side {
    background: #110f1c !important;
    border-left-color: var(--border-card) !important;
}
@media (max-width: 980px) {
    .bn-calc-result-side {
        border-top-color: var(--border-card) !important;
    }
}

.blog-card:hover,
.product-tile:hover,
.bn-review-card:hover,
.side-comp-item:hover,
.bn-tool-card:hover {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 12px 36px var(--accent-purple-glow) !important;
    background: var(--bg-card-hover) !important;
}

.bn-tool-title {
    color: #ffffff !important;
}
.bn-tool-desc {
    color: var(--text-secondary) !important;
}

.blog-card__thumb-link {
    background: #090a10 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
}
.blog-card__title, .blog-card__title a {
    color: var(--text-pure) !important;
}
.blog-card__excerpt {
    color: var(--text-secondary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Form Controls & Inputs
───────────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
select,
textarea,
.bn-input-wrap input,
.bn-input-wrap select,
.sb-calc-wrap input,
.sb-calc-field select,
.nl-field input,
.nl-field select {
    background-color: var(--bg-input) !important;
    border: 1.5px solid var(--border-card) !important;
    color: var(--text-pure) !important;
}

input:focus, select:focus, textarea:focus,
.bn-input-wrap input:focus, .bn-input-wrap select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--accent-purple-glow) !important;
    outline: none !important;
}

.bn-input-sym, .sb-calc-wrap span {
    color: #38bdf8 !important;
}
.bn-field-group label, .sb-calc-field label, .nl-field label {
    color: var(--text-pure) !important;
}
.bn-check-row {
    color: var(--text-secondary) !important;
}

/* Tabs & Period Buttons */
.bn-tabs {
    background: #100e1b !important;
    border: 1px solid var(--border-subtle) !important;
}
.bn-tab {
    color: #cbd5e1 !important;
}
.bn-tab.active {
    background: var(--accent-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

.bn-period-btn {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-card) !important;
    color: var(--text-secondary) !important;
}
.bn-period-btn.active {
    background: var(--accent-purple) !important;
    border-color: var(--accent-purple) !important;
    color: #ffffff !important;
}

/* Copy Result Button */
.bn-copy-btn {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-card) !important;
    color: #ffffff !important;
}
.bn-copy-btn:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--accent-purple) !important;
}
.bn-copy-btn.copied {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Calculator Results & Dashboard
───────────────────────────────────────────────────────────────────────────── */
.bn-res-hero, .sp-hero-card {
    background: linear-gradient(135deg, #18142a 0%, #281a4b 100%) !important;
    border: 1px solid #3c2968 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.bn-res-amount, .sp-res-amount {
    color: #ffffff !important;
}
.bn-res-label, .sp-res-label {
    color: #cbd5e1 !important;
}
.bn-res-sub, .sp-res-sub {
    color: #94a3b8 !important;
}
.bn-res-stat-val, .sp-res-stat-val {
    color: #ffffff !important;
}
.bn-res-stat-label, .sp-res-stat-label {
    color: #cbd5e1 !important;
}

.bn-bd-card, .sp-bd-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-card) !important;
}
.bn-bd-card.highlight, .sp-bd-card.highlight {
    background: #19142c !important;
    border: 1.5px solid #4a3478 !important;
}
.bn-bd-val, .sp-bd-val {
    color: #ffffff !important;
}
.bn-bd-card-label, .sp-bd-card-label {
    color: var(--text-muted) !important;
}

/* Yearly breakdown card */
.bn-res-yearcard {
    background: #191522 !important;
    border: 1px solid #3b2c45 !important;
}
.bn-res-yearcard h4 {
    color: #f59e0b !important;
}
.bn-res-yearrow {
    color: #f1f5f9 !important;
    border-top-color: #2b233a !important;
}
.bn-res-yearrow b {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Blog Index & Filtering
───────────────────────────────────────────────────────────────────────────── */
.blog-filter-bar {
    border-bottom-color: var(--border-subtle) !important;
}
.blog-filter-pill {
    background: var(--bg-surface) !important;
    border: 1.5px solid var(--border-card) !important;
    color: var(--text-secondary) !important;
}
.blog-filter-pill:hover {
    border-color: var(--accent-purple) !important;
    color: #ffffff !important;
    background: var(--bg-card-hover) !important;
}
.blog-filter-pill.is-active {
    background: var(--accent-purple) !important;
    border-color: var(--accent-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}
.blog-filter-count {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.blog-active-filter-banner {
    background: #181329 !important;
    border: 1px solid #3c2a68 !important;
    color: #ffffff !important;
}

/* Badges */
.bn-hero-badge, .blog-badge, .art-cat-badge, .sp-badge, .blog-card__cat, .bn-tools-eyebrow {
    background: #1e1b38 !important;
    color: #ffffff !important;
    border: 1px solid #3c3258 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Tables & Data Grids
───────────────────────────────────────────────────────────────────────────── */
.bnn-table-wrap, .table-responsive, .sp-table-wrap {
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-card) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.bnn-table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #100e1a !important;
}
.bnn-table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #393254 !important;
}

table, .bnn-table, .sp-muni-table, .nl-compare-table, .coverage-table {
    background: var(--bg-card) !important;
}
table th, .bnn-table th, .sp-muni-table th, .nl-compare-table th, .coverage-table th {
    background: #1a162a !important;
    color: #ffffff !important;
    border-bottom: 2px solid #362e52 !important;
}
table td, .bnn-table td, .sp-muni-table td, .nl-compare-table td, .coverage-table td {
    border-bottom: 1px solid #231e36 !important;
    color: var(--text-primary) !important;
}
table tr:nth-child(even) td, 
.bnn-table tr:nth-child(even) td, 
.sp-muni-table tr:nth-child(even) td, 
.nl-compare-table tr:nth-child(even) td {
    background: #141220 !important;
}
table tr:hover td, 
.bnn-table tr:hover td, 
.sp-muni-table tr:hover td, 
.nl-compare-table tr:hover td {
    background: #201b33 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Articles, Single Blog & Guides
───────────────────────────────────────────────────────────────────────────── */
.art-body p {
    color: var(--text-primary) !important;
}
.bnn-callout {
    background: #151324 !important;
    border-left: 4px solid #6366f1 !important;
    color: #f1f5f9 !important;
}
.art-inbetween-figure {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
}
figcaption {
    color: var(--text-muted) !important;
}

.bnn-post__cta {
    background: linear-gradient(135deg, #1b1535 0%, #120e24 100%) !important;
    border: 1px solid #3c2968 !important;
    color: #ffffff !important;
}

.sb-calc-res {
    background: #19142b !important;
    border: 1px solid #3b2c6b !important;
}
.sb-calc-res-val {
    color: #38bdf8 !important;
}

.art-share {
    border-top-color: var(--border-card) !important;
}
.art-share-lbl {
    color: var(--text-secondary) !important;
}
.art-share-btn {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-card) !important;
    color: #cbd5e1 !important;
}
.art-share-btn:hover {
    background: var(--accent-purple) !important;
    color: #ffffff !important;
}

/* Author Box & Meta Pill in Dark Theme */
.art-author-box {
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.art-author-name {
    color: var(--text-pure) !important;
}
.art-author-role-title {
    color: #38bdf8 !important;
}
.art-author-bio {
    color: var(--text-secondary) !important;
}
.art-author-badge {
    background: rgba(5, 150, 105, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(5, 150, 105, 0.4) !important;
}
.art-meta-author-pill {
    background: #141124 !important;
    border: 1px solid var(--border-card) !important;
    color: #ffffff !important;
}
.art-meta-author-pill span {
    color: #ffffff !important;
}
.blog-card__author-info {
    color: #94a3b8 !important;
}
.blog-card__author-info span {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Other Components: Reviews, Ads, Promos, FAQ
───────────────────────────────────────────────────────────────────────────── */
.bn-reviews-section {
    background: var(--bg-base) !important;
}
.bn-review-name {
    color: #ffffff !important;
}
.bn-review-text {
    color: #f1f5f9 !important;
}
.bn-review-avatar {
    background: var(--accent-purple) !important;
}

.product-tile {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    color: #ffffff !important;
}

.side-comp-item {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    color: #ffffff !important;
}

.bnn-promo-sidebar {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
}
.bnn-promo-sidebar .bnn-promo-title {
    color: #ffffff !important;
}
.bnn-promo-sidebar .bnn-promo-sub {
    color: var(--text-secondary) !important;
}
.bnn-promo-sidebar .bnn-promo-btn {
    background: var(--bg-input) !important;
    border-color: var(--border-card) !important;
    color: #ffffff !important;
}
.bnn-promo-sidebar .bnn-promo-btn:hover {
    background: var(--accent-purple) !important;
    color: #ffffff !important;
}

/* Breadcrumbs */
.art-breadcrumb, .blog-breadcrumb, .sp-breadcrumb {
    color: var(--text-muted) !important;
}
.art-breadcrumb a, .blog-breadcrumb a, .sp-breadcrumb a {
    color: #38bdf8 !important;
}
.art-breadcrumb span.sep, .blog-breadcrumb span.sep, .sp-breadcrumb span.sep {
    color: #3b3554 !important;
}

/* FAQ Items */
.sp-faq-item, .faq-item {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
}
.sp-faq-question, .faq-question {
    color: var(--text-pure) !important;
}
.sp-faq-answer, .faq-answer {
    color: var(--text-secondary) !important;
}

/* Footer Consistency */
.site-footer {
    background-color: #000000 !important;
    border-top: 1px solid #1f1b2e !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Universal Mobile Anti-Overflow & Full-Width Responsive Engine
   Guarantees zero horizontal scroll, responsive tables, and full viewport fit
───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    position: relative !important;
}

p, span, a, h1, h2, h3, h4, h5, h6, li, td, th {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

img, svg, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
}

pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

/* Universal Table Enclosure */
.bnn-table-wrap, .table-responsive, .sp-table-wrap, .art-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

table, .bnn-table, .sp-muni-table, .nl-compare-table, .coverage-table {
    width: 100% !important;
    min-width: 460px;
    max-width: none !important;
    border-collapse: collapse !important;
}

/* Fallback: any raw table in article or content body automatically becomes responsive */
.art-body table, .entry-content table, .sp-main table, .tp-content table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Desktop to Tablet collapsing */
@media (max-width: 980px) {
    .article-layout-grid, .sp-layout-grid, .tool-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 32px !important;
    }
    .art-main, .sp-main, .art-sidebar, .sp-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .art-sidebar, .sp-sidebar {
        position: static !important;
        top: auto !important;
    }
}

/* Mobile Screens (< 768px) - Universal Almost Full-Wide Boxes Engine */
@media (max-width: 768px) {
    #pageContainer, .page-container, .view-container, main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .site-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }

    .site-header .header-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    /* ── Outer Page Gutters: Clean 10px so boxes stretch ~95% across the screen ── */
    .article-page-wrap,
    .salary-page-wrap,
    .blog-wrap,
    .tool-page-wrap, 
    .bn-calc-container,
    .main-container,
    .legal-container,
    .not-found-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* ── Nested Wrappers: Zero extra side padding to avoid compounding margin ── */
    .section-inner,
    .hero-inner,
    .bn-calc-section,
    .bnn-latest-posts,
    .bnn-latest-posts__wrap,
    .bn-tools-grid,
    .icp-header-with-product-tiles,
    .icp-header-with-product-tiles__tiles,
    .bn-seo-section,
    .bn-seo-wrap,
    .wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── ALL BOXES & CARDS: Almost Full-Wide on Mobile (100% of container) ── */
    .bn-calc-split-card,
    .calc-card,
    .tp-calc-card,
    .sp-result-card,
    .nl-card,
    .product-tile,
    .bn-tool-card,
    .bnn-latest-posts__card,
    .blog-card,
    .result-card,
    .coverage-table-wrap,
    .bnn-table-wrap,
    .sp-table-wrap,
    .table-responsive,
    .art-toc,
    .sp-toc,
    .tp-scenario,
    .art-author-box,
    .art-sidebar-card,
    .tp-cluster,
    .bnn-promo-toolbox,
    .bnn-promo-banner,
    .bnn-post__cta,
    .faq-list details,
    .sp-bd-item,
    .tp-bd,
    .nl-bd-item,
    .not-found-links,
    .meter-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
    }

    /* ── Box Internal Padding Optimized for Mobile: 14px-18px ── */
    .bn-calc-form-side {
        padding: 16px 12px !important;
        gap: 16px !important;
    }
    .bn-calc-result-side {
        padding: 18px 14px !important;
    }
    .calc-card {
        padding: 18px 14px !important;
    }
    .tp-calc-card {
        padding: 18px 14px !important;
    }
    .sp-result-card {
        padding: 18px 14px !important;
    }
    .nl-card {
        padding: 18px 14px !important;
    }
    .bnn-latest-posts__body {
        padding: 14px 14px 14px !important;
    }
    .bnn-latest-posts__thumb-link {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
    }
    .art-toc, .sp-toc {
        padding: 16px 14px !important;
    }
    .art-author-box {
        padding: 18px 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 14px !important;
    }
    .art-author-header-line {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .art-sidebar-card {
        padding: 18px 14px !important;
    }
    .tp-scenario {
        padding: 14px 12px !important;
    }
    .tp-cluster {
        padding: 16px 14px !important;
    }
    .not-found-links {
        padding: 18px 14px !important;
    }
    .legal-container {
        padding: 20px 14px !important;
        margin: 16px auto !important;
    }
    .bnn-post__cta {
        padding: 20px 14px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
    }
    .bnn-post__cta-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .bnn-promo-banner {
        padding: 18px 14px !important;
    }
    .bnn-promo-banner-actions {
        width: 100% !important;
    }
    .bnn-promo-banner-actions a {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Single-Column Full-Width Flow ── */
    .article-layout-grid,
    .sp-layout-grid,
    .tool-layout-grid,
    .hero-inner,
    .results-grid,
    .steps-list,
    .bnn-latest-posts__grid,
    .icp-header-with-product-tiles__tiles,
    .bn-tools-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
    }

    .sp-breakdown,
    .tp-breakdown,
    .nl-breakdown-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .tp-fields,
    .nl-fields,
    .bn-form-row-2 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .art-h1, .sp-h1 {
        font-size: clamp(1.5rem, 5.8vw, 1.95rem) !important;
        line-height: 1.25 !important;
    }
    .art-lead, .sp-intro {
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
    }
    .art-featured-hero, .sp-featured-wrap {
        aspect-ratio: 16 / 9 !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }
    .art-meta-top {
        gap: 8px !important;
    }
    .sb-comp-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .art-share {
        gap: 8px !important;
        justify-content: center !important;
    }
    .art-share-btn {
        flex: 1 1 calc(50% - 8px) !important;
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Homepage & Sitewide Latest Posts Component - Sleek Compact Dark Cards
───────────────────────────────────────────────────────────────────────────── */
.bnn-latest-posts {
    width: 100% !important;
    box-sizing: border-box !important;
}

.bnn-latest-posts__card {
    background-color: #141224 !important;
    border: 1.5px solid #282142 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.bnn-latest-posts__card:hover {
    transform: translateY(-3px) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

.bnn-latest-posts__thumb-link {
    background-color: #090a10 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}

.bnn-latest-posts__thumb {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.bnn-latest-posts__cat-badge {
    background: rgba(10, 8, 20, 0.88) !important;
    border: 1px solid #332a54 !important;
    color: #ffffff !important;
    font-size: 0.70rem !important;
}

.bnn-latest-posts__body {
    background-color: #141224 !important;
    padding: 16px 18px 16px !important;
}

.bnn-latest-posts__title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
}

.bnn-latest-posts__title,
.bnn-latest-posts__title a {
    color: #ffffff !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.bnn-latest-posts__title a:hover {
    color: #38bdf8 !important;
}

/* User requirement: Crisp slate white for effortless readability, compact 2-line clamp */
.bnn-latest-posts__excerpt {
    color: #e2e8f0 !important;
    font-size: 0.88rem !important;
    line-height: 1.52 !important;
    font-weight: 400 !important;
    margin: 0 0 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.bnn-latest-posts__meta-row,
.bnn-latest-posts__meta-row span {
    color: #94a3b8 !important;
    font-size: 0.76rem !important;
}

.bnn-latest-posts__footer {
    border-top: 1px solid #231f38 !important;
    padding-top: 12px !important;
}

.bnn-latest-posts__author-pill,
.bnn-latest-posts__author-name {
    color: #ffffff !important;
    font-size: 0.80rem !important;
}

.bnn-latest-posts__read-btn {
    background: #1e1b38 !important;
    border: 1px solid #383158 !important;
    color: #ffffff !important;
    font-size: 0.80rem !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
}

.bnn-latest-posts__read-btn:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. Universal Dark Theme Coverage: All Tool Pages, Calculators & Comparators
───────────────────────────────────────────────────────────────────────────── */

/* ── 12.1 Comparison & Dedicated Tool Pages (Autoverzekering, Energie, Hypotheek, etc.) ── */
.hero, .steps, .faq, section.faq, .wrap, .view-container {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

.calc-card, .meter-panel, .result-card, .coverage-table-wrap, 
.keyword-card, .feature-card, .provider-card, .plan-card {
    background-color: #141222 !important;
    border-color: #2b2542 !important;
    color: #f1f5f9 !important;
}

.calc-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

.results, .coverage, .keyword-band, .keywords, .keyword-block, .keyword-section,
.explainer-section, .steps-section, .provider-section {
    background-color: #100e1a !important;
    border-top-color: #231e36 !important;
    border-bottom-color: #231e36 !important;
}

.results h2, .coverage h2, .steps h2, .faq h2, .hero-copy h1,
.sec-head h2, .sec-title, .result-card h3, .steps-list h3 {
    color: #ffffff !important;
}

.lead, .section-lead, .trust-list li, .steps-list p, .faq-list p,
.microcopy, .result-meta {
    color: #f1f5f9 !important;
}

.trust-list li {
    color: #f1f5f9 !important;
}

.field label, .input-group label {
    color: #ffffff !important;
}

.field .unit, .field-hint {
    color: #94a3b8 !important;
}

.field input[type="text"], .field input[type="number"], .field select,
.input-wrap input, .input-wrap select {
    background-color: #161426 !important;
    border-color: #2b2542 !important;
    color: #ffffff !important;
}

.field input[type="text"]:focus, .field input[type="number"]:focus, .field select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25) !important;
}

.meter-panel {
    background-color: #151224 !important;
    border-color: #2b2344 !important;
}

.meter-total {
    color: #38bdf8 !important;
}

.meter-sub {
    background-color: #100e1a !important;
    border-color: #282142 !important;
}

.meter-sub.wa .meter-sub-value,
.meter-sub.omnium .meter-sub-value {
    color: #ffffff !important;
}

.period-toggle {
    background-color: #161426 !important;
    border-color: #2b2542 !important;
}

.period-toggle button {
    color: #cbd5e1 !important;
}

.period-toggle button.active {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

.result-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.result-card.best {
    border-color: #7c3aed !important;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.25) !important;
}

.result-price {
    color: #ffffff !important;
}

.result-rates {
    background-color: #100e1a !important;
    border-color: #231e36 !important;
}

.result-rate-row span:last-child {
    color: #ffffff !important;
}

.trust-bar {
    background-color: #18142a !important;
    border-top: 1px solid #281d45 !important;
    border-bottom: 1px solid #281d45 !important;
}

.coverage-table thead th {
    background-color: #1d192e !important;
    color: #ffffff !important;
}

.coverage-table td:first-child {
    color: #ffffff !important;
}

.faq-list details {
    background-color: #141222 !important;
    border-color: #2b2542 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.faq-list summary {
    color: #ffffff !important;
}

.brand-chip, .keyword-chip, .tag-chip {
    background-color: #141222 !important;
    border-color: #2b2542 !important;
    color: #f1f5f9 !important;
}

.brand-chip a, .keyword-chip a {
    color: #38bdf8 !important;
}

/* ── 12.2 Keyword Tool Pages (pages/tool.php) ── */
.tp-scenario {
    background: #141222 !important;
    border-color: #2b2542 !important;
}

.tp-scenario-text {
    color: #f1f5f9 !important;
}

.tp-scenario-text strong {
    color: #ffffff !important;
}

.tp-calc-card {
    background: #141222 !important;
    border-color: #2b2542 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

.tp-calc-intro {
    background: #151324 !important;
    color: #f1f5f9 !important;
    border-left-color: #6366f1 !important;
}

.tp-field label {
    color: #ffffff !important;
}

.tp-field label span {
    color: #94a3b8 !important;
}

.tp-field input, .tp-field select {
    background: #161426 !important;
    border-color: #2b2542 !important;
    color: #ffffff !important;
}

.tp-field input:focus, .tp-field select:focus {
    border-color: #7c3aed !important;
}

.tp-bd {
    background: #100e1a !important;
    border-color: #241f38 !important;
}

.tp-bd.tp-bd--hi {
    background: #19142e !important;
    border-color: #3b2b64 !important;
}

.tp-bd-lbl {
    color: #94a3b8 !important;
}

.tp-bd-val {
    color: #ffffff !important;
}

.tp-bd-note {
    color: #94a3b8 !important;
}

.tp-content {
    color: #f1f5f9 !important;
}

.tp-content h2, .tp-content h3, .tp-content strong {
    color: #ffffff !important;
}

.tp-content table {
    background: #141222 !important;
    border-color: #2b2542 !important;
}

.tp-content th {
    background: #1d192e !important;
    color: #ffffff !important;
    border-bottom-color: #383056 !important;
}

.tp-content td {
    color: #f1f5f9 !important;
    border-bottom-color: #231e36 !important;
}

.tp-cluster {
    background: #141222 !important;
    border-color: #2b2542 !important;
}

.tp-cluster-head {
    color: #ffffff !important;
}

.tp-chip {
    background: #19142c !important;
    border-color: #2b2344 !important;
    color: #f1f5f9 !important;
}

.tp-chip:hover, .tp-chip--active {
    background: #7c3aed !important;
    color: #ffffff !important;
}

.art-sidebar-card {
    background: #141222 !important;
    border: 1.5px solid #2b2542 !important;
}

.art-sidebar-card h3 {
    color: #ffffff !important;
}

.sp-toc {
    background: #141222 !important;
    border: 1.5px solid #2b2542 !important;
}

.sp-toc-title {
    color: #ffffff !important;
}

.sp-toc-list {
    color: #e2e8f0 !important;
}

.sp-bd-item {
    background: #100e1a !important;
    border: 1px solid #241f38 !important;
}

.sp-bd-item.highlight {
    background: #19142e !important;
    border: 1.5px solid #3b2b64 !important;
}

.sp-bd-item .sp-bd-value {
    color: #ffffff !important;
}

.sp-bd-item.highlight .sp-bd-value {
    color: #38bdf8 !important;
}

.sp-bd-label {
    color: #94a3b8 !important;
}

/* ── 12.3 Netherlands Page (pages/netherlands.php) ── */
.nl-card {
    background: #141222 !important;
    border-color: #2b2542 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

.nl-field label {
    color: #ffffff !important;
}

.nl-field input, .nl-field select {
    background: #161426 !important;
    border-color: #2b2542 !important;
    color: #ffffff !important;
}

.nl-bd-item {
    background: #100e1a !important;
    border-color: #241f38 !important;
}

.nl-bd-label {
    color: #94a3b8 !important;
}

.nl-bd-value {
    color: #ffffff !important;
}

.nl-compare-table {
    background: #141222 !important;
    border-color: #2b2542 !important;
}

.nl-compare-table th {
    background: #1d192e !important;
    color: #ffffff !important;
    border-bottom-color: #383056 !important;
}

.nl-compare-table td {
    color: #f1f5f9 !important;
    border-bottom-color: #231e36 !important;
}

.nl-compare-table .be-col {
    background: #151224 !important;
}

.nl-compare-table .nl-col {
    background: #181320 !important;
}

.nl-country-btn.be {
    background: #19142b !important;
    color: #ffffff !important;
    border-color: #3c2a68 !important;
}

.nl-country-btn.nl {
    border-color: #e96a24 !important;
    color: #f97316 !important;
    background: #20140e !important;
}

/* ── 12.4 Legal Pages & 404 ── */
.legal-container {
    background: #141222 !important;
    border: 1.5px solid #2b2542 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

.legal-container h1, .legal-container h2, .legal-container h3 {
    color: #ffffff !important;
}

.legal-container p, .legal-container li {
    color: #f1f5f9 !important;
}

.not-found-title {
    color: #ffffff !important;
}

.not-found-desc {
    color: #f1f5f9 !important;
}

.not-found-links {
    background: #141222 !important;
    border: 1.5px solid #2b2542 !important;
}

.not-found-links h3 {
    color: #ffffff !important;
}

.not-found-links a {
    color: #38bdf8 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. Blog Archive Card Refinements - Sleek Compact Dark Layout
───────────────────────────────────────────────────────────────────────────── */
.blog-card {
    background: #141224 !important;
    border: 1.5px solid #282142 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.blog-card:hover {
    transform: translateY(-3px) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    background: #18152c !important;
}
.blog-card__thumb-link {
    background: #090a10 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}
.blog-card__thumb {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.blog-card__body {
    background: #141224 !important;
    padding: 16px 18px 16px !important;
}
.blog-card__meta {
    color: #94a3b8 !important;
    font-size: 0.76rem !important;
    margin-bottom: 8px !important;
}
.blog-card__title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
}
.blog-card__title, .blog-card__title a {
    color: #ffffff !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.blog-card__title a:hover {
    color: #38bdf8 !important;
}
.blog-card__excerpt {
    color: #e2e8f0 !important;
    font-size: 0.88rem !important;
    line-height: 1.52 !important;
    font-weight: 400 !important;
    margin: 0 0 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.blog-card__cat {
    background: #1e1b38 !important;
    border: 1px solid #3c3258 !important;
    color: #ffffff !important;
    font-size: 0.70rem !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
}
.blog-card__footer {
    border-top: 1px solid #231f38 !important;
    padding-top: 12px !important;
}
.blog-card__author-info, .blog-card__author-info span {
    color: #ffffff !important;
    font-size: 0.80rem !important;
}
.blog-card__read-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #1e1b38 !important;
    border: 1px solid #383158 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.80rem !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
}
.blog-card__read-link:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

@media (max-width: 768px) {
    .blog-card__thumb-link {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
    }
    .blog-card__body {
        padding: 14px 14px 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. Automatic Tag Box & Cluttered Keyword Chip Suppression
   Ensures zero spammy/repetitive tag boxes appear across tool pages, articles, and comparisons
───────────────────────────────────────────────────────────────────────────── */
.tp-cluster,
.tp-cluster--tools,
.tp-cluster--salary,
.tp-cluster-head,
.tp-chips,
.tp-chip,
.sp-cluster,
.sp-cluster-title,
.sp-cluster-links,
.keyword-chip-grid,
.brand-chip-row,
.brand-chip,
.keyword-chip,
.keyword-band,
.keyword-cloud,
.keyword-tags,
.keyword-section .keyword-tags,
.tag-cloud,
.tags-cloud,
.article-tags,
.entry-tags,
.post-tags,
.tags-links,
.wp-block-tag-cloud {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Swiss Minimal Promo Banner & Sidebar Toolbox Overrides (No Over-Shadows)
───────────────────────────────────────────────────────────────────────────── */
.bnn-promo-toolbox,
.bnn-promo-banner {
    background: #0e1017 !important;
    border: 1px solid #1e2436 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.bnn-promo-badge {
    background: rgba(56, 189, 248, 0.1) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: none !important;
}

.bnn-promo-banner-title {
    color: #ffffff !important;
}

.bnn-promo-banner-desc {
    color: #94a3b8 !important;
}

.bnn-btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
.bnn-btn-gold:hover {
    background: #1d4ed8 !important;
    border-color: #60a5fa !important;
    box-shadow: none !important;
}

.bnn-btn-purple {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #141824 !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e2436 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
.bnn-btn-purple:hover {
    background: #1e2436 !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
    box-shadow: none !important;
}

.bnn-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #090a10 !important;
    color: #cbd5e1 !important;
    border: 1px solid #1e2436 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
.bnn-btn-outline:hover {
    background: #141824 !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: none !important;
}

.bnn-promo-sidebar {
    background: #0e1017 !important;
    border: 1px solid #1e2436 !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}

.bnn-promo-sidebar .bnn-promo-title {
    color: #ffffff !important;
}

.bnn-promo-sidebar .bnn-promo-sub {
    color: #94a3b8 !important;
}

.bnn-promo-sidebar .bnn-promo-btn {
    background: #141824 !important;
    border: 1px solid #1e2436 !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.bnn-promo-sidebar .bnn-promo-btn:hover {
    background: #1e2436 !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: none !important;
}