/*
Theme Name: Belly Maui
Theme URI: http://wpthemes.mikevaughan.design/belly_maui
Author: Mike Vaughan
Author URI: http://mikevaughan.design
Description: 
Version: 1.0
License: CC BY-NC 4.0
License URI: https://creativecommons.org/licenses/by-nc/4.0/
Tags: blog, portfolio
Text Domain: 
*/

@import url('https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&family=Roboto:ital,wght@0,300;1,300&display=swap');

/*====
	DEFAULTS
====*/

html {
    scroll-behavior: smooth;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
audio, canvas, video {
	display: inline-block;
	display: inline;
}
audio:not([controls]) {
	display: none;
}
[hidden] {
	display: none;
}
body {
	margin: 0;
	padding: 0;
}
.iframe_container iframe,
.iframe_container object,
.iframe_container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.iframe_container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
	height: 0;
	overflow: hidden;
}

/*====
	COLORS
====*/

:root{
	--gold:#FCB94C;
	--bronze:#AD9359;
	--walnut:#5B4E2B;
	--sage:#596C45;
	--stone:#383733;
	--bone:#FFF7DC;
}

/*====
	WP DEFAULTS
====*/

.wp-caption{
}
.wp-caption-text{
}
.sticky{
}
.screen-reader-text{
}
.gallery-caption{
}
.bypostauthor{
}
.alignright{
}
.alignleft{
}
.aligncenter{
	display:block;
	margin:0 auto 4em auto;
	width:100%;
	height:auto;
}

/*====
	HEADER
====*/

header {
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	padding:.75em 0;
	background-color:var(--sage);
	width:100%;
}
header nav{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 2em;
	width:calc(100% - 4em);
}
header nav ul{
	list-style-type:none;
	margin:0px;
	padding:0 2em;
	margin:auto;

}
header nav ul li{
	position:relative;
	display:inline-block;
	margin:0 2em;
}
header nav ul li a{
	text-decoration:none;
	display:block;
	color:var(--bone);
	text-transform:uppercase;
	text-shadow:0px 0px 0px var(--stone);
	transition:all .5s cubic-bezier(.23,1,.32,1);
}
header nav ul li a:hover{
	text-decoration:none;
	display:block;
	text-shadow:-1px 1px 0px var(--stone);
}
header nav ul li ul{
	display:none;
}
header nav ul li:hover ul{
	display:block;
	position:absolute;
	z-index: 100;
}
header nav ul li:hover ul li a{
	display:block;
}
header nav ul li:hover ul li a:hover{
}
header .logo,
header .cta-primary{
	position:relative;
	z-index:1;
}
header .logo{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-right:auto;
}
header .cta-primary{
	margin-left:auto;
}
header .logo .menu-icon{
	display:none;
}
header .nav-main{
	padding:0 2em;
	display:flex;
	align-items:center;
	justify-content:center;
}
header .nav-mobile{
	display:none;
}
header .nav-menu{
	padding:1em 2em;
	width:calc(100% - 4em);
	display:block;
	background-color:var(--bone);
	margin-top:1em;
	margin-bottom:-1em;
}
header .nav-menu ul li a{
	color:#000;
}
header .nav-menu ul li a:hover{
	text-shadow:none;
}

/*====
	ASIDE
====*/

aside {
	display:block;
	background-color:var(--stone);
	padding:4em 0 2em 0;
	color:var(--bone);
}
aside .grid-wrapper:last-of-type{
	padding:4em 2em 2em 2em;
}
aside .logo{
	display:block;
	padding:0 0 4em 0;
	text-align:center;
}
aside a{
	color:var(--bone);
}
aside .grid-wrapper .columns.columns-three .column ul.footer-hours li{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
}

/*====
	FOOTER
====*/

footer {
	display:block;
	width:calc(100% - 4em);
	background-color:var(--stone);
	padding:2em 2em 4em 2em;
	color:var(--bone);
	text-align:center;
}
footer .grid-wrapper:last-of-type{
	padding:0 2em 2em 2em;
}

/*====
	FORMS
====*/

form label, input, select, textarea{
	display:block;
	font-family:'Roboto', sans-serif;
	-webkit-font-smoothing:antialiased;
	font-size:1em;
	color:#000000;
	padding:.25em;
	margin-bottom:1em;
}
input[type="checkbox"],
input[type="radio"]{
	display:inline-block;
}


/*====
	TYPOGRAPHY
====*/

body {
	font-family:'Roboto', sans-serif;
	-webkit-font-smoothing:antialiased;
	font-size:1em;
	color:#000000;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
p::selection,
ul li::selection,
a::selection,
span::selection,
strong::selection{
	background:var(--sage);
	color:var(--bone);
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5{
	font-family:'Pathway Gothic One', sans-serif;
	text-transform:uppercase;
	line-height:1.25;
	letter-spacing:1px;
	font-weight:normal;
	margin-top:0;
}
h1,
.h1{
	font-size:4em;
}
h2,
.h2 {
	font-size:3.5em;
}
h3,
.h3 {
	font-size:2.5em;
}
h4,
.h4 {
	font-size:2em;
}
h5,
.h5{
	font-size:1.125em;
}
p {
	line-height:2;
}
.tx-big{
	font-size:1.5em;
	line-height:1.5;
}
.tx-med{
	font-size:1.25em;
	line-height:1.5;
}
.tx-small{
	font-size:.75em;
	line-height:1.5;
}
.tx-centered{
	text-align:center;
}
blockquote,
blockquote p{
	font-size:1.5em;
	line-height:1.75;
	font-style:italic;
}
.cta-primary{
	border:none;
	background:none;
	cursor:pointer;
	-webkit-appearance:none;
	background-color:var(--gold);
	color:#000;
	text-transform:uppercase;
	font-family:'Pathway Gothic One', sans-serif;
	font-size:1.125em;
	letter-spacing:2px;
	padding:.75em 2em;
	transition:all .5s cubic-bezier(.23,1,.32,1);
	box-shadow: -4px 4px 0px var(--bronze);
}
.cta-primary:hover{
	box-shadow: -8px 8px 0px var(--bronze);
}
.cta-primary:active{
	box-shadow: -2px 2px 0px var(--bronze);
}
.cta-secondary{
	border:none;
	background:none;
	cursor:pointer;
	-webkit-appearance:none;
	background-color:var(--sage);
	color:var(--bone);
	text-transform:uppercase;
	font-family:'Pathway Gothic One', sans-serif;
	font-size:1.125em;
	letter-spacing:2px;
	padding:.75em 2em;
	transition:all .5s cubic-bezier(.23,1,.32,1);
	box-shadow: -4px 4px 0px var(--stone);
}
.cta-secondary:hover{
	box-shadow: -8px 8px 0px var(--stone);
}
.cta-secondary:active{
	box-shadow: -2px 2px 0px var(--stone);
}
a {
	text-decoration:none;
	color:var(--sage);
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a img { 
    border-style:none; 
}
pre{
}
del{
}
ins{
}

/*====
	GRID
====*/

.grid-wrapper{
	width:calc(100% / 12 * 12 - 4em);
	padding:8em 2em 0 2em;
	max-width:1080px;
	margin:auto;
}
.grid-wrapper:last-of-type{
	padding:8em 2em 8em 2em;
}
.grid-wrapper:first-of-type{
	padding:4em 2em 8em 2em;
}
.grid-wrapper .grid-wrapper__body-copy{
	width:calc(100% / 12 * 8);
	padding-right:calc(100% / 12 * 4);
	padding-bottom:4em;
}
.grid-wrapper .grid-wrapper__dining-menu{
	width:calc(100% / 12 * 8);
	margin:auto;
}
.grid-wrapper .columns{
	width:100%;
	position:relative;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
}
.grid-wrapper .columns .column{
	padding:0 2em;
}
.grid-wrapper .columns.columns-three .column{
	width:calc(100% / 12 * 4 - 4em);
}
.grid-wrapper .columns.columns-three .column ul{
	list-style-type:none;
	padding:0;
}
.grid-wrapper .columns.columns-three .column ul li{
	margin:.5em 0;
}

/*====
	HERO
====*/

.hero{
	display:block;
	position:relative;
	background:var(--stone);
	height:100vh;
	width:100%;
	background-size:cover;
}
.hero.hero-home{
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
}
.hero.hero-home .hero__hero-overlay{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	z-index:0;
	background-color:#000;
}
.hero.hero-home img{
	width:calc(100% / 12 * 4);
	position:relative;
	z-index:1;
}

/*====
	GALLERY - SLIDER
====*/

.gallery-slider{
	transition:all 1.5s cubic-bezier(.23,1,.32,1);
}
ul.slider{
	position:relative;
	padding-bottom:56.25%;
	list-style-type:none;
	margin:auto;
	width:calc(100% / 12 * 10);
}
ul.slider li{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-size:cover;
	background-position:center center;
	transition:all 1s cubic-bezier(.23,1,.32,1);
	opacity:0;
	z-index:0;
	transition-delay:0s;
}
ul.slider li.current{
	opacity:1;
	z-index:1;
	transition-delay:.5s;
}
ul.slider li .slide-cover{
	position:absolute;
	top:0;
	height:100%;
	background-color:#FFF;
	transition:all .5s cubic-bezier(.23,1,.32,1);
	left:auto;
	right:0;
	width:100%;
}
ul.slider li.current .slide-cover{
	left:0;
	right:auto;
	width:0%;
}
.gallery-slider nav{
	display:flex;
	align-items:center;
	justify-content:center;
}
.gallery-slider nav button{
	-webkit-appearance:none;
	cursor:pointer;
	background:none;
	border:none;
}

/*====
	GALLERY FLEXED
====*/

.gallery-flexed{
	width:100%;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	flex-wrap:wrap;
	padding-top:2em;
}
.gallery-flexed img{
	width:calc(100% / 12 * 6 - 2em);
	height:auto;
	margin:2em 0 2em 0;
	transition:all 1.5s cubic-bezier(.23,1,.32,1);
}

/*====
	DINING MENU
====*/

.dining-menu.dining-menu__home{
	margin-top:8em;
	background-color:var(--bone);
}
.dining-menu__two-column{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	flex-wrap:wrap;
}
.dining-menu__item{
	text-transform:lowercase;
	transition:all 1.5s cubic-bezier(.23,1,.32,1);
}
.dining-menu__two-column .dining-menu__item{
	width:calc(50% - 1em);
}
.dining-menu__item h3{
	font-family:'Roboto', sans-serif;
	font-size:1.5em;
	margin-bottom:0;
	color:var(--sage);
	font-weight:normal;
	text-transform:lowercase;
}
.dining-menu__item-icons{
	padding-top:1em;
	display:flex;
	justify-content:center;
	flex-direction:row;
}
.dining-menu__item-icons img{
	width:26px;
	margin:0 .5em;
}
.dining-menu__item-icons__icon{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 1em;
}

/*====
	CONTACT MAP
====*/

#map{
	width:100%;
	height:60vh;
	margin:0 auto 4em auto;
}

/*====
	JOBS
====*/

.jobs-link{
	background-color:var(--bronze);
	margin-top:8em;
}

/*====
	BLOG
====*/

article {
	display:block;
	margin-bottom:4em;
}
article h1,
article h2{
	margin-bottom:0;
}


/*====
	MEDIA QUERIES
====*/

@media (prefers-color-scheme: dark) {
	/*==== DARKMODE ====*/

}

@media screen and (min-width : 1141px) and (max-width : 1366px){
	/*==== LAPTOP ====*/

}
@media screen and (min-width : 768px) and (max-width : 1140px){
	/*==== TABLET ====*/

}
@media screen and (max-width:767px){
	/*==== MOBILE ====*/

	/*====
		HEADER
	====*/
	
	header nav{
		padding:0 1em;
		width:calc(100% - 2em);
	}
	header nav ul{
		padding:0 1em;
		width:100%;
	}
	header .nav-main{
		display:none;
	}
	header .nav-mobile{
		display:flex;
		align-items:flex-start;
		justify-content:flex-start;
		position:fixed;
		height:100vh;
		width:100%;
		background:var(--sage);
		top:0;
		z-index:0;
		transition:all 1s cubic-bezier(.23,1,.32,1);
		right:-100%;
	}
	header .nav-mobile.active{
		right:0;
	}
	header nav ul li{
		display:block;
		margin:1em 0;
	}
	header nav ul li a{
		font-size:1.5em;
	}
	header .logo img{
		width:100px;
	}
	header .logo .menu-icon{
		display:block;
		-webkit-appearance:none;
		border:none;
		background:none;
		width:3em;
		height:3em;
		margin:0 1em 0 0;
		padding:0;
	}
	header .logo .menu-icon .icon{
		width:3em;
		height:2px;
		display:block;
		position:relative;
		background-color:var(--bone);
	}
	header .logo .menu-icon .icon:before,
	header .logo .menu-icon .icon:after{
		content:"";
		width:3em;
		height:2px;
		background-color:var(--bone);
		position:absolute;
		left:0;
	}
	header .logo .menu-icon .icon:before{
		top:-10px;
	}
	header .logo .menu-icon .icon:after{
		top:10px;
	}
	header .nav-menu{
		display:none;
	}

	/*====
		ASIDE
	====*/

	aside {
		padding:2em 0 1em 0;
	}
	aside .grid-wrapper:last-of-type{
		padding:2em 1em 1em 1em;
	}
	aside .logo{
		padding:0 0 2em 0;
	}

	/*====
		FOOTER
	====*/

	footer {
		width:calc(100% - 2em);
		padding:1em 1em 2em 1em;
	}
	footer .grid-wrapper:last-of-type{
		padding:0 1em 1em 1em;
	}

	/*====
		TYPOGRAPHY
	====*/

	h1,
	.h1{
		font-size:3.5em;
	}
	h2,
	.h2 {
		font-size:3em;
	}
	h3,
	.h3 {
		font-size:2em;
	}
	h4,
	.h4 {
		font-size:1.5em;
	}
	h5,
	.h5{
		font-size:1em;
	}
	.tx-big{
		font-size:1.25em;
	}
	.tx-med{
		font-size:1.125em;
	}
	blockquote,
	blockquote p{
		font-size:1.25em;
	}
	.cta-primary{
		padding:.75em 1.75em;
	}

	/*====
		GRID
	====*/

	.grid-wrapper{
		width:calc(100% / 12 * 12 - 2em);
		padding:4em 1em 0 1em;
	}
	.grid-wrapper:last-of-type{
		padding:4em 1em 4em 1em;
	}
	.grid-wrapper .grid-wrapper__body-copy{
		width:calc(100% / 12 * 10);
		padding-right:calc(100% / 12 * 2);
	}
	.grid-wrapper .grid-wrapper__dining-menu{
		width:calc(100% / 12 * 12 - 2em);
	}
	.grid-wrapper .columns{
		flex-direction:column;
	}
	.grid-wrapper .columns .column{
		padding:0 1em 2em 1em;
	}
	.grid-wrapper .columns.columns-three .column{
		width:calc(100% / 12 * 12 - 2em);
	}

	/*====
		HERO
	====*/

	.hero.hero-home{
		height:100vh;
	}
	.hero.hero-home .hero-home__svg{
		display:none;
	}
	.hero.hero-home .hero-home__featured-image{
		width:calc(100% / 12 * 12);
	}
	.hero.hero-home .hero-home__featured-image img{
		width:calc(100% / 12 * 8);
	}

	/*====
		DINING MENU
	====*/

	.dining-menu.dining-menu__home{
		margin-top:4em;
	}

	/*====
		GALLERY FLEXED
	====*/

	.gallery-flexed img{
		width:calc(100% / 12 * 12);
	}
}