/*!
Theme Name: 5440 Reboot
Theme URI: http://underscores.me/
Author: Patrick
Author URI: https://pmmtt.com
Description: Reboot of the 5440 Brewing Co site to work with the updated Wordpress using Gutenberg.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: brewery_reboot
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

5440 Reboot is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*
FONTS & COLORS

Taproom:
Gray: #4a4f54;
Tan: #e1d3b5;
*/

/*--------------------------------------------------------------
# Font
--------------------------------------------------------------*/
@font-face {
    font-family: '5440 Brew Co';
    src: url('fonts/Rounded/hochstadt-rounded-webfont.eot');
    src: url('fonts/Rounded/hochstadt-rounded-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Rounded/hochstadt-rounded-webfont.woff') format('woff'), url('fonts/Rounded/hochstadt-rounded-webfont.ttf') format('truetype'), url('fonts/Rounded/hochstadt-rounded-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
	color: #4a4f54;
	font-family: 'Oswald', sans-serif;
     text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
     position: relative;
     width: 100vw;
     height: 100vh;
     background-color: #e1d3b5;
	border-top: 10px solid #4a4f54;
     overflow: hidden;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a, button{
     font-weight: 600;
}

a:hover, button:hover, a:focus, button:focus{
	cursor: pointer;
	color: #4a4f54;
}

img{
     width: 100%;
}

svg{
     width: 100%;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, button{
	font-family: '5440 Brew Co', sans-serif;
     text-transform: lowercase;
}

p, li, a, .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="email"], textarea.wpcf7-textarea{
     font-size: 5vw;
}

a{
     font-weight: 600;
}

button, .wpcf7-form input[type="submit"], #tap_phone a, #tap_phone button{
     font-size: 7vw;
     line-height: 1;
	background-color: #4c4c4e;
	color: #e1d3b5;
     padding: 7px 0 9px 0;
     border: 3px solid #4c4c4e;
     border-radius: 3px;
     border: 3px solid #4c4c4e;
     width: 100%;
     font-family: '5440 Brew Co', cursive;
     z-index: 100;
}

button:hover, .wpcf7-form input[type="submit"]:hover, #tap_phone a:hover, button:focus, .wpcf7-form input[type="submit"]:focus, #tap_phone a:focus, #contact_link:hover, #contact_link:focus{
     color: #4c4c4e;
     background-color: #e1d3b5;
     cursor: pointer;
}

a:hover, button:hover, a:focus, button:focus{
     cursor: pointer;
     outline: none;
}

button:hover, button:focus{
	background-color: #e1d3b5;
	color: #4c4c4e;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header.site-header{
     display: flex;
     align-items: flex-end;
     flex-wrap: nowrap;
     position: relative;
     width: 100vw;
     max-width: 1260px;
     padding: 2vh 10px;
     margin: 0 auto;
     z-index: 100;
}

header h1{
     display: flex;
     align-items: flex-end;
     flex-wrap: nowrap;
     width: 25%;
}

header h1 svg{
     width: 100%
}

header.site-header .site_intro_wrapper{
     width: 75%;
     padding: 0 0 0 10px;
}

.site_intro_wrapper h2, .site_intro_wrapper p{
     line-height: 1;
}

.site_intro_wrapper h2{
     font-size: 6vw;
     padding: 0 0 1vw 0;
}

.site_intro_wrapper p{
     padding: 1vw;
     font-size: 4.5vw;
     color: #e1d3b5;
     background-color: #4c4c4e;
     border-radius: 3px;
}

.site-title a{
     display: flex;
     align-items: flex-end;
     width: 100%;
}

.site-title a svg{
     width: 100%;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer.site-footer{
     display: block;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100vw;
     background-color: #4c4c4e;
}

footer.site-footer p{
     display: flex;
     align-items: center;
	font-family: '5440 Brew Co', sans-serif;
     font-size: 12px;
     width: 100%;
     height: 40px;
     padding: 0 10px;
     color: #e1d3b5;
     text-align: right;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
#site-navigation{
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     padding: 0;
     background-color: #e1d3b5;
     border: 10px solid #4a4f54;
     transition: all .5s ease-out;
     z-index: 500;
}

#site-navigation div, #site-navigation div ul{
     height: calc(100%);
}

#site-navigation div ul li{
     display: flex;
     align-items: center;
     justify-content: center;
     width: calc(100% - 20px);
     height: calc(100% / 3);
     margin: 0 auto;
     border-bottom: 5px solid #4a4f54;
}

#site-navigation div ul li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: calc(100% - 20px);
     font-size: 15vw;
     text-transform: uppercase;
}

#site-navigation div ul li:last-of-type{
     border: none;
}

#site-navigation div ul li a:hover, #site-navigation div ul li a:focus{
     background-color: #4a4f54;
     color: #e1d3b5;
}

#nav_button{
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
     top: 15px;
     right: 10px;
     width: 15vw;
     height: 15vw;
     padding: 2vw;
     border-radius: 50%;
     z-index: 1000;
}

#nav_button:hover, #nav_button:focus{
     cursor: pointer;
}

nav.nav_disp_show{
     top: -150vh !important;
}

/*--------------------------------------------------------------
# BHOme Beer Shared
--------------------------------------------------------------*/
#home_nav ul, #beers{
     position: fixed;
     bottom: 45px;
     left: 0;
     width: 100vw;
     max-width: 1260px;
     height: calc(100vh - 25vw - 55px);
     overflow-x: hidden;
     overflow-y: scroll;
}

#home_nav_list li, .single_beer{
     width: calc(100vw - 20px);
     height: calc(100vh - 25vw - 55px);
     margin: 0 auto;
}

#home_nav_list li a, .single_beer{
     display: flex;
     position: relative;
     align-items: center;
     height: calc(100%);
     padding: 2vh;
     transition: all .5s;
}

/*--------------------------------------------------------------
# Background Images
--------------------------------------------------------------*/
.image_bckgnd{
     opacity: 0;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     padding: 0;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     color: transparent;
     z-index: -100;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media only screen and (min-width: 430px){
     #nav_button{
          max-width: 60px;
          height: 60px;
          padding: 10px;
     }
}

@media only screen and (min-width: 550px){
     #site-navigation div ul li a{
          font-size: 15vh;
     }

     #home_nav ul, #beers{
          display: flex;
          align-items: flex-end;
          left: 10px;
          width: calc(100vw - 20px);
     }

     #home_nav_list li a:hover + .image_bckgnd, #home_nav_list li a:focus + .image_bckgnd, .single_beer a:hover + .image_bckgnd, .single_beer a:focus + .image_bckgnd{
          opacity: .5;
          height: 100vh;
          transition: opacity .5s;
     }
}

@media only screen and (min-width: 700px){
     p, li, a, .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="email"], textarea.wpcf7-textarea{
          font-size: 3vw;
     }

     #site-navigation div ul li a{
          font-size: 15vw;
     }
}

@media only screen and (min-width: 750px){
     .site_intro_wrapper h2{
          padding: 0 0 10px 0;
     }

     .site_intro_wrapper p{
          padding: 10px;
     }
}

@media only screen and (min-width: 1050px){
     #site-navigation div ul li a{
          font-size: 15vh;
     }
}

@media only screen and (min-width: 1260px){
     p, li, a, .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="email"], textarea.wpcf7-textarea{
          font-size: 36px;
     }

     .site_intro_wrapper h2{
          font-size: 85px;
     }

     .site_intro_wrapper p{
          font-size: 45px;
          padding: 2px 10px 10px 10px;
     }

     button, .wpcf7-form input[type="submit"], #tap_phone a, #tap_phone button{
          font-size: 88px;
     }

     #home_nav ul, #beers{
          height: calc(100vh - 288px - 55px);
     }
}