/*
  Naming:
  The block name and the element name are separated with a double underscore.
  Finally. The block name and the modifier name are separated with a double hyphen.
*/

@import url("root.css");
@import url("header.css");
@import url("footer.css");
@import url("typography.css");

html {
    font-size: 10px;
    overflow-x: hidden;
    scroll-padding: 10em 0 0 0;
    /*noinspection CssInvalidPropertyValue*/
    height: -webkit-fill-available
}

body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--type-base);
    color: var(--color-text);
    background-color: var(--color-sheet)
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
    transition: color .2s ease, -webkit-text-decoration-color .2s ease;
    text-decoration-thickness: 0;
    text-decoration-color: var(--color-primary);
    color: var(--color-primary);
}

a, a:visited {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-secondary);
    -webkit-text-decoration-color: var(--color-secondary);
    text-decoration-color: var(--color-secondary)
}

.active > a {
    color: var(--color-secondary);
}

.link_button {
    margin: .25em .125em;
    padding: .25em .75em;
    font-size: var(--type-small);
    color: var(--color-link);
    background-color: var(--color-peach-tint);
    border-radius: 1em;
    text-decoration: none;
}

.link_button:hover {
    color: var(--color-primary);
    background: var(--color-bg-secondary)
}

.link_button:visited {
    color: var(--color-primary)
}

h1, h2, h3, h4, h5, h6 {
    margin: var(--space-medium) 0 var(--space-x-small) 0;
    padding: 0;
    font-weight: 700;
    line-height: 1.25;
    font-family: var(--font-header);
}

h1 {
    margin: 0 0 var(--space-x-small) 0;
    font-size: var(--type-xx-large);
    line-height: 1;
    /*letter-spacing: -.03em;*/

}

h2 {
    font-size: calc(var(--type-x-large) - 25%);
}

h3 {
    font-size: calc(var(--type-medium) - 15%)
}

h4, h5, h6 {
    font-size: var(--type-medium)
}

.headline {
    display: flex;
    flex-direction: column;
    gap: 1em;
    /*margin-inline: auto;*/
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    margin-bottom: var(--space-medium) !important;
    position: relative;
    text-align: center;

}

p, ul, ol {
    margin: 0 0 var(--space-medium) 0;
    padding: 0;
    line-height: 1.5
}

li {
    margin: 0 0 var(--space-small) var(--space-medium)
}

li ul, li ol {
    margin: var(--space-small) 0 var(--space-medium) var(--space-medium)
}

img, svg, video {
    height: auto
}

.grid {
    display: grid;
    grid-template-columns:[max]1fr[l]1fr[m]repeat(3, [m] 28vw)[m]1fr[l]1fr[max]
}

.grid > :not([class*=grid]) {
    grid-column: m/m 4
}

.grid__max {
    grid-column: max/max 2
}

.grid__wide {
    grid-column: l/l 2
}

.grid__medium {
    grid-column: m/m 4
}

.show {
    display: block;
}

.hide {
    display: none !important
}

.hide-screens {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.pointer {
    width: 2.25em;
    margin: 2em auto
}

.pointer svg {
    width: 250%;
    height: auto
}

.fade-in {
    opacity: 0;
    animation: fade-in .3s ease-out forwards
}

@supports (-webkit-touch-callout:none) {
    .fade-in--safely {
        opacity: 1;
        animation: none
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

/*
----------------------------------------------------------------
     Main
---------------------------------------------------------------- */
#main-nav .sub-nav, #main-nav0 .sub-nav {
    display: none;
}

#main-nav .visible, #main-nav0 .visible {
    display: block;
}

main {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;
    /*text-align: center;*/
}

/*
main:before {
    background: linear-gradient(180deg, rgba(var(--rgb-eggshell), 1) 0, rgba(var(--rgb-eggshell), 0) 100%);
    content: '';
    height: 12em;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
*/

/*
----------------------------------------------------------------
     Media
---------------------------------------------------------------- */
@media (min-width: 45em) {
    h3 {
        font-size: var(--type-medium)
    }
}

@media (max-width: 44.9em) {
    .button--block {
        border-radius: .5em
    }
}

@media (min-width: 45em) {
    .card--soft {
        margin-left: calc(var(--space-large) * -1);
        margin-right: calc(var(--space-large) * -1)
    }
}

@media (min-width: 45em) {
    .grid {
        grid-template-columns:[max]1fr[l]minmax(11ch, .7fr)[m]repeat(3, [m] 21.66ch)[m]minmax(11ch, .7fr)[l]1fr[max]
    }
}

@media (min-width: 91em) {
    .grid {
        grid-template-columns:[max]1fr[l]15ch[m]repeat(3, [m] 21.66ch)[m]15ch[l]1fr[max]
    }
}

@media print {
    .grid {
        display: block;
        max-width: 80%;
        margin: 0 auto
    }
}

@media (max-width: 44.9em) {
    .grid__medium-mobile {
        grid-column: m/m 4
    }
}

@media (max-width: 44.9em) {
    .grid__large-mobile {
        grid-column: l/l 2
    }
}

@media (max-width: 44.9em) {
    input.header__checkbox {
        display: none;
        position: absolute;
        top: .75rem;
        right: .75rem;
        bottom: .75rem;
        width: 9.5rem;
        height: auto;
        color: var(--color-sheet);
        background-color: var(--color-eggshell);
        border-color: var(--color-eggshell)
    }

    input.header__checkbox:hover {
        border-color: var(--color-eggshell)
    }

    input.header__checkbox:checked {
        background-color: var(--color-sheet);
        border-color: var(--color-sheet)
    }
}

@media (max-width: 44.9em) {
    .hide-mobile {
        display: none !important
    }
}

@media (min-width: 45em) {
    .hide-desktop {
        display: none !important
    }
}

@media (max-width: 44.9em) {
    .button {
        margin-bottom: var(--space-small)
    }
}