@charset "utf-8";

/*
 * Main page layout.
 *
 * Replaces the old iframe composition with a normal responsive document layout.
 * Desktop keeps the historic left-column / right-content composition.
 */

.site-shell {
    display: flex;
    min-height: 100svh;
}

.site-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    padding: var(--page-padding-y) var(--page-padding-x);
    border-right: 1px solid #000000;
}

.site-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--page-padding-y) var(--page-padding-x);
}

.page-content {
    width: 100%;
}

.extra_padding_lateral {
    padding-left: 30px;
    padding-right: 30px;
}

@media screen and (min-width: 901px) {
    .site-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        min-height: 100svh;
    }
}

@media screen and (max-width: 900px) {
    .site-shell {
        flex-direction: column;
        min-height: auto;
    }

    .site-sidebar {
        width: 100%;
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid #000000;
        padding-bottom: 1.5rem;
    }

    .site-main {
        padding-top: 1.5rem;
    }

    .extra_padding_lateral {
        padding-left: 0;
        padding-right: 0;
    }
}