@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

.caveat-400 {
	font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.jost-400 {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.jost-700 {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

:root {

	--orange: #C3512F;
	--orange-bg: rgba(195,81,47,0.2);
	--blue: #466E84;
	--green: #46AB40;
	--green-bg: rgba(121,215,116,0.2);
	--grey: rgba(0,0,0,0.05);

	--ffjost: "Jost", sans-serif;
	--ffcaveat: "Caveat", cursive;

}


body {
	font-family: var(--ffjost);
	letter-spacing: 0;

	&.menu-expanded {

		@media screen and (max-width: 1100px) {

			overflow: hidden;

			.site-header {

				.header--flex {

					.device-menu-trigger {

						span {

							background: transparent;

							&::before,
							&::after {
								background: #fff;
							}

							&::before {
								transform: rotate(45deg);
								top: 0;
							}

							&::after {
								transform: rotate(-45deg);
								bottom: 0;
							}

						}

					}

					.main-menu {

						transform: translate(0,0);

					}

				}

			}

		}

	}

}

a {
	color: var(--orange);
	text-decoration: none;
}

p {
	a {
		text-decoration: underline;
	}
}

.site-header {

	border-bottom: 1px solid var(--grey);

	.callout-bar {

		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #f8f8f8;

		span {
			color: var(--orange);
			font-size: 11px;
		}

		.social {

			display: flex;
			align-items: center;

			a {
				color: var(--orange);
				display: block;
				width: 30px;
				height: 30px;
				border-right: 1px solid var(--grey);
				display: flex;
				align-items: center;
				justify-content: center;
				transition: .3s all;
				svg {
					width: 16px;
					height: unset;
				}
				&:hover {
					color: #fff;
					&[data-fb] {
						background: #37589b;
					}
					&[data-ig] {
						background: #a67658;
					}
					&[data-yt] {
						background: #a72b1d;
					}
					&[data-x] {
						background: #000;
					}
				}	
			}

		}

	}

	.header--flex {

		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {

			width: 160px;

			img {
				width: 100%;
				height: unset;
				display: block;
			}

		}

		.device-controls {

			display: none;

			@media screen and (max-width: 1100px) {

				display: flex;
				align-items: center;
				gap: 14px;

				.cart-trigger {

					display: block;
					line-height: 1;
					color: var(--orange);

					svg {
						width: 30px;
					}

				}

				.device-menu-trigger {

					display: block;
					width: 30px;
					height: 30px;
					cursor: pointer;
					position: relative;
					z-index: 3;

					span {
						background: var(--blue);
						width: 100%;
						height: 3px;
						border-radius: 10px;
						display: block;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0,-50%);
						transition: .2s all;
						&::before,
						&::after {
							content: '';
							background: var(--blue);
							width: 100%;
							height: 3px;
							border-radius: 10px;
							position: absolute;
							left: 0;
							transition: .2s all;
						}
						&::before {
							top: -10px;
						}
						&::after {
							bottom: -10px;
						}
					}

				}

			}

		}

		.main-menu {

			@media screen and (max-width: 1100px) {
				position: fixed;
				top: 0;
				right: 0;
				width: 330px;
				height: 100%;
				min-height: 100dvh;
				background: #342f29;
				overflow: auto;
				transform: translate(100%,0);
				transition: .4s all;
			}

			ul {

				display: flex;
				margin: 0;
				padding: 0;

				@media screen and (max-width: 1100px) {
					flex-direction: column;
					padding: 100px 0;
				}

				li {

					list-style: none;

					a {

						color: #969696;
						transition: .3s all;
						padding: 0 12px;
						border-right: 1px solid var(--grey);
						font-size: 14px;
						letter-spacing: 0;

						@media screen and (max-width: 1100px) {
							color: #fff;
							border: none;
							text-transform: uppercase;
							padding: 12px 50px;
							display: block;
						}

						&:hover {
							color: #000;
							@media screen and (max-width: 1100px) {
								background: #3b3631;
								color: #fff;
							}
						}

					}

					&:last-child {
						a {
							border: none;
							padding-right: 0;
						}
					}

					&.cart-link {
						@media screen and (max-width: 1100px) {
							display: none;
						}
						a{
							color: var(--orange);
						}
					}

				}

			}

		}

	}

}