/*

Theme Name: Oakland County Blog
Author: Graham Key, Oakland County Information Technology
Version: 1.2
Description: This theme refreshes the Oakland County Blog's visual identity while bringing it more closely in line with the OakGov parent brand. New features include custom taxonomies, effecient page loading, delay-free pagination, automation of common repetative tasks. This theme was created in partnership with Oakland County's Department of Public Communications.
*/

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

* { box-sizing: border-box; }

/**** Remove Pagination from Resources Loop ****/

.no-pagination nav.wp-block-query-pagination.is-layout-flex.wp-block-query-pagination-is-layout-flex { display: none; }

/**** Home "View All" Button ****/

.home.row-1 {
	.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex {
		margin-top: 2rem;
		.wp-block-button {
			align-items: center;
			display: flex;
			gap: 1rem;
			width: 100%;
			&::before, &::after {
				background-color: var(--neutral-500);
				content: '';
				flex: 1;
				height: 1px;
			}
			.wp-block-button__link {
				background-color: var(--green-500);
				flex: 1;
				font-size: 1rem;
				min-width: 160px;
				transition: 0.2s ease-in-out;
				&:hover,&:focus-visible {
					background-color: var(--green-600);
					scale: .99;
				}
				&:active { scale: .95; }
			}
		}
	}
}


/***** Loop Pagination *****/
nav.navigation.pagination {
    margin-top: 2rem;
    .nav-links {
        text-align: center;
        a {
            &.page-numbers {
                background-color: var(--neutral-100);
                border-radius: var(--button-border-radius);
                color: var(--neutral-900);
                display: inline-block;
                margin-inline: .25rem;
                padding: 1rem;
                text-decoration: none;
                transition: 0.2s ease-in-out;
                &.prev,&.next {
                    font-weight: 600;
                    margin-inline: 1rem;
                }
                &:hover,&:focus-visible {
                    background-color: var(--neutral-200);
                }
            }
        }
        span.page-numbers.current {
            background-color: var(--green-500);
            border-radius: var(--button-border-radius);
            color: white;
            display: inline-block;
            padding: 1rem;
            text-decoration: none;
        }
    }    
}

/***** Colors *****/
body {

    --green-900: hsl(160deg 100% 8%);
    --green-800: hsl(160deg 100% 11%);
    --green-700: hsl(160deg 100% 16%);
    --green-600: hsl(160deg 100% 21%);
    --green-500: hsl(160deg 100% 26%);
    --green-400: hsl(150deg 55% 65%);
    --green-300: hsl(150deg 55% 75%);
    --green-200: hsl(150deg 45% 85%);
    --green-100: hsl(150deg 40% 95%);
    --green-50: #F6F9F5;

    --blue-900: hsl(198deg 100% 10%);
    --blue-800: hsl(198deg 100% 15%);
    --blue-700: hsl(198deg 100% 20%);
    --blue-600: hsl(198deg 100% 25%);
    --blue-500: hsl(198deg 100% 35%);
    --blue-400: hsl(198deg 85% 70%);
    --blue-300: hsl(198deg 85% 80%);
    --blue-200: hsl(198deg 85% 90%);
    --blue-100: hsl(198deg 75% 95%);
    --blue-50: hsl(198deg 50% 95%);
	
	--orange-900: hsl(14 60% 27% / 1); /* new */
    --orange-800: hsl(16.71deg 66.9% 35.95%); /* new */
    --orange-700: hsl(18.82deg 73.8% 44.9%);
    --orange-600: #df5f1e;
    --orange-500:#f37320;
    --orange-400:#f68d38;
    --orange-300:#f8a15e;
    --orange-200: hsl(26.56deg 93.85% 74.51%);
    --orange-100: hsl(26.9deg 95.6% 82.16%);
    --orange-50: hsl(27.25deg 97.5% 90%); /* new */

    --neutral-900: #1A1A1A;
    --neutral-800: #2A2A2A;
    --neutral-700: #3A3A3A;
    --neutral-600: #4A4A4A;
    --neutral-500: #5A5A5A;
    --neutral-400: #8A8A8A;
    --neutral-300: #BABABA;
    --neutral-200: #CECECE;
    --neutral-100: #EAEAEA;
    --neutral-50: #F1F1F1;

    --brand-900: var(--green-900);
    --brand-800: var(--green-800);
    --brand-700: var(--green-700);
    --brand-600: var(--green-600);
    --brand-500: var(--green-500);
    --brand-400: var(--green-400);
    --brand-300: var(--green-300);
    --brand-200: var(--green-200);
    --brand-100: var(--green-100);
    --brand-50: var(--green-50);

}

div#wpcom-gifting-banner { display: none; }

body {
    --admin-height: 116px;
	--header-height: 116px;
	--distance-to-top: calc(var(--a-bar-spacer) + var(--header-height));
}

section.article-content > :first-child + hr {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.logged-in {
    --admin-height: 148px;
}

.menu-open {
	overflow: hidden;
}

button {
	touch-action: manipulation;
}

img {
    background-color: var(--neutral-100);
}

figure.wp-block-post-featured-image > a {
	border-radius: var(--image-border-radius);
    overflow: hidden;
}

figure.wp-block-post-featured-image > a > img {
    transition: 0.5s ease-in-out;
}

figure.wp-block-post-featured-image > a:hover > img, figure.wp-block-post-featured-image > a:focus > img {
    transform: scale(1.025);
}

.featured-article .wp-block-post-date {
	color: var(--neutral-500);
    font-size: 1rem;
	font-weight: 650;
    margin: -.5rem 0 1rem 0;
}

.latest-posts .wp-block-post-date,
.interior-page .wp-block-post-date {
	color: var(--neutral-500);
    font-size: .75rem;
	font-weight: 650;
	margin-top: .5em;
}

.latest-posts .wp-block-group__inner-container,
.interior-page .wp-block-group__inner-container {
    display: grid;
    grid-gap: .25rem;
}

::selection { background-color: var(--green-200); }
::-moz-selection {	background-color: var(--green-200); }


/***** Admin *****/

h2.theme-name { box-sizing: initial; }

/***** Stock Elements *****/

.hide { display: none!important; }

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    background-color: var(--neutral-100);
}

.button {
	align-items: center;
    background-color: var(--green-500);
    border-radius: var(
    --button-border-radius);
    color: white;
    display: inline-flex;
    font-weight: 600;
    gap: .75rem;
    padding: 1rem 1.15rem 1rem 1rem;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.button:hover,
.button:focus {
    background-color: var(--green-600);
    transform: scale(.98);
}

.button:active {
    background-color: var(--green-700);
    transform: scale(.95);
}

.btn {
    background-color: var(--brand-500);
	border: 1px solid var(--brand-500);
    border-radius: var(--button-border-radius);
    color: white;
	cursor: pointer;
    display: inline-block;
    font-weight: 600;
    padding: 10px 35px;
    text-decoration: none;
    transition: var(--background-transition);
}

.btn:hover,
.btn:focus {
    background-color: var(--brand-700);
}

.wp-block-separator {
    border-top: 1px solid var(--neutral-200);
    margin: 55px 0;
}

.has-vivid-green-cyan-background-color {
    background-color: var(--brand-500)!important;
}

.is-style-3d .wp-block-button__link {
    box-shadow: none;
}

a.wp-block-button__link {
    border-radius: var(--button-border-radius);
	font-size: 1.125rem;
    font-weight: 700;
	padding: 10px 15px;
}

a.wp-block-button__link strong {
    font-weight: 700;
}

.contact-form :is([type=submit],button:not([type=reset])) {
    background-color: var(--green-500);
    border-radius: var(--button-border-radius);
    font-size: 1rem;
    font-weight: 700;
    padding: 1em 1.5em;
    transition: 0.2s ease-in-out;
}

.contact-form :is([type=submit],button:not([type=reset])):hover,
.contact-form :is([type=submit],button:not([type=reset])):focus {
    background-color: var(--green-600);
    transform: scale(.99);
}

.contact-form :is([type=submit],button:not([type=reset])):active {
    background-color: var(--green-700);
    transform: scale(.95);
}

.wp-block-jetpack-contact-form>* {
    padding: 0!important;
}

/*Info Box*/

article.article p.is-style-info::before {
    align-items: center;
    align-self: stretch;
    background-color: var(--blue-500);
    color: white;
    content: '\f129';
    display: flex;
    font-family: 'FontAwesome';
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: -20px;
    margin-top: -20px;
    padding: 20px;
}

.wp-block-paragraph/*:not(.has-text-color)*/.is-style-info,
p/*:not(.has-text-color)*/.is-style-info {
    background-color: var(--blue-100)!important;
    color: var(--blue-900)!important;
    font-size: 1.125rem;
	line-height: 2;
}

p[style="background-color:#e8a893"] {
    background-color: var(--blue-50)!important;
    border: 1px solid var(--blue-300);
}

.wp-block-paragraph/*:not(.has-text-color)*/.is-style-info > span,
p/*:not(.has-text-color)*/.is-style-info > span {
	line-height: 2;
}

.wp-block-paragraph/*:not(.has-text-color)*/.is-style-info a,
p/*:not(.has-text-color)*/.is-style-info a {
	color: var(--blue-600)!important;
}

article.article .wp-block-paragraph/*:not(.has-text-color)*/.is-style-info,
article.article p/*:not(.has-text-color)*/.is-style-info {
    align-items: center;
    display: flex;
    gap: 20px;
    overflow: hidden;
    padding: 20px 20px 20px 0;
}

p + p.is-style-info {
    margin-bottom: 1.75rem!important;
    margin-top: 1.5rem!important;
}

p.is-style-info + .responsive-iframe {
    margin-top: 2rem;
}

/***** Typography *****/

h1, h2, h3, h4, h5, p, li, a, span, input, ::placeholder, button, div {
    font-family: "Public Sans", system-ui;
    line-height: 1.5;
	text-wrap-style: pretty;
}

#jp-relatedposts h3.jp-relatedposts-headline, div.sharedaddy h3.sd-title { font-size: 1.25rem!important; }

/***** Units *****/

body {
    --a-bar-spacer: 0px;
    --default-width: min(1300px, 100%);
    --image-border-radius: 8px;
    --button-border-radius: 4px;
    --background-transition: background-color .2s ease-in;
	--side-padding: min(50px, 7.5%);
}

body.logged-in {
    --a-bar-spacer: 32px;
}

/***** Structure *****/

body#frontEnd {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: space-between;
    margin: 0;
    min-height: 100vh;
    padding: 0;
}

/***** Header *****/

.site-header {
    background-color: var(--brand-500);
    color: white;
    padding: 30px 0;
    position: sticky;
    top: var(--a-bar-spacer);
    z-index: 999;
}

.site-header section.main {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: auto;
    max-width: var(--default-width);
	padding: 0 var(--side-padding);
    width: 100%;
}

.nav-and-search {
    align-items: center;
    display: flex;
    gap: 30px;
}

header a.logo {
    align-items: center;
    color: white;
    display: flex;
    font-size: 1.75rem;
    font-weight: 700;
    gap: 1.5rem;
    text-decoration: none;
}

header a.logo > svg {
    fill: white;
    height: 48px;
}

nav#mainNav ul {
    display: flex;
    list-style: none;
    padding: 0;
}

nav#mainNav > div > ul > li > a {
    background-color: transparent;
    border-radius: var(--button-border-radius);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-decoration: none;
    transition: var(--background-transition);
}

nav#mainNav > div > ul > li > a:hover,
nav#mainNav > div > ul > li > a:focus {
    background-color: var(--brand-700);
}

/* Search Button */

button#searchToggle {
    align-items: center;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

button#searchSubmitButton {
    font-family: 'Open Sans';
    font-weight: 600;
}

button#searchToggle svg {
    fill: var(--brand-500);
    width: 20px;
}

button#searchToggle svg.close-icon {
    display: none;
}

/* Search Bar */

#searchBar {
    background-color: var(--neutral-50);
	border-bottom: 1px solid var(--neutral-100);
    left: 0;
	opacity: 0;
    padding: 15px;
    position: fixed;
    top: 0;
    transition: 0.2s ease-in;
    width: 100%;
    z-index: 1;
}

#searchBar.active {
	opacity: 1;
    transform: translate(0, var(--distance-to-top));
}

.site-search .wp-block-search__inside-wrapper {
    margin: auto;
    width: 500px;
    max-width: 100%;
}

#searchBar .wp-block-search__input {
    border: 0!important;
    border-radius: var(--button-border-radius);
}

button.wp-block-search__button.wp-element-button {
    border-radius: var(--button-border-radius);
}

button#searchButton {
    align-items: center;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

button#searchButton svg {
    fill: var(--brand-500);
    height: 24px;
    width: 24px;
}

#searchButton.search-open svg.close-icon {
    display: block;
}

#searchButton svg.close-icon {
    display: none;
}

#searchButton.search-open svg.search-icon {
    display: none;
}

input#searchInput {
	border-color: transparent!important;
    outline: 1px solid transparent;
	padding:	10px 1rem;
    transition: 0.2s ease-in;
}

input#searchInput:hover {
	border-color: transparent!important;
    outline: 1px solid var(--neutral-100);    
}

input#searchInput:focus {
    outline: 1.5px solid var(--neutral-200);
}

body main { transition: all 0.2s ease-in; }
body.search-open main { transform: translate(0, 75px); }
.search-open footer { transform: translate(0, 75px); }

/***** Main *****/

main.wrapper {
    flex: 1;
    margin: auto;
    max-width: var(--default-width);
	padding: 0 var(--side-padding);
    width: 100%;
}

/***** Homepage *****/

.home h1.title {
    display: none;
}

body.home section.article-details {
    display: none;
}

.featured-article img {
    aspect-ratio: 3/2;
	border:	1px solid var(--neutral-100);
    border-radius: var(--image-border-radius);
    object-fit: cover;
}

.featured-article h2.wp-block-post-title {
    margin-top: 10px;
}

.featured-article .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    overflow: hidden;
	text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.featured-article h2.wp-block-post-title a {
    color: var(--neutral-900);
    font-size: 1.75rem;
    font-weight: 700;
    text-decoration: none;
}

h2.wp-block-post-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.featured-article h2.wp-block-post-title a:hover,
.featured-article h2.wp-block-post-title a:focus {
    text-decoration: underline;
}

/* Row 1 */

.home .row-1,
.home.row-1 {
    display: flex;
	flex-wrap: wrap;
    gap: 50px;
}

.home .row-1  > .column-1,
.home.row-1 > .column-1 {
	flex-basis: 700px!important;
    width: 100%;
}

.home .row-1  > .column-2,
.home.row-1 > .column-2 {
	flex-basis: 450px!important;
    width: 100%;
}

/* .home .row-1  > .column-2,
.home.row-1 > .column-2 {
    min-width: 275px;
    max-width: 450px;
    width: 100%;
} */

.latest-posts img {
    aspect-ratio: 4 / 3;
    border-radius: var(--image-border-radius);
}

.latest-posts > ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.latest-posts li.wp-block-post {
    align-items: center;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 160px 1fr;
}

.latest-posts h2 {
    font-size: 1.125rem;
    margin: 0;
}

.latest-posts h2 a {
    color: var(--neutral-900);
    text-decoration: none;
}

.latest-posts :where(figure) {
    margin: 0;
}

.taxonomy-subjects.rollup.wp-block-post-terms,
.rollup a {
    font-size: .875rem!important;
}

/* Row 2 */

.social-promo {
    align-items: center;
    display: flex;
    gap: 50px;
    justify-content: space-between;
}

body .social-promo p {
    flex: 1;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.social-container {
    display: flex;
    flex: 1;
    justify-content: space-between;
    max-width: 550px;
	width: 100%;
}

.social-container > a {
    background-color: blue;
    border-radius: 100%;
    height: 75px;
    width: 75px;
}

a.facebook,
a.twitter,
a.youtube,
a.instagram,
a.linkedin {
    align-items: center;
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    text-decoration: none;
}


a.facebook::after,
a.twitter::after,
a.youtube::after,
a.instagram::after,
a.linkedin::after {
    color: white;
    font-family: 'Font Awesome 5 Brands';
}

a.facebook { background-color: #1877F2; }
a.facebook::after { content: '\f39e'; }

a.twitter { background-color: #1C1C1B; }
a.twitter::after { content: '\f099'; }

a.youtube { background-color: #FF0100; }
a.youtube::after { content: '\f167'; }

a.instagram { background-color: #FE2179; }
a.instagram::after { content: '\f16d'; }

a.linkedin { background-color: #007EBB; }
a.linkedin::after { content: '\f0e1'; }

/* Row 3 */

.homepage-tag-cloud-container {
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--button-border-radius);
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
}

.homepage-tag-cloud-container > * {
    margin: 0;
}

.row-3 .jetpack_subscription_widget h2.widget-title {
    font-size: 1.125rem;
}

.row-3 div#subscribe-text p {
    font-size: 1rem;
}

.row-3 div#blog_subscription-2 {
    height: 100%;
    padding: 30px;
}

/* Rows 4 & 5 */

.loop-section-header h2.wp-block-heading {
    font-size: 1.75rem;
    margin: 0;
}

.loop-section-header p.more {
    margin: 0;
}

.loop-section-header p.more a {
    align-items: center;
    color: var(--neutral-900);
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.loop-section-header p.more a::after {
    color: var(--brand-500);
    content: '\f054';
    font-family: 'FontAwesome';
    margin-left: 10px;
}

.loop-section-header .wp-block-column {
    align-items: center;
    display: flex;
}

.loop-section-header .wp-block-column[style="flex-basis:33.33%"] {
    justify-content: flex-end;
}

/***** Things to Do Loop *****/

.wp-block-group.four-col-loop > .wp-block-group__inner-container {
    display: grid;
    grid-gap: 50px;
    grid-auto-flow: columns;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/***** Interior Pages *****/

h2.headline {
    font-size: 3rem;
    font-weight: 700;
	line-height: 1.6;
    margin: 0;
}

p.page-description,
h2.headline + p:not(.excerpt) {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 40px 0 45px 0!important;
}

.page section.article-details {
    margin-bottom: 50px;
}

.archive .featured-image,
.search .featured-image {
    display: flex;
}

.taxonomy-details p {
    border-bottom: 1px solid var(--neutral-200);
    font-size: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.article-content h2 + p { margin: .75em 0 0 0; }

.wp-block-newspack-blocks-homepage-articles.wpnbha.show-image.image-alignleft.ts-4.is-3.is-landscape.has-text-align-left {
    > div {
        display: grid;
        grid-gap: min(50px, 5%);
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        article {
            justify-items: start;
            display: grid;
            grid-gap: 2rem;
            margin: 0;
            h2 a:hover { text-decoration: underline; }
            figure.post-thumbnail {
                aspect-ratio: 3/2;
                border-radius: .5rem;
                display: flex;
                margin: 0;
                object-fit: cover;
                overflow: hidden;
            }
        }
    }
}

a.more-link {
    color: var(--green-500);
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1em;
}

/* Rollups */

.thumbnail-placeholder {
    aspect-ratio: 3/2;
    background: rgb(0,41,27);
    background: linear-gradient(315deg, rgba(0,41,27,1) 0%, rgba(0,133,88,1) 50%, rgba(117,215,166,1) 100%);
	border-radius: var(--image-border-radius);
}

.interior-page ul.wp-block-post-template {
    display: flex;
	flex-wrap: wrap;
    gap: 50px;
}

.interior-page .taxonomy-subjects.wp-block-post-terms a {
    font-size: .9rem;
}

.interior-page li {
    display: flex;
	flex: 1;
    flex-direction: column;
    gap: 20px;
	min-width: 240px;
}

.interior-page :where(figure) {
    margin: 0;
}

.interior-page img {
    aspect-ratio: 3 / 2;
	background-color: var(--neutral-100);
    border-radius: var(--image-border-radius);
    object-fit: cover;
}

.interior-page h2 {
    font-size: 1.125rem;
    margin: 0;
}

.interior-page h2 a {
    color: var(--neutral-900);
    text-decoration: none;
}

/***** Recurring Widgets *****/

/*Tag Cloud*/
.wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

/* a.tag-cloud-link[href="https://oaklandcountyblog.com/tag/jonathan-schechter/"],
a.tag-cloud-link[href="https://oaklandcountyblog.com/tag/oakland-county/"],
a.tag-cloud-link[href="https://oaklandcountyblog.com/tag/metro-detroit/"],
a.tag-cloud-link[href="https://oaklandcountyblog.com/tag/michigan/"],
a.tag-cloud-link[href="https://oaklandcountyblog.com/tag/nature/"],
a.tag-cloud-link[href="https://oaklandcountyblog.com/tag/nature-education/"]  {
    display: none;
} */

a.tag-cloud-link {
    background-color: var(--brand-500);
    border-radius: var(--button-border-radius);
    color: white;
    display: inline-block;
    font-size: 1rem!important;
    margin: 0;
    padding: 5px 10px;
    text-decoration: none;
}

/*Subscription Sign-Up*/

.subscription-box,
.subscription-box > div {
	height: 100%;
}

.subscription-box > div {
    background-color: var(--brand-500);
    border-radius: var(--button-border-radius);
    color: white;
    display: grid;
    grid-gap: 1rem;
    padding: 30px;
}

.sidebar.subscription-box > div {
	padding: 20px;
}

.subscription-box h3.wp-block-heading {
    font-size: 1.125rem;
}

.subscription-box .subscription-text > div {
	display: grid;
	grid-gap: 10px;
}

.subscription-box * {
    margin: 0;
}

.subscription-box p {
    font-weight: 500;
}

form#subscribe-blog-blog_subscription-2 {
    display: grid;
    grid-gap: 1rem;
}

.wp-block-jetpack-subscriptions__form-elements {
    border-radius: var(--image-border-radius);
    display: flex;
    overflow: hidden;
}

.wp-block-button__link {
    background-color: var(--brand-700);
    border: 0;
    border-radius: 0;
    font-size: .875rem;
    font-weight: 600;
    padding: 10px;
}

input#subscribe-field-blog_subscription-2 {
    border: 0;
    font-size: .875rem;
    padding: 10px;
    width: 100%;
}

p#subscribe-email {
    flex: 1;
    min-width: 0;
}

/***** Articles *****/

.single article.article,
.page-template-interior-page article.article {
    display: flex;
    flex-direction: column;
	gap: 30px 50px;
}

.content-and-sidebar {
    display: flex;
    gap: 50px;
}

.content-and-sidebar > .article-content {
    flex: 1;
	flex-basis: 850px;
	flex-grow: 0;
}

.content-and-sidebar > aside.sidebar {
    flex-basis: 300px;
	flex-grow: 1;
}

section.article-content {
    overflow: hidden;
}

.single article.article figure.wp-block-image.size-large {
    border-radius: var(--image-border-radius);
    margin: 50px 0;
    overflow: hidden;
    width: 98%;
}

.byline,
.date-published {
    display: inline-block;
	font-size: 1rem;
/*     text-transform: uppercase; */
}

p.byline,
p.date-published {
    display: inline-flex;
    font-weight: 600;
    gap: 10px;
	line-height: 1;
	margin-bottom: 0;
}

p.byline > svg,
p.date-published > svg {
    fill: var(--brand-500);
    width: 15px;
}

/* .byline a::before {
	color: var(--neutral-900);
	content: 'By';
	margin-right: 10px;
	pointer-events: none;
	user-select: none;
} */

p.byline:not(:has(a)) {
    display: none;
}

.byline a,
.date-published {
	color: var(--neutral-900);
	font-size: 1rem;
    font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.byline a + span {
	display: none;
	margin-left: 7px;
}

.article-meta {
    display: flex;
	flex-wrap: wrap;
    gap: 0 2rem;
	margin-bottom: 1em;
}

/* .byline a::after {
	color: var(--neutral-900);
    content: '/';
    margin: 0 10px;
	pointer-events: none;
	user-select: none;
} */

.taxonomy-bylines.wp-block-post-terms {
    font-size: 1.125rem;
}

.taxonomy-bylines.wp-block-post-terms::before {
    content: 'By';
    font-family: var(--default-font);
    margin-right: .5rem;
}

.single .taxonomy-bylines.wp-block-post-terms a {
    color: var(--neutral-900);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

p.subject a,
.archive p.subject,
.search p.subject,
#postsContainer p.subject,
.taxonomy-subjects.wp-block-post-terms a {
    color: var(--brand-500);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.page-template-interior-page h2.headline,
.single h2.headline {
    margin-bottom: .5em;
}

.page-template-interior-page section#articleDetails,
.single section#articleDetails {
    border-bottom: 1px solid var(--neutral-200);
    grid-column: 1/3;
}

section.article-meta {
/*     display: none; */
}

article.article h3 {
    font-size: 1.5rem;
}

article p,
article li {
    font-size: 1.125rem;
}

.article-content p,
.article-content li {
	font-size: 1.25rem;
	line-height: 1.75;
}

.single .article-content a {
    color: var(--brand-500);
}

article p a,
p.wp-block a {
    color: var(--brand-500);
    font-weight: 600;
}

.single .article-content p a:hover,
.single .article-content p a:focus,
.single .article-content li a:hover,
.single .article-content li a:focus {
	background-color: var(--green-100);
}

.single .article-content .wp-block-separator {
    margin: 30px 0;
}

/*featured image*/
article #featuredImage {
    aspect-ratio: 3/2;
	border: 1px solid var(--neutral-100);
    border-radius: var(--image-border-radius);
	object-fit: cover;
    position: relative;
	width: 100%;
}

.featured-image .image {
    background-color: var(--neutral-100);
}

button.expand-image {
    display: none;
}

.single div#featuredImageContainer,
.single section.article-content {
    grid-column: 1/2;
}

section.article-content > :first-child {
    margin-top: 0;
}

.image-container .image {
    background-size: cover;
    height: 100%;
    position: absolute;
    width: 100%;
}

#featuredImageCaption {
    border-bottom: 1px solid var(--neutral-200);
    display: block;
    padding: 1rem 0;
}

.caption-container#featuredImageCaption[data-text=""] {
    display: none;
}

/* YouTube Embed */

section.article-content .wp-block-embed iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

/*Article Share */
.article-share p {
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.article-share .share-options a {
    border-radius: 100%;
    height: 50px;
    width: 50px;
}

.article-share .share-options {
    display: flex;
    gap: 1.125rem;
}

.article-share {
    border-top: 1px solid var(--neutral-200);
    margin-top: 30px;
    padding-top: 30px;
}

/*sidebar*/

aside.sidebar > :first-child h2.wp-block-heading {
    margin-top: 0;
}

aside.sidebar h2.wp-block-heading {
    font-size: 1.125rem;
}

aside#articleSidebar {
    align-content: start;
    display: grid;
    grid-column: 2/3;
    grid-gap: 50px;
    grid-row: 2/5;
}

aside.sidebar a.wp-block-latest-posts__post-title {
    color: var(--neutral-900);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

aside.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts {
    display: grid;
    grid-gap: 22px;
}

/* After Article */

section.after-post {
    border-top: 1px solid var(--neutral-200);
    margin-top: 50px;
    padding-top: 50px;
}

section.after-post > :first-child > :first-child {
    margin-top: 0;
}

section.after-post .wp-block-latest-posts.wp-block-latest-posts__list li {
    min-width: 0;
}

.after-post ul.wp-block-latest-posts__list.wp-block-latest-posts {
    display: grid;
    grid-gap: 50px;
    grid-template-columns: repeat(4, 1fr);
}

.wp-block-latest-posts__featured-image {
    aspect-ratio: 3/2;
    border-radius: var(--image-border-radius);
    overflow: hidden;
}

.after-post ul.wp-block-latest-posts__list.wp-block-latest-posts img {
    max-width: unset;
    min-height: 100%;
    width: auto;
}

.after-post ul.wp-block-latest-posts__list.wp-block-latest-posts a {
    color: var(--neutral-900);
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 20px;
}

/***** Embeds *****/

.responsive-iframe {
    aspect-ratio: 16/9;
    background-color: var(--neutral-50);
    border-radius: var(--image-border-radius);
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.responsive-iframe iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/***** CTA's *****/

.cta {
    background-color: var(--brand-50);
    border-radius: var(--button-border-radius);
    padding: 30px;
    text-align: center;
}

.cta p.heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
}

.cta p.description {
    font-size: 1.25rem;
}

/***** Footer *****/

footer {
    .wp-block-button__link {
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: .5px;
        transition: 0.2s ease-in-out;
        &:hover,&:focus-visible {
            background-color: var(--green-800);
            scale: .99;https://www.oakgov.com/
        }
        &:active {
            background-color: var(--green-900);
            scale: .95;
        }
    }
}

footer { transition: 0.2s ease-in; }

.site-footer section.main > #ocblog-widget {
    display: grid;
    grid-gap: 1rem;
}

div[itemtype="http://schema.org/LocalBusiness"] {
    display: grid;
    grid-gap: 1rem;
}

.site-footer {
    background-color: var(--brand-500);
    color: white;
}

.site-footer section.main {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-between;
    margin: auto;
    max-width: var(--default-width);
    padding: 40px var(--side-padding);
    width: 100%;
}

.site-footer section.main > #ocblog-widget {
    flex: 1;
    max-width: 370px;
    min-width: 275px;
}

.site-footer section.main > #ocblog-widget .sidebar.subscription-box > div {
    padding: 0;
}

footer.site-footer #ocblog-widget * {
    margin: 0;
}

footer.site-footer #ocblog-widget .wp-block-group__inner-container {
    display: grid;
    grid-gap: 1rem;
}

footer a {
    color: white;
}

.site-footer .jetpack_subscription_widget {
    background-color: unset;
    padding: 0;
}

footer.site-footer h2 {
    font-size: 1.25rem;
    margin-bottom: .5em;
}

.site-footer .jetpack_subscription_widget h2.widget-title {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.site-footer section.post-footer {
    background-color: var(--brand-600);
}

.site-footer section.post-footer span {
    display: block;
    margin: auto;
    padding: 20px var(--side-padding);
    width: var(--default-width);
}

footer.site-footer h2.wp-block-heading {
    margin-top: 0;
}

/***** Archive *****/

a.hitbox {
    display: block;
    text-decoration: none;
}

article.article-card {
    border-bottom: 1px solid var(--neutral-200);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.article-card h2.headline {
    color: var(--neutral-900);
    font-size: 1.35rem;
    margin-bottom: .5em;
    text-decoration: none;
}

.archive-article-details p {
    margin: 0;
    margin-bottom: 1em;
}

.article-card a {
    color: var(--neutral-900);
    text-decoration: none;
    font-weight: 600;
}

button#loadMorePosts {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 25px auto 0 auto;
    padding: 1rem 3rem;
}

/***** Related Posts *****/

article.article #jp-relatedposts .jp-relatedposts-items {
    display: grid;
    grid-gap: 25px;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
	max-width: 100%;
}

article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    width: 100%;
}

article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
    color: var(--neutral-900);
    font-size: 1rem;
    font-weight: 600;
}

article.article #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
    opacity: 1;
}

article.article #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
article.article #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span {
    height: auto;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    width: auto;
}

article.article #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post > :first-child {
    aspect-ratio: 3/2;
    border-radius: var(--image-border-radius);
    display: block;
    overflow: hidden;
}

article.article time.jp-relatedposts-post-date {
    display: none!important;
}

article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
    text-decoration: none;
}

/***** Hover States *****/

a.tag-cloud-link:active,
button#searchButton:active,
.wp-block-post-featured-image a:active,
article.article #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post > :first-child:active {
    transform: scale(.95);
}

a.tag-cloud-link:hover,
a.tag-cloud-link:focus {
	background-color: var(--brand-600);
    transform: scale(.99);
}

.has-vivid-green-cyan-background-color:hover,
.has-vivid-green-cyan-background-color:focus {
	background-color: var(--brand-600)!important;
    transform: scale(.99);
}

.has-vivid-green-cyan-background-color:active,
a.tag-cloud-link:active {
    transform: scale(.95);
}

a.tag-cloud-link,
.single .article-content a,
button#searchButton,
.wp-block-post-featured-image a,
article.article #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post > :first-child {
    transition: .2s ease-in;
}

p.byline a,
.article-card h2.headline,
.featured-article h2.wp-block-post-title a,
.latest-posts h2 a,
.interior-page h2 a,
aside.sidebar a.wp-block-latest-posts__post-title,
article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	text-decoration: underline 2px rgba(26, 26, 26, 0)!important;
	transition: text-decoration-color 0.2s;
}

p.byline a:hover,
p.byline a:focus,
.article-card h2.headline:hover,
.article-card h2.headline:focus,
.featured-article h2.wp-block-post-title a:hover,
.featured-article h2.wp-block-post-title a:focus,
.latest-posts h2 a:hover,
.latest-posts h2 a:focus,
.interior-page h2 a:hover,
.interior-page h2 a:focus,
article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a,
article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:focus .jp-relatedposts-post-title a,
article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover,
article.article #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:focus,
aside.sidebar a.wp-block-latest-posts__post-title:hover,
aside.sidebar a.wp-block-latest-posts__post-title:focus {
	text-decoration-color: rgba(26, 26, 26, 1)!important;
}

/***** Editor *****/

html :where(.wp-block) {
    flex: 1;
    margin: auto;
    max-width: var(--default-width);
	padding: 0 var(--side-padding);
    width: 100%;
}

.loop-section-header [style="flex-basis: 33.33%;"] a {
    justify-content: flex-end;
}

#wpfooter {
    position: relative;
}

/***** Search Results *****/

.archive h1.title,
.search h1.title {
    margin-bottom: 2.25rem;
}

.archive p.excerpt,
.search p.excerpt {
	font-size: 1.125rem;
    margin-bottom: 0;
}

.archive p.subject,
.search p.subject {
    margin-bottom: .5rem;
}

.archive p.subject,
.search p.subject,
.archive p.subject a,
.search p.subject a,
.archive #postsContainer p.subject,
.search #postsContainer p.subject {
    font-size: .9rem;
}

article.article-card {
    display: flex;
	flex-direction: column;
    gap: 1.5rem;
}

article.article-card p.date {
	color: var(--neutral-500);
	font-size: .75rem;
	font-weight: 650;
}

a.featured-image img { transition: 0.5s ease-in-out; }
a.featured-image:hover img,
a.featured-image:focus img {
    transform: scale(1.025);
}

.archive-content .featured-image img {
	align-self: start;
    aspect-ratio: 3/2;
	background-color: var(--neutral-100);
    border-radius: var(--image-border-radius);
    object-fit: cover;
    width: 100%;
}

.search h1.title > span {
    font-weight: 400;
    margin-right: 5px;
}

/***** 404 Page *****/

main.error-page.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrapper.error-page p.title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
}

.wrapper.error-page p.title + p {
    color: var(--neutral-600);
    font-size: 1.5rem;
    font-weight: 600;
	margin: 45px 0;
}

.error-page a.btn > svg {
    fill: white;
    width: 20px;
}

.error-page a.btn {
    align-items: center;
    display: inline-flex;
    gap: 15px;
	margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 30px;
}

/***** Related Posts Patch *****/

.page div#jp-relatedposts {
    display: none!important;
}

/***** Archive Re-Do *****/

section.archive-content {
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(4, 1fr);
}

article.article-card {
    grid-template-columns: 1fr;
}

.archive .article-card h2.headline {
    font-size: 1.125rem;
}

.archive .article-card h2.headline a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/***** Search *****/

#loadPreviewContainer {
	border-bottom: 1px solid transparent;
    display: grid;
	grid-column: 1/5;
    grid-gap: 50px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#loadPreviewContainer > div {
    background-color: var(--neutral-100);
    border-radius: var(--image-border-radius);
	height:	268px;
    opacity: 0;
	transition: 0.5s ease-in-out;
}

.loading #loadPreviewContainer > div {
    opacity: 1;
}

#loadPreviewContainer ~ .article-card {
    opacity: 0;
}

.article-card {
    opacity: 1;
	transition: 0.5s ease-in-out;
}

/***** Mobile Menu ******/

#menuButton {
	background-color: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	display: none;
	height: 40px;
	transition: 0.2s ease-in-out;
	width: 40px;
}

#menuButton::before {
	color: white;
	content: '\f0c9';
	font-family: 'FontAwesome';
	font-size: 1.5rem;
}

.menu-open #menuButton::before {
		content: '\f00d';
}

.mobile-menu {
    background-color: #fafafa;
	border-right: 1px solid var(--neutral-100);
    height: calc(100dvh - calc(108px + var(--a-bar-spacer)));
    max-width: 500px;
	padding: 50px;
    position: fixed;
    top: var(--distance-to-top);
	transform: translate(-100%, 0px);
	transition: transform 0.5s ease-in-out;
    width: 100%;
    z-index: 9999;
}

.menu-open .mobile-menu {
	transform: translate(0,0);
	transition: transform .25s ease-in;
}

.mobile-menu p {
    margin: 0;
}

.menu-open main {
	filter: blur(3px);
}

.mobile-menu p a {
	align-items: center;
    color: var(--neutral-900);
    display: flex;
    font-size: 1.5rem;
    font-weight: 600;
    padding: .5rem 0 0 .5rem;
	position: relative;
    text-decoration: none;
}

.mobile-menu p a:hover::before {
		background-color: var(--green-500);
}

.mobile-menu p a::before {
	background-color: transparent;
	border-radius: 2px;
	content: '';
	height: 100%;
	left: -.5rem;
	position: absolute;
	transition: 0.2s ease-in-out;
	width: 4px;
}

.main-mobile-menu {
    display: grid;grid-gap: .5rem;
}

#mobileSearchBar input {
	border-radius: var(--button-border-radius);
	margin-bottom: 1.5rem;
}

/***** Smooth Transitions *****/

.main-mobile-menu,
#mobileSearchBar input {
    opacity: 0;
    transition: 0.25s ease-in-out;
    transition-delay: .15s;
}

.main-mobile-menu {
    transition-delay: .5s ease-in-out;
}

.menu-open .main-mobile-menu,
.menu-open #mobileSearchBar input {
    opacity: 1;
}

/***** Community Rollup *****/

section.community-cards {
	display: grid;
	grid-gap: 50px;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

a.community-card {
/* 	border: 1px solid white; */
	border-radius: var(--image-border-radius);
/* 	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
	color: var(--neutral-900);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	transition: 0.5s ease-in-out;
}

a.community-card .featured-image-container {
	aspect-ratio: 3/2;
	background-color: var(--neutral-50);
	border-radius: 0 0 var(--image-border-radius) var(--image-border-radius);
	display: flex;
	overflow: hidden;
}

.community-card img {
	max-width: 100%;
	object-fit: cover;
	transition: 0.5s ease-in-out;
}

.community-details {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.community-details > p.community-post-count {
    background-color: var(--green-50);
    display: flex;
    gap: 1rem;
	margin-top: 1.25rem;
    padding: 1rem;
}

p.community-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
    flex: 1;
	-webkit-line-clamp: 4;
	overflow: hidden;
	text-overflow: ellipsis;
}

.community-details > * {
    padding: 0 1rem;
}

p.community-post-count > svg {
    fill: var(--neutral-900);
    width: 20px;
}

.community-details > p {
    margin: 0;
}

p.community-name {
    font-size: 1.25rem;
    font-weight: 650;
	padding: 1.25rem 1rem .5rem 1rem;
}

a.community-card:hover,
a.community-card:focus {
/* 	border: 1px solid var(--green-400); */
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.fallback-image.blue {
    aspect-ratio: 3/2;
    background-color: var(--blue-50);
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, var(--blue-400) 2.75rem ), repeating-linear-gradient( var(--blue-100), var(--blue-300) );
    width: 100%;
    transition: 0.5s ease-in-out!important;
}

.fallback-image.orange {
    aspect-ratio: 3/2;
    background-color: var(--orange-50);
    background-image: repeating-radial-gradient( circle at 0 0, transparent 0, var(--orange-400) 2.75rem ), repeating-linear-gradient( var(--orange-100), var(--orange-300) );
    width: 100%;
    transition: 0.5s ease-in-out!important;
}

a.community-card:hover img,
a.community-card:focus img,
a.community-card:hover .fallback-image,
a.community-card:focus .fallback-image {
	transform: scale(1.05);
}

a.community-card:hover p.community-post-count,
a.community-card:focus p.community-post-count {

}

input#inPageSearch {
    border: 1px solid var(--neutral-300);
    border-radius: var(--button-border-radius);
    color: var(--neutral-900);
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 2rem;
    padding: 1em;
    width: 100%;
}

input#inPageSearch::placeholder {
    color: var(--neutral-500);
}

.taxonomy-meta .button svg {
    fill: white;
    height: 20px;
	width: auto;
}

.taxonomy-meta {
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

/***** Rollup *****/

.post-count {
    margin: 1rem 0 0 0;
    text-align: center;
}

.fallback-image {
    aspect-ratio: 3/2;
    background-color: var(--green-50);
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, var(--green-400) 2.75rem ), repeating-linear-gradient( var(--green-100), var(--green-300) );
    width: 100%;
    transition: 0.5s ease-in-out!important;
}

.fallback-image:hover,
.fallback-image:focus {
    transform: scale(1.1);
}

a.featured-image {
    border-radius: var(--image-border-radius);
    overflow: hidden;
}

/***** Comments ******/

span.comments-number {
    background-color: #e75606;
    border-radius: var(--image-border-radius);
    color: white;
    display: inline-block;
    font-size: 1rem;
    padding: .25rem .9rem;
}

h2.comments-title {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin: 3rem 0;
}

.comments-area ol {
    display: grid;
    grid-gap: 3.5rem;
    margin: 2rem 0 3.5rem 0;
    padding: 0;
}

.comments-area li {
    list-style: none;
	& > :last-child { margin-bottom: 0; }
}

.comments-area .reply { margin-top: 1rem; }

.comment-author.vcard {
    align-items: center;
    display: flex;
	gap: 1rem;
}

.comments-area img.avatar.photo {
    border-radius: 100%;
}

.comments-area a.comment-reply-link {
    background-color: transparent;
    border-radius: var(--button-border-radius);
    color: var(
    --neutral-900);
    display: inline-flex;
    font-size: 1rem;
    font-weight: 600;
    gap: .5rem;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.comments-area a.comment-reply-link::before {
    content: '\f112';
    font-family: 'FontAwesome';
}

.comments-area p {
    font-size: 1rem;
    margin-bottom: 0;
}

span.says {
    display: none;
}

cite.fn {
    font-style: normal;
    font-weight: 600;
}

.comments-area .comment-body {
    display: grid;
    grid-gap: 0 1.5rem;
    grid-template-columns: auto 1fr;
}

.comments-area .comment-body > * {
    grid-column: 1/3;
}

.comment-author.vcard {
    grid-column: 1/2;
}

.comment-meta.commentmetadata {
    align-self: center;
    grid-column: 2/3;
}

.comments-area .comment-meta a {
    color: var(--neutral-600);
    font-size: 1.25rem;
    text-decoration: none;
}

/***** Media Queries *****/
@media screen and (max-width: 1160px) {
	body {
		--header-height: 108px;
	}
    nav#mainNav {
        display: none;
    }
	#menuButton { display: block; }
	button#searchButton { display: none; }
}

@media screen and (max-width: 1100px) {
     .latest-posts :where(figure) {
        display: none;
    }
    
    .latest-posts li.wp-block-post {
        display: flex;
    }

    .latest-posts > ul {
        gap: 35px;
    }
	
    .featured-article p.subject a, .taxonomy-subjects.wp-block-post-terms a {
        font-size: .875rem;
    }
    .featured-article h2.wp-block-post-title a {
        font-size: 1.35rem;
    }
    .featured-article h2.wp-block-post-title {
    }
    .featured-article :where(.wp-block-post-excerpt) {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
	body .social-promo p {
		font-size: 1.75rem;
	}
	.social-container > a {
		height: 50px;
		width: 50px;
	}
section.archive-content,
#loadPreviewContainer {
    display: grid;
    grid-gap: 50px;
    grid-template-columns: 1fr 1fr;
}
	
	#loadPreviewContainer {
		display: none;
	}

article.article-card {
	border-bottom: 0;
    grid-template-columns: 1fr;
	margin-bottom: 0;
	padding-bottom: 0;
}
}

@media screen and (max-width: 782px) {
	.content-and-sidebar {
		flex-wrap: wrap;
	}
	aside#articleSidebar {
		border-top: 1px solid var(--neutral-200);
		padding-top: 50px;
	}
	body.logged-in {
		--a-bar-spacer: 46px;
	}
section.archive-content,
#loadPreviewContainer {
    grid-template-columns: 1fr;
}
}

@media screen and (max-width: 768px) {
    .home .row-1, .home.row-1 {
        grid-template-columns: 1fr;
    }
    .featured-article {
        border-bottom: 1px solid var(--neutral-200);
        padding-bottom: 2rem;
    }
	h2.headline {
		font-size: 2.25rem;
	}
	
	.single p.subject a {
		font-size: 1rem;
	}

	.single p.subject {
		margin-top: 0;
	}
	
	.single p.subject a {
		font-size: 1rem;
	}

	.social-promo {
		flex-direction: column;
		gap: 40px;
	}

	.loop-section-header p.more,
	.home .interior-page ul.wp-block-post-template > :nth-child(n+3) { display: none; }
	
	
}

@media screen and (max-width: 600px) {
	header a.logo { font-size: 1.5rem; gap: 1rem; }
	header a.logo > svg { height: 36px; }
}

@media screen and (max-width: 500px) {
	body { --header-height: 100px; }
	h2.headline { font-size: 1.45rem; }
}

@media screen and (max-width: 450px) {
	header a.logo { font-size: 1.25rem; gap: .5rem; }
	header a.logo > svg { height: 30px; }
}