/* Main container */
body {
    background: var(--color-bg);
}

a {
    text-decoration: none;
}

:is(header, footer) > * {
    max-width: var(--container-max, 1312px);
}
:is(header, main, footer) > * {
    margin: 0 auto;
    padding: 0 0px;
}

@media screen and (max-width: 1311px) {
    :is(header, footer) > * {
        padding: 0 32px;
    }
}

main {
    padding-top: 82px;
}

main .site-content {
    max-width: var(--container-max, 1312px);
    margin: 0 auto;
}

/* main .site-content > section:first-child {
    padding-top: 64px;
}

main .site-content > *:first-child {
    padding-top: 32px;
} */
main .site-content > *:last-child {
    padding-bottom: 32px;
}

main .site-content > * {
    margin: var(--space-32) auto;
}
main article .site-content > * {
    margin: var(--space-4) auto var(--space-16) auto;
}
main article .site-content > :is(h2, h3, h4, h5, h6) {
    margin: var(--space-4) auto var(--space-4) auto;
}
main .site-content > *:first-child {
    margin-top: 0px;
    padding-top: var(--space-32);
}
main .site-content > *.has-background + *.has-background {
    margin-top: 0!important;
}
main .site-content > *.has-background:has(+ *.has-background) {
    margin-bottom: 0!important;
}

@media (max-width: 768px) {
    main .site-content > * {
        margin: var(--space-16) auto;
    }
    main article .site-content > * {
        margin: var(--space-4) auto var(--space-8) auto;
    }
    main article .site-content > :is(h2, h3, h4, h5, h6) {
        margin: var(--space-4) auto var(--space-4) auto;
    }
    main .site-content > *:first-child {
        margin-top: 0px;
        padding-top: var(--space-16);
    }
}

/* Core -> Group block */
.wp-block-group:not(.alignfull) {
    /* border-radius: var(--border-radius-medium); */
    /* background-color: var(--color-background-off); */
    /* padding: var(--spacing-medium); */

}
.wp-block-group.has-background {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Align wide */
@media (min-width: 1312px) {
    .wp-block-group.alignwide,
    section.alignwide {
        max-width: calc(var(--wp--style--global--wide-size, 880px) + (64px * 2));
    }
    .wp-block-group.alignwide > *,
    section.alignwide > * {
        max-width: var(--wp--style--global--wide-size, 880px);
    }
    .site-content > .wp-block-group.alignwide.has-background,
    .site-content > section.alignwide.has-background {
        border-radius: var(--radius-md);
        padding: var(--space-16);
    }
}
@media (max-width: 880px) {
    .site-content > .wp-block-group.alignwide *,
    .site-content > section.alignwide * {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Aligned full */
@media (min-width: 1312px) {
    .wp-block-group.alignfull,
    section.alignfull {
        margin-left: calc(50% - 50vw);
        width: 100vw;
    }
    .wp-block-group.alignfull > *,
    section.alignfull > * {
        max-width: var(--container-max, 1312px);
        width: 100%;
        margin: 0 auto;
        overflow: visible;
    }
}
@media (max-width: 1312px) {
    .wp-block-group.alignfull > *,
    section.alignfull > * {
        padding-left: 32px;
        padding-right: 32px;
    }
    .site-content > .wp-block-group:not(.alignfull),
    .site-content > section:not(.alignfull) {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* No alignment */
@media (min-width: 1312px) {
    .site-content > .wp-block-group.has-background:not(.alignfull, .alignwide),
    .site-content > section.has-background:not(.alignfull, .alignwide) {
        padding: var(--space-16);
    }
}

/* All alignments */
@media (min-width: 1480px) {
    .site-content > .wp-block-group.has-background:not(.alignfull),
    .site-content > section.has-background:not(.alignfull) {
        border-radius: var(--radius-md)
    }
}
.site-content > .wp-block-group.has-background,
.site-content > section.has-background {
    padding: var(--space-32) 0;
}
@media (max-width: 768px) {
    .site-content > .wp-block-group.has-background, 
    .site-content > section.has-background {
        padding: var(--space-16) 0;
    }
}

/* Core -> Paragraph block */
.site-content p.has-background,
.editor-styles-wrapper p.has-background {
    padding: 16px;
    border-radius: var(--radius-sm);
}

/* Core -> List block */
.site-content .wp-block-list,
.editor-styles-wrapper .wp-block-list {
    list-style: disc;
    padding-left: 16px;
}
.site-content .wp-block-list li,
.editor-styles-wrapper .wp-block-list li {
    padding-left: 8px;
}
.site-content .wp-block-list li::marker,
.editor-styles-wrapper .wp-block-list li::marker {
    color: var(--color-brand-primary);

}

/* Core -> Quote block */
.site-content blockquote.wp-block-quote,
.editor-styles-wrapper blockquote.wp-block-quote {
    padding: var(--space-6);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: 4px solid var(--color-brand-primary);
    background-color: var(--color-brand-primary-light);
}
.site-content blockquote.wp-block-quote cite,
.editor-styles-wrapper blockquote.wp-block-quote cite {
    margin-top: var(--space-4);
}

/* Core -> Code block */
.site-content pre.wp-block-code,
.editor-styles-wrapper pre.wp-block-code {
    padding: 32px;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}
.site-content pre.wp-block-code code,
.editor-styles-wrapper pre.wp-block-code code {
    font-size: var(--text-sm);
}

/* Core -> Image block */
.site-content .wp-block-image img,
.editor-styles-wrapper .wp-block-image img {
    border-radius: var(--radius-md);
}
.wp-block-image.size-large {
    width: 100%;
    height: 100%;
}

/* Core -> Media text block */
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wp-block-media-text > .wp-block-media-text__media img {
    border-radius: var(--radius-md);
}

/* Core -> Cover block */
.wp-block-group .wp-block-cover {
    border-radius: var(--radius-md);
}
.wp-block-cover .wp-block-cover__background.has-background-dim {
    opacity: 0.2;
    background-color: var(--color-brand-primary);
}

/* Core -> Link */
.site-content p > a {
    padding-bottom: 2px;
    position: relative;
    color: var(--color-brand-primary);
    cursor: pointer;
    font-weight: 600;
}
.site-content p > a::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--color-text);
    transition: width var(--duration-base) ease;
}
.site-content p > a:hover::after,
.site-content p > a:focus::after {
    width: 100%;
}