/* FM6OA Component Styles
   Scoped to avoid overriding primary-nav / site-footer which are
   handled by fm6oa-identity.css                                   */

.header {
    border-bottom: 4px solid var(--fm6oa-primary);
    padding-bottom: 0.5rem;
}

/* Social icons in .nav-social are styled by fm6oa-identity.css */

.hero-fm6oa {
    background: linear-gradient(90deg, var(--fm6oa-primary) 60%, var(--fm6oa-accent) 100%);
    color: #fff;
    border-radius: var(--fm6oa-radius);
    box-shadow: var(--fm6oa-shadow);
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
}

.card, .box, .panel {
    background: var(--fm6oa-surface);
    border-radius: var(--fm6oa-radius);
    box-shadow: var(--fm6oa-shadow);
    border: 1px solid var(--fm6oa-border);
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .card, .box, .panel {
        border-radius: 0;
        box-shadow: none;
    }
}