/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- CSS Variables
	- Typography
	- Links
	- Forms
# Components
	- Header
	- Content
	- Widgets
	- Sections
	- Icons
	- Site Navigation
	- Comments
	- Media
	- Captions
	- Testimonials
	- Coupon
	- Galleries
	- Accordion Setup
# Plugins
	- Carousel
# Mobile Styles


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

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------- */

:root {
  --font-primary: 								'Chantal'; 
  --font-secondary: 							Arial, Helvetica, Verdana, sans-serif;
  --font-tertiary: 								var(--font-secondary);
  --font-text: 									"Open Sans", sans-serif;
  
  --main-blue: 									rgba(30, 33, 99, 1);	/* #1e2163 */
  --main-red: 									rgba(191, 10, 48, 1);	/* #bf0a30 */

  --font-base-5: 								6.25%;
    
  --font-size-h1: 								calc(68rem * 0.8);
  --font-size-h6: 								calc(var(--font-size-h5) - 13rem);
	
  --input-color: 								var(--main-blue);
  --input-background: 							var(--white);
  --input-padding: 								3px 7px;
  --input-font-size: 							85%;
  --input-font-weight: 							normal;
  --input-border: 								1px solid var(--main-blue);
  --input-border-radius: 						0;
    
  --button-color: 								var(--white);
  --button-background: 							var(--main-blue);
  --button-font-family: 						var(--font-primary);
  --button-font-weight: 						normal;
  --button-font-size: 							1.5em;
  --button-border: 								none;
  --button-padding: 							5px 20px;
  --button-border-radius: 						8px;
  --button-font-variant: 						small-caps;
  
  --button-color-hover: 						var(--white);
  --button-background-hover: 					var(--main-red);

  --button-color-alt: 							var(--main-red);
  --button-background-alt: 						var(--white);
  --button-border-alt: 							3px solid var(--main-red);
  
  --button-color-hover-alt: 					var(--button-color-hover);
  --button-background-hover-alt: 				var(--button-background-hover);
  --button-border-hover-alt:					3px solid var(--main-red);
	
  --font-size-text: 							20px;    
}

/* Typography
--------------------------------------------- */
@font-face { font-family: 'Chantal'; font-display: block; font-weight: 400; font-style: normal; src: url('../battleplantheme-site/fonts/chantal.woff2') format('woff2') }

body {
	background: 									var(--white);
	color: 											var(--main-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 									var(--font-primary);
	font-weight: 									normal;
	line-height: 									1;
	color:											var(--main-red);
	font-variant: 									small-caps;
	text-align: 									center;
	margin:											0;
}

/* Links
--------------------------------------------- */
a, a:visited {
	color: 											var(--main-red);
}

a:hover,
a:active,
a.tab-focus {
	color: 											var(--main-blue);
}

.style-alt-2 a.button,
a.button.style-alt-2 {
	border: 										3px solid var(--white);
	background: 									var(--white);
	color: 											var(--main-red);
}

.style-alt-2 a.button:hover,
a.button.style-alt-2:hover {
	border: 										3px solid var(--white);
	background: 									var(--main-blue);
	color: 											var(--white);
}

/* Forms
--------------------------------------------- */
.slug-contact-us h1 {
	margin-bottom: 									-20px;
}

label,
#secondary label {
	font-family: 									var(--font-text);
	color:											var(--main-blue);
}

::placeholder { 
	color:											var(--black-med);
}

span.wpcf7-spinner::before {
    color: 											var(--main-blue);
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */
#masthead {
	position: 										fixed;
	width: 											100%;
	z-index: 										8000;
}

.logo-strip {
	padding-top:									1em;
	padding-bottom:									1em;
	background: 									var(--white);
	z-index: 										4000;
	transition: 									all 0.3s ease;
}

	#masthead.stuck .logo-strip {
		padding-top:									0.5em;
		padding-bottom:									0.4em;
	}

.logo-strip .grid-custom {
	gap: 											0;
	transition: 									all 0.3s ease;
}

	#masthead.stuck .logo-strip .grid-custom {
		grid-template-columns: 							180px 1fr !important;
	}

.logo-strip .menu-holder {
	padding-top: 									59px;
	transition: 									all 0.3s ease;
}

	#masthead.stuck .logo-strip .menu-holder {
		padding-top: 									15px;
	}


/* Content
--------------------------------------------- */
#wrapper-top {
	z-index: 										6000;
}

#home-page-hero .block-video {
	margin: 										-5px 0 0 !important;
}

.home #wrapper-content #main-content {
	margin: 										0;
}

#request-a-quote {
	padding-top: 									1em;
}

#caterers img {
	margin: 										0;
	width: 											492px;
	height: 										auto;
}

#caterers .col-inner {
	max-width: 										492px;
	margin: 										0 auto;
}

#caterers .caterer-name {
	background: 									var(--black);
	color: 											var(--white);
	padding: 										10px;
	text-align: 									center;
	font-family: 									var(--font-primary);
	font-size: 										36rem;
	margin-bottom: 									8px;
}

#caterers .store-list,
#caterers .email {
	font-weight: 									bold;
}

body.slug-private-dining #ask-about-private-dining {
	display: 										none;
}


/* Sections
--------------------------------------------- */
.section[class*="style-"] {
	padding-top:									4em;
	padding-bottom:									4em;
}

/* Style 1 */
.section.style-1 {
	background:										var(--white);
	color: 											var(--black);
}

.section.style-1 h3,
.section.style-1 p {
	text-align: 									left;
}

.section.style-1 .right h3,
.section.style-1 .right p {
	text-align: 									right;
}

.section.style-1 h3 + p {
	margin-top: 									2px;
}

/* Style 2 */
.section.style-2 {
	background: 									var(--main-blue);
} 

.section.style-2 a,
.section.style-2 a.tab-focus, 
.section.style-2 a:active, 
.section.style-2 a:hover{
	color: 											var(--white);
	font-weight: 									bold;
} 

/* Style 3 */
.section.style-3 {
	background: 									var(--main-red);
} 

.section.style-2 h2,
.section.style-2 h3,
.section.style-2 p,
.section.style-3 h2,
.section.style-3 h3,
.section.style-3 p {
	color: 											var(--white);
} 


/* Footer 
--------------------------------------------- */
#colophon {
	background:										var(--white);
}

#colophon p,
#colophon ul {
	margin: 										5px 0 0 0;
	padding-left: 									0;
}

.site-info .col-inner {
  	align-items: 									start;
	gap: 											0;
}

.site-info .flex {
	width: 											100%;
	max-width: 										1280px;
	margin: 										0 auto;
	gap: 											0;
}

.site-info {
	border-top: 									1px solid var(--main-red);
	padding: 										2em 1.5em;
}

.site-info,
.site-info a {
	color:											var(--black);
	text-align: 									left !important;
	text-decoration: 								none;
	font-weight: 									normal;
} 

.site-info a:hover,
.site-info a:active,
.site-info a.tab-focus {
	color:											var(--main-red);
	font-weight: 									bold;
}

.footer-social {
	max-width: 										150px;
}

#colophon ul {
	list-style: 									none;
	column-count: 									1;
}

#colophon ul li {
  	margin-bottom: 									0 !important;
}

#colophon h6,
#colophon .block-accordion h2,
#colophon .block-accordion.active h2, 
#colophon .block-accordion:hover h2, 
#colophon .block-accordion h2.tab-focus { 
	font-weight: 									bold;
	color: 											var(--main-blue);
	text-align: 									left;
	font-size: 										24px;
}

#colophon .block-accordion .accordion-content {
	border-bottom:									none;
}

/* Icons & Social Media
--------------------------------------------- */
.icon-btn.social-btn {
	margin: 										6px;
}

a.icon-btn {
	color: 											var(--white);
}

a.icon-btn:hover {
	color: 											var(--main-red);
	transition:										all 0.2s ease;
}

a.icon-btn .icon-bg {
	background:										var(--main-red);
	border-radius:									50%;
}

a.icon-btn:hover .icon-bg {
	background:										var(--white);
	transition:										all 0.2s ease;
}

/* Site Navigation
--------------------------------------------- */
/* Main Menu */
.main-navigation ul {
	font-family:									var(--font-primary);
	font-size:										28px;
}

	#masthead.stuck .main-navigation ul {
		font-size:										24px;
	}

.main-navigation li {
	margin: 										0 10px;	
}

.main-navigation li:first-of-type {
	margin-right: 									70px;	
}

.main-navigation a {
	color:											var(--button-color);
	background: 									var(--button-background);
	border-radius: 									var(--button-border-radius);
	border:											2px solid var(--button-background);
	padding:										5px 0;
}

.main-navigation li:first-of-type a {
	color:											var(--main-blue);
	background: 									var(--white);
	border:											2px solid var(--main-blue);
}

.main-navigation ul.main-menu li:hover > a, 
.main-navigation ul.main-menu li.active > a, 
.main-navigation ul.main-menu li > a.tab-focus {    
	color:											var(--button-color-hover);
	background: 									var(--button-background-hover);
	border-radius: 									var(--button-border-radius-hover);
	border:											2px solid var(--button-background-hover);
}

/* Mobile Menu */
#mobile-menu-bar {
	background: 								    var(--main-blue);	    
	border-bottom: 									none;
	box-shadow: 									0 4px 6px var(--black-low);
}

#mobile-navigation {
  background: 										var(--white);
}

#mobile-menu-bar {
	grid-template-columns: 							38px 1fr 38px 38px;
}

#mobile-navigation li a {
	font-size: 										32px;
	color:											var(--main-blue);
	background: 									none;
	border: 										none;
	padding: 										0 50px;
}

#mobile-navigation ul.main-menu li:hover > a, 
#mobile-navigation ul.main-menu li.active > a,
.top-slide #mobile-navigation {    
	color:											var(--main-red);
	background: 									none;
	border: 										none;
	box-shadow: 									none;
}

#mobile-navigation #mobile-menu > li:first-of-type,
#mobile-navigation #mobile-menu > li:last-of-type {
  	border: 										none;
}

/* Media
--------------------------------------------- */
#primary img:not(.img-widget), 
#wrapper-top img, 
#wrapper-bottom img, 
iframe,
svg.anonymous-icon {
	border:											none;	
}

img.logo-slider-img,
img.img-products,
img.products-img {
	border:											none !important;
}	

img.img-404 {
	filter: 										sepia(0) contrast(1) hue-rotate(0deg) drop-shadow(-1px -1px 0 var(--black-low)) drop-shadow(1px 1px 0 var(--white-low));
}

/* Accordion Setup
--------------------------------------------- */
.block-accordion h2 { 
	color:											var(--white);
	font-weight:									bold;
	font-variant: 									none;
}

.block-accordion.active h2, 
.block-accordion:hover h2, 
.block-accordion h2.tab-focus { 
	color:											var(--white);
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Mobile Styles
--------------------------------------------------------------*/

/* 4: Large Tablets (landscape) */
@media (max-width: 1280px) {
}

/* 3: Small Tablets (landscape) */
@media (max-width: 1024px) {
}

/* 2: Phones (landscape) + Tablets (portrait) */
@media (max-width: 860px) {
	#experience-babes-catering .grid-custom {
		grid-template-columns: 								1fr !important;
	}
	
	#experience-babes-catering .video {
		order: 												3;
	}	
}

/* 1: Phones (portrait) */
@media (max-width: 576px) {
}