@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&family=Source+Sans+Pro:wght@900&display=swap');

:root{
    /* Fonts  */
    --header-font: 'Source Sans Pro', sans-serif;
    --general-font: 'Roboto', sans-serif;

  /*  Main Palette */
    --main-color: #2e2d25;
    --link-color: #f28b00; 
    --secondary-color: #95A3A4;
    --light-color: #ffffff;
    --dark-color: #040404;
}
/* General Styles */
input{
  font-size: 16px;
  padding: .5em 1em;
}

/* Remove landing bg until better solution*/
main{
  overflow: hidden;
}

/*Removes Widgets*/
.widget_product_categories{
	display:none;
}


/* General Styles 
 * 
 * - Titles
 * - Tools
 * - Buttons
 * */
body{
	background: white !important;
}

body.custom-background div.site {
    max-width: 100% !important;
}

.entry-title{
	display:block;
}

/* Contains the Page in 1000px for a more consistent layout on bigger screens. */
.page-wrapper{
	padding: .5em;
	max-width: 1250px;
	width: calc(100vw - 2em);
	margin:auto;
}

/* Centers and adds spacing to the posts in the News Page*/
.post{
	margin:1em auto;
}

/* Adds no spacing on the bottom to prevent extra space in the footer */
.page{
	margin-bottom:0;
}

/* A modifyer class used for the front page */
.title{
  	margin-top: .5em;
	text-transform:uppercase;
	font-size: 48px;
}

/* Prevents default links from appearing */
a{
  text-decoration: none !important;
}

/* Sets headings and paragraph elements to the specified fonts  */
h1, h2, h3, h4, h5, h6{
  font-family:var(--header-font);
  font-weight: 900 !important;
}

p{
  font-family: var(--general-font);
}

input, textarea, button, select{
  font:inherit;
  padding:.75em;
}


/* Tool Styles */
.center-text{
  text-align: center;
}
.columns-4{
  overflow: hidden;
}
.page-section{
  padding-top: 1em;
}

/* Button Styles
 * 
 * - Hero Buttons
 * - Primary
 * - Secondary
 * 
 *  */

/* CTA Button, Secondary button */

.cta-button.primary, .secondary{
	 font-size: 24px;
	 font-family: var(--header-font);
	 background-color: var(--link-color);
	 color: black;
	 border-radius: 8px;
	 padding: 0.5em 1.5em;
	 margin-bottom: .5em;
	 text-transform:uppercase;
	 font-weight: 900;
}

.secondary{
  border: 2px solid var(--main-color);
  color: var(--main-color) !important;
  background:none;
}


/* Primary Buttons */
.wp-element-button{
	padding: 0.5em 1.5em !important;
	background: var(--link-color) !important;
	text-align:center;
	color: black;
	text-transform: uppercase;
	font-weight: 900;
	border-radius:8px;
	font-size: 16px;
}


/* Gift Card Code Button */
#pwgc-redeem-button{
	padding: 0.5em 1.5em;
    background: var(--link-color);
    text-align: center;
    color: black;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 8px;
    font-size: 16px;
	border:none;
}


/* Adds margin in shop buttons*/
.add_to_cart_button, .product_type_simple{
	margin: 4px 0;
	border-radius: 8px;
}

.add_to_cart_button:hover, .product_type_simple:hover{
    color:white !important;
}

/* CONTACT FORMS
 * 
 * - Form Container
 * - Form Input
 * - Form Label
 * - Form Submit
 *  */

/* Form Container */
.wpcf7-form{
	max-width: 600px;
	border-radius: 12px;
}
  
  /* Form Input */
.wpcf7-form-control[type="text"],
  [type="email"]
	{
	padding: .5em 0;
	border-radius: 6px;
	border: 2px solid #ddd;
	width: 100%;
  }
  
  /* Form Label */
  form>p {
	font-family: sans-serif;
	position:relative;
	font-size: 15px;
  }
  
  /* Form Submit */
  .wpcf7-submit{
	background: var(--link-color);
	font-weight: bold;
	text-transform:uppercase;
	border:none;
  }

/* Front Page Section
 * 
 * - Hero Page
 * - Sections
 * 
 * */

/* Removes Home Title Page */
.post-17 > header > .entry-title{
	display:none;
}

/* Hero Section */
.hero-section{
  width: 100%;
	height: auto;
  padding: 0em 1em 10em;
	
  display:flex;
  flex-direction:column;
}


.hero-title{
	margin-bottom: 0;
	text-transform:uppercase;
}
.hero-info{
   font-size: 24px;
}

.secondary{
  border: 2px solid var(--main-color);
  color: var(--main-color) !important;
  background:none;
}

/* For Dark Backgrounds */
.dark{
	border-radius: 12px;
	background: var(--main-color);
	color: white;
}

.dark > div{
	padding:1em;
}

.section{
	padding: 4em 0;
}

.wp-block-column > ul{
	margin:0;
}


@media screen and (max-width: 500px){
	.hero-section{
		height: auto;
		padding:0;
	}
	.hero-title{
		font-size: 48px !important;
	}
}

/* Desktop Navigation 

 * - Desktop Container
 * - Top Content (Brand/Navigation Options)
 * - Botton Content (Search/Cart)
 * - Announcement Widget
 * */

 /* Desktop Container */
 .site-header{
	margin-bottom: 8px;
  background: #2e2d25;

}

/* Header Top */
.header-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	line-height: .75;
	max-width: 1000px;
	margin:auto;
	padding: 0 .5em;
}

/* Site Branding */
.site-title > a{
	color: white;
	font-weight: 900;
	font-family: var(--header-font);
}

.site-title{
	font-size: 1.5rem;
	margin: 1em 0;
}

/* Header Bottom */
.header-bottom{
  background:black;
  padding: 0.25em;
	position:sticky;
}

.header-bottom__container{
  max-width: 1000px;
  margin:auto;
  display:flex;
  justify-content: flex-end;
}

/* Cart */
.cart-container{
  display:flex;
  color: white;
  text-decoration:none;
}

/* Prevent color changing to blue. Making the hover readable */
.cart-container:hover{
	color:white;
}

.cart-amount{
	position:relative;
  font-family: var(--general-font);
	border-radius: 50%;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0;
	font-weight: 900;
}

.search-icon, .cart-container{
  color:white;
  margin-left: 1em;
  font-size: 1.25rem;
}

/* Search Bar */

.search-container__searchbar{
	position:relative;
	top:0;
}

.aws-container, .aws-search-field{
	border:none !important;
}
.aws-search-field{
	background-color:black;
	border-bottom: 3px solid white !important;
	height: auto !important;
	color: white !important;
	font-size: 16px !important;
}

.aws-search-field::placeholder{
	color:white;
	font-size: 16px;
}

/* Site Navigation */
.main-navigation{
	background-color: var(--main-color);
	display:grid;
	justify-content:end;
}

.nav-menu > li > a{
  font-family: var(--header-font);
	color:white;
  text-decoration:none;
}

/* Hover Effect for Nav Items */
.nav-menu > li > a:hover{
	color: var(--link-color);
	border-bottom: 1px solid var(--link-color);
}

.nav-menu{
  display:flex;
}

.nav-menu > li{
  list-style-type:none;
  margin-left: .75em;
  font-size: 1.1rem;
}

/* Announcements
 * 
 * - Container
 * - Text
 * 
 * */

/* Container */
.announcements{
	background: var(--link-color);
	text-align:center;
}

/* Text */
.announcements > p{
	font-family: var(--header-font);
	font-size: 1.25rem;
	color: var(--main-color);
	text-transform: uppercase;
	margin:0;
}




/*Mobile Navigation
 * 
 * Header Bottom
 * */

@media screen and (max-width:768px){
	.site-header{
		min-height: 0;
	}
	.nav-menu{
		position:absolute;
		width:100%;
		left:0;
		z-index: 10;
		background: var(--main-color);
	}
	
	.nav-menu > li{
		margin: 1.5em .5em;
	}
	
	.menu-toggle{
		font-family: var(--header-font);
		background:none;
		border:none;
		color:white;
		border-radius:0;
		transition: all ease 500ms;
	}
	.menu-toggle[aria-expanded="true"]{
		color:var(--link-color);
		border-bottom: 4px solid var(--link-color)
	}
}




/* Footer 
 * 
 * - Footer Layout
 *  - Menu
 * 
 * - Footer Branding
 * - Footer Menu
 * - Mobile responsive
 * */

/* Footer Layout*/
.site-footer{
	display:flex;
	background:var(--main-color);
	border-top: 5px var(--dark-color) solid;
	padding: 0 .5em;
	justify-content: space-around;
}

.footer-menu{
	flex-wrap: wrap;
}

.footer-title{
	color: white;
	text-transform:uppercase;
	font-size: 46px;
	line-height:.5;
}

/* Footer Layout - Menu */
.footer-menu{
	display:flex;
	justify-content:space-around;
}

.footer-content{
	margin: 0 1em;
}
/* Formats first menu to align with "Hands On Classes" Menu */
.footer-content__main-menu{
	color: white;
	text-transform:uppercase;
}

/* Footer branding */
.footer-branding__socials{
	display:flex;
	justify-content: space-around;
	margin:0;
	padding:0;
}

.footer-branding__icon{
	list-style-type:none;
	border: 2px solid white;
	width: 44px;
	height: 44px;
	border-radius: 100%;
	display:flex;
	justify-content:center;
	align-items:center;
}

.footer-branding__icon > a{
	color: white;
	font-size: 24px
}

.footer-branding__contacts{
	color: white;
	text-align:center;
}

/* Footer Menu*/
.footer-content > div > ul{
	margin:0;
	padding: 0;
}

.footer-content >div > ul > .menu-item,
.footer-content > div > ul >.cat-item{
	list-style-type: none;
	margin:.5em 0;
	
}

.menu-item > a, 
.cat-item > a{
	color: var(--link-color);

}

.widget-title{
	color:white;
	text-transform: uppercase;
}

@media screen and (max-width: 500px){
	.site-footer{
		flex-wrap: wrap;
	}
	.footer-branding{
		margin:auto;
	}
	.footer-menu{
		justify-content:flex-start;
	}
}

/*Article Content */
.post{
  border: 1px solid black;
  max-width: 500px;
  width: calc(100vw - 2em);
  margin: 1em auto;
}



/* Mobile Responsive*/
@media screen and (max-width: 500px){
  .columns-4{
    height: auto !important;
  }

  .sub-menu{
    width:100%;
  }
  .site-footer>.site-info{
    gap:20px;
  }
  .product-section{
    padding:0;
  }
}