/* ─── Material Symbols ─────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

/* ─── Marquee animation ────────────────────────────────── */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .animate-marquee { animation: none; }
}

/* ─── Mobile menu ──────────────────────────────────────── */
#mobile-menu {
    display: none;
}
#mobile-menu.is-open {
    display: block;
}

/* ─── Focus styles (accessibility) ────────────────────── */
:focus-visible {
    outline: 2px solid #FFC107;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ─── Form feedback ────────────────────────────────────── */
.field-error {
    color: #f87171; /* lighter red so it's readable on dark cards too */
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.input-error {
    border-color: #ba1a1a !important;
}
.alert {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.alert-error {
    background: #ffdad6;
    color: #93000a;
    border: 1px solid #ffb4ab;
}