/*
Theme Name: VanKids Therapy
Theme URI: https://vankidstherapy.com
Description: A professional pediatric therapy clinic theme with modern design and evidence-based approach
Author: VanKids Team
Author URI: https://vankidstherapy.com
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vankids-therapy
Domain Path: /languages
Tags: responsive, custom-colors, custom-header, custom-logo, tailwind, therapy, healthcare
Requires at least: 6.0
Requires PHP: 7.4
*/

:root {
    --primary: #0b4581;
    --primary-fixed: #d5e3ff;
    --primary-container: #2e5d9a;
    --on-primary: #ffffff;
    --on-primary-fixed: #001c3b;
    --on-primary-fixed-variant: #0f4783;
    --inverse-primary: #a7c8ff;
    --primary-fixed-dim: #a7c8ff;
    
    --secondary: #805600;
    --secondary-fixed: #ffddb0;
    --secondary-fixed-dim: #ffba47;
    --secondary-container: #ffb639;
    --on-secondary: #ffffff;
    --on-secondary-fixed: #291800;
    --on-secondary-fixed-variant: #614000;
    --on-secondary-container: #6e4900;
    
    --tertiary: #32465c;
    --tertiary-container: #4a5e74;
    --tertiary-fixed: #cfe5ff;
    --tertiary-fixed-dim: #b3c9e2;
    --on-tertiary: #ffffff;
    --on-tertiary-fixed: #061d30;
    --on-tertiary-fixed-variant: #34485e;
    --on-tertiary-container: #c2d7f2;
    
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-error: #ffffff;
    --on-error-container: #93000a;
    
    --surface: #f7f9fc;
    --surface-dim: #d8dadd;
    --surface-bright: #f7f9fc;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f4f7;
    --surface-container: #eceef1;
    --surface-container-high: #e6e8eb;
    --surface-container-highest: #e0e3e6;
    --surface-variant: #e0e3e6;
    --surface-tint: #305f9c;
    --inverse-surface: #2d3133;
    --inverse-on-surface: #eff1f4;
    
    --on-surface: #191c1e;
    --on-surface-variant: #424750;
    --on-background: #191c1e;
    
    --outline: #737781;
    --outline-variant: #c3c6d1;
    --background: #f7f9fc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-surface);
    background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Display Styles */
.display-lg {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 6vw, 48px);
    line-height: 1.2;
    font-weight: 700;
}

.headline-lg {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.3;
    font-weight: 600;
}

.headline-md {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}

.body-lg {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.6;
    font-weight: 400;
}

.body-md {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.label-md {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* Button Styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffb639 0%, #ff9d00 100%);
    color: #291800;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px -5px rgba(255, 182, 57, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px -8px rgba(255, 182, 57, 0.6);
    background: linear-gradient(135deg, #ffc45d 0%, #ffac26 100%);
    color: #291800;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--primary);
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    border: 2px solid var(--primary);
    cursor: pointer;
    box-shadow: 0 8px 16px -4px rgba(11, 69, 129, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 24px -6px rgba(11, 69, 129, 0.25);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

.btn-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--primary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-text-link:hover {
    gap: 0.75rem;
}

.btn-text-link span {
    transition: transform 0.3s ease;
}

.btn-text-link:hover span {
    transform: translateX(4px);
}

/* Organic Blob */
.organic-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Wave Divider */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(134% + 1.3px);
    height: 60px;
}

/* Bouncy Hover Effect */
.bouncy-hover:hover {
    transform: scale(1.02);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom Shadow */
.custom-shadow {
    box-shadow: 0 20px 40px -15px rgba(46, 93, 154, 0.1);
}

/* Animations */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textShine {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

.premium-reveal {
    opacity: 0;
    animation: revealUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.shimmer-text {
    background: linear-gradient(90deg, #805600 0%, #ffb639 50%, #805600 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 6s linear infinite;
    display: inline-block;
}

/* Responsive Spacing */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.py-xl {
    padding: 80px 0;
}

.py-lg {
    padding: 48px 0;
}

.py-md {
    padding: 24px 0;
}

.px-gutter {
    padding: 0 24px;
}

/* Responsive Grid */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .md\:col-span-2 {
        grid-column: span 2;
    }

    .md\:row-span-2 {
        grid-row: span 2;
    }
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-nav {
        display: block;
    }
}

/* WordPress-specific Styles */
.wp-block-image {
    margin: 1.5rem 0;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.alignleft {
    float: left;
    margin-right: 1.5rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
}

.aligncenter {
    display: block;
    margin: 0 auto 1.5rem;
}

/* Print Styles */
@media print {
    .no-print {
        display: none;
    }
}