/*
 * Reposteando: CSS propio, se carga después de app.css (ver resources/views/vendor/hyde/layouts/head.blade.php).
 * Patrón de vitor.pro: UNA sola variable de ancho para header, contenido y footer.
 *
 * --rp-max: ancho total de la columna (56rem = 896px).
 * --rp-pad: margen interno lateral. 2rem = p-4 del <nav> + px-4 del logo de Hyde,
 *           así el borde izquierdo del logo coincide con el del texto.
 */
:root {
    --rp-max: 56rem;
    --rp-pad: 2rem;
    --rp-line: #e5e7eb; /* gray-200 */
}
.dark { --rp-line: #374151; } /* gray-700 */

#app {
    max-width: var(--rp-max);
    margin-inline: auto;
}

#main-navigation {
    max-width: var(--rp-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    min-width: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--rp-line);
}

main#content,
.mx-auto.max-w-7xl {
    max-width: var(--rp-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--rp-pad);
}

/* Texto de notas y páginas: mismo ancho que la columna (sin el 65ch de prose). */
main#content .prose {
    max-width: none;
}

footer {
    max-width: var(--rp-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--rp-pad);
}
footer .prose {
    margin-left: 0;
    text-align: left;
}

@media (min-width: 768px) {
    #main-navigation-links li {
        margin-inline: .55rem;
    }
}