/*
Theme Name: Project-Nation Custom Theme
Theme URI: https://project-nation.com
Author: Your Name
Author URI: https://yourwebsite.com
Description: A custom WordPress theme for Project-Nation focused on software adoption and ROI, built with Tailwind CSS.
Version: 1.0
Tags: custom-layout, responsive, tailwind-css
Text Domain: project-nation-theme
*/

/* Custom styles for modern professional look and smooth transitions */
:root {
    --pn-slate: #1E293B; /* Deep slate gray */
    --pn-accent: #F97316; /* Electric Orange/Action */
    --pn-light: #F8FAFC; /* Light background */
    --pn-dark: #0F172A;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--pn-light); 
    scroll-behavior: smooth;
}
/* Lock body scroll when mobile menu is open */
body.no-scroll {
    overflow: hidden;
}

.pn-gradient-cta {
    background: linear-gradient(90deg, #F97316 0%, #EA580C 100%);
}
.pn-card-shadow {
    box-shadow: 0 10px 25px -5px rgba(30, 41, 59, 0.1), 0 4px 6px -2px rgba(30, 41, 59, 0.05);
}
/* Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Hero background pattern/gradient animation (Pulsating/Classy) */
.hero-pattern-pulsate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle dark/light gradient for depth */
    background: radial-gradient(circle at 10% 90%, rgba(51, 65, 85, 0.5) 0%, rgba(30, 41, 59, 0) 70%), 
                radial-gradient(circle at 90% 10%, rgba(51, 65, 85, 0.5) 0%, rgba(30, 41, 59, 0) 70%);
    background-size: 200% 200%;
    animation: pulse-bg 20s ease-in-out infinite alternate;
    opacity: 0.3; /* Subtle effect */
    z-index: 0; /* Keep it below content */
}
@keyframes pulse-bg {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
/* Custom style for accordion items, used in price.html */
.accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust height as needed for content */
}
.accordion-item.active .accordion-header svg {
    transform: rotate(180deg);
}
.accordion-header svg {
    transition: transform 0.3s ease;
}

/* Ensure WordPress content is styled correctly.
    These styles target content entered in the block editor.
*/
.entry-content h2 {
    @apply text-3xl font-bold text-pn-slate mt-8 mb-4;
}
.entry-content p {
    @apply text-lg text-gray-700 leading-relaxed mb-4;
}
.entry-content ul, .entry-content ol {
    @apply list-inside ml-4 text-gray-700 mb-4;
}
.entry-content ul {
    @apply list-disc;
}
.entry-content ol {
    @apply list-decimal;
}
 .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out, padding 0.5s ease-out;
            padding-top: 0;
            padding-bottom: 0;
        }
        .accordion-item.active .accordion-content {
            max-height: 500px; /* Large enough value to accommodate content */
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        .accordion-header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .accordion-icon {
            transition: transform 0.3s ease;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }

 /* Slider Custom CSS */
        .slider-container {
            overflow: hidden;
        }
        .slider-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slide {
            flex: 0 0 100%; /* Each slide takes full width */
        }

  .pn-gradient-cta {
            background: linear-gradient(90deg, #F97316 0%, #EA580C 100%);
        }
        .pn-card-shadow {
            box-shadow: 0 10px 25px -5px rgba(30, 41, 59, 0.1), 0 4px 6px -2px rgba(30, 41, 59, 0.05);
        }
        /* Animation Classes */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Specific style for the standard card hover effect */
        .blog-card:hover .card-title {
            color: var(--pn-accent);
        }
        /* Specific style for the featured post hover scale */
        .featured-card:hover {
            box-shadow: 0 20px 40px -10px rgba(249, 115, 22, 0.4); /* Strong accent glow */
        }