/*
 * PetHaven - Compassionate Pet Clinic Template
 * Design System: Compassionate Pet Care & Storybook Experience
 */

:root {
    /* Primary Colors - Warm, Caramel, Sky Blue, Vanilla */
    --color-primary: #e67e5b;      /* Warm Caramel / Muted Coral */
    --color-primary-dark: #c45b3a;
    --color-secondary: #8ab6d6;    /* Soft Sky Blue */
    --color-secondary-light: #e8f4fa;
    --color-bg: #fffbf5;           /* Creamy Vanilla */
    
    /* Accents */
    --color-accent-pink: #f7a8b8;  /* Paw-pink highlights */
    --color-accent-yellow: #fde49e;/* Soft sunshine yellow */
    --color-accent-mint: #a8e6cf;  /* Pastel mint */
    --color-accent-cocoa: #8b5e3c; /* Cozy cocoa brown */
    
    /* Utility */
    --color-text-dark: #3a322f;
    --color-text-muted: #756a65;
    
    /* Font Families */
    --font-heading: 'Fredoka', 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

/* Base Styles */
html {
    scroll-behavior: auto !important; /* Fixes conflict with Lenis and Bootstrap in Chrome */
}
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-dark);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .storybook-heading {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
}

.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-bg { background-color: var(--color-bg) !important; }

.bg-soft-peach { background-color: #fff0eb !important; }
.bg-soft-mint { background-color: #e6f9f3 !important; }
.bg-soft-yellow { background-color: #fff9e6 !important; }

/* Buttons & Interactions */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Organic Shapes & Rounded Layouts */
.rounded-blob {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

/* Paw Particles & Animations */
#paw-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.paw-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('../images/paw-pattern.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
}

.float-anim {
    animation: float 6s ease-in-out infinite;
}
.float-anim-reverse {
    animation: float-reverse 7s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes float-reverse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}

/* Navbar */
.custom-navbar {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    padding: 15px 0;
}
.custom-navbar.scrolled {
    padding: 10px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.nav-link {
    color: var(--color-text-dark) !important;
    position: relative;
    padding: 0.5rem 1rem !important;
    font-size: 1.05rem;
}
.nav-link:hover, .nav-link.active {
    color: var(--color-primary) !important;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--color-accent-pink);
    border-radius: 5px;
    transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 20px;
}

/* Cards & Hover Effects */
.service-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(230, 126, 91, 0.15) !important;
}
.group:hover .group-hover-opacity-100 {
    opacity: 1 !important;
}
.transition-all {
    transition: all 0.3s ease;
}
.zoom-hover {
    transition: transform 0.5s ease;
}
.group:hover .zoom-hover {
    transform: scale(1.1);
}
.hover-arrow i {
    transition: transform 0.3s ease;
}
.hover-arrow:hover i {
    transform: translateX(5px);
}

/* Forms */
.form-control:focus {
    box-shadow: none;
    border-color: var(--color-primary) !important;
    background-color: white !important;
}

/* Utilities */
.tracking-wider { letter-spacing: 0.1em; }
.max-w-700 { max-width: 700px; }
.line-height-0 { line-height: 0; }

/* Hide default bootstrap dropdown caret */
.dropdown-toggle::after {
    display: none !important;
}