/* ===================================
       CUSTOM DESIGN SYSTEM VARIABLES
       Generated for General Business
       FIXED: Read more buttons have guaranteed contrast
       UPDATED: Better font choices for readability
       =================================== */

    :root {
        /* Color Scheme: Amber Energy */
        --color-primary: #451a03;
        --color-accent: #f59e0b;
        --color-text: #fffbeb;
        --color-background: #1a0a01;
        
        /* Typography */
        --font-heading: 'Nunito', serif;
        --font-body: 'Roboto', sans-serif;
        
        /* Gradients */
        --hero-gradient: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.3) 100%);
    }

    /* FORCE COLOR SCHEME APPLICATION - Override Tailwind classes */
    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 */
    .bg-gray-800, .bg-gray-800.p-6, .bg-gray-800.rounded-lg,
    .feature-item, .blog-preview, .form-card, .card {
        background-color: color-mix(in srgb, var(--color-primary) 85%, black 15%) !important;
        border-color: color-mix(in srgb, var(--color-primary) 70%, white 30%) !important;
    }

    /* Even darker variant for nested cards */
    .bg-gray-900, .bg-gray-900.rounded-lg {
        background-color: color-mix(in srgb, var(--color-primary) 60%, black 40%) !important;
    }

    /* FIXED: Read More Button Specific Styling - High Contrast Guaranteed */
    .read-more-btn, 
    .blog-preview a[href*="blog"][href$=".php"]:last-child,
    .blog-preview .read-more {
        background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, white 20%)) !important;
        color: color-mix(in srgb, var(--color-background) 90%, black 10%) !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 {
        /* NOTE: avoid >100% in color-mix; browsers treat it as invalid */
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 70%, white 30%), var(--color-accent)) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 20px color-mix(in srgb, var(--color-accent) 50%, transparent 50%) !important;
        border-color: color-mix(in srgb, var(--color-accent) 70%, white 30%) !important;
    }

    /* Add a 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 (Form submits, etc) */
    .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 color-mix(in srgb, var(--color-accent) 70%, white 30%) !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: color-mix(in srgb, var(--color-accent) 80%, white 20%) !important;
        color: var(--color-text) !important;
    }

    /* Secondary buttons */
    .bg-gray-600, .bg-gray-500 {
        background-color: color-mix(in srgb, var(--color-primary) 70%, white 30%) !important;
    }

    .bg-gray-600:hover, .bg-gray-500:hover, .hover\:bg-gray-700:hover {
        background-color: color-mix(in srgb, var(--color-primary) 60%, white 40%) !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: color-mix(in srgb, var(--color-text) 90%, black 10%) !important;
    }

    /* Lighter text variants */
    .text-gray-400, .text-gray-500, .text-sm {
        color: color-mix(in srgb, var(--color-text) 70%, black 30%) !important;
    }

    /* Footer */
    footer, footer.bg-gray-800 {
        background-color: color-mix(in srgb, var(--color-primary) 70%, black 30%) !important;
    }

    /* Forms and Inputs */
    input, textarea, select, .form-control {
        background-color: color-mix(in srgb, var(--color-background) 90%, white 10%) !important;
        border: 1px solid color-mix(in srgb, var(--color-primary) 50%, white 50%) !important;
        color: var(--color-text) !important;
    }

    input:focus, textarea:focus, select:focus, .form-control:focus {
        border-color: var(--color-accent) !important;
        outline: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent 50%) !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: color-mix(in srgb, var(--color-accent) 70%, white 30%) !important;
    }

    /* Social Icons */
    .social-icon {
        color: color-mix(in srgb, var(--color-text) 60%, black 40%) !important;
    }

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

    /* Newsletter/Contact section background */
    #contact, .forms-container {
        background-color: color-mix(in srgb, var(--color-background) 95%, var(--color-primary) 5%) !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: color-mix(in srgb, var(--color-accent) 80%, white 20%) !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) {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn:not(.read-more-btn)::before, button:not(.read-more-btn)::before, a.btn:not(.read-more-btn)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
    z-index: -1;
}
.btn:hover:not(.read-more-btn)::before, button:hover:not(.read-more-btn)::before, a.btn:hover:not(.read-more-btn)::before {
    left: 100%;
}
.btn:hover:not(.read-more-btn), button:hover:not(.read-more-btn), a.btn:hover:not(.read-more-btn) {
    background-color: var(--color-accent) !important;
}

    /* Card Hover Effects with Theme Colors - NOW APPLIES TO BLOG CARDS TOO */
    
/* Card tilt effect - applies to features AND blog cards */
.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 */
    
.section-divider {
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%231a0a01'/%3E%3C/svg%3E");
    background-size: cover;
}

    /* Image Filters */
    
/* Blur hover effect for all card images */
.feature-image, .blog-preview img, .card img {
    transition: filter 0.3s;
}
.feature-image:hover, .blog-preview:hover img, .card:hover img {
    filter: blur(3px);
}

    /* SIMPLIFIED Blog Layout Style: adaptive_2_3 */
    
/* ========================================
   ADAPTIVE BLOG LAYOUT SYSTEM
   Intelligently adjusts based on post count
   ======================================== */

/* Base blog card structure - consistent for all layouts */
.blog-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: color-mix(in srgb, var(--color-primary) 85%, black 15%);
    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: color-mix(in srgb, var(--color-text) 85%, black 15%);
}

/* FIXED: Ensure Read More button is always visible and prominent */
.blog-preview .read-more,
.blog-preview a[href*="blog"][href$=".php"]:last-child {
    /* These styles are handled by the main Read More button styles above */
    margin-top: auto;
    align-self: flex-start;
}

/* Card styling variations for visual interest */
.blog-preview:nth-child(odd) {
    background: color-mix(in srgb, var(--color-primary) 80%, black 20%);
}

.blog-preview:nth-child(even) {
    background: color-mix(in srgb, var(--color-primary) 90%, black 10%);
}

/* Subtle gradient overlays on images */
.blog-preview img {
    position: relative;
}

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

/* Adaptive 2-3 Layout: Adjusts intelligently based on post count */
@media (min-width: 1024px) {
    .blog-preview-section {
        display: grid;
        gap: 2rem;
    }
    
    /* 5 posts: 2 centered above, 3 below */
    .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: 2 / 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: 4 / 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: 1 / 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: 3 / 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: 5 / span 2;
    }
    
    /* 6 posts: 3-3 (two rows of three) */
    .blog-preview-section:has(.blog-preview:nth-child(6)):not(:has(.blog-preview:nth-child(7))) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 7 posts: 3-3-1 (centered last one) */
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(1),
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(2),
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(3) {
        grid-column: span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(4),
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(5),
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(6) {
        grid-column: span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(7)):not(:has(.blog-preview:nth-child(8))) .blog-preview:nth-child(7) {
        grid-column: 3 / span 2;
    }
    
    /* 8 posts: 3-3-2 (centered last row) */
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(1),
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(2),
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(3) {
        grid-column: span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(4),
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(5),
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(6) {
        grid-column: span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(7) {
        grid-column: 2 / span 2;
    }
    
    .blog-preview-section:has(.blog-preview:nth-child(8)):not(:has(.blog-preview:nth-child(9))) .blog-preview:nth-child(8) {
        grid-column: 4 / span 2;
    }
    
    /* 9+ posts: standard 3-column grid */
    .blog-preview-section:has(.blog-preview:nth-child(9)) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Default for 4 or fewer posts */
    .blog-preview-section:not(:has(.blog-preview:nth-child(5))) {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

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

/* Mobile layout */
@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) {
        /* Boost menu on desktop for better readability */
        header nav { 
            font-size: 1.1em;
        }
        
        /* Boost hero/intro headings on desktop */
        .hero h1, #hero h1, .intro-section h1 {
            font-size: 115%;
        }
        
        /* Ensure minimum readable size for body text */
        body {
            font-size: 16px;
        }
        
        /* Boost navigation links */
        nav a {
            font-size: 1.05em;
        }
    }

    /* Additional font size safety for smaller fonts */
    @media (min-width: 768px) {
        /* Ensure cards and sections have readable text */
        .feature-item, .blog-preview, .card {
            font-size: 0.95rem;
        }
        
        /* Boost paragraph text slightly */
        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;
    }

    /* Only show hover effects through color changes */
    .blog-preview h4:hover {
        color: color-mix(in srgb, var(--color-accent) 80%, white 20%) !important;
        transition: color 0.3s ease;
    }