@use "../utils/breakpoints" as media;
@use "../utils/functions" as fn;
@use "../utils/mixins";

body {
    font-family: var(--ff-body);
    font-size: var(--ff-body-font-size);
    overflow-x: clip;
    color: var(--color-twp-black);
    background-color: var(--color-twp-cream);
    *:not([class]):has(div.grecaptcha-badge) {
        position: relative;
        z-index: 100;
    }
}

.article-content {
    @include mixins.content-typography;
}

a {
    color: var(--color-link);
    text-decoration: none;
    font-weight: 700;

    &:hover {
        color: var(--color-link-hover);
    }
}

h1, h2, h3 {
    font-family: var(--ff-headings);
    font-weight: var(--ff-headings-weight);
    color: var(--ff-headings-color);
    i, em {
        font-family: var(--ff-headings-italic);
    }
}

h4, h5, h6 {
    font-family: var(--ff-title);
    font-weight: var(--ff-title-weight);
    color: var(--ff-title-color);
}

h1 {
    font-size: var(--ff-h1-size);
}

h2 {
    font-size: var(--ff-h2-size);
}

h3 {
    font-size: var(--ff-h3-size);
}

h4 {
    font-size: var(--ff-h4-size);
}

h5 {
    font-size: var(--ff-h5-size);
}

h6 {
    font-size: var(--ff-h6-size);
}


em, i:not(.mce-ico):not(.fa) {
    font-family: var(--ff-body-italic);
}

strong, b {
    font-family: var(--ff-body-bold);
    font-weight: var(--ff-body-bold-weight);
}

.sr-only {
    @include mixins.sr-only;
}

.content-type {
    @include mixins.content-type;
}

.card-title {
    @include mixins.card-title;
}

.section-heading {
    @include mixins.section-heading;
}

.learn-more {
    @include mixins.make-button($style: normal);
    line-height: 1;
}

.stripe {
    position: absolute;
    z-index: 2;
    background: var(--color-twp-cream);
    display: block;
    height: fn.rem(10);
}

.content-grid {

    --popout-size: calc(( var(--popout-max-width) - var(--content-max-width)) / 2 );
    --breakout-size: calc(( var(--breakout-max-width) - var(--content-max-width)) / 2 );

    display: grid;
    row-gap: 1rem;

    grid-template-columns:
        [full-width-start] calc(var(--padding-inline) * .5)
        [full-container-start breakout-start] calc( var(--padding-inline) * 1.4)
        [popout-start content-start]
        calc( 100% - (var(--padding-inline) * 3.8 ))
        [content-end popout-end]
        calc(var(--padding-inline) * 1.4) [breakout-end full-container-end]
        calc(var(--padding-inline) * .5) [full-width-end];

    @include media.breakpoint-up(md) {
        grid-template-columns:
            [full-width-start] calc(var(--padding-inline) * .625)
            [full-container-start] minmax(calc(var(--padding-inline) * 2), 1fr)
            [breakout-start] minmax(0, var(--breakout-size))
            [popout-start] minmax(0, var(--popout-size))
            [content-start]
            min(55vw, var(--content-max-width))
            [content-end]
            minmax(0, var(--popout-size)) [popout-end]
            minmax(0, var(--breakout-size)) [breakout-end]
            minmax(calc(var(--padding-inline) * 2), 1fr) [full-container-end]
            calc(var(--padding-inline) * .625) [full-width-end];
    }
    @include media.breakpoint-up(xl) {
        grid-template-columns:
            [full-width-start] calc(var(--padding-inline) * .625)
            [full-container-start] minmax(calc(var(--padding-inline) * 2), 1fr)
            [breakout-start] clamp(9rem,10vw,11.63rem)
            [popout-start] clamp(3.5rem,5vw,4.69rem)
            [content-start]
            min(50vw, var(--content-max-width))
            [content-end] clamp(3.5rem,5vw,4.69rem)
            [popout-end]
            clamp(9rem,10vw,11.63rem) [breakout-end]
            minmax(calc(var(--padding-inline) * 2), 1fr) [full-container-end]
            calc(var(--padding-inline) * .625) [full-width-end];
    }
}

.content-grid > * {
    grid-column: content;
}

.content-grid > .popout {
    grid-column: popout;
}
.content-grid > .breakout, .content-grid > .alignwide {
    grid-column: breakout;
}
.content-grid > .full-container, .content-grid > .alignfull {
    grid-column: full-container;
}

.content-grid > .full-width {
    grid-column: full-width;
}

.content-grid > .sub-grid {
    display: grid;
    grid-column: full-width;
    grid-template-columns: inherit;
    row-gap: 1rem;
    > * {
        grid-column: content;
    }
    > .full-width {
        grid-column: full-width;
    }
    > .popout {
        grid-column: popout;
    }
    > .breakout, > .alignwide {
        grid-column: breakout;
    }
    > .full-container {
        grid-column: full-container;
    }
    > .full-width-mobile {
        @include media.breakpoint-down(lg) {
        grid-column: full-width;}
    }
}