/*
Theme Name: Grace with Gracie Salon
Theme URI: https://gracewithgracie.com
Description: A modern, elegant WordPress theme for Grace with Gracie Salon & Aesthetics featuring customizable hero sections, services, and booking integration. Includes the beautiful Grace with Gracie luxury monogram logo.
Version: 1.0.0
Author: Your Name
Author URI: https://yourwebsite.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grace-with-gracie
Tags: salon, beauty, spa, tailwind, modern, luxury

This theme uses Tailwind CSS for styling.
*/

/* Tailwind CSS will be enqueued via CDN in functions.php */

/* Custom Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-up {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 1s ease-out forwards;
}

.animate-scale-up {
    animation: scale-up 0.3s ease-out forwards;
}

.animate-zoom-in {
    animation: zoom-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Serif Font Class */
.serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Soft Background */
.soft-bg {
    background-color: #faf9f7;
}

/* Logo Styling */
.custom-logo {
    max-width: 180px;
    height: auto;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    animation: logoFadeIn 1s ease-out;
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-logo:hover {
    transform: scale(1.05);
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-branding a {
    display: block;
    line-height: 0;
}

/* Footer Logo */
.footer-logo img,
.footer-logo .custom-logo {
    max-width: 180px;
    height: auto;
}

/* Booking Modal Logo */
.booking-modal-logo {
    max-width: 200px;
    margin: 0 auto 20px;
    animation: logoZoomIn 0.5s ease-out;
}

@keyframes logoZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Brand Colors from Logo */
:root {
    --rose-gold-light: #e8b4b8;
    --rose-gold: #d4af37;
    --rose-gold-dark: #c9a0a4;
    --brand-navy: #2c3e50;
    --brand-purple: #9b59b6;
}

/* Social Media Icons */
.social-icons a {
    display: inline-block;
    color: #71717a !important;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #9b59b6 !important;
}

.social-icons svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
}

/* Navigation Styling */
nav a {
    text-decoration: none !important;
    color: #52525b !important;
}

nav a:hover {
    color: #9b59b6 !important;
}