/* Add this at the top of your assets/main.css file */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* Global CSS */
.site-footer, footer {
    margin-top: 0 !important;
}

.wp-child-theme-thesneeze_twentytwentytwochild_2025 .wp-site-blocks {
    padding-right: 0;
    padding-left: 0;
}


.wp-child-theme-thesneeze_twentytwentytwochild_2025 .wp-site-blocks footer > div.alignfull.wp-block-group.has-background {
    max-width: 100vw;
    margin-left: 0 !important;
	margin-right: 0 !important;
}


.wp-child-theme-thesneeze_twentytwentytwochild_2025 .wp-site-blocks header > div{
    max-width: 100vw;
    margin-left: 0 !important;
}

.wp-site-blocks header .hero-image {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100vw;
}

.hero-image img {
    max-width: 100vw;
}


.banner-logo {
  background-color: black;
  display: flex;
  justify-content: center;
}

.banner-logo h1 a {
  font-family: "Alfa Slab One", serif;
  font-size: clamp(3rem, 10vw, 6rem);
  color: white;
  position: relative;
  z-index: 1;
  -webkit-text-stroke-width: clamp(1px, 1vw, 2px);
  -webkit-text-stroke-color: black;
}

.banner-logo h1 a:before {
  content: "The Sneeze";
  position: absolute;
  left: 0;
  z-index: -1;
  -webkit-text-stroke-width: clamp(12px, 2vw, 24px);
  -webkit-text-stroke-color: #E88701;
}

.shadow-text {
    color: var(--wp--preset--color--tertiary);
    text-shadow: -1px 1px black;
}

@media (max-width: 690px) {
	.header-logo-image {
		display: none;
	}
}

/* Homepage Styles */
.blog-grid-header h2 {
	font-family: "Oswald";
    font-weight: 700;
}


.blog-grid li {
    position: relative;
}

.blog-grid li figure {
    margin-bottom: 0; 
}

.blog-grid img {
    filter: brightness(60%) contrast(90%);
}

.blog-card-title {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    padding: 2rem;
    margin: 0;
    opacity: 1;
	background-color: transparent;
}

.blog-grid li .blog-card-title a:before {
    transition: 500ms background-color, 500ms opacity;
}

.blog-grid li:hover .blog-card-title a:before {
	background-color: var(--wp--preset--color--custom-sneeze-orange);
	opacity: 0.5;
}

.blog-card-title a {
    font-family: 'Oswald';
    font-size: 2rem;
    font-weight: 700;
    opacity: 1;
    text-align: center;
    width: 100%;
	z-index: 1;
}

.blog-card-title a:before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
	z-index: -1;
}

/* Contact Page Styles */
.contact-page-title {
	font-family: "Oswald";
	font-weight: 700;
}

@media screen and (max-width: 1023px) {
    .blog-card-title {
        display: flex;
        opacity: 1;
    }

    .blog-grid li:hover .blog-card-title {
        animation: none;
    }
}

/* Single Blog Post Page */
.blog-post-header h1 {
    font-family: 'Oswald';
    margin-top: 16px;
    font-weight: 700;
}

.blog-post-content {
    flex-grow: 1 !important;
}

.blog-post-sidebar {
    max-width: 400px;
}

.sticky-sidebar {
	top: 48px;
}

.blog-post-sidebar h2 {
    font-weight: 700;
    font-family: 'Oswald';
}

.blog-post-sidebar .wp-block-navigation li a {
   font-weight: bold; 
}

.sidebar-recent-posts {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-recent-posts li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 700;
    text-align: center;
}

.sidebar-recent-posts li a {
    text-decoration: none;
}

/* Archive page styles */
.archive-title {
	font-family: "Oswald" !important;
	font-weight: 700 !important;
}

@media (min-width: 1200px) {
    .blog-post-content {
        padding-left: 5vw !important;
        padding-right: 2.5vw !important;
    }
}

@media screen and (max-width: 781px) {
    .single-post .wp-block-columns {
        gap: 0 !important;
    }

    .blog-post-sidebar {
        padding: 0;
        max-width: 100%;
    } 

    .home.blog .wp-site-blocks,
	.post-template-default .wp-site-blocks,
	.archive .wp-site-blocks {
        padding: 0;
    }

    .blog-post-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .blog-post-content > div {
        padding-right: 0px !important;
    }
}

/* Add the fadeIn animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}