/* ==========================================================================
     Project:     Trick Race Fuels
     Date:        10/09/2025 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
	--ash: #dcdcdc;
	--white: #fff;
	--light-graphite: #d9d9d9;
	--graphite: #f4f4f4;
	--off-white: #f5f5f5;
	--black: #1f1f1f;
	--bright-grey: #eee;
	--lighest-grey: #808080;
	--light-grey: #666;
	--grey: #333333;
	--dark-grey: #222;
	--red: #e31837;
	--blue: #2ea3f2;
}

/* ==========================================================================
     Typograpy
========================================================================== */

body {font-family: "Archivo"; color: var(--light-grey)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {margin-bottom: 1rem; color: var(--black)}
h1, h2 {font-family: "Archivo Black", sans-serif; font-weight: 400}
h3,h4,h5,h6 {font-family: "Archivo"; font-weight: 900; text-transform: uppercase; }
h1 {font-size: 1.875rem;}
h2 {font-size: 1.625rem;}
h3 {font-size: 1.25rem}
h4 {font-size: 1.125rem}
h5 {font-size: .875rem}
h6 {font-size: .75rem}
p {line-height: 1.6;}

/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;}

/* Header */
.header-wrapper {font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.938rem; top: 0px; left: 0px; width: 100%; z-index: 1;transition: all 500ms ease; }
body.interior-masthead .header-wrapper .mainmenu, body.interior .header-wrapper .mainmenu  {background-color: rgba(0, 0, 0, 0.87);}
.header-wrapper img { transition: all 500ms ease;}
body.home {position: relative;z-index: 0;}
body.home::before {content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);pointer-events: none; z-index: 0; opacity: 1;transition: opacity 0.5s ease;}
body.home.hide-gradient::before {opacity: 0;}


body.interior .mobile-nav-menu > div:first-child {
    margin-left: 3rem;
    margin-right: 3rem;
}

/* Footer */
.footer-wrapper {background-color: var(--dark-grey);}
.footer-wrapper h2 {color: var(--lighest-grey);}
.footer-wrapper a.btn-cookie-choices {font-size: 0.875rem;}

/* ==========================================================================
     Components
========================================================================== */ 

/* Images */
img {max-width: 100%; height: auto}
.img-fit {object-fit: cover; object-position: center center; width: 100%; height: 100%;}
section:has(.img-bg) {position: relative;}
.img-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover; z-index: -1}

/* Heros */
.hero { height: 750px; position: relative; color: var(--white);}
.hero .caption {position: absolute; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.hero .caption h1 {font-size: 3.75rem; font-family: "Archivo", sans-serif;font-weight: 900; letter-spacing: 2px; line-height: 1;}
.hero .caption h2 {font-size: 2.25rem; font-family: "Archivo", sans-serif;font-weight: 700;}

/* Masthead */
.masthead { height: 750px; position: relative; color: var(--white);}
.masthead .caption {position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); text-align: center;}
.masthead .caption h1 {font-size: 2.875rem; font-family: "Archivo", sans-serif; font-weight: 900; text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0.8);}

/* Backgrounds */
.bg-off-white {background: var(--off-white);}
.bg-black {background: var(--black);}
.bg-grey {background: var(--grey);}
.bg-red {background: var(--red);}
.bg-opaque {background-color: rgba(0, 0, 0, .32);}

/* Borders */
.border-red {border-top: 2px solid var(--red);border-bottom: 2px solid var(--red);}
.border-bottom-double {border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: var(--lighest-grey);}

/* Forms */
.form-control {background-color: var(--bright-grey); border: none; border-radius: 0; color: var(--light-grey); font-size: 14px;padding: 16px;}
.form-control:focus {box-shadow: none;background-color: var(--bright-grey);color: var(--black);}

/* Product Card */
.product-card {border: 1px solid var(--lighest-grey);}
.product-octane h4 {font-size: 5rem;}
.product-content li {padding: 8px 20px; color: var(--light-grey); font-family: "Archivo", sans-serif;  font-size: 0.813rem;}
.product-content span {font-weight: 500;}

/* Nav Tabs */
.cms-tabs {border: 1px solid var(--light-graphite);}
.nav-pills {background: var(--graphite); border-bottom: 1px solid var(--light-graphite);}
.nav-pills .nav-link {border-radius: 0rem; }
.nav-item a{border-right: 1px solid var(--white); background-color: var(--grey); color: var(--ash); font-weight: 700; font-size: 0.875rem;}
.nav-item:last-child {border-right: 0px}
.nav-link {padding: 5px 1rem;}
.cms-tabs {background-color: transparent;}
.tab-content {padding: 0px 0px 0px 20px;}
.cms-tabs .cms-item .cms-link {background-color: var(--dark-grey); border: none;; color: var(--ash); border-top-left-radius: 0rem; border-top-right-radius: 0rem; margin: 0px 0px 0px 0px; font-size: 1.125rem;}
.cms-tabs .cms-item .cms-link:focus, .cms-tabs .cms-item .cms-link:hover, .cms-tabs .nav-item .nav-link.active {background-color: var(--red); color: var(--white);}


/* Cookie */
.cookie-wrapper {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 100%; color: var(--white); z-index: 100;}
.cookie-wrapper p {color: var(--white);}
.cookie-choice a {font-size: .875rem;}
.cookie-choice .list-inline-item, .cookie-choice-expand .list-inline-item {margin-right: 0px !important;}
.cookie-choice-expand {max-height: 575px;}
.cookie-choice-expand input[type="checkbox"]:checked {accent-color: var(--lighest-grey);}
.cookie-choice-expand.show {overflow-y: auto; overflow-x: hidden;}
.btn-close-cookie {text-decoration: none;}
.form-check-input[disabled]~.form-check-label {color:#E0E0E0}

/* CMS */
.cms-contentmenu {pointer-events: auto; z-index: 0;}
.cms-contentmenu[id="7"] {position: absolute; top: 30%; left: 50%; z-index: 1;}
.cms-contentmenu[id="8"] {position: absolute; top: 10%; left: 0%;}
.cms-contentmenu[id="9"] {position: absolute; top: -5%; left: 0%;}
.cms-contentmenu[id="10"] {position: absolute; top: 20%; left: 35%;}

/* Icons */
[data-icon]:before {font-family: ETmodules; content: attr(data-icon); speak: none; font-weight: 400; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-style: normal; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box;}
.icon-md {font-size: 2rem;}
.icon-lg {font-size: 6rem;}

/* ==========================================================================
     CMS Classes
========================================================================== */ 

/* Buttons */
.btn-outline-red, .btn-outline-white {font-family: "Archivo", sans-serif; border-radius: 3px; line-height: 1.7; text-decoration: none; position: relative;}
.btn-outline-red::after, .btn-outline-white::after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; opacity: 0;  transition: all 0.25s ease; font-size: 1rem;}
.btn-outline-red:hover, .btn-outline-red:focus, .btn-outline-white:hover, .btn-outline-white:focus {background-color: hsla(0, 0%, 100%, 0.2); text-decoration: none; padding-left: 1rem; padding-right: 2.5rem; color: var(--red); transition: all 250ms ease;}
.btn-outline-red:hover::after, .btn-outline-red:focus::after, .btn-outline-white:hover::after, .btn-outline-white:focus::after {opacity: 1; right: 0.825rem;}

.btn-outline-white {color: var(--white); border-color: var(--white); border: 2px solid; background-color: transparent;}
.btn-outline-white:hover, .btn-outline-white:focus {background-color: hsla(0, 0%, 100%, .2); border: 2px solid transparent; color: var(--white);}
.btn-outline-white::after {color: var(--white);}

.btn-outline-red {color: var(--red); border-color: var(--red); border: 2px solid; background-color: var(--white);}
.btn-outline-red:hover, .btn-outline-red:focus {background-color: hsla(0, 0%, 100%, .2); transition: ease 250ms; text-decoration: none;}
.btn-outline-red::after {color: var(--red);}

.btn-outline-red-rounded {color: var(--red); border: 2px solid var(--red); background-color: var(--white); position: relative; transition: background-color 250ms ease;}
.btn-outline-red-rounded::after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; opacity: 0;  transition: all 0.25s ease; font-size: 1rem; color: var(--red);}
.btn-outline-red-rounded:hover, .btn-outline-red-rounded:focus {background-color: hsla(0, 0%, 100%, 0.2); text-decoration: none; padding-left: 1rem; padding-right: 2.5rem; color: var(--red); transition: all 250ms ease;}
.btn-outline-red-rounded:hover::after, .btn-outline-red-rounded:focus::after {opacity: 1; right: .825rem;}

.btn-sm {padding: 5px 15px; font-size: 0.825rem;}
.btn-lg {padding: 10px 24px; font-size: 1.25rem}

/* Text */
.text-black {color: var(--black);}
.text-white {color: var(--white);}
.text-grey {color: var(--grey);}
.text-light-grey {color: var(--light-grey);}
.text-lighest-grey {color: var(--lighest-grey)}
.text-blue {color: var(--blue);}
.text-red {color: var(--red);}
.text-ash {color: var(--ash);}

.fw-700 {font-weight: 700;}
.fw-900 {font-weight: 900;}
.text-shadow {text-shadow:0 1px 3px rgba(0,0,0,.3)}
.leading-normal {line-height: 1.5;}
.letter-spacing-sm {letter-spacing: 1px;}
.case-regular {text-transform: none;}

/* ==========================================================================
     Media Queries
========================================================================== */ 

@media (min-width: 0px) {	

	/* Hero */
	.hero .caption {width: 80%; top: 60%; }

	/* Header */
	.header-wrapper {position: absolute}
	.interior:not(.interior-masthead) .header-wrapper {position: sticky;}
	.header-wrapper .logo {width: 175px}
	.header-wrapper .headermenu {background-color: transparent;}
	.footer-wrapper .copyright {font-size: 0.7rem; color: var(--light-grey);}

	/* Mobile Nav */
	#mobile_menu {border-top: 3px solid var(--blue);background-color: rgba(0, 0, 0, 0.87); }
	.interior #mobile_menu {background-color: rgba(0, 0, 0, 0); }
	#mobile_menu li {margin-left: 1rem;}
	#mobile_menu a {color: var(--white); display: block; padding: 6px 12px;}
	.interior .mobile-nav-menu {background: var(--black);}

	/* Nav Item */
	.nav-item {width: 100%;}
}

@media (min-width: 576px) {
	/* Hero */
	.hero .caption {width: 80%; top: 60%; }
}

@media (min-width: 768px) {
	/* Header */
	.header-wrapper {position: fixed}
	.home .header-wrapper, .interior.interior-masthhead .header-wrapper {position: fixed;}
	.interior:not(.interior-masthead) .header-wrapper {position: sticky;}

	/* Main Menu */
	html.header-minimized .headermenu .mainmenu {padding: 0px 0px}
	.headermenu .mainmenu {margin: 0px; list-style:none; padding: 20px 0px}
	.headermenu .mainmenu > li {margin-bottom: -25px; display: inline-block; padding-bottom:25px; margin-right: 0px; text-transform: uppercase; position: relative; font-size: .875rem;}
	.headermenu .mainmenu > li > a { padding: 0px 16px 0px 16px;color: var(--white); text-decoration: none; font-weight: 700; transition: color 250ms ease; font-size: 0.938rem;}
	.headermenu .mainmenu > li > span {padding: 0 16px 0 0;}
	.headermenu .mainmenu > li:first-child > a {padding: 0px 0px 0px 16px;}
	.headermenu .mainmenu > li > a:has(img) {padding: 0px 0px;}
	.headermenu .mainmenu > li:hover > a, .headermenu .mainmenu > li:hover > span {color: var(--light-grey); transition: color 250ms ease; }
  	.headermenu .mainmenu > li.active > a, .headermenu .mainmenu > li.active > span  {color: var(--red); transition: color 250ms ease; }
	.headermenu .mainmenu > li > a.active {color: var(--red);}

	/* Dropdowns */
	.headermenu .dropdown {padding: 10px;  text-transform: none;text-align:left; background: var(--grey); pointer-events:none; width: 255px; top:calc(100% - 15px);position: absolute; left: 20px; opacity: 0; visibility: hidden; transition: all 250ms ease; border-top: 3px solid var(--red);}
	.headermenu li:hover > .dropdown {opacity:1; pointer-events: all; visibility: visible; top:calc(100% - 10px); z-index: 3;}
	.headermenu .dropdown a {padding: 10px 30px; transition: background .25s ease; color: var(--white); display:block;}
	.headermenu .dropdown a:hover, .headermenu .dropdown a:focus {background: transparent; color: var(--light-grey); transition: color 250ms ease; text-decoration: none}
  	.headermenu .dropdown > li.active > a {color: var(--red); transition: color 250ms ease; }
	.headermenu li.open .fa-angle-down {transition: transform 250ms ease;}
	.headermenu li.open .fa-angle-down {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
	.headermenu li:last-child .dropdown {left: auto; right: 0px; -webkit-transform: none; transform: none;}
	.headermenu li:last-child .dropdown::before {left: auto; -webkit-transform: none; transform: none; margin-left: 0px; right: 15px}

	/* Nav Item */
	.nav-item {width: auto;}
}

@media (min-width: 992px) {
	/* Hero */
	.hero .caption {width: 100%; top: 45%; }

	/* Header */
	.header-minimized .header-wrapper {padding: .5rem 0; background: rgba(0, 0, 0, 1); }
	.header-minimized .mainmenu img {width: 85px;}

	.product-card {max-width: 325px;}

}