/* =========================================================
   RV Affiliate — Full Site Theme System & Toggle
   Supports: Light (Soft Pearl) & Dark (Obsidian Black)
   Token-driven architecture with permanent dark sections
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   GLOBAL TRANSITIONS
   Smooth transitions when switching themes
───────────────────────────────────────────────────────── */
body,
.site-header,
.site-footer,
.category-card,
.product-card,
.deal-card,
.review-card,
.ranking-item,
.potw-card,
.benefit-item,
.article-content-card,
.blog-article-card,
.article-card,
.featured-guide-card,
.related-product-card,
.article-faq-item,
.faq-item,
.content-card,
.specs-card,
.editorial-notice-card,
.filter-sidebar,
.search-input,
.sort-select,
.category-chip,
.filter-chip,
.key-takeaways-box {
    transition:
        background-color 260ms ease,
        color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

/* ─────────────────────────────────────────────────────────
   ADAPTIVE THEME SECTIONS & SURFACES
   Header, Footer, Heroes and Content Sections adapt dynamically
───────────────────────────────────────────────────────── */

/* 1. Site Header */
.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 1px solid var(--header-border);
}

.site-header.scrolled {
    background: var(--header-scrolled);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--header-border);
}

.site-header .logo-text {
    color: var(--header-text) !important;
}

.site-header .desktop-nav a {
    color: var(--text-secondary);
}

.site-header .desktop-nav a:hover,
.site-header .desktop-nav a.active {
    color: var(--header-text);
}

.site-header .text-link {
    color: var(--text-secondary);
}

.site-header .text-link:hover {
    color: var(--brand);
}

.site-header .mobile-menu-btn span {
    background-color: var(--header-text);
}

/* 2. Hero Sections (Homepage, Catalog, Deals, Product Detail, Blog, Article) */
.hero,
.products-hero,
.deals-hero,
.product-hero,
.blog-hero,
.article-header-section {
    background: var(--hero-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border);
}

.hero h1,
.products-hero h1,
.deals-hero h1,
.product-hero .product-hero-title,
.blog-hero h1,
.article-header-section h1 {
    color: var(--text-primary) !important;
}

.hero p,
.hero-subtitle,
.products-hero .hero-subtitle,
.deals-hero .hero-subtitle,
.product-hero-desc,
.blog-hero-subtitle,
.article-header-excerpt,
.hero-trust {
    color: var(--text-secondary) !important;
}

.catalog-count-badge {
    background: var(--surface-soft) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.hero .eyebrow,
.products-hero .eyebrow,
.deals-hero .eyebrow,
.blog-hero .eyebrow {
    color: var(--brand);
}

.breadcrumb-nav {
    background-color: var(--page-bg);
    border-bottom: 1px solid var(--border);
}

.breadcrumb-list a {
    color: var(--text-muted);
}

.breadcrumb-list a:hover,
.breadcrumb-current {
    color: var(--text-primary);
}

.breadcrumb-sep {
    color: var(--text-muted);
}

.blog-breadcrumb {
    color: var(--text-muted);
}

.blog-breadcrumb a {
    color: var(--text-muted);
}

.blog-breadcrumb a:hover {
    color: var(--text-primary);
}

/* Secondary button in hero sections */
.hero .btn-secondary,
.products-hero .btn-secondary,
.blog-hero .btn-secondary {
    background-color: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.hero .btn-secondary:hover,
.products-hero .btn-secondary:hover,
.blog-hero .btn-secondary:hover {
    background-color: var(--surface-soft);
    border-color: var(--brand);
    color: var(--brand);
}

/* Floating cards on homepage hero */
.floating-card {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.floating-card h3 {
    color: var(--text-primary);
}

.floating-card .card-meta {
    color: var(--text-muted);
}

/* 3. Adaptive Feature Sections (Why RV Affiliate, Product of the Week, Newsletter) */
.dark-feature {
    background-color: var(--page-bg) !important;
    color: var(--text-primary) !important;
}

.dark-feature h2,
.dark-feature h3 {
    color: var(--text-primary) !important;
}

.dark-feature p,
.dark-feature .section-subtitle {
    color: var(--text-secondary) !important;
}

.potw-section {
    background-color: var(--page-bg);
}

.potw-card {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

.potw-info h3,
.potw-benefits li {
    color: var(--text-primary) !important;
}

.potw-info p {
    color: var(--text-secondary) !important;
}

.potw-visual {
    background-color: var(--surface-soft) !important;
    border: 1px solid var(--border) !important;
}

.newsletter {
    background-color: var(--page-bg) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border) !important;
}

.newsletter h2 {
    color: var(--text-primary) !important;
}

.newsletter p,
.spam-notice {
    color: var(--text-secondary) !important;
}

.newsletter-form input {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

.newsletter-form input::placeholder {
    color: var(--text-muted) !important;
}

/* 4. Adaptive Site Footer */
.site-footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-muted) !important;
    border-top: 1px solid var(--footer-border) !important;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .logo-text {
    color: var(--footer-text) !important;
}

.site-footer p,
.site-footer .affiliate-disclosure,
.site-footer .copyright,
.site-footer a {
    color: var(--footer-muted) !important;
}

.site-footer a:hover {
    color: var(--brand) !important;
}

.social-links a {
    background: var(--surface-soft) !important;
    border: 1px solid var(--border) !important;
    color: var(--footer-muted) !important;
}

.social-links a:hover {
    background: rgba(113, 0, 20, 0.14) !important;
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

.footer-brand-wordmark {
    background: var(--footer-wordmark-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: var(--footer-wordmark-color) !important;
}

/* ─────────────────────────────────────────────────────────
   ADAPTIVE THEME SURFACES & COMPONENTS
   ───────────────────────────────────────────────────────── */

/* Body & Base */
body {
    background-color: var(--page-bg);
    color: var(--text-primary);
}

/* Section Headings */
.section-header h2 {
    color: var(--text-primary);
}

.section-subtitle {
    color: var(--text-secondary);
}

/* Trust Strip */
.trust-strip {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .trust-strip {
    background-color: var(--surface-soft);
}

.trust-strip p {
    color: var(--text-secondary);
}

.trust-logos {
    color: var(--text-primary);
}

/* Category Cards */
.categories {
    background-color: var(--page-bg);
}

.categories h2,
.categories .section-header h2 {
    color: var(--text-primary);
}

.categories .section-subtitle {
    color: var(--text-secondary);
}

.category-card {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

.category-card h3 {
    color: var(--text-primary);
}

.category-card p {
    color: var(--text-secondary);
}

.category-card:hover {
    border-color: var(--brand);
    box-shadow: 0 12px 32px var(--shadow);
}

/* Featured Products on Homepage */
.featured-products {
    background-color: var(--page-bg);
}

.featured-products h2,
.featured-products .section-header h2 {
    color: var(--text-primary);
}

.featured-products .section-subtitle {
    color: var(--text-secondary);
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.product-card h3,
.product-card .product-name {
    color: var(--text-primary);
}

.product-card p,
.product-card .product-desc {
    color: var(--text-secondary);
}

.product-meta {
    color: var(--text-secondary);
}

.product-image-placeholder,
.product-image-wrap {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

/* Reviews & Popular Ranking on Homepage */
.latest-reviews,
.popular-products {
    background-color: var(--page-bg);
}

.latest-reviews h2,
.popular-products h2 {
    color: var(--text-primary);
}

.review-card,
.ranking-item {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

.review-card p {
    color: var(--text-secondary);
}

.ranking-item .ranking-name {
    color: var(--text-primary);
}

.ranking-item .ranking-meta {
    color: var(--text-secondary);
}

/* Latest Deals Section on Homepage */
.latest-deals {
    background-color: var(--page-bg);
}

.deal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.deal-card h3,
.deal-card .deal-name {
    color: var(--text-primary);
}

.deal-card p,
.deal-card .deal-desc {
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────
   PRODUCTS CATALOG PAGE ADAPTIVE STYLES
   ───────────────────────────────────────────────────────── */
.catalog-section {
    background-color: var(--page-bg);
}

.filter-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.filter-label {
    color: var(--text-secondary);
}

.search-input {
    background: var(--surface-soft);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.search-input:focus {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(113, 0, 20, 0.12);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.filter-pill {
    color: var(--text-primary);
}

.filter-pill:hover {
    background: var(--surface-soft);
    border-color: var(--border);
}

.filter-pill.active {
    background: rgba(113, 0, 20, 0.12);
    border-color: var(--brand);
    color: var(--brand);
}

.filter-pill .pill-count {
    color: var(--text-secondary);
    background: var(--surface-soft);
}

.filter-pill.active .pill-count {
    background: rgba(113, 0, 20, 0.18);
    color: var(--brand);
}

.reset-btn {
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
}

.reset-btn:hover {
    color: var(--text-primary);
    border-color: var(--brand);
}

.result-count {
    color: var(--text-secondary);
}

.sort-select {
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
}

.sort-select option {
    background: var(--surface);
    color: var(--text-primary);
}

.catalog-main .product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.catalog-main .product-card:hover {
    border-color: var(--brand);
    box-shadow: 0 16px 40px var(--shadow);
}

.catalog-main .product-name {
    color: var(--text-primary);
}

.catalog-main .product-desc {
    color: var(--text-secondary);
}

.catalog-main .price-current {
    color: var(--text-primary);
}

.catalog-main .price-regular {
    color: var(--text-muted);
}

.catalog-main .product-actions .text-link {
    color: var(--text-secondary);
}

.catalog-main .product-actions .text-link:hover {
    color: var(--brand);
}

/* ─────────────────────────────────────────────────────────
   PRODUCT DETAIL PAGE ADAPTIVE STYLES
   ───────────────────────────────────────────────────────── */
.product-body-section {
    background-color: var(--page-bg);
}

.content-card,
.specs-card,
.editorial-notice-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.section-card-title,
.specs-title {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.content-prose {
    color: var(--text-secondary);
}

.content-prose p {
    color: var(--text-secondary);
}

.content-prose li {
    color: var(--text-secondary);
}

.editorial-notice-text {
    color: var(--text-secondary);
}

.editorial-notice-text strong {
    color: var(--text-primary);
}

.spec-item {
    border-bottom: 1px solid var(--border);
}

.spec-label {
    color: var(--text-muted);
}

.spec-value {
    color: var(--text-primary);
}

.spec-tag-pill {
    background: var(--surface-soft);
    color: var(--text-secondary);
}

.related-products-section {
    background-color: var(--page-bg);
    border-top: 1px solid var(--border);
}

.related-products-section .product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.related-products-section .product-title {
    color: var(--text-primary);
}

.related-products-section .product-desc {
    color: var(--text-secondary);
}

.related-products-section .price-current {
    color: var(--text-primary);
}

.related-products-section .price-regular {
    color: var(--text-muted);
}

.related-products-section .product-actions .text-link {
    color: var(--text-secondary);
}

.related-products-section .product-actions .text-link:hover {
    color: var(--brand);
}

/* ─────────────────────────────────────────────────────────
   BLOG LANDING & ARTICLE ADAPTIVE STYLES
   ───────────────────────────────────────────────────────── */
.featured-guide-section,
.blog-filter-section,
.latest-guides-section,
.article-body-wrapper {
    background-color: var(--page-bg);
}

.featured-guide-card,
.article-card,
.article-content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.featured-guide-card h2,
.featured-guide-card h2 a,
.article-card-title,
.article-card-title a,
.related-products-title,
.article-faq-title {
    color: var(--text-primary);
}

.featured-guide-card h2 a:hover,
.article-card-title a:hover {
    color: var(--brand);
}

.featured-guide-excerpt,
.article-card-excerpt {
    color: var(--text-secondary);
}

.article-meta-row,
.meta-divider {
    color: var(--text-muted);
}

.category-chip {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.category-chip:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.category-chip.active {
    background-color: var(--brand);
    color: #FFFFFF;
    border-color: var(--brand);
    box-shadow: 0 4px 14px rgba(113, 0, 20, 0.25);
}

.article-card-footer {
    border-top: 1px solid var(--border);
}

.article-body h2,
.article-body h3 {
    color: var(--text-primary);
}

.article-body p,
.article-body li {
    color: var(--text-secondary);
}

.article-body strong {
    color: var(--text-primary);
}

.key-takeaways-box {
    background-color: var(--surface-soft);
    border: 1px solid rgba(113, 0, 20, 0.22);
    border-left: 4px solid var(--brand);
}

.key-takeaways-box h3 {
    color: var(--brand);
}

.key-takeaways-box li {
    color: var(--text-primary);
}

.related-product-card {
    background-color: var(--surface-soft);
    border: 1px solid var(--border);
}

.related-product-name {
    color: var(--text-primary);
}

.related-product-desc {
    color: var(--text-secondary);
}

.faq-item,
.article-faq-item {
    background-color: var(--surface-soft);
    border: 1px solid var(--border);
}

.faq-question {
    color: var(--text-primary);
}

.faq-answer {
    color: var(--text-secondary);
}

.article-bottom-nav,
.related-articles-section {
    border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────
   THEME TOGGLE BUTTON STYLING & ACCESSIBILITY
   ───────────────────────────────────────────────────────── */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--header-text);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    outline: none;
}

.theme-toggle-btn:hover {
    background: rgba(113, 0, 20, 0.14);
    border-color: var(--brand);
    color: var(--brand);
    transform: scale(1.08);
}

.theme-toggle-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(113, 0, 20, 0.40);
    border-color: var(--brand);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* Icon visibility:
   Light mode: show Moon icon (action: switch to dark)
   Dark mode: show Sun icon (action: switch to light)
*/
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
    display: none;
    pointer-events: none;
}

/* When in Light mode (data-theme="light"): show Moon icon */
[data-theme="light"] .theme-toggle-btn .icon-moon {
    display: inline-block;
}

/* When in Dark mode (data-theme="dark"): show Sun icon */
[data-theme="dark"] .theme-toggle-btn .icon-sun {
    display: inline-block;
}

/* Default / fallback (if data-theme is unset): check prefers-color-scheme */
:root:not([data-theme]) .theme-toggle-btn .icon-moon {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle-btn .icon-moon {
        display: none;
    }
    :root:not([data-theme]) .theme-toggle-btn .icon-sun {
        display: inline-block;
    }
}