/* ==========================================================================
   MoltbookAgents — Light Theme (Dark-on-Light)
   Swap this in for base.css to switch the entire site to a light theme.
   Page-specific inline styles use rgba(255,255,255,...) for subtle borders
   and card fills — those stay as-is but still work because the variables
   below handle all the major surface/text/accent colours.
   ========================================================================== */

/* --- CSS Custom Properties (light overrides) --- */
:root {
    /* Brand colours — unchanged */
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --secondary: #0369a1;
    --accent: #ea580c;
    --success: #059669;
    --warning: #d97706;
    --error: #dc2626;

    /* Surface & text — FLIPPED for light mode */
    --dark: #ffffff;
    --gray-900: #f8fafc;
    --gray-800: #f1f5f9;
    --gray-700: #e2e8f0;
    --gray-500: #64748b;
    --gray-400: #475569;
    --gray-300: #334155;
    --gray-100: #1e293b;
    --white: #0f172a;
}

/* --- Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- Body --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--dark);
    color: var(--white);
    line-height: 1.6;
}

/* --- Skip to Content (a11y) --- */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: #ffffff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
}
.skip-to-content:focus { top: 0; }

/* --- Logo (gradient text) --- */
.logo {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

/* --- Back Link (used on legal/support pages) --- */
.back-link {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.875rem;
}
.back-link:hover { color: var(--white); }

/* --- Cookie Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--gray-900);
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 16px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
}
.cookie-banner.show { display: block; }
.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.cookie-text {
    flex: 1;
    min-width: 280px;
    font-size: 0.875rem;
    color: var(--gray-300);
}
.cookie-text a { color: var(--primary); text-decoration: none; }
.cookie-text a:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.cookie-buttons { display: flex; gap: 12px; }
.cookie-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.cookie-btn-accept { background: var(--primary); color: #ffffff; }
.cookie-btn-accept:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.cookie-btn-essential { background: transparent; color: var(--gray-300); border: 1px solid rgba(0,0,0,0.2); }
.cookie-btn-essential:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* --- Cookie Banner Responsive --- */
@media (max-width: 480px) {
    .cookie-content { flex-direction: column; text-align: center; }
    .cookie-buttons { justify-content: center; }
}

/* ==========================================================================
   LIGHT-MODE OVERRIDES
   The page-specific inline CSS uses rgba(255,255,255,...) for borders, card
   fills, and overlays. In light mode those become invisible (white-on-white).
   These overrides target the most common patterns site-wide.
   ========================================================================== */

/* --- Nav glass effect (all pages with fixed nav) --- */
nav {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* --- Cards, borders, and subtle fills --- */
/* rgba(255,255,255,0.03-0.1) backgrounds → visible on light */
.problem-card,
.faq-item,
.resource-card,
.pricing-card,
.compare-card,
.toc,
.search-box {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Highlighted/featured cards */
.pricing-card.featured,
.compare-card.highlight {
    border-color: var(--primary) !important;
    background: linear-gradient(180deg, rgba(79,70,229,0.06) 0%, rgba(0,0,0,0.02) 100%) !important;
}

/* Pricing guarantee box */
.pricing-guarantee {
    border-color: rgba(5,150,105,0.3) !important;
    background: rgba(5,150,105,0.04) !important;
}

/* --- Hero/section gradient backgrounds --- */
.hero,
.guide-header {
    background: linear-gradient(180deg, #ffffff 0%, var(--gray-900) 100%) !important;
}
.hero::before,
.guide-header::before {
    background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%) !important;
}

/* Section alternating backgrounds */
.problem,
.how-it-works,
.pricing,
.final-cta,
.social-proof {
    background: var(--gray-900) !important;
    border-color: rgba(0,0,0,0.05) !important;
}

/* --- Footer --- */
footer {
    border-top-color: rgba(0,0,0,0.08) !important;
}

/* --- Urgency banner — needs white text on the gradient --- */
.urgency-banner {
    color: #ffffff !important;
}

/* --- Elements with dark/coloured backgrounds that need white text --- */
/* (--white is now #0f172a in light mode, so anything with a dark/vivid
   background that uses color: var(--white) gets unreadable dark-on-dark) */
.hero-cta,
.nav-cta,
.pricing-btn-primary,
.compare-cta-primary,
.btn-primary,
.btn-checkout,
.step-number,
.sticky-bar-cta,
.email-form button,
.compare-card.highlight::before,
.pricing-card.featured::before,
.tier-badge,
.progress-dot.active,
.progress-dot.completed,
.download-btn,
.cta-btn,
.skip-banner a,
.mid-cta a {
    color: #ffffff !important;
}
/* success.html step-num circles */
.step-num {
    color: #ffffff !important;
}

/* Secondary/outline buttons */
.pricing-btn-secondary,
.compare-cta-secondary {
    background: rgba(0,0,0,0.06) !important;
    color: var(--white) !important;
}
.pricing-btn-secondary:hover,
.compare-cta-secondary:hover {
    background: rgba(0,0,0,0.1) !important;
}

/* --- Badge (hero) --- */
.badge {
    background: rgba(79,70,229,0.08) !important;
    border-color: rgba(79,70,229,0.2) !important;
}

/* --- Email capture form --- */
.email-capture {
    background: linear-gradient(180deg, #ffffff 0%, var(--gray-900) 100%) !important;
    border-top-color: rgba(0,0,0,0.05) !important;
}
.email-form input[type="email"] {
    border-color: rgba(0,0,0,0.15) !important;
    background: rgba(0,0,0,0.03) !important;
    color: var(--white) !important;
}

/* --- Solution visual / code blocks --- */
.solution-visual {
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(2,132,199,0.06)) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
.solution-visual pre,
.guide pre {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
.guide pre code {
    color: #e2e8f0 !important;
}
.guide code {
    background: rgba(0,0,0,0.06) !important;
    color: var(--secondary) !important;
}

/* --- FAQ accordion on support pages --- */
.faq-question:hover {
    background: rgba(0,0,0,0.02) !important;
}
.faq-answer code {
    background: rgba(0,0,0,0.06) !important;
}
.faq-answer pre {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
.faq-answer pre code {
    background: none !important;
    color: #e2e8f0 !important;
}

/* --- Alerts --- */
.alert-warning {
    background: rgba(217,119,6,0.06) !important;
    border-color: rgba(217,119,6,0.2) !important;
}
.alert-info {
    background: rgba(2,132,199,0.06) !important;
    border-color: rgba(2,132,199,0.2) !important;
}
.alert-success {
    background: rgba(5,150,105,0.06) !important;
    border-color: rgba(5,150,105,0.2) !important;
}

/* --- Contact box on FAQ pages --- */
.contact-box {
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(2,132,199,0.06)) !important;
    border-color: rgba(79,70,229,0.2) !important;
}

/* --- Callout boxes (DIY guide) --- */
.callout-warning { background: rgba(234,88,12,0.06) !important; border-color: rgba(234,88,12,0.2) !important; }
.callout-info { background: rgba(2,132,199,0.06) !important; border-color: rgba(2,132,199,0.2) !important; }
.callout-success { background: rgba(5,150,105,0.06) !important; border-color: rgba(5,150,105,0.2) !important; }

/* --- Skip banner (DIY guide) --- */
.skip-banner {
    background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(2,132,199,0.08)) !important;
    border-color: rgba(79,70,229,0.2) !important;
}

/* --- Setup page form elements --- */
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: var(--white) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary) !important;
}

/* --- Tier option cards (setup pages) --- */
.tier-option {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
.tier-option.selected {
    border-color: var(--primary) !important;
    background: rgba(79,70,229,0.06) !important;
}

/* --- Progress bar (setup pages) --- */
.progress-dot {
    background: rgba(0,0,0,0.1) !important;
}
.progress-dot.active {
    background: var(--primary) !important;
}
.progress-line {
    background: rgba(0,0,0,0.1) !important;
}

/* --- NAS guide specifics --- */
.metadata-box {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
table th {
    background: rgba(0,0,0,0.04) !important;
}
table td, table th {
    border-color: rgba(0,0,0,0.08) !important;
}

/* NAS guide diagrams — lavender text designed for dark bg needs darkening */
.diagram {
    background: #1e293b !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* NAS guide pre/code blocks — keep dark terminal look */
.article-body pre {
    background: #1e293b !important;
    border-color: rgba(0,0,0,0.15) !important;
}
.article-body pre code {
    color: #e2e8f0 !important;
}
.article-body code {
    background: rgba(79, 70, 229, 0.08) !important;
    color: var(--primary) !important;
}

/* NAS guide info/warning boxes */
.info-box {
    background: rgba(14, 165, 233, 0.06) !important;
    border-left-color: var(--secondary) !important;
}
.warning-box {
    background: rgba(234, 88, 12, 0.06) !important;
    border-left-color: var(--accent) !important;
}

/* Security badges — darken text colours for light bg readability */
.security-badge.badge-critical {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.security-badge.badge-high {
    background: rgba(234, 88, 12, 0.1) !important;
    color: #c2410c !important;
    border-color: rgba(234, 88, 12, 0.3) !important;
}
.security-badge.badge-medium {
    background: rgba(202, 138, 4, 0.1) !important;
    color: #a16207 !important;
    border-color: rgba(202, 138, 4, 0.3) !important;
}
.security-badge.badge-patched {
    background: rgba(5, 150, 105, 0.1) !important;
    color: #047857 !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
}
.security-badge.badge-mitigated {
    background: rgba(3, 105, 161, 0.1) !important;
    color: #0369a1 !important;
    border-color: rgba(3, 105, 161, 0.3) !important;
}

/* --- Affiliate page --- */
.commission-card,
.audience-card {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.08) !important;
}