/* ============================================
   Warren Family Practice — Custom Styles
   ============================================ */

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
    background: #064e3b;
    color: #fefaf3;
}

/* ============================================
   Navbar
   ============================================ */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

#navbar.scrolled {
    background: rgba(253, 252, 250, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(6, 78, 59, 0.08);
}

#navbar.scrolled .font-serif,
#navbar.scrolled span[class*="text-emerald-900"] {
    color: #064e3b !important;
}

/* ============================================
   Mobile Menu
   ============================================ */
#mobile-menu {
    transition: opacity 0.35s ease, pointer-events 0.35s ease;
}

#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

#mobile-menu.closed {
    opacity: 0;
    pointer-events: none;
}

.mobile-link {
    transition: transform 0.2s ease, color 0.2s ease;
}

.mobile-link:hover {
    transform: scale(1.05);
}

/* ============================================
   Hero Floating Cards
   ============================================ */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes float-medium {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes float-fast {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-14px); }
}

/* Only animate when user prefers motion */
@media (prefers-reduced-motion: no-preference) {
    .js #hero .absolute > div:nth-child(1) {
        animation: float-slow 6s ease-in-out infinite;
    }
    .js #hero .absolute > div:nth-child(2) {
        animation: float-medium 5s ease-in-out infinite 0.5s;
    }
    .js #hero .absolute > div:nth-child(3) {
        animation: float-fast 7s ease-in-out infinite 1s;
    }
    .js #hero .absolute > div:nth-child(4) {
        animation: float-slow 5.5s ease-in-out infinite 0.3s;
    }
}

/* ============================================
   Service Cards
   ============================================ */
.service-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-card:hover {
    transform: translateY(-4px);
}

/* ============================================
   Scroll Reveal (Progressive Enhancement)
   ============================================ */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(30px);
    }
    .js .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Typography refinements
   ============================================ */
.font-serif {
    text-rendering: optimizeLegibility;
}

/* ============================================
   Focus styles for accessibility
   ============================================ */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #064e3b;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   Responsive adjustments
   ============================================ */
@media (max-width: 767px) {
    #hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 80px;
    }

    #hero h1 {
        font-size: 2.75rem;
    }

    .font-serif.text-4xl {
        font-size: 2.25rem;
    }
}

/* ============================================
   Subtle patterns & textures
   ============================================ */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23064e3b' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}