/*
Theme Name: School Tak - Saraswati Public School
Theme URI: https://saraswati.edu.in
Author: School Tak Design Team
Author URI: https://saraswati.edu.in
Description: A modern, ultra-vibrant, SEO-optimized WordPress Theme featuring the official School Tak brand for Saraswati Public Senior Secondary School. Fully compatible with Elementor, dynamic News category publishing, customizable Hero, Portals, Menus, Gallery, 10 FAQs per page, and mobile-friendly footer.
Version: 1.1.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saraswati
Tags: education, school, elementor, responsive-layout, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

/* Core Theme Styles & Vibrant Animations */
:root {
    --pop-cyan: #06B6D4;
    --pop-purple: #8B5CF6;
    --pop-pink: #EC4899;
    --pop-yellow: #F59E0B;
    --pop-lime: #84CC16;
    --pop-orange: #F97316;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-heading {
    font-family: 'Fredoka', sans-serif;
}

.font-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Vibrant Card Hover Physics */
.vibrant-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vibrant-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.06);
}

/* Dropdown Animation */
.group:hover .group-hover\:block {
    display: block;
    animation: fadeInDropdown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth Accordion Details */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary ~ * {
    animation: sweep 0.3s ease-in-out;
}
@keyframes sweep {
    0%    {opacity: 0; transform: translateY(-6px)}
    100%  {opacity: 1; transform: translateY(0)}
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
    .vibrant-card:hover {
        transform: translateY(-3px);
    }
}