/*
 * MBM Theme - Main Styles
*/

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
	/* Colors */
	--color-text: #111111;
	--color-bg: #ffffff;
	--color-link: #0d6efd;
	--color-link-hover: #0a58ca;
	--color-primary: #0d6efd;
	--color-menu-bg: #232323;

	/* Typography */
	--font-family: "roboto", sans-serif;
	--font-size-base: 16px;
	--font-weight-normal: 400;
	--font-weight-semibold: 600;
	--line-height-base: 1.5;

	/* Breakpoints (for reference; use in media queries) */
	--bp-mobile: 767px;
	--bp-tablet: 991px;
	--bp-desktop: 992px;

	/* Transitions */
	--transition-color: color 0.4s;
	--transition-link-underline: all 0.3s;
}

/* ==========================================================================
   2. Fonts
   ========================================================================== */

/* Roboto */
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Thin-webfont.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-ThinItalic-webfont.woff2") format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Light-webfont.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-LightItalic-webfont.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Regular-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Italic-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Medium-webfont.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-MediumItalic-webfont.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Bold-webfont.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-BoldItalic-webfont.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-Black-webfont.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/roboto/Roboto-BlackItalic-webfont.woff2") format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/* Roboto Condensed */
@font-face {
	font-family: "roboto-condensed";
	src: url("../fonts/roboto/RobotoCondensed-Light-webfont.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto-condensed";
	src: url("../fonts/roboto/RobotoCondensed-LightItalic-webfont.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto-condensed";
	src: url("../fonts/roboto/RobotoCondensed-Regular-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto-condensed";
	src: url("../fonts/roboto/RobotoCondensed-Italic-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "roboto-condensed";
	src: url("../fonts/roboto/RobotoCondensed-Bold-webfont.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "roboto-condensed";
	src: url("../fonts/roboto/RobotoCondensed-BoldItalic-webfont.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

html {
	width: 100%;
	overflow-x: hidden !important;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	width: 100%;
	overflow-x: hidden !important;
}

/* Admin bar: hidden when theme option is on and user has no override (body.mbm-hide-admin-bar) */
body.mbm-hide-admin-bar #wpadminbar {
	display: none !important;
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

strong {
	font-weight: var(--font-weight-semibold);
}

ul,
ol {
	padding-left: 1rem;
}

ul li {
	line-height: var(--line-height-base);
}

ul li.menu-item {
	line-height: 1em;
	display: flex;
}

/* ==========================================================================
   5. Links
   ========================================================================== */

a,
a:link,
a:visited,
a:active {
	text-decoration: none;
	color: var(--color-link);
	transition: var(--transition-color);
}

a:hover {
	color: var(--color-link-hover);
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

/* [hide_on_mobile] shortcode */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}

/* ==========================================================================
   7. Header
   ========================================================================== */

header#main-header {
	position: relative;
	z-index: 10;
	padding: 1.5rem 1rem;
}

/* ==========================================================================
   8. Navigation (Desktop)
   ========================================================================== */

#top-menu.nav {
	gap: 25px;
}

#top-menu.nav li a {
	font-size: 1rem;
	font-family: var(--font-family);
	font-weight: var(--font-weight-normal);
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 1;
}

#top-menu.nav li a::after {
	display: block;
	height: 3px;
	width: 100%;
	background-color: var(--color-link);
	content: " ";
	margin-top: 20px;
	position: absolute;
	opacity: 0;
	transition: var(--transition-link-underline);
}

#top-menu.nav li a:hover::after,
#top-menu.nav li a:active::after {
	opacity: 1;
	margin-top: 8px;
}

@media (min-width: 992px) {
	#mobile-menu,
	header#main-header a#mobileMenuClose {
		display: none;
	}

	#top-menu.nav {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   9. Mobile Menu
   ========================================================================== */

@media (max-width: 991px) {
	.menu-column {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: var(--color-menu-bg);
		opacity: 0 !important;
		transform: translateX(100%) !important;
		transition: transform 0s linear 0.5s, opacity 0.4s ease 0s;
	}

	.menu-column.show {
		opacity: 1 !important;
		transform: translateX(0) !important;
		transition: transform 0s linear 0s, opacity 0.4s ease 0s;
	}

	.menu-column .primary-menu-container #top-menu {
		padding: 40px;
		flex-direction: column;
		gap: 36px;
	}

	.menu-column .primary-menu-container ul li.menu-item {
		line-height: 1.5em;
	}

	#top-menu.nav li a::after {
		opacity: 1;
		margin-top: 3px;
		position: relative;
	}

	#top-menu.nav li a:hover::after {
		margin-top: 3px;
		width: calc(100% + 2rem);
	}
}

#mobileMenuClose {
	position: absolute;
	top: 36px;
	right: 2rem;
	font-size: 30px;
}

#mobileMenuClose:hover,
#mobileMenuClose:active {
	color: var(--color-primary);
}

#mobileMenuToggle {
	display: flex;
	align-items: center;
	font-size: 30px;
	line-height: 1;
}

.mobile-and-search-menu {
	display: flex;
	justify-content: flex-end;
}

/* ==========================================================================
   10. WordPress required (alignments, captions, sticky)
   ========================================================================== */

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

.sticky {
	background: #f7f7f7;
	padding: 0 10px 10px;
}

.sticky h2 {
	padding-top: 10px;
}