/* ─────────────────────────────────────────
   Legacy grid item styles (kept for compat)
───────────────────────────────────────── */
.gridlayout-item {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    padding: 0.5rem;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .gridlayout-item:before {
        display: none;
    }

    .ch-480 {
        padding: 0 !important;
    }
}

/* ─────────────────────────────────────────
   SITE SHELL
   flex: 1 fills the parent .page container
   (which owns min-height: 100vh in site.css).
   Do NOT use min-height: 100vh here — that
   doubles the height and pushes the footer
   completely off-screen.
───────────────────────────────────────── */
.site-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ─────────────────────────────────────────
   HEADER
   Full-width, no border, no shadow.
   Overrides Bootstrap .navbar defaults.
───────────────────────────────────────── */
.site-header {
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    border: none !important;
    box-shadow: none !important;
}

    .site-header .navbar,
    .site-header nav,
    .site-header .header-navbar {
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
    }

/* ─────────────────────────────────────────
   MAIN CONTENT
   flex: 1 fills all remaining vertical space
   between the header and footer
───────────────────────────────────────── */
.site-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.site-content--mobile {
    padding: 1rem;
    align-items: flex-start;
}

/* ─────────────────────────────────────────
   FOOTER
   Pinned to the bottom by the flex column
   above it. No border, no shadow.
───────────────────────────────────────── */
.site-footer {
    width: 100%;
    background-color: #ffffff;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
}