/* ============================================================
   MySQL Box — Responsivo
   Nav sem toggle no JS: em telas pequenas o menu empilha
   abaixo do logo (links continuam acessíveis).
   ============================================================ */

@media (max-width: 900px) {
    .hero h1 { max-width: 100%; }

    .service-card h3 { max-width: 72%; }
}

@media (max-width: 768px) {
    .header { position: static; }

    .nav__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .nav__menu {
        flex-wrap: wrap;
        gap: 0.4rem 1.2rem;
    }

    html { scroll-padding-top: 12px; }

    .hero { padding: 3.4rem 1.25rem 3.6rem; }

    .services,
    .documentation,
    .resources { padding: 3.2rem 1.25rem; }

    .services__grid,
    .resources__grid { grid-template-columns: 1fr; }

    .documentation__grid { grid-template-columns: 1fr; }

    .documentation__container { padding: 1.8rem 1.4rem 1.2rem; }

    .hero__code pre { padding: 3rem 1.2rem 1.4rem; }

    .footer__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .footer__refs { flex-wrap: wrap; gap: 0.5rem 1.2rem; }
}

@media (max-width: 560px) {
    h2 { font-size: 1.55rem; }

    .hero h1 { font-size: 2.15rem; }

    .service-card h3 { max-width: 100%; }

    .service-card::before { display: none; }

    .doc-card { grid-template-columns: 34px 1fr; }

    .hero__code code { font-size: 0.86rem; }
}