/*
Theme Name: Lyons Labs Theme
Author: Lyons Labs
Description: A Wordpress theme curated by the Lyons Labs developer team.
Version: 1.0
*/
        /* ========================================
        CSS VARIABLES & LIGHT/DARK MODE
        ========================================
        - Default theme is "light" (no class)
        - :root.dark flips all variables to "dark"
        */
        :root {
            /* Primary Brand Colors (fixed) */
            --ll-purple-static: #381a51;
            --ll-green-static: #abc858;
            --ll-dark-static: #101010;
            --ll-light-static: #eeeeee;
            
            /* Secondary Brand Colors (fixed) */
            --ll-yellow-static: #ffd420;
            --ll-red-static: #e8002a;

            /* DYNAMIC THEME COLORS (Light Mode Default) */
            --color-bg-primary: var(--ll-light-static);
            --color-bg-secondary: #ffffff;
            --color-text-primary: var(--ll-dark-static);
            --color-text-secondary: #4a4a4a;
            --color-header: var(--ll-purple-static);
            --color-accent: var(--ll-green-static);
            --color-accent-text: var(--ll-dark-static);
            --color-border: rgba(0, 0, 0, 0.1);
            --color-glass-bg: rgba(255, 255, 255, 0.5);
            --color-form-bg: rgba(0, 0, 0, 0.03);
            --color-form-bg-focus: rgba(0, 0, 0, 0.05);
            --color-form-text: var(--ll-dark-static);
            --color-form-placeholder: rgba(0, 0, 0, 0.4);
            --color-form-border: rgba(0, 0, 0, 0.2);
            --color-checkbox-border: var(--ll-dark-static);
            --color-hero-bg: var(--ll-light-static);
        }

        :root.dark {
            /* DYNAMIC THEME COLORS (Dark Mode) */
            --color-bg-primary: var(--ll-dark-static);
            --color-bg-secondary: #1a1a1a;
            --color-text-primary: var(--ll-light-static);
            --color-text-secondary: rgba(238, 238, 238, 0.8);
            --color-header: var(--ll-green-static);
            --color-accent: var(--ll-green-static);
            --color-accent-text: var(--ll-dark-static);
            --color-border: rgba(238, 238, 238, 0.1);
            --color-glass-bg: rgba(238, 238, 238, 0.03);
            --color-form-bg: rgba(238, 238, 238, 0.05);
            --color-form-bg-focus: rgba(238, 238, 238, 0.1);
            --color-form-text: var(--ll-light-static);
            --color-form-placeholder: rgba(238, 238, 238, 0.5);
            --color-form-border: rgba(238, 238, 238, 0.2);
            --color-checkbox-border: var(--ll-light-static);
            --color-hero-bg: var(--ll-dark-static);
        }
        /* END LIGHT/DARK MODE */


        /* Define fonts */
        body {
            font-family: 'Lato', sans-serif;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .font-spartan { font-family: 'League Spartan', sans-serif; }
        .font-lato { font-family: 'Lato', sans-serif; }

        /* Define brand colors for Tailwind */
        .bg-ll-purple { background-color: var(--ll-purple-static); }
        .bg-ll-green { background-color: var(--color-accent); }
        .bg-ll-dark { background-color: var(--ll-dark-static); }
        .bg-ll-light { background-color: var(--ll-light-static); }
        
        .text-ll-purple { color: var(--ll-purple-static); }
        .text-ll-green { color: var(--color-accent); }
        .text-ll-dark { color: var(--ll-dark-static); }
        .text-ll-light { color: var(--ll-light-static); }
        .text-ll-yellow { color: var(--ll-yellow-static); }
        .text-ll-red { color: var(--ll-red-static); }

        .border-ll-green { border-color: var(--color-accent); }
        
        /* Dynamic Theme Classes */
        .bg-primary { background-color: var(--color-bg-primary); }
        .bg-secondary { background-color: var(--color-bg-secondary); }
        .bg-hero { background-color: var(--color-hero-bg); }
        .text-primary { color: var(--color-text-primary); }
        .text-secondary { color: var(--color-text-secondary); }
        .text-header { color: var(--color-header); }
        .text-accent-on { color: var(--color-accent-text); }
        .border-themed { border-color: var(--color-border); }
        
        /* Fix: Text on purple backgrounds (myBLISS) stays light in light mode */
        :root:not(.dark) #mybliss * {
            --color-text-primary: var(--ll-light-static);
            --color-text-secondary: rgba(238, 238, 238, 0.8);
        }
        :root:not(.dark) #mybliss .text-ll-light-static { color: var(--ll-light-static) !important; }
        :root:not(.dark) #mybliss .text-ll-green-static { color: var(--ll-green-static) !important; }
        :root:not(.dark) #mybliss .text-ll-light-static\/80 { color: rgba(238, 238, 238, 0.8) !important; }
        :root:not(.dark) #mybliss .text-ll-light-static\/70 { color: rgba(238, 238, 238, 0.7) !important; }
        :root:not(.dark) #mybliss .text-ll-light-static\/60 { color: rgba(238, 238, 238, 0.6) !important; }

        /* Fix: Text on dark backgrounds (RasXeko) stays light in light mode */
        :root:not(.dark) #rasxeko * {
            --color-text-primary: var(--ll-light-static);
            --color-text-secondary: rgba(238, 238, 238, 0.8);
        }
        :root:not(.dark) #rasxeko .text-ll-light-static { color: var(--ll-light-static) !important; }
        :root:not(.dark) #rasxeko .text-ll-green-static { color: var(--ll-green-static) !important; }
        :root:not(.dark) #rasxeko .text-ll-light-static\/90 { color: rgba(238, 238, 238, 0.9) !important; }
        :root:not(.dark) #rasxeko .text-ll-light-static\/70 { color: rgba(238, 238, 238, 0.7) !important; }


        /* Geometric Background */
        .geometric-bg {
            background-image: linear-gradient(rgba(171, 200, 88, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 200, 88, 0.03) 1px, transparent 1px);
            background-size: 30px 30px;
            background-position: center;
        }
        :root:not(.dark) .geometric-bg {
            /* On light mode, use purple for the grid */
            background-image: linear-gradient(rgba(56, 26, 81, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 26, 81, 0.05) 1px, transparent 1px);
        }


        /* Glassmorphism Card Style */
        .glass-card {
            background-color: var(--color-glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--color-border);
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            border-color: rgba(171, 200, 88, 0.5); /* ll-green-static at 50% */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        /* Glassmorphism for light BG (e.g., chatbot) */
        .glass-card-light {
            background-color: rgba(255, 255, 255, 0.5); 
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        .glass-card-light:hover {
            border-color: rgba(171, 200, 88, 0.5); /* ll-green-static at 50% */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        /* Make chatbot light/dark aware */
        :root.dark .glass-card-light {
            background-color: rgba(50, 50, 50, 0.5); /* Darker glass */
            border: 1px solid rgba(255, 255, 255, 0.1);
        }


        /* Products Page: Purple Card */
        .glass-card-purple {
            background-color: rgba(56, 26, 81, 0.25);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(238, 238, 238, 0.1);
            transition: all 0.3s ease;
        }
        .glass-card-purple:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            border-color: rgba(238, 238, 238, 0.5); /* White glow */
        }
        /* Products Page: Dark Card */
        .glass-card-dark {
            background-color: rgba(238, 238, 238, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        .glass-card-dark:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            border-color: rgba(171, 200, 88, 0.5); /* Green glow */
        }
        /* Button style from OG for product CTAs */
        .cta-button-secondary-light {
            background-color: transparent;
            border: 2px solid var(--ll-light-static);
            color: var(--ll-light-static);
            transition: all 0.3s ease;
        }
        .cta-button-secondary-light:hover {
             background-color: var(--ll-light-static);
             color: var(--ll-purple-static);
             transform: translateY(-2px);
        }
        .cta-button-secondary-dark {
            background-color: transparent;
            border: 2px solid var(--ll-green-static);
            color: var(--ll-green-static);
            transition: all 0.3s ease;
        }
        .cta-button-secondary-dark:hover {
            background-color: var(--ll-green-static);
            color: var(--ll-dark-static);
            transform: translateY(-2px);
        }

        /* Update nav link styling */
        nav .nav-link {
            transition: color 0.2s ease-in-out;
            position: relative; /* Needed for active state underline */
            color: var(--color-text-secondary);
        }
        nav .nav-link:hover {
            color: var(--color-accent);
        }
        nav .nav-link.active {
            font-weight: 700;
            color: var(--color-accent);
            position: relative;
        }
        nav .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -8px; /* Adjust as needed */
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: var(--color-accent);
            border-radius: 2px;
        }

        /* Main content page transitions */
        .content-select {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        .content-select.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Custom Form Input Styles */
        .form-input {
            background-color: var(--color-form-bg);
            border: 1px solid var(--color-form-border);
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 1rem;
            color: var(--color-form-text);
            transition: all 0.3s ease;
        }
        .form-input:focus {
            outline: none;
            background-color: var(--color-form-bg-focus);
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(171, 200, 88, 0.3); /* ll-green-static glow */
        }
        .form-input::placeholder {
            color: var(--color-form-placeholder);
        }
        
        /* Custom Checkbox Styles */
        .custom-checkbox {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid var(--color-checkbox-border);
            border-radius: 4px;
            background-color: transparent;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease-in-out;
            display: inline-block;
            vertical-align: middle;
            flex-shrink: 0; /* Prevents shrinking in flex layout */
        }
        .custom-checkbox:checked {
            background-color: var(--color-accent);
            border-color: var(--color-accent);
        }
        .custom-checkbox:checked::after {
            content: '✔';
            font-size: 1rem;
            color: var(--color-accent-text); /* Use dynamic text color for accent */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1;
        }

        /* Chatbot Styles */
        #chatbot-fab {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
            background-color: var(--ll-purple-static);
            border: 2px solid var(--ll-green-static);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        #chatbot-fab:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 25px rgba(171, 200, 88, 0.3);
        }
        #chatbot-window {
            position: fixed;
            bottom: 6.5rem;
            right: 2rem;
            z-index: 1000;
            width: 360px;
            height: 480px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transform: scale(0.9) translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: bottom right;
        }
        #chatbot-window.visible {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        
        /* Custom scrollbar for chat */
        #chatbot-body::-webkit-scrollbar {
            width: 6px;
        }
        #chatbot-body::-webkit-scrollbar-track {
            background: transparent;
        }
        #chatbot-body::-webkit-scrollbar-thumb {
            background-color: var(--ll-purple-static);
            border-radius: 20px;
            border: 3px solid transparent;
        }
        
        :root:not(.dark) #chatbot-window {
            /* Use light glass card style */
            background-color: rgba(255, 255, 255, 0.5); 
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        :root:not(.dark) #chatbot-header {
            background-color: rgba(255, 255, 255, 0.5);
            border-color: rgba(0, 0, 0, 0.1);
        }
        :root:not(.dark) #chatbot-footer {
            background-color: rgba(255, 255, 255, 0.5);
            border-color: rgba(0, 0, 0, 0.1);
        }
        :root:not(.dark) #chatbot-input {
            background-color: rgba(255, 255, 255, 0.8) !important;
            color: var(--ll-dark-static) !important;
            border-color: rgba(0, 0, 0, 0.2) !important;
        }
        :root:not(.dark) .chatbot-text {
            color: var(--ll-dark-static);
        }

        /* Client Logo Grayscale Effect for Homepage */
        .client-logo-wrapper {
            filter: grayscale(100%) opacity(0.6);
            transition: all 0.3s ease;
        }
        img.h-12 {
		height:100px !important;
		width:auto;
		}
		
        .client-logo-wrapper:hover {
            filter: grayscale(0%) opacity(1);
        }
         :root.dark .client-logo-wrapper {
            /* In dark mode, start with them whiter */
            filter: grayscale(100%) brightness(1.5) opacity(0.6);
        }
        :root.dark .client-logo-wrapper:hover {
            filter: grayscale(0%) brightness(1) opacity(1);
        }

        /* Placeholder styles */
        .placeholder-box {
            border: 2px dashed var(--color-border);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            background-color: var(--color-bg-secondary);
            color: var(--color-text-secondary);
            font-size: 0.9rem;
            line-height: 1.3;
            height: 100%; /* Ensure it fills parent height */
            box-sizing: border-box; /* Include padding in height */
            border-radius: 8px; /* Match card rounding */
            min-height: 50px; /* Minimum height */
        }
        
        /* This is for the Tailwind dark: utility classes to work */
        .dark .dark\:hidden { display: none; }
        .dark .dark\:block { display: block; }
        .dark .dark\:inline { display: inline; }
        /* ... add more as needed if not using Tailwind's JIT/config */