/* ====================================
   EL SAUCE EDITORIAL — Touch & Accessibility
   Minimal: hover guards + focus styles only.
   ==================================== */

/* ============ HOVER GUARDS (touch devices) ============ */
/* Prevent stuck-hover on touch screens */
@media (hover: none) {

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .btn-gold:hover {
        transform: none !important;
        box-shadow: var(--shadow-md) !important;
    }

    .card:hover,
    .book-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-md) !important;
    }

    .nav-links a:hover {
        color: inherit !important;
        background: transparent !important;
    }

    .faq-question:hover {
        background: var(--color-white) !important;
    }
}

/* ============ ACTIVE STATES (all devices) ============ */
.btn:active {
    transform: translateY(1px) scale(0.97);
    opacity: 0.9;
    transition: transform 0.08s ease, opacity 0.08s ease;
}

.card:active,
.book-card:active {
    transform: translateY(-1px);
    transition: transform 0.1s ease;
}

/* ============ FOCUS STYLES (keyboard nav) ============ */
:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.btn:focus-visible {
    outline: 3px solid var(--color-gold-light);
    outline-offset: 4px;
}

.faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}