/*
Theme Name: Jan Bekkers
Theme URI: 
Author: Innoflux
Author URI: 
Description: A theme for Jan Bekkers showcasing his Portfolio
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jan-bekkers
Tags: 
*/

* {
    font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
}

.hero-banner {
    img {
        max-height: 37.5rem !important;
        width: 100%;
        object-fit: cover;
        object-position: bottom;
    }
    .wp-block-cover {
        min-height: 600px;
    }
    .slick-dots {
        bottom: 10px;
    }
    .swiper-pagination-bullet {
        width: .8rem;
        height: .8rem;
    }
    .swiper-pagination-bullet-active {
        background-color: white;
    }
}

header {
    .header-row {
        justify-content: space-between;
    }
    .wp-block-buttons {
        @media screen and (max-width: 768px) {
            display: none;
        }
    }
}


.recent-works, .portfolio-gallery {
    .painting {
        img {
            aspect-ratio: 3/4;
            object-fit: cover;
        }
    }
}

.single-post-picture {
	img {
		max-height: 40rem;
		object-fit: contain !important;
	}
}

@media screen and (max-width: 768px) {
	header {
		.wp-block-group.is-layout-flex {
			gap: 12px;
			
			img {
				max-width: 40px;
			}
		}
		.wp-group.is-layout-flow {
			h1 {
				font-size: 1.4rem;
			}
		}
	}
}

.hero-banner {
	position: relative;
	
	.hero-banner-buttons {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		
		@media screen and (max-width: 768px) {
			width: 75%;
		}
		
		.hero-banner-button-primary, .hero-banner-button-secondary {
			@media screen and (max-width: 768px) {
				width: 100%;
			}
		}
		
		.hero-banner-button-primary {
			a {
				border: 2px solid white;
				border-radius: 0;
				padding: 1rem 2rem;
				background: white;
				font-weight: bold;
				font-size: .8rem;
				box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);
				color: black;
			}
		}
		
		.hero-banner-button-secondary {
			a {
				border: 2px solid white;
				border-radius: 0;
				padding: 1rem 2rem;
				background: transparent;
				font-weight: bold;
				font-size: .8rem;
				box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);
				color: white;
			}
		}
	}
}