header.header.sticky {
    top: 0;
}

body.admin-bar {
    header.header.sticky {
        @media screen and (min-width: 600px) {
            top: var(--wp-admin--admin-bar--height);
        }
    }
}

.hide-item {
    border: 0;
    clip-path: inset(0 0 99.9% 99.9%);
    height: 0.0625rem;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0.0625rem;
}

.hide-item--show-on-focus:focus {
    background: $color-primary-light;
    clip-path: none;
    color: $color-text-dark;
    font-size: $font-family-base;
    height: auto;
    left: $spacing-sm;
    line-height: normal;
    padding: $border-radius-lg $spacing-lg;
    text-decoration: none;
    top: $spacing-xs;
    width: auto;
    z-index: 100000;
}

// Typography
body {
    font-family: $font-family-base;
    font-size: $font-size-default;
    font-weight: $font-weight-regular;
    line-height: $line-height-base;
}

h1,
h2,
h3,
h4,
h5 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: $font-weight-semi-bold;
    line-height: $line-height-base;
}

h1,
%h1 {
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;

    @include media-breakpoint-down(md) {
        font-size: $font-size-xl;
    }
}

h2,
%h2 {
    font-size: $font-size-xl;

    @include media-breakpoint-down(md) {
        font-size: $font-size-lg;
    }
}

h3,
%h3 {
    font-size: $font-size-lg;

    @include media-breakpoint-down(md) {
        font-size: $font-size-md;
    }
}

h4,
%h4 {
    font-size: $font-size-md;

    @include media-breakpoint-down(md) {
        font-size: $font-size-default;
    }
}

h5,
%h5 {
    font-size: $font-size-default;

    @include media-breakpoint-down(md) {
        font-size: $font-size-sm;
    }
}

blockquote {
    border-left: 2px solid $color-primary;
    margin: $spacing-xl 0;
    padding: $spacing-sm 0 $spacing-sm $spacing-xl;
}

%ul {
    padding-left: 0;

    li {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin-bottom: $spacing-sm;

        &:last-child {
            margin-bottom: 0;
        }

        &::before {
            border: 4px solid $color-primary;
            border-radius: $spacing-sm;
            content: ' ';
            flex-shrink: 0;
            height: 16px;
            margin-right: $spacing-sm;
            margin-top: $spacing-xs;
            width: 16px;
        }

        ul,
        ol {
            margin-left: $spacing-lg;
            padding-left: 0;
            width: calc(100% - 24px);

            li::before {
                border: 2px solid $color-primary;
                border-radius: $border-radius-xs;
                height: 8px;
                margin-top: $spacing-sm;
                width: 8px;
            }
        }
    }

    &.c-list--primary li::before {
        border-color: $color-primary;
    }

    &.c-list--secondary li::before {
        border-color: $color-secondary;
    }
}

%ol {
    li {
        margin-bottom: $spacing-sm;

        ol {
            padding-left: $spacing-lg;
        }
    }
}

html,
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

figure {
    margin: 0;
}

i {
    line-height: 0;
}

a {
    color: $color-primary;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        transition: $transition-default;
    }
}
