/*
 * Globals
 */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Sora:wght@100..800&display=swap');

/* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 700
*/
/* .josefin-sans-<uniquifier> {
  font-family: "Josefin Sans", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.sora-<uniquifier> {
  font-family: "Sora", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}  
*/

:root {
	/* Custom vars */
	--arao-gold: #C4B47C;
	--arao-gold-rgb: 196, 180, 124;
	--arao-blue: #16244E;
	--arao-blue-rgb: 22, 36, 78;
	--arao-red: #B21D24;
	--arao-red-rgb: 178, 29, 36;
	--arao-black: #020000;
	--arao-black-rgb: 2, 0, 0;
	--arao-brown: #7B274A;
	--arao-brown-rgb: 123, 39, 74;
	--arao-font-heading: "Josefin Sans", serif;
	/* Bootstrap overwrites */
	--bs-font-sans-serif: "Sora", serif;
	--bs-body-text-align: center;
	--bs-body-line-height: 1.75;
	--bs-primary: var(--arao-gold);
	--bs-primary-rgb: var(--arao-gold-rgb);
	--bs-secondary: var(--arao-blue);
	--bs-secondary-rgb: var(--arao-blue-rgb);
	--bs-dark: var(--arao-black);
	--bs-dark-rgb: var(--arao-black-rgb);
	--bs-light: var(--bs-white);
	--bs-light-rgb: 255, 255, 255;
	--bs-red: var(--arao-red);
	--bs-body-bg: var(--bs-primary);
	--bs-brown: var(--arao-brown);
	--bs-brown-rgb: var(--arao-brown-rgb);
}

.bg-brown {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-brown-rgb), var(--bs-bg-opacity)) !important;
}

.btn {
	--bs-btn-font-family: var(--arao-font-heading);
	--bs-btn-font-size: 0.75rem;
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-radius: 15px 0 0 15px;
	color: var(--bs-btn-color);
	letter-spacing: 0.125rem;
	padding: 6px 24px 4px 28px;
	text-transform: uppercase;
}

.btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-disabled-color: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}

.modal {
	--bs-modal-bg: var(--bs-light);
	--bs-modal-width: 992px;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
	color: var(--bs-primary);
	font-family: var(--arao-font-heading);
	letter-spacing: 0.15rem;
	text-transform: uppercase;
}

.h1, .h2, .h3,
h1, h2, h3 {
	/* font-weight: 700; */
	line-height: 1.78;
}

	.h4, .h5, .h6,
	h4, h5, h6,
	.h1 span, .h2 span, .h3 span, .h4 span, .h5 span, .h6 span,
	h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
		font-weight: 340;
	}

b, strong {
	font-weight: 700;
}

.small, small {
	font-size: .75rem;
}

/* Navbar */
.navbar-nav {
	--bs-navbar-color: var(--bs-white);
	--bs-navbar-hover-color: var(--bs-white);
	--bs-navbar-active-color: var(--bs-white);
	--bs-navbar-disabled-color: var(--bs-light-rgb), 0.5;
	--bs-nav-link-font-weight: 400;
}

.nav-link {
	--bs-nav-link-font-size: var(--bs-body-font-size);
	--bs-nav-link-font-weight: var(--bs-body-font-weight);
	--bs-nav-link-color: var(--bs-white);
	color: var(--bs-nav-link-color);
}

/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
	color: #333;
	text-shadow: none; /* Prevent inheritance from `body` */
}

/* Carousels */
.carousel-control-next,
.carousel-control-prev {
	opacity: 1;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	width: 37px;
	height: 24px;
}

.carousel-control-prev-icon {
	background-image: url('../assets/icons/carousel-arrow-prev.svg');
}

.carousel-control-next-icon {
	background-image: url('../assets/icons/carousel-arrow-next.svg');
}

@media (min-width: 992px) {
	.carousel-control-next,
	.carousel-control-prev {
		display: none;
	}
}

/* List Groups */
.list-group {
	--bs-list-group-bg: transparent;
	--bs-list-group-border-color: var(--bs-primary);
	border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
	border-width: var(--bs-list-group-border-width) 0;
}

	.list-group .list-group-item {
		display: flex;
		gap: 1rem;
	}

		.list-group .list-group-item label {
			color: var(--bs-primary);
			font-size: .75rem;
			font-weight: 600;
			letter-spacing: 0.125rem;
			text-align: left;
			text-transform: uppercase;
		}

		.list-group .list-group-item span,
		.list-group .list-group-item a {
			font-size: .875rem;
			text-align: left;
		}

@media (min-width: 992px) {
	.list-group .list-group-item {
		gap: 1.5rem;
	}
}

/*
 * Base structure
 */

body {
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0.03rem;
}

/*
 * Age Verification
 */

.age-not-verified {
	overflow: hidden;
}

#ageVerification {
	background-image: url('../assets/images/bg-age-verification.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 200;
}

	#ageVerification .btn {
		--bs-btn-border-radius: 0;
		padding: 6px 44px 4px 44px;
	}

		#ageVerification .btn:not(:hover) {
			color: var(--bs-white);
		}

	#ageVerification .link-light {
		text-decoration: underline;
	}

/*
 * Header
 */
header {
	pointer-events: none;
	--bs-gradient-dark: linear-gradient(180deg, rgba(18, 19, 13, 0.3), rgba(18, 19, 13, 0));
	background-image: var(--bs-gradient-dark);
	z-index: 100;
}

	header * {
		pointer-events: auto;
	}

	header .menu-toggler,
	header .menu-toggler:active,
	header .menu-toggler:hover,
	header .menu-toggler:focus {
		background-color: transparent;
		border-radius: 0;
		display: block;
		height: 30px;
		outline: none;
		overflow: hidden;
		padding: 0;
		position: relative;
		width: 40px;
	}

		header .menu-toggler:not(.menu-close) {
			border: solid 1px #fff;
			border-width: 1px 0;
			transform: translateY(-50%);
		}

		header .menu-toggler.menu-close {
			border: none;
			top: 3rem;
			margin-top: 18px;
		}

		header .menu-toggler::before,
		header .menu-toggler::after {
			content: '';
			background-color: #fff;
			display: block;
			height: 1px;
			position: absolute;
			top: 50%;
		}

		header .menu-toggler:not(.menu-close)::before {
			background-color: #fff;
			width: 100%;
		}

		header .menu-toggler:not(.menu-close)[aria-expanded="true"],
		header .menu-toggler:not(.menu-close)::after {
			display: none;
		}

		header .menu-toggler.menu-close::before,
		header .menu-toggler.menu-close::after {
			left: 0;
			width: 40px;
		}

		header .menu-toggler.menu-close::before {
			transform: rotate(45deg);
		}

		header .menu-toggler.menu-close::after {
			transform: rotate(-45deg);
		}

#mainMenu {
	backdrop-filter: blur(4px);
	padding: 3rem 0 5rem;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
}

	#mainMenu,
	#mainMenu.collapsing {
		height: 100vh !important;
	}

		#mainMenu.collapsing {
			height: 100vh !important;
			transition-property: top;
		}

		#mainMenu.collapsing,
		#mainMenu.show {
			top: 0;
		}

#mainMenu,
.menu-toggler.collapsed ~ #mainMenu.collapsing {
	top: -100vh;
}

.social-icons {
	gap: 2rem;
}

@media (min-width: 768px) {
	header .menu-toggler:not(.menu-close)[aria-expanded="true"] {
		display: block;
	}

	#mainMenu {
		max-width: 500px;
		width: 50vw;
	}
}

/*
 * Home page
 */

.homepage section:not(#main-slider) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

	.homepage section:not(#main-slider) img {
		margin-right: calc(var(--bs-gutter-x) * -1);
		width: 150%;
	}

@media (min-width: 576px) {
	.homepage section:not(#main-slider) img {
		margin-right: 0;
		width: 100%;
	}
}

@media (max-width: 767.98px) {
	.homepage #main-slider .carousel-inner .carousel-item:nth-child(2) img {
		object-position: -50px center;
	}

	#productsMenu.navbar-nav .nav-item:not(:last-of-type) {
		position: relative;
	}

	#productsMenu.navbar-nav .nav-item:not(:last-of-type)::after {
		content: '';
		background-color: var(--bs-primary);
		height: 1px;
		width: 44px;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	#productsMenu .nav-link {
		padding-block: calc(var(--bs-nav-link-padding-y) / 2);
	}
}

@media (min-width: 768px) {
	#productsMenu.navbar-nav .nav-item:not(:last-of-type) {
		border-right: solid 1px var(--bs-primary);
	}
}

@media (min-width: 992px) {
	.homepage section h2 {
		margin-top: -5rem;
	}
}

/*
 * Main Carousel
 */

.carousel .carousel-indicators [data-bs-target] {
	background-color: var(--bs-primary);
	border-radius: 50%;
	height: 12px;
	width: 12px;
	margin: 0 6px;
}

.carousel .carousel-indicators {
	margin-bottom: 0;
	bottom: auto;
	top: 100%;
}

.carousel-main .carousel-indicators {
	top: 50%;
	transform: translateY(-50%);
}

/*
 * Jumbotron
 */

#jumbotron {
	height: 60vh;
	max-height: 330px;
}

	#jumbotron h1 {
		margin: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
	}

/*
 * Footer
 */

.copyright {
	font-size: 0.75rem;
	/* letter-spacing: 0.125rem; */
}

@media (min-width: 992px) {
	.rounded-circle {
		height: 12px;
		width: 12px;
	}
}

/*
 * Products
 */

.page-product picture {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 991px) {
	.page-product picture {
		width: 50%;
	}

	.page-product .carousel img {
		width: 90%;
	}
}

.product-details {
	padding: 0 1rem;
}

	.product-details .list-group .list-group-item label {
		text-align: right;
		width: 40%;
	}

	.product-details .list-group .list-group-item span {
		width: 60%;
	}

@media (min-width: 992px) {
	.product-details {
		padding: 0 10%;
	}

		.product-details .list-group .list-group-item label {
			width: 36%;
		}

		.product-details .list-group .list-group-item span {
			width: 64%;
		}
}

/*
 * About
 */

.h-custom {
	height: auto;
}

@media (min-width: 992px) {
	.h-custom {
		height: 60vh;
		max-height: 615px;
		object-position: center -120px;
	}
}

@media (min-width: 1200px) {
	.h-custom {
		max-height: unset;
	}
}

/*
 * Swag
 */

.page-swag .ratio-16x9 {
	--bs-aspect-ratio: 100%;
}

@media (min-width: 992px) {
	.page-swag .ratio-16x9 {
		--bs-aspect-ratio: 48.25%;
	}
}

/*
 * Where to buy
 */

.store-details .list-group .list-group-item * {
	flex-basis: auto;
	flex-shrink: 1;
	width: fit-content;
}

.store-details .list-group .list-group-item .btn-view-map,
.store-details .list-group .list-group-item .btn-view-map:hover,
.store-details .list-group .list-group-item .btn-view-map:focus,
.store-details .list-group .list-group-item .btn-view-map:active {
	color: var(--arao-red);
	font-weight: 400;
	text-decoration: none;
	text-transform: uppercase;
}

	.store-details .list-group .list-group-item .btn-view-map small {
		letter-spacing: 0;
		text-transform: none;
	}

.store-details .list-group .list-group-item small.distance {
	display: none;
}

#map {
	height: 100vh;
}

	#map div[role='dialog'] button[aria-label='Close'] {
		height: 24px !important;
		width: 24px !important;
	}

		#map div[role='dialog'] button[aria-label='Close'] span {
			margin: 0 !important;
			height: 20px !important;
			width: 20px !important;
		}

	#map div[role='dialog'] .marker-content {
		padding: 0 6px 10px 10px;
	}

@media (max-width: 991.98px) {
	.store-details .list-group .list-group-item {
		flex-direction: column;
	}

		.store-details .list-group .list-group-item * {
			text-align: center;
			margin: 0 auto;
		}

    /* apply visual container styles only on small screens where list stacks above map */
    .store-details {
        max-width: 700px;
        width: 100%;
        height: 500px;
        overflow-y: auto;
        padding: 12px;
        margin: 0 auto;
        /* Visual separation */
        background: rgba(0,0,0,.03);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        box-shadow: 0 1px 8px rgba(0,0,0,.06);
        /* Mobile nested-scroll improvements */
        -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
        overscroll-behavior: contain; /* prevents “page scroll” chaining when list hits ends */
    }
}

@media (min-width: 992px) {
	.store-details .list-group .list-group-item label {
		flex-shrink: 0;
		width: 35%;
	}

	.store-details .list-group .list-group-item span {
		flex-shrink: 1;
	}

	.store-details .list-group .list-group-item .btn-view-map {
		flex-shrink: 0;
		margin: 0 0 auto auto;
	}

	#map {
		height: 60vh;
	}
}

/* desktop / default */
.logo-col {
	height: 100px; /* container height on larger screens */
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-img {
	max-height: 90px; /* image height on larger screens */
	width: auto;
	object-fit: contain;
}

/* small screens */
@media (max-width: 576px) {
	.logo-col {
		height: 70px; /* smaller container height on phones */
	}

	.logo-img {
		max-height: 55px; /* smaller image height on phones */
	}
}