/*
Theme Name: Bushvilla's Silonque
Theme URI: not available
Author: bureau popcorn
Author URI: https://bureaupopcorn.nl
Description: A custom template for bushvillas-silonque.com
Version: 1.0
Text Domain: Bushvilla's Silonque
*/

:root {
	--primary: #bc6c25;
	--primary-light: #dda15e;
	--white: #FFFFFF;
	--secondary: #283618;
	--secondary-light: #606c38;
	--black: #0C0C0C;
	--background: #f3f1e2;
	--small-text: 0.833rem;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(/wp-content/themes/bushvillas-silonque/assets/fonts/montserrat-regular.woff2) format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 400;
	src: url(/wp-content/themes/bushvillas-silonque/assets/fonts/montserrat-regularItalic.woff2) format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url(/wp-content/themes/bushvillas-silonque/assets/fonts/montserrat-bold.woff2) format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 700;
	src: url(/wp-content/themes/bushvillas-silonque/assets/fonts/montserrat-boldItalic.woff2) format('woff2');
}

* {
	font-family: "Montserrat";
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

html {
	/* background: rgba(21, 30, 63, 0.05); */
	background-color: #f3f1e2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23dda15e' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

section {
	margin: 80px auto 0;
	padding: 0 16px;

	@media only screen and (min-width: 768px) {
		margin: 160px auto 0;
	}
}

.wrapper, .wp-block-gallery {
	margin: 100px auto 0;
	max-width: 1140px;
	padding: 0 16px;
	
	@media only screen and (min-width: 768px) {
		margin: 160px auto 0;
	}
}

.wp-block-gallery figure img:hover {
		cursor: pointer;
		opacity: .8;
		border: inline 2px #000;
	}


@media only screen and (max-width: 768px) {
	.wp-block-gallery {
		gap: 16px !important;
	}

	.wp-block-gallery.has-nested-images {

		figure {
			width: 100% !important;
		}
	}
}

.wp-block-columns {
	margin: 100px auto 0;
	max-width: 1140px;
	gap: 60px;
	padding: 0 16px;
}

.wp-block-heading {
	margin: 0 0 16px;
}

p {
	font-size: 1rem;
	line-height: 1.6rem;
}

h1 {
	font-size: 2.027rem;
	
	@media screen and (min-width: 768px) {
		font-size: 2.986rem;
	}
}

h2 {
	font-size: 1.802rem;
	
	@media screen and (min-width: 768px) {
		font-size: 2.488rem;
	}
}

h3 {
	font-size: 1.602rem;
	
	@media screen and (min-width: 768px) {
		font-size: 2.074rem;
	}
}

h4 {
	font-size: 1.424rem;
	
	@media screen and (min-width: 768px) {
		font-size: 1.728rem;
	}
}

h5 {
	font-size: 1.266rem;
	
	@media screen and (min-width: 768px) {
		font-size: 1.44rem;
	}
}

h6 {
	font-size: 1.125rem;
	
	@media screen and (min-width: 768px) {
		font-size: 1.2rem;
	}
}

a {
	color: var(--primary);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

header {
	width: 100%; 
	background: var(--primary);
	border-bottom: 4px solid var(--primary-light);
	
	.header {
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 16px;
		padding: 16px; 
		height: 70px;
		color: var(--white);
	
		.logo-wrapper {
			flex: 0 1 70%;
	
			svg {
				width: 100% !important;
			}

		}
		
		@media screen and (min-width: 768px) {
			.logo-wrapper {
				flex: 0 1 20%;
			}
		}

		.hamburger {
			display: block;
			flex: 1 0 auto;
            text-align: right;
			
			&.active {
				transform: rotate(45deg);
			}

			.hamburger-btn {
				width: 48px;
				height: 48px;
				background: none;
				border: none;
				color: var(--white);
				text-align: right;
				
				&::after {
					content: "☰";
					font-size: 36px;
				}
			}
		}
	
		.nav-wrapper {
			display: flex;
			align-items: center;
			flex-direction: column;
			list-style-type: none;
			background: var(--primary);
			position: absolute;
			top: -100%;
			right: 0;
			z-index: 10;
			padding-top: 8px;

			&.active {
				display: flex;
				top: 132px;

				.hamburger {
					transform: rotate(45deg);
				}
			}

			.menu-item {
				padding: 16px 48px;
				display: inline-block;
				margin-top: 8px;
	
				a {
					text-decoration: none;
					color: var(--white);
	
					&::after {
						display:block;
						content: '';
						border-bottom: 4px solid var(--secondary-light);
						transform: scaleX(0);  
						transition: transform .2s ease-in-out;
						margin-top: 8px;
					}
	
					&:hover{
						color: var(--background);
						cursor: pointer;
		
						&::after {
							transform: scaleX(1);
						}
					}
				}
			}

			.book-button {
				background: var(--white);
				margin: -8px 0 0 16px;
				border-radius: 100px;

				a {
					padding: 0;
					font-weight: bold;
					color: var(--primary);

					&::after {
						display: none;
					}
				}

				&:hover { 
					background: var(--secondary);
					cursor: pointer;
					* {
						color: var(--white);
					}
				}
			}
			@media screen and (max-width: 768px) {
				.book-button {
					border-radius: 0;
					margin: 0;
				}
			}
		}

		@media screen and (min-width: 1024px) {
			.hamburger {
				display: none;
			}

			.nav-wrapper { 
				display: flex;
				position: relative;
				flex-direction: row;
				top: unset;
				background: none;

				.menu-item {
					padding: 16px 24px;
				}
			}
		}
	}
}

	@media screen and (min-width: 768px) {
		header .header {
			justify-content: space-between;
		}
	}

footer {
	width: 100%;
	margin: 160px 0 0;
	background: var(--primary);
	border-top: 4px solid var(--primary-light);
	padding: 32px 0 16px;
	
	.footer {
		display: grid;
		max-width: 1400px;
		margin: 0 auto;
		grid-template-columns: 1fr;
		grid-template-rows: 4;
		gap: 32px;
		padding: 0 16px;

		@media only screen and (min-width: 768px) {
			grid-template-columns: repeat(2, auto);
			grid-template-rows: repeat(2, auto);
		}
	
		
		.logo-wrapper {
			svg {
				width: 70%;
			}

			@media only screen and (min-width: 768px) {
				grid-area: 1 / 1 / 2 / 3;				

				svg {
					width: auto;
				}
			}

			@media only screen and (min-width: 1024px) {
				grid-area: 1 / 1 / 2 / 2;
			}
		}

		.column {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.copyright {
			width: 100%;

			a::before {
				content: none;
			}
		}

		a {
			color: var(--white);
			text-decoration: none;

			&::before {
				content: "➔";
				padding-right: 4px;
			}

			&:hover {
				text-decoration: underline;
			}
		}

		h6 {
			color: var(--white);
		}

		p {
			color: var(--white);
			font-weight: 400;
		}
	}
}

.button {
	background: var(--primary);
	padding: 0 0 0 16px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	width: fit-content;
	text-decoration: none;
	color: var(--white);
	border-radius: 100px;
	overflow: hidden;
	z-index: 1;
	transition: 0.2s ease-in;
	border: none;
	font-weight: bold;

	&::before {
		content: "";
		position: absolute;
		background: var(--white);
		bottom: 0;
		left: 100%;
		right: 0;
		top: 0;
		z-index: -1;
		transition: left 0.2s ease-in;
		border-radius: 100px;
	}

	&::after {
		content: "➔";
		background: var(--white);
		padding: 16px 20px;
		top: -1px;
		right: 1px;
		color: var(--primary);
		border-radius: 100px;
		transition: background 0.2s ease;
		margin-left: 8px;
	}

	&:hover {
		cursor: pointer;
		color: var(--primary);
		text-decoration: none;

		&::after {
			background-color: var(--white);
		}

		&::before {
			left: 0;
		}

		&::after {
			color: var(--primary);
		}
	}
}