/* 
==========================================================================
   SCROLL SITES TO PLANTFORMANCE.COM ALIGNMENT CSS (DARK THEME)
   Fixes: Blurred SVG Aura & Kills Scroll Viewport Blue Gradients
========================================================================== 
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

:root {
    /* --- BRAND TYPOGRAPHY & COLORS --- */
    --pf-font-family: 'Barlow', sans-serif;
    --pf-bg-main: #333333;            
    --pf-text-color-main: #fffc;      
    --pf-primary-color: #ffffff;      
    --pf-secondary-color: #4DA8DA;  
    
    /* --- SURFACES --- */
    --pf-bg-header: rgba(34, 34, 34, 0.7);          
    --pf-bg-sidebar: rgba(42, 42, 42, 0.85);         
    --pf-border-color: rgba(255, 255, 255, 0.08); 
    --pf-text-color-muted: #aaaaaa;   
    
    /* --- SCROLL SITES VARIABLE NUKE --- */
    --vpt-theme-header-background-color: transparent !important;
    --vpt-theme-hero-background-color: transparent !important;
    --vpt-theme-brand-color: var(--pf-secondary-color) !important;
    
    --vp-header-background-color: transparent !important;
    --vp-hero-background-color: transparent !important;
    --vp-color-brand: var(--pf-secondary-color) !important;
    --vp-hero-background-image: none !important; /* Kills the blue gradient token */
}

/* =========================================
   A. GLOBAL TYPOGRAPHY & BLURRED AURA
========================================= */
body, html {
    font-family: var(--pf-font-family) !important;
    color: var(--pf-text-color-main) !important;
    background-color: var(--pf-bg-main) !important;
    -webkit-font-smoothing: antialiased; 
    
    /* Remove background image from body so we can blur it separately */
    background-image: none !important; 
    position: relative;
    z-index: 0;
}

/* 
   THE BLURRED AURA LAYER
   Creates a dedicated layer just for the SVG so we can blur it 
   without blurring the text on the page.
*/
body::before {
    content: "";
    position: fixed;
    top: -10%; 
    left: -10%;
    width: 120vw; /* Slightly larger than screen to prevent sharp edges on blur */
    height: 120vh;
    
    background-image: url('https://cdn.prod.website-files.com/6a3a61c14c1c8bcbe106a944/6a460f7fca53b758d8cf519d_blurred%20trapesoid.svg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    
    /* THE MAGIC BLUR: Adjust this number (e.g., 60px to 120px) to make it softer/harder */
    filter: blur(80px) !important; 
    opacity: 0.8 !important; /* Dims the glow slightly so text is readable */
    
    z-index: -1; 
    pointer-events: none;
}

/* Force ALL of Scroll Viewport's layout wrappers to be transparent */
.vp-page, .vp-main, .vp-layout, .vp-layout-container, #viewport, .vp-theme-container, .vp-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* =========================================
   B. FLOATING HEADER
========================================= */
.vp-header, header {
    background-color: var(--pf-bg-header) !important; 
    backdrop-filter: blur(12px) !important; 
    
    /* Shape */
    width: 95% !important;
    max-width: 1400px !important;
    margin: 20px auto 0 auto !important; 
    border-radius: 16px !important; 
    border: 1px solid var(--pf-border-color) !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; 
    
    position: relative !important;
    z-index: 100 !important;
}

/* Strip internal header wrappers */
.vp-header-inner, .vp-header-container, .vp-header-row {
    background-color: transparent !important; 
    background: transparent !important;
    border: none !important;
    background-image: none !important;
}

.vp-header a {
    color: var(--pf-text-color-main) !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
}

.vp-header a:hover {
    color: var(--pf-secondary-color) !important;
}

/* =========================================
   C. HERO BANNER (KILLING THE BLUE GRADIENT)
========================================= */
/* Aggressively target the hero and its background elements */
.vp-hero, .vp-hero-bg, .vp-hero-container {
    background-color: transparent !important;
    background: transparent !important;
    /* CRITICAL: This line kills the sneaky blue gradient Scroll Sites uses */
    background-image: none !important; 
    
    color: var(--pf-text-color-main) !important;
    border-bottom: 1px solid var(--pf-border-color) !important;
}

.vp-hero {
    padding: 6rem 2rem 4rem 2rem !important; 
}

.vp-search-input {
    background-color: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--pf-text-color-main) !important;
    border-radius: 12px !important; 
    border: 1px solid var(--pf-border-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    padding: 16px 24px !important;
}

/* =========================================
   D. ARTICLE / CONTENT TYPOGRAPHY
========================================= */
.vp-article h1, .vp-page-title {
    font-size: var(--pf-font-size-h1) !important;
    color: var(--pf-primary-color) !important; 
    font-weight: 700 !important;
    letter-spacing: -0.02em !important; 
    margin-bottom: 1.5rem !important;
}

.vp-article h2 {
    font-size: var(--pf-font-size-h2) !important;
    color: var(--pf-primary-color) !important;
    font-weight: 600 !important;
    margin-top: 2.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--pf-border-color) !important; 
}

.vp-article h3 {
    font-size: var(--pf-font-size-h3) !important;
    font-weight: 600 !important;
    color: var(--pf-primary-color) !important;
}

.vp-article a {
    color: var(--pf-secondary-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.vp-article a:hover {
    border-bottom-color: var(--pf-secondary-color) !important;
}

/* =========================================
   E. SIDEBAR & NAVIGATION
========================================= */
.vp-sidebar {
    background-color: var(--pf-bg-sidebar) !important;
    backdrop-filter: blur(8px) !important; 
    border-right: 1px solid var(--pf-border-color) !important;
}

.vp-sidebar a {
    color: var(--pf-text-color-muted) !important;
    font-size: 0.95rem !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

.vp-sidebar a.active, .vp-sidebar a:hover {
    color: var(--pf-text-color-main) !important;
    font-weight: 600 !important;
    background-color: rgba(255, 255, 255, 0.05) !important; 
}

/* =========================================
   F. BUTTONS & CALLOUTS
========================================= */
.vp-button {
    background-color: var(--pf-secondary-color) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: transform 0.1s ease, filter 0.2s ease !important;
}

.vp-button:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important; 
}