/*
 * cs-light.css — ComplianceStack 2026 Light Theme
 * Applied globally to override dark theme (#080C15 / #0B0F1A patterns)
 * Brand: Deep blue #1246D4 + Teal #06B6D4 on white canvas
 */

/* ============================================
   RESET: Override dark CSS variables globally
   ============================================ */
:root {
    /* Dark bg → White/Light */
    --bg: #FFFFFF !important;
    --bg-card: #F0F6FF !important;
    --bg-card-hover: #E1ECFF !important;
    --bg-elevated: #F0F6FF !important;

    /* Trust green (dark → #2E7D32 deep trust green) */
    --green: #2E7D32 !important;
    --green-bright: #43A047 !important;
    --green-dim: rgba(46, 125, 50, 0.09) !important;
    --green-glow: rgba(46, 125, 50, 0.18) !important;

    /* Red stays, just slightly brighter */
    --red: #DC2626 !important;
    --red-dim: rgba(220, 38, 38, 0.07) !important;

    /* Blue accent — primary brand color */
    --blue: #1246D4 !important;
    --blue-dark: #0D35B0 !important;
    --blue-light: #E8F0FF !important;
    --blue-dim: rgba(18, 70, 212, 0.09) !important;
    --teal: #06B6D4 !important;

    /* Yellow / Orange stay */
    --yellow: #D97706 !important;
    --yellow-dim: rgba(217, 119, 6, 0.09) !important;
    --orange: #EA580C !important;
    --orange-dim: rgba(234, 88, 12, 0.09) !important;

    /* Text: --white = dark text (was used for headings on dark bg) */
    --white: #111827 !important;

    /* Grays: flip so dark grays become light grays for borders/surfaces */
    --gray-50:  #F8FAFC !important;
    --gray-100: #F1F5F9 !important;
    --gray-200: #E2E8F0 !important;
    --gray-300: #374151 !important;   /* Body text */
    --gray-400: #4B5563 !important;   /* Secondary text */
    --gray-500: #6B7280 !important;   /* Muted text */
    --gray-600: #9CA3AF !important;
    --gray-700: #D1D5DB !important;   /* Borders */
    --gray-800: #E5E7EB !important;   /* Dividers, tracks */
    --gray-900: #F3F4F6 !important;

    /* Border variable used in resources pages */
    --border: rgba(0, 0, 0, 0.08) !important;

    /* Shadows for light bg */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06) !important;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.07) !important;
    --shadow-lg: 0 10px 24px rgba(0,0,0,0.08) !important;
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.09) !important;
}

/* ============================================
   BODY & BASE
   ============================================ */
html, body {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #374151 !important;
}

/* ============================================
   NAVIGATION
   ============================================ */
nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.05) !important;
}

.nav-logo {
    color: #111827 !important;
}

/* Dark-theme nav link class */
.nav-link-dark {
    color: #4B5563 !important;
}
.nav-link-dark:hover {
    color: #111827 !important;
}

/* nav-link class (used in some pages) */
.nav-link {
    color: #4B5563 !important;
}
.nav-link:hover {
    color: #111827 !important;
}

/* Nav links inside .nav-links div */
.nav-links a {
    color: #4B5563 !important;
}
.nav-links a:hover {
    color: #111827 !important;
}
.nav-links a.active {
    color: #1246D4 !important;
}

/* Fix inline-style nav links with rgba(255,255,255,0.7) */
nav a[style*="rgba(255,255,255"] {
    color: #4B5563 !important;
}

/* Nav CTA: green → electric blue */
.nav-cta {
    background: #1246D4 !important;
    color: #FFFFFF !important;
}
.nav-cta:hover {
    background: #0D35B0 !important;
    opacity: 1 !important;
}

/* Drop-down nav trigger */
.nav-link-drop {
    color: #4B5563 !important;
}
.nav-link-drop:hover {
    color: #111827 !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */

/* Dropdown container — needs relative positioning for absolute child */
.nav-dropdown {
    position: relative !important;
}

/* Hidden by default */
.dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    min-width: 240px !important;
    border-radius: 10px !important;
    padding: 8px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10) !important;
}

/* Show on hover */
.nav-dropdown:hover .dropdown-menu {
    display: block !important;
}

/* Individual items */
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    gap: 12px !important;
    cursor: pointer !important;
}
.dropdown-item:hover {
    background: rgba(18, 70, 212, 0.05) !important;
}

/* Left side: name + desc stacked vertically */
.dropdown-item-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.dropdown-item-name {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
.dropdown-item-desc {
    color: #6B7280 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}
.dropdown-item-price {
    color: #1246D4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.dropdown-divider {
    height: 1px !important;
    margin: 4px 0 !important;
    background: rgba(0, 0, 0, 0.07) !important;
}

/* ============================================
   HERO & PAGE HEADERS
   ============================================ */
.hero h1, .page-hero h1, .hero-title {
    color: #111827 !important;
}
.hero h1 .accent, .page-hero h1 .accent {
    color: #1246D4 !important;
}
.hero p, .page-hero p, .hero-subtitle {
    color: #4B5563 !important;
}
.hero-badge, .page-hero .badge {
    background: rgba(18, 70, 212, 0.08) !important;
    color: #1246D4 !important;
    border: 1px solid rgba(18, 70, 212, 0.15) !important;
}
.hero-badge .pulse, .page-hero .badge .pulse {
    background: #1246D4 !important;
}

/* Section headings */
h1, h2, h3, h4, h5, h6 {
    color: #111827 !important;
}
p {
    color: #374151;
}

/* ============================================
   LABELS / SECTION LABELS
   ============================================ */
.pain-label {
    color: #DC2626 !important;
}
.solution-label,
[class*="-label"]:not(.form-group label):not(.step-title):not(.category-bar-label) {
    color: #1246D4 !important;
}

/* ============================================
   CARDS (pain, solution, policy, feed, etc.)
   ============================================ */
.pain-card {
    background: #FFF8F8 !important;
    border-color: rgba(220, 38, 38, 0.10) !important;
}
.pain-card h3 {
    color: #111827 !important;
}
.pain-card .pain-stat {
    color: #DC2626 !important;
}

.sol-card {
    background: #F0F6FF !important;
    border-color: rgba(18, 70, 212, 0.10) !important;
}
.sol-card h3 {
    color: #111827 !important;
}
.sol-highlight {
    background: rgba(18, 70, 212, 0.08) !important;
    color: #1246D4 !important;
}

/* Generic card classes */
.card, [class$="-card"]:not(.pain-card):not(.sol-card):not(.nav-cta) {
    background: #F8FAFF !important;
    border-color: rgba(18, 70, 212, 0.09) !important;
}

/* Feed cards (command center / resources) */
.feed-card {
    background: #F8FAFF !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}
.feed-card:hover {
    border-color: rgba(18, 70, 212, 0.20) !important;
}
.feed-date, .feed-type {
    background: #F0F4FF !important;
    color: #4B5563 !important;
}
.feed-agency {
    background: rgba(18, 70, 212, 0.08) !important;
    color: #1246D4 !important;
}
.feed-title {
    color: #111827 !important;
}
.feed-title a {
    color: #111827 !important;
}
.feed-title a:hover {
    color: #1246D4 !important;
}
.feed-summary {
    color: #4B5563 !important;
}

/* Skeleton shimmer on light */
.skeleton-line {
    background: #E5E7EB !important;
}

/* ============================================
   EMAIL & FORMS
   ============================================ */
.email-form input,
input[type="email"],
input[type="text"],
input[type="search"],
.form-group input[type="text"],
.form-group input[type="email"],
textarea,
.form-select {
    background: #FFFFFF !important;
    border: 1.5px solid #D1D5DB !important;
    color: #111827 !important;
}
.email-form input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #9CA3AF !important;
}
.email-form input:focus,
input:focus,
textarea:focus,
.form-select:focus {
    border-color: #1246D4 !important;
    box-shadow: 0 0 0 3px rgba(18, 70, 212, 0.10) !important;
}

/* Submit buttons */
.email-form button,
.btn-next,
.btn-submit,
.btn-primary {
    background: #1246D4 !important;
    color: #FFFFFF !important;
    border-color: #1246D4 !important;
}
.email-form button:hover,
.btn-next:hover,
.btn-submit:hover,
.btn-primary:hover {
    background: #0D35B0 !important;
    opacity: 1 !important;
}

/* Back / secondary buttons */
.btn-back,
.btn-secondary,
.btn-load-more {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
}
.btn-back:hover,
.btn-secondary:hover,
.btn-load-more:hover {
    border-color: #1246D4 !important;
    color: #1246D4 !important;
}

/* Form labels */
.form-group label,
.step-title {
    color: #111827 !important;
}
.step-subtitle {
    color: #4B5563 !important;
}

/* Radio options */
.radio-option label {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
}
.radio-option label:hover {
    border-color: #1246D4 !important;
    background: #F0F6FF !important;
}
.radio-option input:checked + label {
    border-color: #1246D4 !important;
    background: rgba(18, 70, 212, 0.08) !important;
    color: #1246D4 !important;
}

/* Y/N toggles */
.yn-btn {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #4B5563 !important;
}
.yn-btn:hover {
    border-color: #9CA3AF !important;
}
.yn-btn.yes-active {
    background: rgba(46, 125, 50, 0.09) !important;
    border-color: #2E7D32 !important;
    color: #2E7D32 !important;
}
.yn-btn.no-active {
    background: rgba(220, 38, 38, 0.07) !important;
    border-color: #DC2626 !important;
    color: #DC2626 !important;
}

/* Question items */
.question-item {
    background: #F8FAFF !important;
    border-color: #E2E8F0 !important;
}
.question-item:hover {
    border-color: #1246D4 !important;
}
.question-text {
    color: #374151 !important;
}

/* Step nav separator */
.step-nav {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   ASSESSMENT CONTAINER
   ============================================ */
.assessment-container {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
.assessment-progress {
    background: #E5E7EB !important;
}
.assessment-progress-bar {
    background: #1246D4 !important;
}

/* ============================================
   RESULTS (gauge, bars)
   ============================================ */
.results-container,
.results-details {
    color: #374151 !important;
}
.gauge-bg {
    stroke: #E5E7EB !important;
}
.gauge-score {
    fill: #111827 !important;
}
.gauge-label {
    fill: #6B7280 !important;
}
.score-text {
    color: #4B5563 !important;
}
.results-details h3 {
    color: #111827 !important;
}
.category-bar-label {
    color: #374151 !important;
}
.category-bar-track {
    background: #E5E7EB !important;
}
.risk-summary {
    background: #FFF8F8 !important;
    border-color: rgba(220, 38, 38, 0.15) !important;
}
.risk-summary h4 {
    color: #DC2626 !important;
}
.risk-summary li {
    color: #374151 !important;
}

/* ============================================
   POLICY GENERATOR
   ============================================ */
.policy-card {
    background: #F8FAFF !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}
.policy-card:hover {
    border-color: rgba(18, 70, 212, 0.25) !important;
}
.policy-card.selected {
    border-color: #1246D4 !important;
    background: rgba(18, 70, 212, 0.06) !important;
}
.policy-card h4 {
    color: #111827 !important;
}
.policy-card p {
    color: #4B5563 !important;
}
.policy-card .check {
    background: #1246D4 !important;
}
.policy-card-icon.privacy {
    background: rgba(18, 70, 212, 0.08) !important;
}
.policy-card-icon.security {
    background: rgba(46, 125, 50, 0.08) !important;
}
.policy-card-icon.breach {
    background: rgba(220, 38, 38, 0.07) !important;
}
.policy-card-icon.baa {
    background: rgba(217, 119, 6, 0.08) !important;
}
.policy-card-icon.training {
    background: rgba(124, 58, 237, 0.08) !important;
}
.policy-card-icon.risk {
    background: rgba(234, 88, 12, 0.08) !important;
}

.policy-form {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.policy-content {
    background: #F8FAFF !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    color: #374151 !important;
}
.policy-content h1,
.policy-content h2,
.policy-content h3 {
    color: #111827 !important;
}
.policy-content strong {
    color: #111827 !important;
}
.policy-disclaimer {
    background: rgba(217, 119, 6, 0.07) !important;
    border-color: rgba(217, 119, 6, 0.18) !important;
    color: #92400E !important;
}
.policy-loading p {
    color: #4B5563 !important;
}
.policy-loading .typing span {
    background: #1246D4 !important;
}

/* ============================================
   FILTER BUTTONS (resources page)
   ============================================ */
.filter-btn {
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #4B5563 !important;
    background: transparent !important;
}
.filter-btn:hover,
.filter-btn.active {
    background: #1246D4 !important;
    border-color: #1246D4 !important;
    color: #FFFFFF !important;
}

/* ============================================
   BLOG / RESOURCE POST CARDS
   ============================================ */
.post-card,
.article-card,
.resource-card,
[class*="post-card"],
[class*="article-card"] {
    background: #F8FAFF !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}
[class*="post-card"]:hover,
[class*="article-card"]:hover {
    border-color: rgba(18, 70, 212, 0.20) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}
[class*="post-title"],
[class*="article-title"] {
    color: #111827 !important;
}
[class*="post-excerpt"],
[class*="post-meta"],
[class*="article-excerpt"] {
    color: #4B5563 !important;
}
[class*="post-tag"],
[class*="article-tag"],
[class*="-category"] {
    background: rgba(18, 70, 212, 0.08) !important;
    color: #1246D4 !important;
    border-color: rgba(18, 70, 212, 0.12) !important;
}

/* ============================================
   FRAMEWORK PAGES
   ============================================ */
[class*="framework-"],
[class*="-framework"] {
    color: #374151 !important;
}
[class*="framework-"] h2,
[class*="framework-"] h3 {
    color: #111827 !important;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    background: #FFFFFF !important;
}
.footer-top {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.footer-brand,
.footer-brand p,
.footer-copy,
.footer-disclaimer {
    color: #6B7280 !important;
}
.footer-brand .footer-logo,
.footer-col h4 {
    color: #374151 !important;
}
.footer-links a,
.footer-col a {
    color: #6B7280 !important;
}
.footer-links a:hover,
.footer-col a:hover {
    color: #111827 !important;
    text-decoration: none !important;
}
.footer-sep {
    color: rgba(0, 0, 0, 0.15) !important;
}
.footer-regulatory {
    background: rgba(220, 38, 38, 0.04) !important;
    border-color: rgba(220, 38, 38, 0.12) !important;
    color: #9CA3AF !important;
}
.footer-regulatory strong {
    color: #DC2626 !important;
}
.footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    color: #6B7280 !important;
}
.footer-legal-box {
    background: #F8FAFF !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    color: #6B7280 !important;
}
.footer-grid {
    color: #374151 !important;
}

/* ============================================
   COOKIE BANNER (both old and new class names)
   ============================================ */
#cookieBanner,
.cookie-banner {
    background: #FFFFFF !important;
    border-top: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07) !important;
}
#cookieBanner p,
.cookie-banner p {
    color: #374151 !important;
}
#cookieBanner a,
.cookie-banner a {
    color: #1246D4 !important;
}
.cookie-btn-reject,
.cookie-reject {
    background: #F3F4F6 !important;
    color: #374151 !important;
    border-color: #D1D5DB !important;
}
.cookie-btn-customize {
    background: transparent !important;
    color: #6B7280 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
.cookie-accept {
    background: #1246D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}
.cookie-btn-accept {
    background: #1246D4 !important;
    color: #FFFFFF !important;
}

/* ============================================
   INLINE-STYLE OVERRIDES (nav links with hardcoded rgba(255,255,255))
   ============================================ */
nav [style*="rgba(255,255,255"] {
    color: #4B5563 !important;
}
nav [style*="color:#fff"],
nav [style*="color: #fff"] {
    color: #4B5563 !important;
}
nav a[href*="resources"][style] {
    color: #4B5563 !important;
}

/* ============================================
   GENERAL LINKS
   ============================================ */
a {
    color: #1246D4;
}
a:hover {
    color: #0D35B0;
}

/* ============================================
   MISC / UTILITY OVERRIDES
   ============================================ */
hr,
.section-divider {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Step nav and assessment separators */
[style*="rgba(255,255,255,0.06)"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Scrollbar on light bg */
.policy-content::-webkit-scrollbar {
    width: 6px;
    background: #F3F4F6;
}
.policy-content::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

/* Bottom CTA section */
.bottom-cta h2 {
    color: #111827 !important;
}
.bottom-cta p {
    color: #4B5563 !important;
}

/* Hero note text */
.hero-note {
    color: #6B7280 !important;
}

/* Form messages */
.form-msg.success { color: #2E7D32 !important; }
.form-msg.error { color: #DC2626 !important; }

/* Impact badges on feed */
.feed-impact.high { color: #DC2626 !important; background: rgba(220, 38, 38, 0.08) !important; }
.feed-impact.medium { color: #D97706 !important; background: rgba(217, 119, 6, 0.09) !important; }
.feed-impact.low { color: #2E7D32 !important; background: rgba(46, 125, 50, 0.09) !important; }

/* Section content text */
.section-header h2 {
    color: #111827 !important;
}
.section-header p {
    color: #4B5563 !important;
}

/* Subtle background tint for alternating sections */
.pain,
.solution {
    background: #FFFFFF !important;
}