/* FONTS */
@font-face {
    font-family: 'Switzer';
    src: url('../fonts/Switzer-Variable.woff2') format('woff2'),
        url('../fonts/Switzer-Variable.woff') format('woff');
        font-weight: 100 900;
        font-display: swap;
        font-style: normal;
}

@font-face {
    font-family: 'Switzer';
    src: url('../fonts/Switzer-VariableItalic.woff2') format('woff2'),
        url('../fonts/Switzer-VariableItalic.woff') format('woff');
        font-weight: 100 900;
        font-display: swap;
        font-style: italic;
}


/* SETTINGS */
:root{
    /* CONFIGURABLE SETTINGS */
        /* COLORS */
        --color-green: #0F352E;
        --color-green-medium: #5F7169;
        --color-green-light: #CBE6CD;
        --color-yellow: #FAC00B;
        --color-orange: #EF4D3A;
        --color-white: #FFFFFF;
        --color-gray: #505050;
        --color-gray-light: #C0C0C0;

        /* BACKGROUND */
        --light-background-color: var(--color-white);
        --medium-background-color: var(--color-green-light);
        --dark-light-background-color: var(--color-green-medium);
        --dark-background-color: var(--color-green);

        /* TEXT */
            /* PRIMARY FONT */
            --primary-font: 'Switzer', sans-serif;
            --primary-font-weight: 300;

            /* SECONDARY FONT */
            --secondary-font-weight: 300;
            --secondary-line-height: 1.2;

            /* FONT SIZES */
            --base-font-size: 1.6rem;

            /* LIGHT BACKGROUND COLORS */
            --light-background-text-color: var(--color-green);
            --light-background-title-color: var(--color-green);
            --light-background-eyebrow-color: var(--color-green);
            --light-background-link-color: var(--color-green);
            --light-background-hover-link-color: var(--color-orange);
            --light-background-accent-color: var(--color-yellow);

            /* DARK BACKGROUND COLORS */
            --dark-background-text-color: var(--color-white);
            --dark-background-title-color: var(--color-white);
            --dark-background-eyebrow-color: var(--color-white);
            --dark-background-link-color: var(--color-white);
            --dark-background-hover-link-color: var(--color-yellow);
            --dark-background-accent-color: var(--color-orange);

        /* PRIMARY BUTTON */
            /* STYLE */
            --primary-button-border-width: 0.1rem;
            --primary-button-border-style: solid;
            --primary-button-border-radius: 4rem;
            --primary-button-vertical-padding: calc(1.5em - 1rem);
            --primary-button-horizontal-padding: calc(2em - 1rem);

            /* LIGHT BACKGROUND COLORS */
            --light-background-primary-button-border-color: var(--color-orange);
            --light-background-primary-button-background-color: var(--color-orange);
            --light-background-primary-button-text-color: var(--color-white);
            --light-background-primary-button-hover-border-color: var(--color-green);
            --light-background-primary-button-hover-background-color: var(--color-green);
            --light-background-primary-button-hover-text-color: var(--color-white);

            /* LIGHT-ALT BACKGROUND COLORS */
            --light-alt-background-primary-button-border-color: var(--color-green);
            --light-alt-background-primary-button-background-color: var(--color-green);
            --light-alt-background-primary-button-text-color: var(--color-white);
            --light-alt-background-primary-button-hover-border-color: var(--color-orange);
            --light-alt-background-primary-button-hover-background-color: var(--color-orange);
            --light-alt-background-primary-button-hover-text-color: var(--color-white);

            /* DARK BACKGROUND COLORS */
            --dark-background-primary-button-border-color: var(--color-orange);
            --dark-background-primary-button-background-color: var(--color-orange);
            --dark-background-primary-button-text-color: var(--color-white);
            --dark-background-primary-button-hover-border-color: var(--color-white);
            --dark-background-primary-button-hover-background-color: var(--color-white);
            --dark-background-primary-button-hover-text-color: var(--color-green);

        /* SECONDARY BUTTON */
            /* STYLE */
            --secondary-button-border-width: 0.1rem;
            --secondary-button-border-style: solid;
            --secondary-button-border-radius: 4rem;
            --secondary-button-vertical-padding: calc(1.5em - 1rem);
            --secondary-button-horizontal-padding: calc(2em - 1rem);

            /* LIGHT BACKGROUND COLORS */
            --light-background-secondary-button-border-color: var(--color-green);
            --light-background-secondary-button-text-color: var(--color-green);
            --light-background-secondary-button-hover-border-color: var(--color-orange);
            --light-background-secondary-button-hover-background-color: var(--color-orange);
            --light-background-secondary-button-hover-text-color: var(--color-white);

            /* DARK BACKGROUND COLORS */
            --dark-background-secondary-button-border-color: var(--color-white);
            --dark-background-secondary-button-text-color: var(--color-white);
            --dark-background-secondary-button-hover-border-color: var(--color-orange);
            --dark-background-secondary-button-hover-background-color: var(--color-orange);
            --dark-background-secondary-button-hover-text-color: var(--color-white);

        /* FORMS */
            --light-background-form-input-border-color: var(--color-green);
            --light-background-form-input-option-background-color: var(--color-white);
            --light-background-form-input-text-color: var(--color-green);
            --light-background-form-input-placeholder-text-color: var(--color-gray);
            --light-background-form-input-focus-border-color: var(--color-green);
            --light-background-form-input-focus-text-color: var(--color-green);
            --light-background-form-input-autofill-border-color: var(--color-green);
            --light-background-form-input-autofill-background-color: transparent;
            --light-background-form-input-autofill-text-color: var(--color-green);
            --light-background-form-input-label-color: var(--color-green);
            --light-background-form-input-notice-color: var(--color-green);
            --dark-background-form-input-border-color: var(--color-white);
            --dark-background-form-input-option-background-color: var(--color-green);
            --dark-background-form-input-text-color: var(--color-white);
            --dark-background-form-input-placeholder-text-color: var(--color-gray-light);
            --dark-background-form-input-focus-border-color: var(--color-white);
            --dark-background-form-input-focus-text-color: var(--color-white);
            --dark-background-form-input-autofill-border-color: var(--color-white);
            --dark-background-form-input-autofill-background-color: transparent;
            --dark-background-form-input-autofill-text-color: var(--color-white);
            --dark-background-form-input-label-color: var(--color-white);
            --dark-background-form-input-notice-color: var(--color-white);

        /* EYEBROW */
            --eyebrow-font-weight: 500;
            --eyebrow-letter-spacing: 0.1em;

        /* MARGINS */
            --block-margin: 4rem;
            --column-gap: 4rem;
            --row-gap: 2rem;
            --item-column-gap: 2rem;
            --item-row-gap: 2rem;

        /* MISCELANEOUS */
            --full-width: max(var(--wide-width), calc(100% - 8rem));
            --footer-bubbles-height: 0rem;
	        --admin-bar-height: 0rem;

}

:root:has(body.admin-bar){
    --admin-bar-height: var(--wp-admin--admin-bar--height);
}

@media (min-width: 768px){
    :root{
        /* CONFIGURABLE SETTINGS */
            /* MISCELANEOUS */
                --block-margin: 8rem;
                --column-gap: 8rem;
                --row-gap: 4rem;
    }
}

@media (min-width: 1330px){
    :root{
        /* CONFIGURABLE SETTINGS */
            /* TEXT */
            /* MISCELANEOUS */
                --container-width: 131.2rem;

    }
}


/* CUSTOM COLOR SCHEMES */
[data-color-scheme|="dark-light"]{
    /* BACKGROUND */
    --background-color: var(--dark-light-background-color);
}


/* THEME STYLE */
html{
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--fixed-header-height) + var(--admin-bar-height));
}

strong{
    font-weight: 400;
}

.eyebrow{
    opacity: 0.6;
}

.blocks-container > h1{
    font: var(--font-headline-2);
}

.blocks-container > h2{
    font: var(--font-headline-5);
}

.blocks-container > h3{
    font: var(--font-headline-6);
}

.blocks-container > :is(h4, h5, h6){
    font: var(--font-headline-7);
}

.blocks-container > :is(h1, h2, h3, h4, h5, h6){
    font-weight: 400;
    margin-bottom: calc(0.5em * var(--secondary-line-height));
}

.blocks-container > :is(h1, h2, h3, h4, h5, h6):not(:first-child){
    margin-top: calc(1em * var(--secondary-line-height));
}


/* TITLES */
:where(h1, h2, h3, h4, h5, h6) strong{
    font-style: italic;
}

:where(h1, h2, h3, h4, h5, h6) strong span{
    position: relative;
    display: inline-block;
    z-index: 1;
}

:where(h1, h2, h3, h4, h5, h6) strong span::before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0.1em;
    height: 0.4em;
    width: calc(100% + 0.5em);
    left: -0.2em;
    background: var(--accent-color);
    border-radius: 10rem;
    z-index: -1;
    pointer-events: none;
}

:where(h1, h2, h3, h4, h5, h6) strong span:last-child:before{
    width: calc(100% + 0.4em);
}

:where(h1, h2, h3, h4, h5, h6) strong + strong span:last-child:before{
    width: calc(100% + 0.5em);
}


/* BUTTONS */
:is(.primary-button, .secondary-button, .tertiary-button, .wp-element-button){
    font-weight: 600;
}

.wp-block-buttons{
    margin-bottom: calc(1em * var(--primary-line-height));
}

:is(.primary-button-alt, .secondary-button-alt){
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: stretch;
}

:is(.primary-button-alt, .secondary-button-alt):is(:hover, :focus, :active){
    text-decoration: none;
    outline: none;
}

:is(.primary-button-alt, .secondary-button-alt) span svg{
    width: 6.4rem;
    height: auto;
    max-width: unset;
}

:is(.primary-button-alt, .secondary-button-alt):is(:hover, :focus, :active) span:first-child:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

:is(.primary-button-alt, .secondary-button-alt):is(:hover, :focus, :active) span:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

:is(.primary-button-alt) span{
    border-width: var(--primary-button-border-width);
    border-style: var(--primary-button-border-style);
    border-radius: var(--primary-button-border-radius);
    padding: calc(var(--primary-button-vertical-padding) - (var(--primary-button-border-width) * 2)) calc(var(--primary-button-horizontal-padding) - (var(--primary-button-border-width) * 2));
    border-color: var(--primary-button-border-color);
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-text-color);
    box-shadow: var(--primary-button-box-shadow);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

:is(.primary-button-alt):is(:hover, :focus, :active) span{
    border-color: var(--primary-button-hover-border-color);
    background-color: var(--primary-button-hover-background-color);
    color: var(--primary-button-hover-text-color);
    box-shadow: var(--primary-button-hover-box-shadow);        
}

:is(.primary-button-alt) span svg{
    margin: calc((var(--primary-button-vertical-padding) - var(--primary-button-border-width)) * -1) calc((var(--primary-button-horizontal-padding) - var(--primary-button-border-width)) * -1);
}

:is(.secondary-button-alt) span{
    border-width: var(--secondary-button-border-width);
    border-style: var(--secondary-button-border-style);
    border-radius: var(--secondary-button-border-radius);
    padding: calc(var(--secondary-button-vertical-padding) - (var(--secondary-button-border-width) * 2)) calc(var(--secondary-button-horizontal-padding) - (var(--secondary-button-border-width) * 2));
    border-color: var(--secondary-button-border-color);
    background-color: var(--secondary-button-background-color);
    color: var(--secondary-button-text-color);
    box-shadow: var(--secondary-button-box-shadow);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

:is(.secondary-button-alt):is(:hover, :focus, :active) span{
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-background-color);
    color: var(--secondary-button-hover-text-color);
    box-shadow: var(--secondary-button-hover-box-shadow);        
}

:is(.secondary-button-alt) span svg{
    margin: calc((var(--secondary-button-vertical-padding) - var(--secondary-button-border-width)) * -1) calc((var(--secondary-button-horizontal-padding) - var(--secondary-button-border-width)) * -1);
}

.alt-button-small{
    --secondary-button-vertical-padding: 0.8rem;
    --secondary-button-horizontal-padding: 1.6rem;
    --secondary-button-padding: var(--secondary-button-vertical-padding) var(--secondary-button-horizontal-padding);
    text-transform: uppercase;
}

.alt-button-small span svg{
    width: 3.8rem;
}


/* FORMS */
body :is(.gform_wrapper.gravity-theme, *) :is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea){
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;
    padding-left: 0;
    padding-right: 0;
}

body .gform_wrapper.gravity-theme .gfield_label{
    font: var(--font-body);
    margin-bottom: 0;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) label a{
    margin-left: 0.3em;
}

body .gform_wrapper.gravity-theme .gform_validation_errors{
    margin: 0 0 var(--row-gap);
}

body .gform_wrapper.gravity-theme .gform_validation_errors > h2{
    font: var(--font-body);
}

body .gform_wrapper.gravity-theme .gform_validation_errors>h2 .gform-icon{
    display: none;
}

body .gform_wrapper.gravity-theme .gfield_validation_message, 
body .gform_wrapper.gravity-theme .validation_message{
    margin: 0;
}

body .gform_wrapper.gravity-theme .gform_footer{
    column-gap: var(--item-column-gap);
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) input{
    cursor: pointer;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) input:checked ~ label::after{
    content: '';
    display: block;
    width: 0.7em;
    height: 0.4em;
    border-color: var(--background-color);
    border-style: solid;
    border-width: 0;
    border-bottom-width: 0.2rem;
    border-left-width: 0.2rem;
    transform: rotateZ(-45deg);
    position: absolute;
    top: 0.6em;
    left: 0.1em;
    pointer-events: none;
}

body .gform_wrapper.gravity-theme .gfield_error :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) label::before,
body .gform_wrapper.gravity-theme .gfield_error :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) label::after{
    border-color: currentColor;
}

body .gform_wrapper.gravity-theme .gfield_error :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) label a{
    color: currentColor;
}


/* DEFAULT TEMPLATE */
.default-template{
    margin: calc(var(--header-height) + var(--block-margin)) 0 0;
}


/* POST LOOP - TEAM MEMBER */
.post-loop-team-member{
    height: 100%;
}

.post-loop-team-member a{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-loop-team-member a > *:nth-last-child(2){
    margin-bottom: var(--item-row-gap);
}

.post-loop-team-member .post-loop-image{
    border-radius: 4rem;
    overflow: hidden;
    margin-bottom: var(--item-row-gap);
    position: relative;
}

.post-loop-team-member .post-loop-image img{
    aspect-ratio: 0.7272;
    transition: all 0.3s ease;
    display: block;
}

.post-loop-team-member a:is(:hover, :focus, :active) .post-loop-image img{
    transform: scale(1.1);
}

.post-loop-team-member .post-loop-image figure{
    border-radius: 4rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    opacity: 0;
}

.post-loop-team-member a:is(:hover, :focus, :active) .post-loop-image figure{
    opacity: 1;
}

.post-loop-team-member a:is(:hover, :focus, :active) .post-loop-image:has(figure) img{
    transform: none;
}

.post-loop-team-member h3{
    font: var(--font-headline-6);
    font-weight: 500;
    margin-bottom: 0;
}

.post-loop-team-member h3 span{
    display: block;
    font: var(--font-headline-7);
    letter-spacing: var(--secondary-letter-spacing);
    font-weight: 500;
    color: var(--light-background-hover-link-color);
}

.post-loop-team-member p{
    text-transform: uppercase;
    margin-bottom: 0;
}

.post-loop-team-member .secondary-button-alt{
    margin-top: auto;
}

.post-loop-team-member a:is(:hover, :focus, :active) .secondary-button-alt span{
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-background-color);
    color: var(--secondary-button-hover-text-color);
    box-shadow: var(--secondary-button-hover-box-shadow);    
}

.post-loop-team-member a:is(:hover, :focus, :active) .secondary-button-alt span:first-child:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.post-loop-team-member a:is(:hover, :focus, :active) .secondary-button-alt span:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* POST LOOP - JOB LISTING */
.post-loop-job-listing{
    border-top: 0.1rem solid;
    padding: var(--item-row-gap) 0;
}

.post-loop-job-listing a{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.post-loop-job-listing .post-loop-image{
    margin-bottom: var(--row-gap);
}

.post-loop-job-listing .post-loop-image img{
    aspect-ratio: 2.15;
    object-fit: cover;
    object-position: center;
    border-radius: 2rem;
}

.post-loop-job-listing h3{
    font: var(--font-headline-5);
    font-weight: 500;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.post-loop-job-listing a:is(:hover, :focus, :active) h3{
    color: var(--secondary-button-hover-background-color);
}

.post-loop-job-listing ul{
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--item-column-gap);
    padding: 0;
    margin: 1rem 0 0;
}

.post-loop-job-listing ul li{
    list-style: none;
}

.post-loop-job-listing p{
    margin: 2.4rem 0 0;
    opacity: 0.6;
    max-width: 80rem;
}

.post-loop-job-listing .secondary-button-alt{
    margin-top: var(--row-gap);
}

.post-loop-job-listing a:is(:hover, :focus, :active) .secondary-button-alt span{
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-background-color);
    color: var(--secondary-button-hover-text-color);
    box-shadow: var(--secondary-button-hover-box-shadow);    
}

.post-loop-job-listing a:is(:hover, :focus, :active) .secondary-button-alt span:first-child:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.post-loop-job-listing a:is(:hover, :focus, :active) .secondary-button-alt span:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

@media (min-width: 768px){
    .post-loop-job-listing a{
        grid-template-columns: min(30rem, 25%) minmax(0, auto) min-content;
        column-gap: var(--item-column-gap);
        align-items: start;
    }

    .post-loop-job-listing .post-loop-image{
        grid-column: 1;
        grid-row: 1 / span 3;
        margin-bottom: 0;
    }

    .post-loop-job-listing h3{
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .post-loop-job-listing .post-loop-image ~ h3{
        grid-column: 2;
    }

    .post-loop-job-listing ul{
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .post-loop-job-listing .post-loop-image ~ ul{
        grid-column: 2 / span 2;
    }

    .post-loop-job-listing p{
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    .post-loop-job-listing .post-loop-image ~ p{
        grid-column: 2 / span 2;
    }

    .post-loop-job-listing .secondary-button-alt{
        grid-column: 3;
        grid-row: 1;
        white-space: nowrap;
        margin-top: 0;
    }
}


/* PAGINATION */
.navigation.pagination .nav-links{
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation.pagination .nav-links .page-numbers{
    min-width: 7.4rem;
    padding: 2.4rem;
    text-align: center;
    opacity: 0.5;
    text-decoration: none;
    min-height: 7.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.navigation.pagination .nav-links .page-numbers::before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0.5;
    border-bottom: 0.2rem solid;
}

.navigation.pagination .nav-links .page-numbers:is(:hover, :focus, :active){
    opacity: 1;
    color: var(--text-color);
}

.navigation.pagination .nav-links .page-numbers.current{
    opacity: 1;
}

.navigation.pagination .nav-links .page-numbers.current::before{
    opacity: 1;
    border-bottom-width: 0.4rem;
}

.navigation.pagination .nav-links :is(.prev, .next){
    font-size: 0;
}

.navigation.pagination .nav-links :is(.prev, .next)::after{
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-bottom: 0.2rem solid;
    border-right: 0.2rem solid;
}

.navigation.pagination .nav-links .prev::after{
    transform: rotate(135deg);
}

.navigation.pagination .nav-links .next::after{
    transform: rotate(-45deg);
}

/*.navigation.pagination .page-numbers.dots:is(:nth-child(3), :nth-last-child(3)),
.navigation.pagination .page-numbers.prev ~ a.page-numbers:nth-child(2):has( + .dots),
.navigation.pagination .page-numbers.dots:nth-last-child(3) + a.page-numbers{
    display: none;
}*/


/* SINGLE POST */
.wp-block-image img{
    border-radius: 2rem;
}

.wp-block-image .wp-element-caption{
    font: var(--font-body-small);
    border-left: 0.2rem solid var(--accent-color);
    padding-left: 0.5rem;
}

.wp-block-quote{
    border-left: 0.2rem solid var(--accent-color);
    padding-left: calc(var(--column-gap) / 2);
    font: var(--font-elevated-2);
    font-weight: 400;
    font-style: italic;
}

.wp-block-quote p{
    margin-bottom: 1rem;
}

.wp-block-quote cite{
    font: var(--font-body);
}

.single-post-categories{
    padding: 0;
    margin: var(--block-margin) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    row-gap: var(--item-row-gap);
    column-gap: var(--item-column-gap);
}

.single-post-categories li{
    list-style: none;
}

.single-post-categories li :is(span, a){
    position: relative;
    display: block;
    padding: 0.8rem 1.6rem;
    z-index: 1;
}

.single-post-categories li :is(span, a)::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3rem;
    background-color: var(--text-color);
    opacity: 0.2;
    transition: all 0.3s ease;
    z-index: -1;
}

.single-post-categories li a{
    text-decoration: none;
}

.single-post-categories li a:is(:hover, :focus, :active){
    color: var(--background-color);
    text-decoration: none;
}

.single-post-categories li a:is(:hover, :focus, :active)::before{
    opacity: 1;
}


/* POST LOOP - POST */
.post-loop-post{
    height: 100%;
}

.post-loop-post a{
    display: flex;
    align-items: flex-end;
    border-radius: 4rem;
    overflow: hidden;
    position: relative;
    width: 100%; 
    height: 90%; 
    min-height: 100%; 
}

.post-loop-post a::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EFFFF0;
    transition: all 0.3s ease;
}

.post-loop-post a[data-color="gray"]::before{
    background-color: #F5F5F5;
}

.post-loop-post a[data-color="yellow"]::before{
    background-color: #FEF5D9;
}

.post-loop-post a .post-loop-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-loop-post a .post-loop-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
    transition: all 0.3s ease;
    mix-blend-mode: multiply;
    filter: saturate(0);
}

.post-loop-post a:is(:hover, :focus, :active) .post-loop-image img,
.post-loop-post a:is(:hover, :focus, :active)::before{
    transform: scale(1.1);
}

.post-loop-post a .post-loop-post-inner{
    position: relative;
    color: var(--color-green);
    overflow: hidden;
}

.post-loop-post-inner{
    display: flex;
    flex-direction: column;
    row-gap: var(--item-row-gap);
    width: 100%;
    height: 100%;
    padding: 3rem;
}

.post-loop-post a h3{
    font: var(--font-headline-6);
    font-weight: 500;
    margin: 0;
    color: currentColor;
}

.post-loop-post a .secondary-button-alt{
    margin-top: auto;
}

.post-loop-post a .secondary-button-alt span{
    color: currentColor;
    border-color: currentColor;
}

.post-loop-post a:is(:hover, :focus, :active) .secondary-button-alt span{
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-background-color);
    color: var(--secondary-button-hover-text-color);
    box-shadow: var(--secondary-button-hover-box-shadow);    
}

.post-loop-post a:is(:hover, :focus, :active) .secondary-button-alt span:first-child:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.post-loop-post a:is(:hover, :focus, :active) .secondary-button-alt span:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

@media (min-width: 768px){
    .post-loop-post-inner{
        padding: 5rem;
    }
}


/* POST LOOP - NEWS */
.post-loop-news{
    border-top: 0.1rem solid;
    padding: var(--item-row-gap) 0 calc(var(--item-row-gap) * 2);
}

.post-loop-news.animate__animated{
    animation-name: fadeInUp;
}

.post-loop-news-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--item-row-gap);
    column-gap: var(--item-column-gap);
    align-items: end;
    text-decoration: none;
}

.post-loop-news-inner:is(:hover, :focus, :active):not(:has(a.post-loop-news-excerpt:is(:hover, :focus, :active))){
    text-decoration: none;
    color: var(--text-color);
}

.post-loop-news-link{
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
    display: block;
    height: 100%;
    z-index: 2;
}

.post-loop-news .secondary-button-alt{
    text-transform: uppercase;   
}

.post-loop-news-inner:is(:hover, :focus, :active):not(:has(a.post-loop-news-excerpt:is(:hover, :focus, :active))) .secondary-button-alt span{
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-background-color);
    color: var(--secondary-button-hover-text-color);
    box-shadow: var(--secondary-button-hover-box-shadow); 
}

.post-loop-news-inner:is(:hover, :focus, :active):not(:has(a.post-loop-news-excerpt:is(:hover, :focus, :active))) .secondary-button-alt span:first-child:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.post-loop-news-inner:is(:hover, :focus, :active):not(:has(a.post-loop-news-excerpt:is(:hover, :focus, :active))) .secondary-button-alt span:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.post-loop-news-meta{
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.2rem;
    row-gap: 0.6rem;
}

.post-loop-news-publication-logo{
    flex-basis: 100%;
    max-width: 150px;
}

.post-loop-news-publication-logo img{
    display: block;
    max-width: 150px;
    height: auto;
}

.post-loop-news-meta time{
    font-weight: 500
}

.post-loop-news h3{
    font: var(--font-headline-6);
    font-weight: 400;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.post-loop-news-inner:is(:hover, :focus, :active):not(:has(a.post-loop-news-excerpt:is(:hover, :focus, :active), .post-loop-news-excerpt a:is(:hover, :focus, :active))) h3{
    color: var(--secondary-button-hover-background-color);
}

.post-loop-news-excerpt{
    opacity: 0.6;
    font-weight: 400;
    text-decoration: none;
}

.post-loop-news-excerpt:has(a){
    opacity: 1;
}

.post-loop-news-excerpt:has(a) :is(a, span){
    opacity: 0.6;
}

a.post-loop-news-excerpt,
.post-loop-news-excerpt a{
    position: relative;
    z-index: 3;
    justify-self: start;
}

.post-loop-news-excerpt a{
    display: inline-block;
}

a.post-loop-news-excerpt:is(:hover, :focus, :active),
.post-loop-news-excerpt a:is(:hover, :focus, :active){
    opacity: 1;
    color: var(--secondary-button-hover-background-color);
    text-decoration: none;
}

.post-loop-news-excerpt p{
    margin-bottom: 0;
}

.post-loop-news-excerpt-link,
a.post-loop-news-excerpt:is(:hover, :focus, :active) .post-loop-news-excerpt-link,
.post-loop-news-excerpt:is(:hover, :focus, :active) a.post-loop-news-excerpt-link{
    text-decoration: underline;
    z-index: 4;
}

@media (max-width: 767px) {
    .post-loop-news-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }

    .post-loop-news-link {
        display: flex;
        height: 100%;
        z-index: 2;
        width: 100%;
        position: absolute;
    }
}

@media (min-width: 768px){
    .post-loop-news-inner{
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    }

    .post-loop-news-inner .post-loop-news-meta{
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .post-loop-news-inner h3{
        grid-column: 1;
        grid-row: 2;
    }

    .post-loop-news-inner .post-loop-news-excerpt-container{
        grid-column: 1;
        grid-row: 3;
    }

    .post-loop-news-inner .secondary-button-alt{
        grid-column: 2;
        grid-row: 2 / span 2;
    }
}


/* 404 - PAGE NOT FOUND */
.page-not-found{
    margin: calc(var(--header-height) + var(--block-margin)) auto calc(var(--block-margin) + var(--footer-bubbles-height));
    text-align: center;
}