/**
 * Saraswati Public School - Theme Stylesheet
 * Contains Tailwind styling rules, color tokens, and custom animation classes
 */

/* Color Utility Variables */
:root {
    --popCyan: #06B6D4;
    --popPurple: #8B5CF6;
    --popPink: #EC4899;
    --popYellow: #F59E0B;
    --popLime: #84CC16;
    --popOrange: #F97316;
}

/* Custom Colors Classes */
.text-popCyan { color: #06B6D4 !important; }
.text-popPurple { color: #8B5CF6 !important; }
.text-popPink { color: #EC4899 !important; }
.text-popYellow { color: #F59E0B !important; }
.text-popLime { color: #84CC16 !important; }
.text-popOrange { color: #F97316 !important; }

.bg-popCyan { background-color: #06B6D4 !important; }
.bg-popPurple { background-color: #8B5CF6 !important; }
.bg-popPink { background-color: #EC4899 !important; }
.bg-popYellow { background-color: #F59E0B !important; }
.bg-popLime { background-color: #84CC16 !important; }
.bg-popOrange { background-color: #F97316 !important; }

.border-popCyan { border-color: #06B6D4 !important; }
.border-popPurple { border-color: #8B5CF6 !important; }
.border-popPink { border-color: #EC4899 !important; }
.border-popYellow { border-color: #F59E0B !important; }
.border-popLime { border-color: #84CC16 !important; }
.border-popOrange { border-color: #F97316 !important; }

.hover\:text-popPink:hover { color: #EC4899 !important; }
.hover\:text-popYellow:hover { color: #F59E0B !important; }
.hover\:text-popPurple:hover { color: #8B5CF6 !important; }
.hover\:text-popLime:hover { color: #84CC16 !important; }
.hover\:text-popOrange:hover { color: #F97316 !important; }
.hover\:text-popCyan:hover { color: #06B6D4 !important; }

.hover\:bg-popPink:hover { background-color: #EC4899 !important; }
.hover\:bg-popPurple:hover { background-color: #8B5CF6 !important; }
.hover\:bg-popCyan:hover { background-color: #06B6D4 !important; }
.hover\:bg-popLime:hover { background-color: #84CC16 !important; }
.hover\:bg-popOrange:hover { background-color: #F97316 !important; }
.hover\:bg-popYellow:hover { background-color: #F59E0B !important; }

/* Font definitions */
.font-heading {
    font-family: 'Fredoka', cursive, sans-serif !important;
}
.font-body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Vibrant Card hover transition */
.vibrant-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vibrant-card:hover {
    transform: translateY(-5px);
}

/* WordPress standard classes */
.aligncenter { display: block; margin: 0 auto; text-align: center; }
.alignleft { float: left; margin: 0 1.5em 1.5em 0; }
.alignright { float: right; margin: 0 0 1.5em 1.5em; }
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

/* Sticky Header adjustment for WP Admin Bar */
.admin-bar header.sticky {
    top: 36px;
}
@media screen and (max-width: 782px) {
    .admin-bar header.sticky {
        top: 48px;
    }
}

/* Gallery filtering transitions */
.gallery-item {
    transition: all 0.3s ease;
}
.gallery-item.hidden-tab {
    display: none !important;
}

/* Form alert styling */
.sps-form-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-top: 0.5rem;
}
.sps-form-success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.sps-form-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}