:root {
	--color-white: #FFFFFF;
	--color-black: #000000;
	--trans-black: rgba(0, 0, 0, 0.65);
	--trans-white: rgba(255, 255, 255, 0.85);
	--black: #000000;
	--color-grey: #333333;
	--color-light: #f3f4f8;
	--nav-color: black;
	--nav-color-desktop: black;
	--nav-color-active: var(--color-primary);
	--nav-dropdown-color: white;
	--nav-toggle-color: white;
	--header-text-color: white;
	--bg-light: #f8f9fa;
	--bg-grey: #cccccc;
	--bg-black: #000000;
	--border: 1px solid #cccccc;
	--color-black-trans: rgba(0, 0, 0, 0.75);
	--color-primary: #0A1A2E;
	--color-primary-hover: #093061;
	--color-primary-dark: #051426;
	--color-secondary: #666666;
	--color-secondary-hover: #333333;
	--color-accent: linear-gradient(to bottom, #f7f7f7, #e7e7e7);
	--color-success: #28a745;
	--color-success-hover: #157d2d;
	--box-shadow: 0 0 12px rgb(14 15 16 / 18%);
	--boxshadow: var(--box-shadow);
	--box-shadow-dark: 0 0 15px rgb(0 0 0 / 35%);
	--body-font: "Work Sans", sans-serif;
	--heading-font: "Work Sans", sans-serif;
	--border-radius: 1rem;
	--border-radius-small: 0.35rem;
	--headerheight: 80px;
	--headerheight-lg: 95px;
	--bgheader: var(--color-black);
	--footerbg: var(--color-black);
	--footertext: var(--color-white);
	--contentwidth: 1600px;
	--footerwidth: 100%;
	--listviewwidth: 1920px;
	--detailviewwidth: 1570px;
	--narrowwidth: 940px;
	--headerheight: 73px;
	--headerheight-lg: 179px;
	--searchwidgetpadding: 3rem 1.5rem;
	--filters-text: var(--black);
	--bg-used-detail: var(--color-accent);
}

body {
	font-family: var(--body-font);
	background: var(--bg-light);
	color: var(--color-grey);
	margin: 0;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

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

.scroll-offset {
	scroll-margin-top: 80px;
}

header {
	border-bottom: 1px solid #dee2e6;
	padding: 1rem 0;
	background: var(--color-white);
	position: sticky !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	min-height: 90px;
}

header .logo-text {
	font-weight: 700;
	font-size: 1.4rem;
	text-decoration: none;
	color: var(--color-primary);
}

nav a.nav-link {
	margin-left: 1.5rem;
	font-weight: 500;
	text-decoration: none;
	color: #222222;
}

nav a.nav-link:hover {
	text-decoration: none;
	color: var(--color-primary);
}

.offcanvas-body nav a.nav-link {
	margin-left: 0;
	font-size: 1.2rem;
}

.bsm-stats-highlight {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1.1rem;
	display: inline-block;
	backdrop-filter: blur(4px);
}

.bsm-stats-highlight .bsm-emoji {
	font-size: 1.25rem;
	margin-right: 0.35rem;
	position: relative;
	top: -1px;
}

span#listing-counter {
	font-variant-numeric: tabular-nums;
}

/* Burger icon base */
.bsm-burger-icon {
	display: inline-block;
	width: 24px;
	height: 2px;
	background-color: #000000;
	position: relative;
	transition: all 0.2s ease-in-out;
}

.bsm-burger-icon::before,
.bsm-burger-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: #000000;
	transition: all 0.2s ease-in-out;
}

.bsm-burger-icon::before {
	top: -7px;
}

.bsm-burger-icon::after {
	top: 7px;
}

/* Burger -> X animation */
.bsm-nav-toggle.is-open .bsm-burger-icon {
	background-color: transparent;
}

.bsm-nav-toggle.is-open .bsm-burger-icon::before {
	transform: translateY(7px) rotate(45deg);
}

.bsm-nav-toggle.is-open .bsm-burger-icon::after {
	transform: translateY(-7px) rotate(-45deg);
}

.bsm-offcanvas.offcanvas-end {
	width: 75vw;
	max-width: 400px;
}

.social-icon img {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icon:hover img {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Darker backdrop for offcanvas */
.offcanvas-backdrop.show {
	opacity: 0.6;
}

#hero {
	padding: 5rem 0;
	background: linear-gradient(135deg, #0A1A2E, #0d223b);
	color: var(--color-white);
	text-align: left;
}

#hero h1 {
	font-weight: 700;
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

#hero p {
	max-width: 680px;
	font-size: 1.1rem;
	line-height: 1.6;
}

section {
	padding: 4rem 0;
}

section:nth-of-type(odd) {
	background: var(--color-white);
}

section:nth-of-type(even) {
	background: var(--bg-light);
}

blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: 1rem;
	margin-left: 0;
	font-style: italic;
	color: #333333;
}

footer {
	padding: 2.5rem 0;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 0.9rem;
	margin-top: 3rem;
}

footer a {
	color: var(--color-white);
	text-decoration: underline;
}

.form-control,
.form-select,
textarea {
	max-width: 500px;
}

.btn-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-primary:hover {
	background-color: #132c4a;
	border-color: #132c4a;
}

.grid-2 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

::selection {
  background-color: var(--bs-danger);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--bs-danger);
  color: var(--color-white);
}