/*
Theme Name: LOCTAVE
Text Domain: promisys
Author: Promisys
Version: 1.0
*/

:root{
	--font-size: 1rem;
	--site-width: 100rem;


	--charcoal: #212121;
	--salty: #ebf3f2;
}

html{
	scroll-padding-top: 300px;
}

body{
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-style: normal;

	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-size: var(--font-size);
	line-height: 1.4;
	color: var(--color);
}

.wrap{
	width: min(100% - 3rem, var(--site-width));
	margin-inline: auto;
}
main{
	padding-block: 2rem;
}

section.banner{
	height: calc(100dvh - 225px - 4rem);
	display: grid;
	place-content: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	transition: height .2s;
}
section.banner::before{
	content: '';
	position: absolute;
	inset: 0;
    background: rgb(39 41 41);
    opacity: 0.6;
}
section.banner div{
	position: relative;
	z-index: 9;
}

header{
	--gap: 2rem;
	position: sticky;
	display: flex;
	flex-direction: column;
	background: #fff;
	top: var(--wp-admin--admin-bar--height, 0);
	align-items: center;
	justify-content: center;
	gap: var(--gap);
	padding-top: var(--gap);
	transition: box-shadow 0.2s;
	z-index: 99;
}
header.scroll{
	box-shadow: 0 -6px 18px #0000002b;
}
header svg.logo{
	height: 100px;
	width: 100%;
}
header a{
	line-height: 1;
}

header nav{
	display: flex;
	gap: 5px;
	justify-content: center;
	width: 100%;
	padding: 5px;
	background: var(--salty, #fff);
}

header nav a{
	display: block;
	padding-block: 1em;
	padding-inline: 1.1em;
	border-radius: 4px;
	transition: background 0.2s;
}
header nav a:hover,
header nav a.current{
	text-decoration: none;
	background: rgb(212 229 227);
}


footer{
	padding-block: 2rem;
	margin-top: auto;
	border-top: 1px solid var(--charcoal);
}
footer .site-info{
	gap: 2rem;
}
footer nav ul{
	gap: 1rem;
}

section{
	margin-bottom: 8rem;
}

dl dt{
	font-weight: 600;
	margin-bottom: 5px;
}
dl dd{
	margin-bottom: 1.5rem;
}

.socials{
	gap: 1rem;
}


.wp-block-gallery img{
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}

a{
	color: var(--link);
	text-decoration: none;
	line-height: 1;
}
.entry-content a{
	text-underline-offset: 2px;
}
a:hover{
	color: var(--hover);
	text-decoration: underline;
}
a.btn,
a.wp-block-button__link{
	color: var(--charcoal);
	padding: 1em 2em;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	background: var(--salty);
	border-radius: 6px;
	display: inline-flex;
	text-decoration: none;
	max-width: max-content;
}
a.btn:hover,
a.wp-block-button__link:hover{
	text-decoration: none;
	background: rgb(212 229 227);
}
a.btn svg{
	margin-right: 4px;
}

div.center{
	display: flex;
	justify-content: center;
}

section.restaurant .is-layout-flex{
	gap: 4rem;
}
section.restaurant .is-layout-flex p{
	text-align: justify;
}

section.menu{
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

section.menu p:has(> strong:last-child){
	margin-bottom: 0;
}

section.menu > div p:last-of-type{
	margin-bottom: 0;
}

section.contact{
	display: flex;
	gap: 4rem;
	align-items: center;
}
section.contact > *{
	flex: 1;
}
section.contact .flex{
	flex-direction: column;
	gap: 2rem;
}
section.contact span{
	align-items: flex-start;
}
section.contact span svg{
	translate: 0 5px;
}

hr{
	width: 100%;
	max-width: 8rem;
}

h1, h2, h3{
	line-height: 1.1;
	font-weight: 400;
	text-wrap: balance;
}
h1{
	font-size: clamp(1.3rem, 2.5vw, 2rem);
	margin-bottom: 1em;
	color: var(--primary);
}
h2{
	font-size: clamp(1.8rem, 2.5vw, 2.4rem);
	margin-bottom: 1em;
}
h3{
	font-size: clamp(1rem, 2.5vw, 1.4rem);
	margin-bottom: 1rem;
}
h3 em{
	font-weight: 400;
	font-size: .8em;
}

p{
	margin-bottom: 1rem;
	max-width: 80ch;
}

ul.with-icons{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
}
ul.with-icons span.wp-font-awesome-icon{
	display: inline-flex;
	margin-right: 10px;
	font-size: 1.6rem;
	translate: 0 6px;
	color: #009281;
}
ul.with-icons svg{
}

.contact__wrapper{
	gap: 4rem;
}
aside .contact-info{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

strong{
	font-weight: 700;
}
#content .content-area img{
	display: block;
	font-style: italic;
	max-width: 100%;
	height: auto;
	width: auto;
}

a:has( > img){
	display: block;
	width: fit-content;
	overflow: hidden;
}
a img{
	transition: scale 0.3s
}
#content a:hover img{
	scale: 1.02;
}

input,
button,
textarea,
select{
	font: inherit;
}
button{
	background: none;
	border: none;
}
address{
	font-style: normal;
}

.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex.column{
	flex-direction: column;
}

.grid{
	--min-column-size: 200px;
	--column-count: 3;
	--gap: 5px;
	
	--breakpoint: calc(var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1)) );
	--column-size: calc((100% / var(--column-count)) - var(--gap));
	
	display: grid;
	gap: var(--gap);
	
	grid-template-columns: repeat(auto-fit, minmax(
			min(max(var(--column-size), (100% - var(--breakpoint)) * -999 ), 100%), 
			1fr));
}

*:has( > [class*="svg-inline"]){
	display: flex;
	gap: 5px;
	align-items: center;
}

.card{
	border: 1px solid #efefef;
	padding: 2rem;
	border-radius: 1rem;
	max-width: max-content;
	margin: 0 auto;
}

@media( min-width: 855px ){
	#page nav svg{
		display: none;
	}
}
@media( max-width: 854px ){

	html{
		scroll-padding-top: 180px;
	}

	header{
		--wp-admin--admin-bar--height: 0;
		--header-height: 70px;
		--gap: 10px;
		display: flex;
	}
	header svg.logo{
		height: 60px;
	}
	header .wrap{
		width: 100%;
	}

	nav svg{
		font-size: 1.1rem;
	}
	header nav a{
		padding-inline: 1.8em;
	}
	nav span{
		display: none;
	}

	section{
		margin-bottom: 6rem;
	}
	section.contact{
		align-items: flex-start;
		flex-direction: column-reverse;
	}
	section.contact > *{
		flex: initial;
		width: 100%;
	}
	section.contact a.btn{
		width: 100%;
		justify-content: center;
		max-width: initial;
	}

	.grid{
		--min-column-size: 140px;
		--column-count: 2;
	}

}


.loader{
	display: flex;
	gap: 0.25rem;
	justify-content: center;
}
.loader > *{
	width: 0.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--primary);
	animation: bounce 0.5s infinite alternate;
}
.loader > *:nth-child(2){
	content: '';
	animation-delay: 100ms;
}
.loader > *:nth-child(3){
	content: '';
	animation-delay: 200ms;
}

@keyframes bounce{
	to{
		translate: 0 -0.25rem;
	}
}