/* 
    Singapore School Kinderland - Global Styles
    This file contains custom utilities and animations not provided by default Tailwind CSS.
*/

/* ==========================================
   GLOBAL MOBILE FIXES
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
}

/* Mobile touch tap highlight */
button, a, input, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 111, 61, 0.1);
}

/* Mobile menu animation */
#mobile-menu {
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}

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

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Scroll Reveal Animations - Polished Timing */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Glassmorphism Utilities */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 111, 61, 0.05);
}

/* Subtle Inner Glow */
.inner-glow {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 10px 30px -10px rgba(33, 42, 102, 0.08);
}

/* Floating Animation */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
    animation: float 8s ease-in-out infinite;
}
.animate-float-delayed {
    animation: float 10s ease-in-out 2s infinite;
}
.animate-float-slow {
    animation: float 12s ease-in-out 1s infinite;
}

/* Shimmer Animation */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.animate-shimmer {
    background: linear-gradient(90deg, 
        rgba(0, 111, 61, 0.05) 0%, 
        rgba(244, 179, 20, 0.15) 50%, 
        rgba(0, 111, 61, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 4s infinite linear;
}

/* Interactive Hover Effects */
.hover-lift-3d {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.hover-lift-3d:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(33, 42, 102, 0.15), 0 0 0 1px rgba(255,255,255,0.8) inset;
}

/* Magnetic Glow Button */
.btn-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.btn-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
    pointer-events: none;
}
.btn-glow:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

@keyframes gold-shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(200%) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .animate-shimmer, .btn-glow::after, .hover-lift-3d, .reveal-up {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* Rich Text Editor Output Styling (Tailwind resets these by default) */
.quill-content p, #modal-desc p { margin-bottom: 0.75em; }
.quill-content strong, #modal-desc strong { font-weight: bold; }
.quill-content em, #modal-desc em { font-style: italic; }
.quill-content u, #modal-desc u { text-decoration: underline; }
.quill-content s, #modal-desc s { text-decoration: line-through; }
.quill-content a, #modal-desc a { color: #006F3D; text-decoration: underline; }
.quill-content a:hover, #modal-desc a:hover { color: #F4B314; }
.quill-content ol, #modal-desc ol { list-style-type: decimal; margin-left: 1.5em; margin-bottom: 0.75em; }
.quill-content ul, #modal-desc ul { list-style-type: disc; margin-left: 1.5em; margin-bottom: 0.75em; }
.quill-content li, #modal-desc li { margin-bottom: 0.25em; }


/* ==========================================
   COMPREHENSIVE RESPONSIVE STYLES
   Mobile-first approach for all devices
   ========================================== */

/* ---- TYPOGRAPHY SCALE (Mobile) ---- */
@media (max-width: 767px) {
    .font-headline-lg, .text-headline-lg {
        font-size: clamp(1.8rem, 8vw, 3rem) !important;
        line-height: 1.15 !important;
    }
    .font-headline-md, .text-headline-md {
        font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }
    .font-headline-sm, .text-headline-sm {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        line-height: 1.25 !important;
    }
    .font-body-lg, .text-body-lg {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}

/* ---- HEADER / NAV ---- */
@media (max-width: 1023px) {
    #top-nav nav {
        display: none !important;
    }
    #top-nav .enroll-btn-desktop {
        display: none !important;
    }
    button[aria-label="Toggle Menu"] {
        display: flex !important;
    }
}

/* ---- HERO SECTIONS (Mobile) ---- */
@media (max-width: 767px) {
    section.relative.w-full.h-\\[614px\\],
    section.relative.w-full.h-\\[500px\\],
    section.relative.w-full.h-\\[400px\\] {
        height: auto !important;
        min-height: 340px !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ---- GRID FIXES (Mobile) ---- */
@media (max-width: 767px) {
    /* Any direct grid children on mobile should stack */
    .auto-rows-\\[300px\\] {
        grid-auto-rows: auto !important;
    }
    /* Bento grids */
    .md\\:row-span-2 {
        grid-row: span 1 !important;
    }
}

/* ---- IMAGE FIXES (Mobile) ---- */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .aspect-\\[4\\/3\\] { aspect-ratio: 4/3; }
    .aspect-video { aspect-ratio: 16/9; }
    .aspect-square { aspect-ratio: 1/1; }
}

/* ---- FORM FIXES (Mobile) ---- */
@media (max-width: 767px) {
    .form-section input,
    .form-section select,
    .form-section textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        width: 100% !important;
    }
    /* Step indicator text */
    #step-btn-1 span:last-child,
    #step-btn-2 span:last-child,
    #step-btn-3 span:last-child {
        font-size: 11px;
    }
    /* Enrollment form padding */
    #enrollmentForm > div {
        padding: 1.25rem !important;
    }
}

/* ---- CARD PADDING (Mobile) ---- */
@media (max-width: 767px) {
    .p-10 { padding: 1.25rem !important; }
    .p-12 { padding: 1.5rem !important; }
    .p-16 { padding: 1.75rem !important; }
    .px-10 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .gap-16 { gap: 2rem !important; }
    .gap-12 { gap: 1.5rem !important; }
}

/* ---- BUTTON / CTA (Mobile) ---- */
@media (max-width: 767px) {
    button, .btn, a[class*="rounded-full"] {
        min-height: 44px; /* Touch target */
        touch-action: manipulation;
    }
}

/* ---- GALLERY (Mobile) ---- */
@media (max-width: 480px) {
    #gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
}

/* ---- FOOTER (Mobile) ---- */
@media (max-width: 767px) {
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    footer [class*="col-span"] {
        grid-column: span 1 !important;
    }
}

/* ---- TABLE OVERFLOW FIX (Mobile) ---- */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* ---- PROGRAMS PAGE (Mobile) ---- */
@media (max-width: 767px) {
    /* Nursery section 3-col grid */
    .col-span-1.md\\:col-span-4 {
        min-height: 220px !important;
    }
    .col-span-1.md\\:col-span-8 {
        padding: 1.5rem !important;
    }
}

/* ---- TABLET SPECIFIC ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .md\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Keep 2-col on tablet for readability */
}

/* ---- PREVENT HORIZONTAL SCROLL ---- */
.max-w-max-width {
    max-width: min(1280px, 100vw);
}

/* Overflowing absolute elements */
.overflow-hidden {
    overflow: hidden !important;
}

/* ==========================================
   CRITICAL MOBILE POLISH - FINAL
   ========================================== */

/* ---- NAV MOBILE ---- */
@media (max-width: 1023px) {
    #top-nav > div > nav,
    #top-nav > div > a[href="/enroll"] {
        display: none !important;
    }
}

/* ---- HERO SECTION MOBILE ---- */
@media (max-width: 767px) {
    /* Hero full height ? auto with min */
    section[class*="min-h-[90vh]"] {
        min-height: 100svh;
        padding-top: 100px;
        padding-bottom: 2rem;
    }
    /* Glass card inside hero */
    .glass-card {
        padding: 1.5rem !important;
    }
    /* Hide decorative bg blobs on mobile for performance */
    .blur-3xl, .blur-2xl {
        display: none;
    }
}

/* ---- STEP FORM (ENROLLMENT) MOBILE ---- */
@media (max-width: 767px) {
    /* Step tab labels */
    #step-btn-1, #step-btn-2, #step-btn-3 {
        padding: 0.75rem 0.25rem !important;
        gap: 0.5rem !important;
    }
    /* Make form body have proper padding */
    .form-section > div:first-child,
    .form-section {
        padding: 1.25rem !important;
    }
    /* Make Next/Back buttons full-width */
    .mt-12.flex.justify-end,
    .mt-12.flex.justify-between {
        flex-direction: column;
        gap: 0.75rem;
    }
    .mt-12.flex.justify-end button,
    .mt-12.flex.justify-between button {
        width: 100%;
        justify-content: center;
    }
}

/* ---- GALLERY LIGHTBOX MOBILE ---- */
@media (max-width: 767px) {
    #lightbox {
        padding: 1rem !important;
    }
    #lightbox-img {
        max-height: 70vh !important;
    }
}

/* ---- FOOTER MOBILE ---- */
@media (max-width: 767px) {
    footer .grid.grid-cols-1 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    footer .space-y-6 > div:first-child {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- PROGRAMS HERO IMAGE ---- */
@media (max-width: 767px) {
    /* Hide the decorative aside image in KG section */
    .hidden.md\\:block {
        display: none !important;
    }
}

/* ---- ENSURE INPUTS DON'T ZOOM ON IOS ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    font-size: 16px !important;
}

/* ---- SMOOTH SCROLL ---- */
html {
    scroll-behavior: smooth;
}

/* ---- TOUCH SCROLLING ---- */
.overflow-y-auto, .overflow-auto {
    -webkit-overflow-scrolling: touch;
}