/* Custom styles — all primary styles live in index.html for single-file CSS.
   This file provides additional utility classes and progressive enhancement styles. */

/* Ensure images load without layout shift */
img {
    max-width: 100%;
    height: auto;
}

/* Smooth focus states for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background: rgba(194, 32, 74, 0.2);
    color: #1a1a1a;
}

/* Print styles */
@media print {
    .hero, .marquee-section, .gallery, .cta {
        break-inside: avoid;
    }
    .nav {
        position: static;
    }
    body {
        background: #fff;
        color: #000;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .specialty-card:hover {
        transform: none;
    }
    .specialty-card:hover .specialty-card-img img {
        transform: none;
    }
    .gallery-item:hover img {
        transform: none;
    }
    .gallery-item:hover::after {
        opacity: 0;
    }
}