/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic (CALLED IN ANOTHER FILE)
	- Normalize
	- Box sizing
	- Media width
# Base
	- Typography
	- Elements
	- Links
# Layouts
# Components
	- Header
	- Main
	- Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

html{ 
    scroll-behavior: smooth;
}

body {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height:1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:'Montserrat', Georgia, 'Times New Roman', Times, serif;
    font-size: 2rem;
    margin:1rem 0; 
}

p {
	margin:0 0 1.5em;
}

@media(min-width:68em){
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        
        font-size: 3rem;
    }

    p{ 
        font-size: 1.5rem;
    }
}

/* Elements
--------------------------------------------- */

table{ 
    margin:0 auto; 
    width:75%;
    padding-top:1rem; 
}

table, th, td{ 
    border: 1px solid #033333; 
    border-collapse: collapse;
}

th,td{ 
    padding:0 1rem;
    width: 75%;
}

caption{ 
    font-size:1.5rem;
    font-weight: 1000;
    color: #033333;
}

thead{ 
    background-color: #033333;
    color: #F4CEDF;
}

blockquote{ 
    font-weight: 500;
}

@media(min-width:48em){ 
    blockquote{ 
        font-size: 1.5rem;
    }
}

@media(min-width:68em){ 
    blockquote{ 
        display:block; 
        max-width: 700px;
        /* font-weight: 700; */
        font-size: 2rem;
    }
}

/* Header and Navigation Bar
--------------------------------------------- */

.site-header{ 
    padding: 0 1rem;
    display:flex; 
    justify-content:space-between;
    align-items:center;
    background-color: #033333;
}

.site-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
	display: none;
	position: absolute;
	top: 4.5rem; 
	left: 0;
	right: 0;
	z-index: 2;
    background-color: #033333;
}

.site-navigation.toggled ul {
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-navigation a {
	display: block;
	padding: 1rem;
	font-family:'Montserrat', Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
	text-decoration: none;
}

.site-navigation a, 
.site-navigation a:visited{
    color:#F4CEDF; 
    text-decoration:none;
}


.site-navigation a:hover, 
.site-navigation a:active, 
.site-navigation a:focus{
    color:#033333;
    background-color:#F4CEDF; 
    text-decoration:none;
}

.menu-toggle {
	display: block;
	background-color: transparent;
	border: 0;
	padding: 1rem;
    filter: invert(85%) sepia(17%) saturate(317%) hue-rotate(285deg) brightness(97%) contrast(97%);
}

.menu-toggle:focus {
	border: 0;
	outline: 1px dotted;
}


@media(min-width: 48em){
    .menu-toggle{
		display: none;
	}

	.site-navigation {
		flex: 1 1 auto;
	}

	.site-navigation ul,
	.site-navigation.toggled ul{
		display: flex;
		justify-content: flex-end;
		position: relative;
		top: 0;
        flex-direction: row;
	}

    .site-navigation li{ 
        margin:0 1rem;
    }

	.site-navigation a {
		line-height: 4.5rem; 
		padding: 0 1rem;
	}
}

/* Links
--------------------------------------------- */
a,
a:visited{
	text-decoration:underline;
    color:#033333;
}

a:hover, 
a:focus, 
a:active {
	text-decoration: underline;
}

/* Main
--------------------------------------------- */
/* Page header cover */
.page-header {
	position: relative;
	height: 100vh;
    margin-bottom: 2rem;
}

.page-header h1 {
	position: absolute;
	left:50%; 
	top:50%;
	transform:translateX(-50%) translateY(-50%);
	color:#ffffff;
    font-size: 3rem;
    z-index: 1;
    text-transform: uppercase;
}

.page-header video, 
.page-header img{
	height: 100%;
    width: 100%;
    background-position: center;
    object-fit: cover;
    object-position: center;
    filter: brightness(60%); 
}


@media(min-width:68em){
    .page-header h1 {
        font-size: 12rem;
        left: 30%;
        top:80%; 
        transform:translateX(-30%) translateY(-80%);
    }
}

/* Layout 
-----------------------------------------------*/

/* Mobile */
.home-wrapper,
.explore-wrapper, 
.food-wrapper, 
.credit-wrapper{ 
    margin: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-container{ 
    position: relative;
}

.explore-container img, 
.food-container img, 
.home-container img{ 
    object-fit: cover;
    background-position: center;
    height: 40vh;
    min-width: 100%; 
}

.explore-container{ 
    margin:1rem;
}

.food-text, 
.explore-text{ 
    padding:1rem; 
}

.background-2{ 
    background-color: #033333;
    color: #ffffff;
}

.background-pink{ 
    background-color: #F4CEDF;
}

/* Tablet */
@media(min-width:48em){ 
    .home-wrapper, 
    .food-wrapper, 
    .explore-wrapper{ 
        max-width: 550px;
        margin: 0 auto; 
    }
}

/* Desktop */
@media(min-width:68em){ 
        
    .home-wrapper,
    .explore-wrapper, 
    .food-wrapper{ 
        max-width: none;
        margin:0 auto;
    }

    .explore-container, 
    .food-container, 
    .home-content{ 
        display: grid;
        grid-template-columns: 1fr 1fr; 
        padding: 6rem 3rem;
        gap:6em;
        max-width: 80rem;
        margin:0 auto;
        align-items: center;
    }

    .explore-container img, 
    .food-container img, 
    .home-container img{ 
        object-fit: cover;
        overflow: hidden;
        background-position: center;
        width:100%; 
        height:500px; 
        display:block;
    }

    .explore-text{ 
        grid-column: 1/3;
    }

    .background-2 img{ 
        grid-column: 1/2;
        grid-row:1/1
    }
}
/* Home Page 
------------------------------------------------*/

.home-intro{ 
    padding:1rem;
}

/* hero text for home page */
.home-text{
    margin:0;
	position: absolute;
	left:50%; 
	top:75%;
	transform:translateX(-50%) translateY(-75%);
	color:#ffffff;
    font-size: 3rem;
    z-index: 1;
}



/* hero image filter for home page */

@media(min-width:68em){ 
    .home-intro, 
    .credit-wrapper{ 
        display: block;
        max-width: 68em;
        padding-top:2rem;
        margin:0 auto;
    }
}

/* back to top button */
.top {
    text-decoration: none;
    padding: 1rem;
    font-family:'Montserrat', Arial, Helvetica, sans-serif;
    color: #F4CEDF;
    background: #033333;
    border-radius: 100px;
    margin:2rem auto 1rem;
    font-weight: 500;
}

.top:visited, 
.top:hover{ 
    color: #F4CEDF;
    text-decoration: none;
}

/* Footer
-----------------------------------------------*/
.site-footer{ 
    display:flex; 
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 1rem;
}

.site-footer p{ 
    font-size: 1rem;
}