/* ================= NOVA GREEN BRAND DESIGN SYSTEM ================= */
:root {
    --ng-navy: #003670;
    --ng-green: #62B32E;
    --ng-navy-soft: rgba(0, 54, 112, 0.28);
    --ng-green-soft: rgba(98, 179, 46, 0.28);
    --ng-white: #ffffff;
    --ng-transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Glassmorphism settings */
    --ng-glass-bg: rgba(255, 255, 255, 0.28);
    --ng-glass-border: rgba(255, 255, 255, 0.25);
    --ng-glass-shadow: 0 15px 35px rgba(0, 54, 112, 0.04);
}

/* Smooth body background transitions */
body.novagreen-animated-bg {
    transition: background-color 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-x: hidden;
}

/* ================= 1. DYNAMIC GRADIENT BLOB (FIXED BACKGROUND) ================= */
.fixed-gradient-blob {
    position: fixed;
    width: 95vw;
    height: 95vw;
    max-width: 1200px;
    max-height: 1200px;
    top: 0;
    left: 0;
    z-index: -99; /* Absolute lowest background layer */
    pointer-events: none;
    filter: blur(220px); /* Ultra-soft diffused blur to blend with the body background seamlessly */
    opacity: 0.55; /* Soft, highly elegant subtle opacity */
    border-radius: 50%;
    background-image: radial-gradient(circle, var(--ng-green-soft) 0%, rgba(255, 255, 255, 0) 70%);
    transition: background-image 1.5s ease;
    will-change: transform;
}

/* ================= 2. FLOATING PARALLAX CROP OUTLINES ================= */
.parallax-crop-wp {
    position: absolute;
    width: 130px; /* Modern aesthetic size */
    height: 130px;
    z-index: -98; /* Floating behind text columns but in front of background blob */
    pointer-events: none;
    color: var(--ng-green) !important; /* Force Brand Green as requested */
    opacity: 0.24 !important; /* Richer visible but non-distracting opacity */
    transform-origin: center center;
    will-change: transform;
}

.parallax-crop-wp svg,
.crop-falling svg {
    width: 100%;
    height: 100%;
}

.crop-agri-svg,
.crop-health-svg {
    width: 100%;
    height: 100%;
}

/* ================= THEME VISIBILITY TOGGLE (ZERO-JS-FLICKER SWAPPING) ================= */

/* Default (Agriculture Theme): Show Agri, Hide Health */
.parallax-crop-wp .crop-health-svg,
.crop-falling .crop-health-svg {
    display: none !important;
}
.parallax-crop-wp .crop-agri-svg,
.crop-falling .crop-agri-svg {
    display: block !important;
}

/* Public Health Theme Active: Hide Agri, Show Health */
body.ng-page-theme-health .parallax-crop-wp .crop-agri-svg,
body.ng-page-theme-health .crop-falling .crop-agri-svg {
    display: none !important;
}
body.ng-page-theme-health .parallax-crop-wp .crop-health-svg,
body.ng-page-theme-health .crop-falling .crop-health-svg {
    display: block !important;
}

/* Smaller, subtle micro-elements for seeds and fertilizer pellets */
.parallax-crop-wp.crop-micro {
    width: 60px !important;
    height: 60px !important;
    opacity: 0.24 !important; /* Extremely subtle and elegant micro-aura */
}

/* ================= 3. KADENCE & GUTENBERG INTEGRATION ================= */

/* Section Triggers: To ensure the background transition works, we override Kadence default solid overlays and backgrounds on the trigger row itself */
.wp-block-kadence-rowlayout.ng-section,
.wp-block-kadence-rowlayout.ng-section > .kt-row-layout-overlay {
    background: transparent !important; /* Force transparency to let the blob show through */
    background-color: transparent !important;
    background-image: none !important;
}

/* Premium Glassmorphic Cards (Can be applied directly as a custom class to columns or sections) */
.ng-glass {
    background: var(--ng-glass-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--ng-glass-border) !important;
    box-shadow: var(--ng-glass-shadow) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease;
}

.ng-glass:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.55) !important;
}

/* Premium Dark Glassmorphic Cards (Ideal for dark sections or headers) */
.ng-glass-dark {
    background: rgba(15, 30, 45, 0.35) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease;
}

.ng-glass-dark:hover {
    transform: translateY(-5px);
    background-color: rgba(15, 30, 45, 0.75) !important;
}

/* Force Kadence inner container to be transparent so the glass blur shows through */
.ng-glass > .kt-inside-inner-col,
.ng-glass-dark > .kt-inside-inner-col {
    background: transparent !important;
    background-color: transparent !important;
}

/* ================= 4. KATERINA'S COMPLIANCE SYSTEM (BORDER RADIUS & BRAND) ================= */

/* Explicit utility class for custom 20px rounded borders. Global overrides removed so you can control it block-by-block in the editor. */
.ng-rounded {
    border-radius: 20px !important;
    overflow: hidden !important; /* Ensure content inside fits the curved corners */
}

/* Custom Soft Brand Color Utilities (To break white monotony) */
.ng-brand-navy {
    color: var(--ng-navy) !important;
}

.ng-brand-green {
    color: var(--ng-green) !important;
}

/* CSS Parallax helper class for page-editor custom items */
.ng-parallax {
    will-change: transform;
}

/* ================= 5. PREMIUM FLOATING GLASS HEADER ================= */

/* Make all nested header rows and inner wraps transparent to show our glass effect */


/* Hide background crop elements on short pages to prevent visual clutter and unnecessary scrollbars */
body.ng-short-page .parallax-crop-wp {
    display: none !important;
}



/* Fix Kadence Image Block circular collapse when custom classes wrap the block in a div inside flex columns */
div.wp-block-kadence-image,
.wp-block-kadence-image.memberphoto {
    width: 100%;
}

/* ================= 6. GENTLE SEEDS RAIN (SNOWING EFFECT) ================= */
.falling-crops-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -97; /* Behind content but easily visible over background blob */
    pointer-events: none;
    overflow: hidden;
}

.crop-falling {
    position: absolute;
    top: -50px;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0.45 !important; /* Premium visible sweet spot: clearly visible but transparent enough to not block text */
    color: var(--ng-green) !important;
    pointer-events: none;
    will-change: transform;
}

.crop-falling svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hide on tablet and mobile to respect CPU performance and mobile reading experience */
@media (max-width: 1024px) {
    .falling-crops-container {
        display: none !important;
    }
}

/* ================= 7. DYNAMIC SHAPE DIVIDERS MATCHING ================= */

/* Manual match utilities (Sets the divider fill color to match the next row's pastel brand backgrounds) */
.ng-divider-to-green .kt-row-layout-bottom-divider svg,
.ng-divider-to-green .kt-row-layout-bottom-divider svg path,
.ng-divider-to-green .kt-row-layout-bottom-sep svg,
.ng-divider-to-green .kt-row-layout-bottom-sep svg path,
.ng-divider-to-green .kt-row-layout-top-divider svg,
.ng-divider-to-green .kt-row-layout-top-divider svg path,
.ng-divider-to-green .kt-row-layout-top-sep svg,
.ng-divider-to-green .kt-row-layout-top-sep svg path {
    fill: #dbebcf !important;
}

.ng-divider-to-blue .kt-row-layout-bottom-divider svg,
.ng-divider-to-blue .kt-row-layout-bottom-divider svg path,
.ng-divider-to-blue .kt-row-layout-bottom-sep svg,
.ng-divider-to-blue .kt-row-layout-bottom-sep svg path,
.ng-divider-to-blue .kt-row-layout-top-divider svg,
.ng-divider-to-blue .kt-row-layout-top-divider svg path,
.ng-divider-to-blue .kt-row-layout-top-sep svg,
.ng-divider-to-blue .kt-row-layout-top-sep svg path {
    fill: #d1e0ed !important;
}

.ng-divider-to-white .kt-row-layout-bottom-divider svg,
.ng-divider-to-white .kt-row-layout-bottom-divider svg path,
.ng-divider-to-white .kt-row-layout-bottom-sep svg,
.ng-divider-to-white .kt-row-layout-bottom-sep svg path,
.ng-divider-to-white .kt-row-layout-top-divider svg,
.ng-divider-to-white .kt-row-layout-top-divider svg path,
.ng-divider-to-white .kt-row-layout-top-sep svg,
.ng-divider-to-white .kt-row-layout-top-sep svg path {
    fill: #ffffff !important;
}

/* Magic auto-match utility which dynamically morphs color to follow body background on scroll */
.ng-divider-auto .kt-row-layout-bottom-divider svg,
.ng-divider-auto .kt-row-layout-bottom-divider svg path,
.ng-divider-auto .kt-row-layout-bottom-sep svg,
.ng-divider-auto .kt-row-layout-bottom-sep svg path,
.ng-divider-auto .kt-row-layout-top-divider svg,
.ng-divider-auto .kt-row-layout-top-divider svg path,
.ng-divider-auto .kt-row-layout-top-sep svg,
.ng-divider-auto .kt-row-layout-top-sep svg path {
    fill: var(--ng-current-bg, #ffffff) !important;
    transition: fill 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================= 8. KADENCE STICKY HEADER JUMP & FLASH FIX ================= */

/* Keep the sticky header fully transparent until it is actually stuck at the top of the viewport */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-is-stuck),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-is-stuck) .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-is-stuck) .site-main-header-wrap {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Add an ultra-smooth transition for the background color and shadow when the header sticks/unsticks */
#masthead .kadence-sticky-header {
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}