/* =========================================================
   CASA ROCCA — RESPONSIVE EDITORIAL LAYOUT

   COMPACT   < 610
   WIDE      610–779
   EDITORIAL 780–1199
   MAX       1200+
   ========================================================= */


/* =========================================================
   ROOT CANVAS / iOS SAFARI

   IMPORTANT:
   Safari uses the BODY background as the page canvas behind the
   lower browser chrome, but only when the HTML root itself is
   transparent.

   The slightly more specific selectors below are intentional:
   they let these rules beat old generic/root background rules
   without using !important.
   ========================================================= */

html:root {
    scroll-padding-top: var(--navbar-height);

    /* Keep the root transparent so Safari can expose BODY below. */
    background-color: transparent;
}

html:root body {
    /*
       THIS IS THE PROPERTY THAT SETS THE iOS SAFARI BOTTOM BACKGROUND.
       Change --surface-footer if the footer/canvas color ever changes.
    */
    background-color: var(--surface-footer);
}

.site-page {
    width: 100%;

    /*
       The actual website remains white even though BODY underneath
       is footer-colored.
    */
    background-color: var(--surface-page);
}


.page-container {
    width: calc(100% - (var(--page-gutter) * 2));
    margin-inline: auto;
}

@media (min-width: 1200px) {
    .page-container {
        width: min(var(--page-max-width), calc(100% - 80px));
    }
}