html,
body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

html {
    --gn-admin-offset: 0px;
    scroll-padding-top: calc(140px + var(--gn-admin-offset));
}

body:has(> .gnpc-site-nav) {
    overflow-x: clip;
}

@media (min-width: 783px) {
    html:has(body.admin-bar) {
        --gn-admin-offset: 32px;
    }
}

@media (min-width: 601px) and (max-width: 782px) {
    html:has(body.admin-bar) {
        --gn-admin-offset: 46px;
    }
}

@media (max-width: 900px) {
    html {
        scroll-padding-top: calc(175px + var(--gn-admin-offset));
    }
}

@media (max-width: 520px) {
    html {
        scroll-padding-top: 165px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    color: var(--gn-color-text);
    background: var(--gn-color-canvas);
    font-family: var(--gn-font-sans);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
a {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--gn-color-orange-500);
    outline-offset: 3px;
}