/*
 * Cinematic SaaS theme overrides — applied to all marketing pages
 * when Settings → Website Design → Landing page template = Cinematic SaaS.
 * Targets the main site's .index-header and .index-footer to match
 * the look of index-alternative.php.
 */

/* ── Variables ───────────────────────────────────────────── */
body.ms-cinematic-saas {
    --cs-bg:        #08080f;
    --cs-bg-2:      #0e0e1a;
    --cs-border:    rgba(255,255,255,.08);
    --cs-purple:    #8b5cf6;
    --cs-cyan:      #22d3ee;
    --cs-text:      #f1eeff;
    --cs-muted:     #9b92c8;
}

/* ── Header ──────────────────────────────────────────────── */
body.ms-cinematic-saas .index-header {
    background: rgba(8,8,15,.85) !important;
    border-bottom: 1px solid var(--cs-border) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

/* Logo name — same white→cyan gradient as landing page */
body.ms-cinematic-saas .index-logo-name {
    background: linear-gradient(135deg, #ffffff 0%, rgba(0,212,255,.9) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
html[data-theme="light"] body.ms-cinematic-saas .index-logo-name {
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Nav links — match cinematic muted style */
body.ms-cinematic-saas .index-top-nav-link {
    color: var(--cs-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 6px 13px !important;
    transition: color .2s ease, background .2s ease !important;
}
body.ms-cinematic-saas .index-top-nav-link:hover {
    color: var(--cs-text) !important;
    background: rgba(255,255,255,.05) !important;
}
body.ms-cinematic-saas .index-top-nav-link.active,
body.ms-cinematic-saas .index-top-nav-link[aria-current] {
    color: #c4b5fd !important;
}

/* Resources dropdown trigger */
body.ms-cinematic-saas .index-nav-trigger {
    color: var(--cs-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 6px 13px !important;
}
body.ms-cinematic-saas .index-nav-trigger:hover {
    color: var(--cs-text) !important;
    background: rgba(255,255,255,.05) !important;
}
body.ms-cinematic-saas .index-top-nav-submenu {
    background: rgba(14,14,26,.95) !important;
    border: 1px solid var(--cs-border) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 10px !important;
}
body.ms-cinematic-saas .index-top-nav-submenu a {
    color: var(--cs-muted) !important;
}
body.ms-cinematic-saas .index-top-nav-submenu a:hover {
    color: var(--cs-text) !important;
    background: rgba(255,255,255,.05) !important;
}

/* Primary CTA button — cinematic style */
body.ms-cinematic-saas .index-header-primary-cta,
body.ms-cinematic-saas .index-studio-cta {
    background: rgba(139,92,246,.18) !important;
    border: 1px solid rgba(139,92,246,.45) !important;
    color: #e2d9ff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body.ms-cinematic-saas .index-header-primary-cta:hover,
body.ms-cinematic-saas .index-studio-cta:hover {
    background: rgba(139,92,246,.28) !important;
    border-color: rgba(139,92,246,.7) !important;
    color: #fff !important;
}

/* Sign in link */
body.ms-cinematic-saas .index-user-actions .btn-outline {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.55) !important;
    border-radius: 6px !important;
}
body.ms-cinematic-saas .index-user-actions .btn-outline:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: rgba(255,255,255,.9) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
body.ms-cinematic-saas .index-footer {
    background: #0e0e1a !important;
    border-top: 1px solid var(--cs-border) !important;
}
body.ms-cinematic-saas .index-footer h4 {
    color: var(--cs-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
body.ms-cinematic-saas .index-footer ul li a,
body.ms-cinematic-saas .index-footer-links a,
body.ms-cinematic-saas .index-footer-bottom p {
    color: var(--cs-muted) !important;
}
body.ms-cinematic-saas .index-footer ul li a:hover,
body.ms-cinematic-saas .index-footer-links a:hover {
    color: var(--cs-text) !important;
}
body.ms-cinematic-saas .index-footer-logo span {
    background: linear-gradient(135deg, #ffffff 0%, rgba(0,212,255,.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}
body.ms-cinematic-saas .social-link {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--cs-border) !important;
    color: var(--cs-muted) !important;
    border-radius: 8px !important;
}
body.ms-cinematic-saas .social-link:hover {
    color: var(--cs-purple) !important;
    border-color: rgba(139,92,246,.35) !important;
    background: rgba(139,92,246,.08) !important;
}

/* ── Page background ─────────────────────────────────────── */
body.ms-cinematic-saas,
html[data-theme="dark"] body.ms-cinematic-saas {
    background-color: #08080f !important;
}

/* ── Mobile drawer ───────────────────────────────────────── */
body.ms-cinematic-saas .index-mobile-drawer {
    background: rgba(8,8,15,.97) !important;
    border-right: 1px solid var(--cs-border) !important;
}
body.ms-cinematic-saas .index-mobile-drawer a {
    color: var(--cs-muted) !important;
}
body.ms-cinematic-saas .index-mobile-drawer a:hover {
    color: var(--cs-text) !important;
    background: rgba(255,255,255,.05) !important;
}