/*
Theme Name: Taste of Chaos
Description: One-page tour site for Taste of Chaos. Ported from the Webflow/Shopify "Chaos & Carnage" theme.
Author: Dane Clark Collins
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: taste-of-chaos
*/

/*
 * Ported from chaos-carnage.webflow.css + the parts of webflow.css / normalize.css /
 * udesly-common.css this page uses. Class names are kept from the source so the
 * rules map one-to-one. The source's body/button/input font, garamond-premier-pro,
 * came from a dead Typekit kit, so the live site renders its sans-serif fallback;
 * that fallback is what's declared here.
 */

@font-face {
	font-family: Birchstd;
	src: url(assets/fonts/birchstd.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--tan: #f1f1f1;
	--grey: #d5ca9f;
	--firebrick: #9f3224;
	--black: black;
}

/* Base (normalize + webflow.css essentials) */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100%;
	color: var(--tan);
	background-color: #000;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}
h3 { margin-top: 10px; margin-bottom: 10px; font-size: 30px; font-weight: 400; line-height: 46px; }
p { margin-top: 0; margin-bottom: 0; }
a { color: var(--grey); text-decoration: underline; transition: all .2s; display: block; }
a:hover { color: #fff; }
img { max-width: 100%; vertical-align: middle; display: block; border: 0; }
svg:not(:root) { overflow: hidden; }
input { color: inherit; font: inherit; margin: 0; line-height: normal; }
input[type=submit] { -webkit-appearance: button; cursor: pointer; }
input[disabled] { cursor: default; }
input::-moz-focus-inner { border: 0; padding: 0; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Fixed page background */
.background {
	z-index: -1;
	background-image: linear-gradient(#00000040, #00000040), url(assets/img/page-bg.jpg);
	background-position: 0 0, 50%;
	background-size: auto, cover;
	display: block;
	position: fixed;
	inset: 0;
}

/* Border strips */
.nav-border,
.newsletter-border { width: 100%; height: 50px; }
.newsletter-border.top { transform: rotate(-180deg); }
.footer-border { width: 100%; height: 50px; transform: rotate(180deg); }
.image-2.hero {
	z-index: 500;
	width: 100%;
	height: 50px;
	margin-top: -50px;
	position: absolute;
	transform: rotate(180deg);
}

/* Header */
.nav-container {
	z-index: 5000;
	flex-direction: column;
	align-items: center;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.navbar3_component {
	z-index: 1000;
	position: relative;
	width: 100%;
	min-height: 4.5rem;
	background-color: #000;
	align-items: center;
	padding-left: 5%;
	padding-right: 5%;
	display: flex;
}
.navbar3_container {
	width: 100%;
	height: 100%;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	grid-template-rows: auto;
	grid-template-columns: .8fr .5fr .8fr;
	grid-auto-columns: 1fr;
	justify-content: space-between;
	align-items: center;
	justify-items: stretch;
	margin-left: auto;
	margin-right: auto;
	display: grid;
}
.navbar-logo-link {
	grid-area: 1 / 2 / 2 / 3;
	justify-self: center;
	position: relative;
	text-decoration: none;
}
.navbar-logo-link:hover { filter: brightness(200%); }
.navbar-logo { width: 160px; height: 103px; margin-top: 10px; position: relative; }
.footer4_social-list.header-social { grid-area: 1 / 3 / 2 / 4; justify-self: end; margin-right: 0; } /* no cart beside it any more */

/* Social icons (header + footer) */
.footer4_social-list {
	grid-column-gap: .75rem;
	grid-row-gap: 0;
	white-space: normal;
	grid-template-rows: auto;
	grid-template-columns: max-content;
	grid-auto-columns: max-content;
	grid-auto-flow: column;
	align-items: start;
	justify-items: end;
	margin-right: 40px;
	display: grid;
}
.footer4_social-link { align-items: center; font-size: 14px; text-decoration: none; display: flex; max-width: 100%; }
.social-icon { width: 1.5rem; height: 1.5rem; color: var(--tan); transition: all .2s; }
.social-icon:hover { color: var(--grey); }
.social-icon svg { display: block; }

/* Hero */
.section { flex-direction: column; align-items: stretch; margin: 70px 0 40px; }
.section.cc-store-home-wrap { margin-top: 70px; margin-left: 0; margin-right: 0; position: relative; }
.div-block-5 { z-index: 100; position: relative; }
.div-block-6 { position: relative; }
.hero-art { display: block; background-color: #000; }
.hero-img { width: 100%; height: auto; }

/* Section headings */
.section-heading {
	color: var(--tan);
	text-align: center;
	justify-content: center;
	margin-top: 0;
	margin-bottom: 0;
	font-family: Birchstd, sans-serif;
	font-size: 6vw;
	line-height: 1.5em;
	display: flex;
}
.container { width: 90%; max-width: 1140px; color: var(--tan); flex: 1; margin-left: auto; margin-right: auto; }
.html-embed { font-family: sans-serif; }

/* Newsletter */
.section.cc-subscribe-form {
	background-color: #f4f4f4;
	background-image: url(assets/img/texture.jpg);
	background-position: 50% 0;
	background-size: cover;
	margin: 0;
}
.container.cc-subscription-form {
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: auto;
	padding-top: 130px;
	padding-bottom: 140px;
	display: flex;
}
.form-block { width: 500px; max-width: 100%; margin: 20px 0 15px; padding-left: 20px; padding-right: 20px; }
.subscribe-form { justify-content: center; align-items: center; display: flex; }
.text-field {
	display: block;
	width: 100%;
	height: 38px;
	vertical-align: middle;
	background-color: var(--tan);
	color: #000;
	text-align: center;
	border: 1px #e4e4e4;
	border-radius: 0;
	margin-bottom: 18px;
	padding: 0;
	font-size: 14px;
	line-height: 26px;
	transition: border-color .4s;
}
.text-field:hover { border-color: #e3e6eb; }
.text-field:focus { border-color: #43464d; outline: 0; }
.text-field::placeholder { color: #32343a66; }
.text-field.cc-subscribe-text-field {
	width: 330px;
	border-style: none;
	text-align: left;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-right: 0;
	padding-top: 1.65em;
	padding-bottom: 1.65em;
	padding-left: 10px;
	font-family: sans-serif;
}
.text-field.cc-subscribe-text-field:focus { border-color: #32343a; }
.button {
	display: inline-block;
	cursor: pointer;
	border: 1px solid var(--tan);
	background-color: var(--firebrick);
	color: var(--tan);
	text-align: center;
	text-transform: uppercase;
	border-radius: 0;
	padding: 12px 25px;
	font-family: sans-serif;
	line-height: 20px;
	text-decoration: none;
	transition: background-color .4s, opacity .4s, color .4s;
}
.button:hover { background-color: var(--tan); color: var(--black); }
.button:active { background-color: var(--grey); }
.status-message { background-color: var(--firebrick); color: #fff; text-align: center; padding: 9px 30px; font-size: 14px; line-height: 26px; }
.w-form-done, .w-form-fail { display: none; }
.w-form-fail { margin-top: 10px; }
/* newsletter.js adds these classes. The source only showed .form-posted-successfully
   via a descendant selector that never matched, so its thank-you line never appeared. */
.w-form-done.form-posted-successfully,
.w-form-fail.form-has-errors { display: block; }

/* Footer */
.section.footer { z-index: 500; margin: -50px 0 0; padding-top: 0; padding-bottom: 0; position: relative; }
.footer {
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	grid-template: ". . . . ." ". . . . ." / 2fr 1fr 1fr 1.25fr 1fr;
	align-items: start;
	justify-items: start;
}
.footer-container { background-color: #000; display: flex; }
.padding-global { height: 100%; flex: 1; padding-top: 40px; padding-left: 5%; padding-right: 5%; }
.container-large { width: 100%; margin-left: auto; margin-right: auto; }
.padding-bottom.padding-xxlarge { padding-bottom: 40px; }
.footer4_top-wrapper {
	grid-column-gap: 4vw;
	grid-row-gap: 16px;
	grid-template-rows: auto;
	grid-template-columns: .25fr .25fr;
	grid-auto-columns: 1fr;
	justify-content: space-between;
	align-items: center;
	justify-items: center;
	display: grid;
}
.footer4_link-list {
	justify-self: start;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	text-transform: uppercase;
	white-space: normal;
	grid-template-rows: auto;
	grid-template-columns: max-content;
	grid-auto-columns: max-content;
	grid-auto-flow: column;
	justify-content: center;
	justify-items: start;
	display: grid;
}
.footer4_social-list.mobile { justify-self: end; }
.footer-link {
	opacity: .6;
	color: var(--grey);
	margin-bottom: 15px;
	font-size: 12px;
	line-height: 1.5em;
	text-decoration: none;
	transition: color .2s, opacity .2s;
}
.footer-link:hover { opacity: 1; }
.line-divider { width: 100%; height: 1px; background-color: #0000; }
.footer4_bottom-wrapper {
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	white-space: normal;
	justify-content: center;
	align-items: center;
	justify-items: center;
	display: flex;
}
.footer-signature-container { grid-column-gap: 5px; grid-row-gap: 5px; align-items: center; display: flex; }
.footer4_credit-text { white-space: nowrap; opacity: .5; color: var(--grey); letter-spacing: 0; text-transform: uppercase; font-size: 12px; }

@media screen and (max-width: 991px) {
	.navbar3_container { z-index: 0; position: relative; }
	.nav-border { z-index: 7; }
	.footer4_top-wrapper { grid-row-gap: 3rem; grid-template-columns: 1fr; justify-content: center; justify-items: center; }
	.footer4_link-list,
	.footer4_social-list.mobile { justify-self: center; }
}

@media screen and (max-width: 767px) {
	.section.cc-store-home-wrap { margin-top: 65px; }
	.section.footer { display: block; }
	.text-field.cc-subscribe-text-field { width: auto; text-align: center; margin-bottom: 10px; margin-right: 0; }
	.subscribe-form { flex-direction: column; align-items: stretch; }
	.form-block { width: 100%; max-width: none; }
	.footer { text-align: center; flex-direction: column; align-items: center; display: flex; }
	.navbar3_container { flex: 1; }
	.navbar3_component { min-height: 4rem; }
	.navbar-logo { height: auto; }
	.hero-img { padding-top: 15%; }
	.footer-container { width: 100%; }
	.footer4_credit-text { margin-top: 1rem; }
	.footer4_link-list { grid-column-gap: 0; grid-row-gap: 1.5rem; flex-direction: column; grid-auto-flow: row; justify-items: center; display: block; }
	.footer4_social-list { display: flex; }
	.footer4_top-wrapper { flex-direction: column; display: flex; }
	.footer4_bottom-wrapper { grid-column-gap: 0; grid-row-gap: 1rem; flex-direction: column-reverse; justify-items: center; padding-bottom: 1rem; display: flex; }
	.footer-signature-container { justify-content: center; }
	.section-heading { font-size: 10vw; }
}

@media screen and (max-width: 479px) {
	.navbar3_container { grid-column-gap: 0; grid-row-gap: 0; grid-template: "." / .55fr .5fr .55fr; }
	.navbar-logo-link { padding-top: 10px; }
	.navbar-logo { margin-top: 0; }
	.footer4_social-list { justify-content: center; margin-right: 0; display: none; }
	.footer4_social-list.mobile { display: flex; }
}