/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */

/* Remove default outline and add custom focus styles */
*:focus {
    outline: none;
}

/* Visible focus ring for keyboard navigation */
*:focus-visible {
    outline: 2px solid darkred;
    outline-offset: 2px;
}

/* Focus states for links */
a:focus-visible {
    outline: 2px solid darkred;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Focus states for buttons */
button:focus-visible {
    outline: 2px solid darkred;
    outline-offset: 2px;
}

/* Focus states for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid darkred;
    outline-offset: 0;
    border-color: darkred;
}

/* Focus states for navigation items */
.nav-menu-item:focus-visible,
.nav-menu-item-mobile:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Focus states for cards - make them interactive */
.card:focus-within {
    box-shadow: 0 4px 16px rgba(139, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}