/*
Theme Name: Twenty Twentyone Child
Theme URI: https://example.com
Description: A child theme for Twenty Twentyone.
Author: Jen Web Dev
Author URI: https://jenweb.dev/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
 @import url("https://use.typekit.net/vbz3clf.css");
/* =Theme customization starts here

-------------------------------------------------------------- */
:root {
font-size:10px;
--global--font-size-base:2rem;
--wp--typography--line-height:1.55em;
--global--line-height-body:1.55em;
--global--font-size-page-title:5rem;
--heading--font-size-h1:4.2rem;
--heading--font-size-h2:3.4rem;
--heading--font-size-h3:2.6rem;
--heading--font-size-h4:2.2rem;
--wp--preset--font-size--small: 1.6rem;
--wp--preset--font-size--medium: 1.9rem;
--wp--preset--font-size--large: 2.2rem;
--wp--preset--font-size--x-large: 2.4rem;
--global--font-size-xs: 1.4rem;
--global--font-size-sm: 1.6rem;
--global--font-size-md: 1.9rem;
--global--font-size-lg: 2.2rem;
--global--font-size-xl: 2.4rem;
--global--font-size-xxl: 2.8rem;
--global--font-size-xxxl: 3.2rem;
--primary-nav--font-size:1.7rem;
--primary-nav--font-size-sub-menu:1.6rem;
--primary-nav--font-weight:400;
--responsive--aligndefault-width:120rem;
--responsive--alignwide-width:1400px;
--responsive--alignfull-width:1600px;
--heading--font-family:neue-haas-grotesk-display, sans-serif;
--heading--font-weight:700;
--heading--font-weight-page-title:200;
--global--font-primary:neue-haas-grotesk-display, sans-serif;
--global--font-secondary:neue-haas-grotesk-display, sans-serif;
--global--font-weight:400;
--global--font-color:#000;
}

body {
line-height:1.5em;
background #E4E6DF;
font-family: neue-haas-grotesk-display, sans-serif;
font-weight:400;
font-style: normal;
color:#000;
}

#page {
	max-width:100%;
	}

.site-main > * {
margin-bottom:unset;
}

b, strong {
font-weight:700;
}
	
#page p {
margin-bottom:2rem;
margin-top:0;
}
#page h1,
.blog h1 {
margin-top:0;
margin-bottom:1rem;
text-transform:uppercase;
}
#page h2 {
margin-top:3rem;
margin-bottom:1rem;
}
#page h3 {
margin-top:3rem;
margin-bottom:2rem;
}
#page h4 {
margin-top:3rem;
margin-bottom:0.5rem;
}
#page h1 + h2,
#page h2 + h3,
#page h3 + h4 {
margin-top:0;
}
#page .is-large-text, 
#page .has-large-font-size {
font-size:2.2rem;
}
#page .is-medium-text, 
#page .has-medium-font-size {
font-size:1.9em;
}
#page .is-small-text, 
#page .has-small-font-size {
font-size:1.6rem;
}
#page .is-content-justification-center {
display:flex;
justify-content:center;
}
#page .is-content-justification-left {
display:flex;
justify-content:left;
}
#page .is-content-justification-right {
display:flex;
justify-content:right;
}
#page ul,
#page ol {
padding-left:2.2rem;
margin-top:0;
}
#page li {
margin-bottom:1rem;
}
#page a {
color:#7b404a;
}
#page a:focus {
background:transparent;
outline:2px solid #aaa;
}
.blog h1.entry-title,
.archive h1.entry-title {
font-size: var(--global--font-size-page-title);
}
figcaption, .wp-caption, .wp-caption-text, .wp-block-embed figcaption {
color:#545454;
font-size:1.4rem;
}

#page strong {
	font-weight:600;
	}

/** Header **/

.site-header {
max-width:120rem;
width:100%;
margin:0 auto;
padding:1rem 2rem;
display:flex;
justify-content:space-between;
align-items:start;
border-bottom:none;
}
.site-header::before,
.site-header::after {
display:none;
}
#page .site-title,
#page h1.site-title,
#page .site-title a {
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 700;
font-style: normal;
font-size:8rem;
line-height:1em;
margin:0;
color:#007CB8;
text-decoration:none;

}
.site-branding {
max-width:40%;
}
.site-logo {
margin:0;
}
.site-logo .custom-logo {
max-width:calc(100% - 1rem);
max-height:8rem;
margin:0 0 0 1rem;
}
#skip-link a:focus {
	width:30%;
	font-size:1.6rem;
	text-align:center;
	background:#fff;
}

.header-nav {
	display:flex;
	flex-direction:column;
	gap:1.7rem;
}
.header-social {
	display:flex;
	flex-direction:row;
	justify-content:right;
	padding-right:0.8rem;
	gap:2rem;
}
.header-social a.twitter,
#page .header-social a.twitter:focus {
	display:inline-flex;
	background-image:url(images/twitter.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:2.6rem;
	height:2.6rem;
}
.header-social a.facebook,
#page .header-social a.facebook:focus {
	display:inline-flex;
	background-image:url(images/facebook.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:2.6rem;
	height:2.6rem;
	margin-left:1rem;
}

.header-social a.instagram,
#page .header-social a.instagram:focus {
	display:inline-flex;
	background-image:url(images/instagram.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:2.6rem;
	height:2.6rem;
	margin-left:1rem;
}
.header-social a:hover,
.header-social a:focus {
	opacity:0.7;
}
.site-branding {
		  margin-top:0;
	  }
#page .widget_search > .search-form .search-field,
.search-form .search-field {
	padding:0.5rem 1rem;
	border:1px solid #747474;
	margin:0;
	min-height:unset;
	height:2.6rem;
	font-size:1.6rem;
	line-height:1.5em;
}
.search-form > label {
	display:none;
}
#page .widget_search > .search-form input[type="submit"],
.search-form input[type="submit"] {
	margin:0;
	padding:0 1rem;
	font-size:1.6rem;
	line-height:1.5em;
	min-height:unset;
	height:2.6rem;
	border-width:1px;
}
.search-form .search-field:focus,
.search-form input[type="submit"]:focus {
			   outline-offset:0.25rem;
			   outline:2px solid #aaa;
		   }

/** Main Nav **/

.primary-navigation-open .primary-navigation > .primary-menu-container,
#page .primary-navigation
{
	text-align: right;
	margin-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: right;
	width: 100%;
}

.primary-navigation-open .primary-navigation,
#page .primary-navigation
{
	display: inline-flex;
	align-self: center;
}

.primary-navigation-open .primary-navigation > .primary-menu-container { position: relative; }

.primary-navigation .primary-menu-container {
margin-left:0;
margin-right:0;
}
#page .primary-navigation ul {
padding-left:0;
display:flex;
column-gap:1.5rem;
}
#page .primary-navigation li {
margin-bottom:unset;
margin-left:0;
}
#page .primary-navigation li a {
font-family: neue-haas-grotesk-display, sans-serif;
font-weight:400;
font-style: normal;
padding:0.8rem;
color:#000;
}
#page .primary-navigation li.current_page_parent a {
text-decoration:underline;
}



/** Page Structure **/
#page header.entry-header {
max-width:120rem;
border:none;
padding:0 2rem;
margin:4rem auto 0 auto;
text-align:center;
}
#page .entry-content,
#page #comments {
max-width:120rem;
padding:0 2rem;
}

#page .entry-content figure.alignnone {
	margin-right:auto;
	margin-left:0;
	}

/** Blog Layout **/

.blog #page header.entry-header,
.archive #page header.entry-header,
.search-results #page header.entry-header {
margin-bottom:5rem;
}
.search-no-results .site-content {
	min-height:60rem;	
}
#blog-container {
  display: flex;
  flex-wrap: wrap;
  gap:3rem;
  align-items:stretch;
  max-width:1400px;
  margin:0 auto;
  justify-content:center;
}

.blog-item {
  display:flex;
  flex-direction:column;
  width: calc(25% - 3rem);  
  position: relative;  
  font-size:1.6rem;
}
#page .blog-item h2 {
margin-top:1rem;
font-size:2.4rem;
}
.blog-item img {
min-width: 100%;
min-height: 30rem;
max-height:30rem;
width:100%;
height:30rem;
object-fit:cover;
}
.post-meta {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 10px;
}

.pagination {
border-top:1px solid #ccc;
display:flex;
justify-content:center;
column-gap:3rem;
}
.blog-item a {
text-decoration:none;
}
.blog-item a:hover {
text-decoration:underline;
text-decoration-style:solid;
}


/** Single Posts **/

.single-post .entry-header h1.entry-title {
word-spacing:0.75rem;
}
.single-post .entry-header .post-meta {
font-size:1.8rem;
font-weight:400;
}
.single-post p a img {
margin-top:1rem;
margin-bottom:1rem;
}
.single-post .posted-by {
display:none;
}
.single .site-main > article > .entry-footer .post-taxonomies {
justify-content:flex-start;
width:100%;
}
.single-post .post-taxonomies .cat-links,
.single-post .post-taxonomies .tags-links{
text-align:left;
}
.single .site-main > article > .entry-footer {
border-top:1px solid #000;
margin-top:2rem;
margin-bottom:0;
}
.post-date {
color:#747474;
}
#page .post-navigation {
margin-top:6rem;
}
#page .nav-links p {
font-size:1.6rem;
margin-bottom:0;
}
#page .nav-links a:active .meta-nav,
#page .nav-links a:focus .meta-nav{
color:#000;
}

.comments-area {
margin-top:0;
}
h2#reply-title {
font-size:2.4rem;
font-weight:400;
background-image:url(images/arrow-down.png);
background-size:1.6rem 1.6rem;
background-position:20rem 60%;
background-repeat:no-repeat;
}
h2#reply-title.expanded {
background-image:url(images/arrow-up.png);
}
.comment-form {
    display: none;
    transition: max-height 0.5s ease-in-out;
}

.comment-form > p label {
margin-bottom:0;
}

.comment-form > p input[type=email], 
.comment-form > p input[type=text], 
.comment-form > p input[type=url], 
.comment-form > p textarea {
padding:0.5rem 1rem;
border:1px solid #747474;
margin-bottom:1rem;
}
#page .comment-form .form-submit input[type="submit"] {
padding:1rem 3rem;
background:#000;
border-width:1px;
}
#page .comment-form .form-submit input[type="submit"]:hover,
#page .comment-form .form-submit input[type="submit"]:active,
#page .comment-form .form-submit input[type="submit"]:focus {
color:#000;
background:#f4f4f4;
border-color:#000;
border-width:1px;
}
input[type=checkbox], input[type=radio] {
border-width:1px;
width:2rem;
height:2rem;
}
#page .comment-form p {
margin-bottom:1rem;
}
#page p.comment-subscription-optin label {
    display: inline;
    padding-left: 0.5rem;
    font-size: var(--global--font-size-xs);
}

/** Comments **/

.comment-content {
margin-top:0;
margin-bottom:0;
font-size:1.6rem;
}
.comment-meta {
margin-bottom:1rem;
}
#page .comments-area ol.comment-list {
padding-left:0;
}
#page .comments-area li.depth-1,
#page .comments-area li.depth-1.parent {
padding-bottom:1rem;
border-bottom:1px solid #ccc;
}
#page .comments-area ol li.depth-2 .comment-body {
margin-bottom:2rem;
}
.comment-list .depth-1 > .comment-body {
margin-bottom:2rem;
}
.comment-list .depth-1.parent > .comment-body {
margin-bottom:0;
}
.comment-list .depth-2, .comment-list .depth-3 {
padding-left:4rem;
margin-top:1rem;
}




/** Footer **/

.site-footer > .site-info {
border-top:1px solid #000;
}
.no-widgets .site-footer {
margin-top:0;
justify-content:center;
padding-bottom:0;
}
.footer-bottom {
width:100%;
text-align:center;
}