/* =============================================================
   light-mode.css — Global light mode overrides for Vercel-style
   components. Loaded on every page via header.php.
   
   HOW TO USE ON A NEW PAGE:
   • Use the rws- CSS component classes in your HTML (rws-vercel-section,
     infra-card, cc-tile, rws-diff-card, rws-gradient-cta, etc.)
   • Light mode works automatically — no per-page CSS needed.
   • For sections with only inline background: #000 and no class,
     add the helper class "rws-dark-section" to get light mode support.
   ============================================================= */

/* ---------------------------------------------------------------
   Generic dark section helper — add class="rws-dark-section"
   to any <section> that uses an inline background: #000 but has
   no other component class to hook on.
--------------------------------------------------------------- */

[data-bs-theme="light"] .rws-dark-section {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .rws-dark-section h2,
[data-bs-theme="light"] .rws-dark-section h3,
[data-bs-theme="light"] .rws-dark-section h4 {
    color: #0f172a !important;
}

[data-bs-theme="light"] .rws-dark-section p {
    color: rgba(15, 23, 42, 0.65) !important;
}

[data-bs-theme="light"] .rws-dark-section span[style*="color: #555"],
[data-bs-theme="light"] .rws-dark-section span[style*="color: #888"] {
    color: rgba(15, 23, 42, 0.45) !important;
}

[data-bs-theme="light"] .rws-dark-section div[style*="border-bottom"],
[data-bs-theme="light"] .rws-dark-section div[style*="border-top"],
[data-bs-theme="light"] .rws-dark-section div[style*="border-left"],
[data-bs-theme="light"] .rws-dark-section div[style*="border-right"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}


/* ---------------------------------------------------------------
   Infrastructure Options Section
   (.rws-vercel-section + .infra-header-grid + .infra-card)
--------------------------------------------------------------- */

[data-bs-theme="light"] .rws-vercel-section {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .infra-header-grid {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .rws-vercel-section h2,
[data-bs-theme="light"] .rws-vercel-section h3,
[data-bs-theme="light"] .rws-vercel-section h4 {
    color: #0f172a !important;
}

[data-bs-theme="light"] .rws-vercel-section p {
    color: rgba(15, 23, 42, 0.65) !important;
}

[data-bs-theme="light"] .rws-vercel-section span[style*="color: #555"] {
    color: rgba(15, 23, 42, 0.45) !important;
}

[data-bs-theme="light"] .rws-vercel-section span[style*="color: #888"],
[data-bs-theme="light"] .rws-vercel-section span[style*="color: #666"] {
    color: rgba(15, 23, 42, 0.55) !important;
}

/* Infra card borders */
[data-bs-theme="light"] .infra-card {
    border-right-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .infra-card:hover {
    background: #f5f5f4 !important;
}

@media (max-width: 767px) {
    [data-bs-theme="light"] .infra-card {
        border-bottom-color: rgba(0, 0, 0, 0.1);
    }
}

/* Two-col card layout borders (ai-factories-two-col used inside rws-vercel-section) */
[data-bs-theme="light"] .rws-vercel-section .ai-factories-two-col {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .rws-vercel-section .ai-factories-two-col a[style*="border-right"] {
    border-right-color: rgba(0, 0, 0, 0.1) !important;
}

@media (max-width: 767px) {
    [data-bs-theme="light"] .rws-vercel-section .ai-factories-two-col a[style*="border-bottom"] {
        border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    }
}


/* ---------------------------------------------------------------
   Compute Cloud Section
   (.rws-cc-section + .cc-sidebar + .cc-tile)
--------------------------------------------------------------- */

[data-bs-theme="light"] .rws-cc-section {
    background: #f0f0f3 !important;
    border-bottom-color: #dcdce0 !important;
}

[data-bs-theme="light"] .cc-sidebar {
    border-right-color: #d0d0d5 !important;
}

@media (max-width: 991px) {
    [data-bs-theme="light"] .cc-sidebar {
        border-bottom-color: #d0d0d5 !important;
    }
}

[data-bs-theme="light"] .cc-tile {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-top-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

[data-bs-theme="light"] .cc-tile:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="light"] .rws-cc-section h2,
[data-bs-theme="light"] .rws-cc-section h3 {
    color: #0a0a0a !important;
}

[data-bs-theme="light"] .rws-cc-section p {
    color: #444 !important;
}

[data-bs-theme="light"] .rws-cc-section span[style*="color: #555"] {
    color: #888 !important;
}

[data-bs-theme="light"] .rws-cc-section span[style*="color: #888"] {
    color: #666 !important;
}


/* ---------------------------------------------------------------
   Benefit Cards Section
   (.rws-diff-cards-section + .rws-diff-card + .rws-diff-card__*)
--------------------------------------------------------------- */

[data-bs-theme="light"] .rws-diff-cards-section {
    background: #f5f5f7 !important;
    border-color: #dcdcde !important;
}

[data-bs-theme="light"] .rws-diff-cards-section h2 {
    color: #0f172a !important;
}

[data-bs-theme="light"] .rws-diff-card {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07), 0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}

[data-bs-theme="light"] .rws-diff-card:hover {
    border-color: rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .rws-diff-card__label {
    color: rgba(15, 23, 42, 0.5) !important;
}

[data-bs-theme="light"] .rws-diff-card__body {
    color: rgba(15, 23, 42, 0.75) !important;
}

[data-bs-theme="light"] .rws-diff-card__stat {
    color: #059669 !important;
}

[data-bs-theme="light"] .rws-diff-card__link {
    color: #059669 !important;
}


/* ---------------------------------------------------------------
   Gradient CTA Section
   (.rws-gradient-cta + .rws-gradient-cta-*)
--------------------------------------------------------------- */

[data-bs-theme="light"] .rws-gradient-cta {
    background: linear-gradient(
        135deg,
        #f8f8f7 0%,
        #eef2f0 40%,
        #ecf5ef 60%,
        #f8f8f7 100%
    ) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .rws-gradient-cta::before {
    background: radial-gradient(
        ellipse 70% 80% at 50% 60%,
        rgba(9, 184, 80, 0.08) 0%,
        transparent 70%
    );
}

[data-bs-theme="light"] .rws-gradient-cta-label {
    color: rgba(15, 23, 42, 0.4);
}

[data-bs-theme="light"] .rws-gradient-cta-heading {
    color: #0f172a !important;
}

[data-bs-theme="light"] .rws-gradient-cta-sub {
    color: rgba(15, 23, 42, 0.6) !important;
}

[data-bs-theme="light"] .rws-gradient-cta-btn-primary {
    background: #0f172a !important;
    color: #fff !important;
    border-color: transparent !important;
}

[data-bs-theme="light"] .rws-gradient-cta-btn-secondary {
    color: rgba(15, 23, 42, 0.5) !important;
}

[data-bs-theme="light"] .rws-gradient-cta-btn-secondary:hover {
    color: #0f172a !important;
}


/* ---------------------------------------------------------------
   Force-dark sections — always stay dark regardless of theme.
   Add class="rws-force-dark" to any section that must keep its
   dark appearance in light mode (e.g. design "feature islands").
   Restores dark-mode-appropriate styling for elements that are
   globally overridden by light mode rules above.
--------------------------------------------------------------- */

/* Hero badge glass: restore dark glass look on dark bg */
[data-bs-theme="light"] .rws-force-dark .hero-badge-glass {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Accent gradient text: restore silver/light gradient for dark backgrounds */
[data-bs-theme="light"] .rws-force-dark .hero-title-accent-silver {
    background: linear-gradient(135deg,
        #a8b2c1 0%,
        #e8ecf0 25%,
        #8a95a5 50%,
        #d4dce6 75%,
        #9ba5b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(168, 178, 193, 0.5));
}


/* ---------------------------------------------------------------
   AI Factories Layout Components
   (.ai-factories-hero-grid + .ai-factories-two-col +
    .ai-factories-stat-grid + .stat-cell + .ai-factories-hero-visual)
   NOTE: The outer section uses inline background: #000 with
   class="rws-force-dark", so the entire AI Factories block
   intentionally stays dark in light mode as a design "feature island".
   No background/text overrides needed here.
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
   Solutions Carousel Section
   (.solutions-carousel-section + .solutions-vercel-card)
--------------------------------------------------------------- */

[data-bs-theme="light"] .solutions-carousel-section {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .solutions-carousel-section .swiper-wrapper {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .solutions-vercel-card {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .solutions-vercel-card:hover {
    background: #f5f5f4 !important;
}

[data-bs-theme="light"] .solutions-vercel-card > div[style*="border-top"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .solutions-carousel-section h2,
[data-bs-theme="light"] .solutions-carousel-section h3,
[data-bs-theme="light"] .solutions-carousel-section h3 a {
    color: #0f172a !important;
}

[data-bs-theme="light"] .solutions-carousel-section p[style*="color: #888"],
[data-bs-theme="light"] .solutions-carousel-section p[style*="color: #666"] {
    color: rgba(15, 23, 42, 0.65) !important;
}

[data-bs-theme="light"] .solutions-carousel-section .d-flex[style*="border-top"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .solutions-carousel-section .d-flex p[style*="color: #888"] {
    color: rgba(15, 23, 42, 0.55) !important;
}

[data-bs-theme="light"] .solutions-carousel-section button.swiper-button-prev-team,
[data-bs-theme="light"] .solutions-carousel-section button.swiper-button-next-team {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
    background: transparent !important;
}


/* ---------------------------------------------------------------
   Legacy Benefit Strip (row layout)
   (.rws-diff-row + .rws-diff-header)
--------------------------------------------------------------- */

[data-bs-theme="light"] .rws-diff-row {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .rws-diff-row > div {
    color: #0f172a !important;
}

[data-bs-theme="light"] .rws-diff-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}


/* ---------------------------------------------------------------
   Hero badge / pill — dark pill style is handled by style.css
   ([data-bs-theme="light"] .hero-badge-glass → dark bg, white text).
   No override needed here; rws-force-dark rule above handles
   pills inside force-dark sections.
--------------------------------------------------------------- */