/* mobile.css - Responsive breakpoints for Roletto Law */

/* ------------------------------------------------------------------ */
/* Tablet / Mobile (768px and below) */
@media screen and (max-width: 768px) {

    #wrapper {
        margin: 0;
    }

    /* Header */
    header {
        border-radius: 0;
        padding: 0;
    }

    header img {
        width: auto;
        max-width: 220px;
        margin: 12px 0 12px 15px;
    }

    /* Show hamburger, hide nav by default */
    #mobile-menu-btn {
        display: block;
        margin-right: 15px;
    }

    #nav {
        display: none;
        flex: 0 0 100%;
        padding: 0;
    }

    #nav.open {
        display: block;
    }

    #nav ul {
        flex-direction: column;
    }

    #nav ul li {
        border-radius: 0;
        text-align: left;
        padding: 12px 20px;
        margin: 0;
        border-bottom: 1px solid rgba(255, 220, 104, 0.25);
    }

    #nav ul li:last-child {
        border-bottom: none;
    }

    /* Inner content wrapper */
    #inner_content_wrapper {
        padding: 20px 15px;
    }

    /* Footer */
    footer {
        border-radius: 0;
        padding: 20px 15px;
    }

    /* Slider */
    .slider {
        margin: 0;
    }

    /* Categories: stack sections vertically */
    #main #categories {
        flex: 0 0 100%;
        margin: 0;
        padding: 15px;
        flex-direction: column;
        border-radius: 0;
    }

    .section {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #DEDEDE;
        padding: 10px 0;
    }

    .section:last-child {
        border-bottom: none;
    }

    /* Contact card */
    #main #contact_card {
        flex: 0 0 100%;
        padding: 15px;
    }

    #contact_card img:not(.accepted_cards) {
        float: none;
        margin: 0 auto 15px;
    }

    #contact_card .button {
        margin: 20px auto 0;
    }

    /* Attorney: stack refrences and bio vertically */
    #main #refrences {
        flex: 0 0 100%;
        padding: 20px 15px 0;

        & ul {
            padding-left: 15px;
        }
    }

    #main #bio {
        flex: 0 0 100%;
        padding: 10px 15px 20px;
    }

    #bio img {
        float: none;
        margin: 0 auto 15px;
    }

    #contact {
        padding: 15px;
    }

    /* Service nav */
    #service_nav ul {
        gap: 5px;
    }

}

/* ------------------------------------------------------------------ */
/* Small mobile (480px and below) */
@media screen and (max-width: 480px) {

    header img {
        max-width: 180px;
    }

    h2 {
        font-size: 1.3em;
    }

    #inner_content_wrapper {
        padding: 15px 10px;
    }

}