/* ===================================
       CUSTOM DESIGN SYSTEM VARIABLES
       Generated for General Business
       SAFARI COMPATIBLE - No color-mix() functions
       =================================== */

    :root {
        /* Color Scheme: Modern Teal */
        --color-primary: #134e4a;
        --color-accent: #14b8a6;
        --color-text: #f0fdfa;
        --color-background: #042f2e;
        
        /* Pre-calculated color variations for Safari compatibility */
        --color-card-bg: #10423e;
        --color-card-border: #598380;
        --color-card-dark: #0b2e2c;
        --color-accent-hover: #42c6b7;
        --color-accent-light: #5acdc0;
        --color-accent-dark: #032a29;
        --color-text-muted: #d8e3e1;
        --color-text-faded: #a8b1af;
        --color-primary-light: #598380;
        --color-primary-lighter: #719492;
        --color-primary-dark: #0d3633;
        --color-bg-elevated: #1d4342;
        --color-bg-subtle: #04302f;
        --color-footer-bg: #0d3633;
        --color-accent-glow: #0c736a;
        --color-overlay-light: #89a6a4;
        --color-input-bg: #1d4342;
        --color-input-border: #89a6a4;
        
        /* Typography */
        --font-heading: 'Lato', serif;
        --font-body: 'Source Sans Pro', sans-serif;
        
        /* Gradients */
        --hero-gradient: linear-gradient(45deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.2) 100%);
    }

    /* FORCE COLOR SCHEME APPLICATION */
    body, body.bg-gray-900 {
        background-color: var(--color-background) !important;
        color: var(--color-text) !important;
        font-family: var(--font-body);
    }

    /* All text elements */
    body * {
        color: inherit;
    }

    /* Header and Navigation */
    header, header.bg-gray-700, .bg-gray-700 {
        background-color: var(--color-primary) !important;
    }

    /* Mobile menu */
    #mobile-menu {
        background-color: var(--color-primary) !important;
    }

    /* Cards and Sections - Using pre-calculated colors */
    .bg-gray-800, .bg-gray-800.p-6, .bg-gray-800.rounded-lg,
    .feature-item, .blog-preview, .form-card, .card {
        background-color: var(--color-card-bg) !important;
        border-color: var(--color-card-border) !important;
    }

    /* Even darker variant for nested cards */
    .bg-gray-900, .bg-gray-900.rounded-lg {
        background-color: var(--color-card-dark) !important;
    }

    /* READ MORE BUTTON - High Contrast with pre-calculated colors */
    .read-more-btn, 
    .blog-preview a[href*="blog"][href$=".php"]:last-child,
    .blog-preview .read-more {
        background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)) !important;
        color: var(--color-accent-dark) !important;
        border: 2px solid var(--color-accent) !important;
        font-weight: 600 !important;
        padding: 0.5rem 1rem !important;
        border-radius: 0.375rem !important;
        display: inline-block !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Read More Button Hover State */
    .read-more-btn:hover,
    .blog-preview a[href*="blog"][href$=".php"]:last-child:hover,
    .blog-preview .read-more:hover {
        background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 20px var(--color-accent-glow) !important;
        border-color: var(--color-accent-light) !important;
    }

    /* Shine effect on hover */
    .read-more-btn::before,
    .blog-preview a[href*="blog"][href$=".php"]:last-child::before,
    .blog-preview .read-more::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left 0.5s;
    }

    .read-more-btn:hover::before,
    .blog-preview a[href*="blog"][href$=".php"]:last-child:hover::before,
    .blog-preview .read-more:hover::before {
        left: 100%;
    }

    /* Other Buttons - Primary */
    .bg-blue-500:not(.read-more-btn), .btn-primary, button[type="submit"],
    .bg-blue-500:not(:hover):not(.read-more-btn), .btn {
        background-color: var(--color-accent) !important;
        color: var(--color-text) !important;
        border: 1px solid var(--color-accent-light) !important;
    }

    .bg-blue-500:hover:not(.read-more-btn), .bg-blue-600:not(.read-more-btn), 
    .hover\:bg-blue-600:hover:not(.read-more-btn),
    .btn:hover, button[type="submit"]:hover {
        background-color: var(--color-accent-hover) !important;
        color: var(--color-text) !important;
    }

    /* Secondary buttons */
    .bg-gray-600, .bg-gray-500 {
        background-color: var(--color-primary-light) !important;
    }

    .bg-gray-600:hover, .bg-gray-500:hover, .hover\:bg-gray-700:hover {
        background-color: var(--color-primary-lighter) !important;
    }

    /* Text Colors - Headings */
    .text-blue-400, .text-blue-300, h1, h2, h3, h4, h5, h6,
    .text-4xl, .text-3xl, .text-2xl, .text-xl {
        color: var(--color-accent) !important;
        font-family: var(--font-heading);
    }

    /* Regular text */
    .text-gray-200, .text-gray-300, .text-white, p, li, span:not(.social-icon) {
        color: var(--color-text-muted) !important;
    }

    /* Lighter text variants */
    .text-gray-400, .text-gray-500, .text-sm {
        color: var(--color-text-faded) !important;
    }

    /* Footer */
    footer, footer.bg-gray-800 {
        background-color: var(--color-footer-bg) !important;
    }

    /* Forms and Inputs */
    input, textarea, select, .form-control {
        background-color: var(--color-input-bg) !important;
        border: 1px solid var(--color-input-border) !important;
        color: var(--color-text) !important;
    }

    input:focus, textarea:focus, select:focus, .form-control:focus {
        border-color: var(--color-accent) !important;
        outline: 2px solid var(--color-accent-glow) !important;
        outline-offset: 2px;
    }

    /* Links */
    a:not(.btn):not(.social-icon):not(.read-more-btn):not([href*="blog"][href$=".php"]) {
        color: var(--color-accent) !important;
    }

    a:not(.btn):not(.social-icon):not(.read-more-btn):not([href*="blog"][href$=".php"]):hover {
        color: var(--color-accent-light) !important;
    }

    /* Social Icons */
    .social-icon {
        color: var(--color-text-faded) !important;
    }

    .social-icon:hover {
        color: var(--color-accent) !important;
    }

    /* Newsletter/Contact section background */
    #contact, .forms-container {
        background-color: var(--color-bg-subtle) !important;
    }

    /* Mobile banner sections */
    .mobile-banner, .mobile-footer-banner {
        background-color: var(--color-primary) !important;
    }

    /* Parallax Overlays with custom gradient */
    .parallax-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--hero-gradient);
        z-index: 1;
    }

    .parallax-content > * {
        position: relative;
        z-index: 2;
    }

    /* Cookie consent popup */
    #cookieConsent {
        background-color: var(--color-primary) !important;
        color: var(--color-text) !important;
    }

    /* Search forms */
    .expandable-search-form, #expandable-search {
        background-color: var(--color-primary) !important;
    }

    /* Back to top button */
    #returnToTopButton {
        background-color: var(--color-accent) !important;
    }

    #returnToTopButton:hover {
        background-color: var(--color-accent-hover) !important;
    }

    /* Carousel navigation buttons */
    .carousel-nav {
        background-color: var(--color-primary) !important;
        color: var(--color-text) !important;
    }

    .carousel-nav:hover:not(:disabled) {
        background-color: var(--color-accent) !important;
    }

    /* Button Hover Effects with Theme Colors */
    
.btn:not(.read-more-btn), button:not(.read-more-btn), a.btn:not(.read-more-btn) {
    transition: all 0.3s ease;
}
.btn:hover:not(.read-more-btn), button:hover:not(.read-more-btn), a.btn:hover:not(.read-more-btn) {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    background-color: var(--color-accent) !important;
}

    /* Card Hover Effects with Theme Colors */
    
.feature-item, .blog-preview, .card {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}
.feature-item:hover, .blog-preview:hover, .card:hover {
    transform: perspective(1000px) rotateY(5deg) rotateX(-5deg);
}

    /* Section Dividers */
    

    /* Image Filters */
    
.feature-image, .blog-preview img, .card img {
    transition: filter 0.3s;
}
.feature-image:hover, .blog-preview:hover img, .card:hover img {
    filter: brightness(1.2);
}

    /* Blog Layout Style */
    
/* ========================================
   ADAPTIVE BLOG LAYOUT SYSTEM
   ======================================== */

.blog-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--color-card-bg);
    border-radius: 0.5rem;
}

.blog-preview img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.blog-preview .blog-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-preview h3, .blog-preview h4 {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-accent);
    font-family: var(--font-heading);
}

.blog-preview p {
    margin-bottom: 1rem;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--color-text-muted);
}

.blog-preview .read-more,
.blog-preview a[href*="blog"][href$=".php"]:last-child {
    margin-top: auto;
    align-self: flex-start;
}

.blog-preview:nth-child(odd) {
    background: var(--color-card-bg);
}

.blog-preview:nth-child(even) {
    background: var(--color-card-dark);
}

.blog-preview:hover img {
    opacity: 0.9;
}

/* Adaptive 3-2 Layout */
@media (min-width: 1024px) {
    .blog-preview-section {
        display: grid;
        gap: 2rem;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(1) {
        grid-column: 1 / span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(2) {
        grid-column: 3 / span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(3) {
        grid-column: 5 / span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(4) {
        grid-column: 2 / span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(5)):not(:has(.blog-preview:nth-child(6))) .blog-preview:nth-child(5) {
        grid-column: 4 / span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(6)):not(:has(.blog-preview:nth-child(7))) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(9)) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .blog-preview-section:not(:has(.blog-preview:nth-child(5))) {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .blog-preview-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    .blog-preview-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
    
    /* Enhanced font size boost for better readability */
    @media (min-width: 1024px) {
        header nav { 
            font-size: 1.1em;
        }
        
        .hero h1, #hero h1, .intro-section h1 {
            font-size: 115%;
        }
        
        body {
            font-size: 16px;
        }
        
        nav a {
            font-size: 1.05em;
        }
    }

    @media (min-width: 768px) {
        .feature-item, .blog-preview, .card {
            font-size: 0.95rem;
        }
        
        p {
            font-size: 1rem;
            line-height: 1.6;
        }
    }

    /* Ensure blog teaser links never have underlines */
    .blog-preview a, .blog-preview a:hover,
    .next-post a, .next-post a:hover {
        text-decoration: none !important;
    }

    .blog-preview h4:hover {
        color: var(--color-accent-hover) !important;
        transition: color 0.3s ease;
    }