/*
Theme Name: JP Surf Bali
Theme URI: https://jpsurfbali.com
Author: JP Surf Bali
Description: Modern adventure surf school theme for JP Surf Bali. Azure Horizon design system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: jp-surf-bali
Tags: surf, bali, adventure, responsive, seo-friendly
*/

/* ─── Custom CSS ─── */

/* Admin bar offset */
.admin-bar #site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar #site-header {
        top: 46px;
    }
}
@media screen and (max-width: 600px) {
    .admin-bar #site-header {
        top: 0;
    }
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-nav {
    background: rgba(247, 250, 252, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card-shadow {
    box-shadow: 0 20px 40px rgba(26, 115, 232, 0.08);
}

.card-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.card-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 91, 191, 0.12);
}

.hero-gradient-dark {
    background: linear-gradient(to bottom, rgba(24, 28, 30, 0.4), rgba(24, 28, 30, 0.8));
}

.hero-gradient-light {
    background: linear-gradient(rgba(0, 91, 191, 0.1), rgba(247, 250, 252, 1));
}

@keyframes pulse-whatsapp {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0  rgba(45, 183, 66, 0.7); }
    70%  { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(45, 183, 66, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0  rgba(45, 183, 66, 0); }
}

.whatsapp-pulse {
    animation: pulse-whatsapp 2s infinite;
}

/* Mobile menu */
#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}

/* Nav scroll hide */
nav.nav-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

nav.nav-visible {
    transform: translateY(0);
    transition: transform 0.3s ease;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}