/* Custom styles for JB Salon & Co. */
/* Additional utility classes and overrides */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #faf6f1;
}

::-webkit-scrollbar-thumb {
    background: #d45530;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b93e22;
}

/* Selection color */
::selection {
    background: #d45530;
    color: white;
}

/* Focus visible styles */
:focus-visible {
    outline: 2px solid #d45530;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .accent-strip,
    .geo-deco,
    .section-divider {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .cta-btn {
        background: #333;
        color: white;
    }
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .hero-text-section {
        padding: 2rem 1.25rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .section-divider {
        height: 60px;
    }
    
    .section-divider::before {
        width: 40px;
        height: 40px;
    }
    
    .section-divider::after {
        width: 25px;
        height: 25px;
        left: calc(50% + 25px);
    }
}

/* Small phone adjustments */
@media (max-width: 360px) {
    .hero-text-section {
        padding: 1.5rem 1rem;
    }
    
    .font-display.text-4xl {
        font-size: 2rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
}

/* Large desktop */
@media (min-width: 1280px) {
    .hero-layout {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

/* Animation keyframes */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(45deg);
    }
    50% {
        transform: translateY(-20px) rotate(45deg);
    }
}

@keyframes pulse-soft {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Apply float animation to select geometric shapes */
.geo-deco {
    animation: float 6s ease-in-out infinite;
}

.geo-deco:nth-child(odd) {
    animation-delay: -3s;
    animation-duration: 8s;
}

.geo-deco:nth-child(even) {
    animation-delay: -1s;
    animation-duration: 7s;
}

/* Reduce animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .geo-deco {
        animation: none;
    }
}