/* =========================================================
   MIA Sticky Nav
   Breakpoint: desktop > 1300px, mobile <= 1300px
   ========================================================= */

:root {
	--mia-red: #EE2E24;
	--mia-dark: #000;
	--mia-nav-height: 92px;
	--mia-max-width: 1540px;
	--mia-mobile-bp: 1300px; /* keep in sync with the JS MOBILE_BP */
}

/* ---- Sticky bar -------------------------------------------------------- */
.mia-nav {
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: #fff;
	transition: box-shadow 0.25s ease;
}

.mia-nav.is-stuck {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.mia-nav__inner {
	max-width: var(--mia-max-width);
	height: var(--mia-nav-height);
	margin: 0 auto;
	padding: 0 50px;
	display: flex;
	align-items: center;
	gap: 24px;
}

#mia-primary-menu {
	position: relative;
}

#mia-primary-menu::before {
	content: "";
	width: 1px;
	height: 20px;
	position: absolute;
	left: -34px;
	top: 50%;
	transform: translatey(-50%);
	background: var(--e-5-e-5-e-5, #E5E5E5);
}

.mia-nav__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--mia-red);
}
.mia-nav__logo img {
	display: block;
	max-height: 56px;
	width: auto;
}
.mia-nav__logo-text {
	font-weight: 700;
	font-size: 20px;
}

/* Wrapper that holds the menu + actions (becomes the mobile panel) */
.mia-nav__collapse {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- Menu (desktop) ---------------------------------------------------- */
.mia-menu {
	list-style: none;
	margin: 0 auto 0 40px; /* gap from logo + push actions to the far right */
	padding: 0;
	display: flex;
	align-items: center;
}

.mia-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

/* SVG separator between top-level items (not before the first) */
.mia-menu > li:not(:first-child)::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 8px;
	margin: 0 18px;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='8' viewBox='0 0 9 8' fill='none'><path d='M9 8H7.27794L7.2451 7.74441C7.03825 6.13421 6.72943 5.12008 6.1185 4.36879L5.27518 8H3.72499L2.85743 4.26434C2.27074 4.99989 2.12502 5.9698 1.91885 7.74079L1.88867 8H0L0.882092 8.84409e-05H2.45498L3.19152 3.17159C3.4062 3.01515 3.64976 2.86259 3.92677 2.71074C3.37344 2.09476 3.11182 1.08904 3.54616 0.166L3.62423 0H5.15147L5.21595 0.20279C5.53422 1.20409 5.40904 2.08671 4.89019 2.69429C5.22635 2.87161 5.52425 3.05547 5.78922 3.25411L6.54485 8.84409e-05H8.11782L8.99991 8H9ZM7.7778 7.41162H8.35941L7.60722 0.588472H6.99629L6.27919 3.6764C7.10849 4.50366 7.5234 5.60985 7.7778 7.41153V7.41162ZM4.17627 7.41162H4.82373L5.64264 3.88476C5.32135 3.61175 4.93799 3.37173 4.47752 3.13976C4.45594 3.12888 4.43462 3.11756 4.41338 3.10562C4.36489 3.13648 4.3146 3.16584 4.26276 3.19379C3.89075 3.3934 3.58657 3.58646 3.33518 3.7896L4.17627 7.41162ZM0.640591 7.41162H1.38126C1.60186 5.55988 1.80339 4.46926 2.69958 3.58584L2.00362 0.588472H1.39286L0.640677 7.41162H0.640591ZM3.99366 0.588472C3.76737 1.24646 3.98936 1.95901 4.40126 2.37078C4.92106 1.8298 4.8454 1.06003 4.72942 0.588472H3.99366Z' fill='%23ee2e24'/></svg>")
		no-repeat center;
}

.mia-menu a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	color: var(--mia-dark);
	font-family: Inter;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.mia-menu > li:hover > a,
.mia-menu > li:focus-within > a,
.mia-menu > li.active > a {
	color: var(--mia-red);
}

/* Caret marker — only used on mobile */
.mia-menu__caret {
	display: none;
}

/* ---- Sub-menu (desktop dropdown) -------------------------------------- */
.mia-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 44px;
    min-width: 260px;
    background: #fff;
    border-top: 3px solid var(--mia-red);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 20;
}
.mia-menu > li:hover > .sub-menu,
.mia-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mia-menu .sub-menu li {
	display: block;
	margin-bottom: 0px;
}

.mia-menu .sub-menu a {
	justify-content: space-between;
	padding: 10px 16px 10px 12px;
	color: var(--mia-dark);
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	background: #fff;
	border-bottom: 1px solid var(--e-5-e-5-e-5, #E5E5E5) !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mia-menu .sub-menu li:last-child a {
	border-bottom: unset !important;
}

.mia-menu .sub-menu a:hover,
.mia-menu .sub-menu a:focus,
.mia-menu .sub-menu li.active > a {
	background: var(--mia-red);
	color: #fff;
	border-color: var(--mia-red) !important;
}

/* Red ">" arrow on the right of each sub-menu item */
.mia-menu .sub-menu a::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-left: 16px;
	border-right: 2px solid var(--mia-red);
	border-top: 2px solid var(--mia-red);
	transform: rotate(45deg);
	transition: border-color 0.15s ease;
}
.mia-menu .sub-menu a:hover::after,
.mia-menu .sub-menu a:focus::after,
.mia-menu .sub-menu li.active > a::after {
	border-color: #fff;
}

/* Parent duplicate is for mobile only — hide on desktop */
.mia-mobile-parent {
	display: none;
}

/* ---- Right-side actions (Login + Contact) ----------------------------- */
.mia-nav__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 0 0 auto;
	margin-left: 24px;
}

.mia-nav__login {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--mia-dark);
	font-family: Inter;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.mia-nav__login:hover,
.mia-nav__login:focus {
	color: var(--mia-red);
}

.mia-nav__login-icon {
	flex: 0 0 auto;
}

.mia-nav__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px 12px 16px;
	border: 1.5px solid var(--mia-red);
	color: var(--mia-red);
	background: transparent;
	font-family: Inter;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease;
}

.mia-nav__contact:hover,
.mia-nav__contact:focus {
	background: var(--mia-red);
	color: #fff;
}
/* ">" arrow built from a rotated box, follows the text colour */
.mia-nav__contact-arrow {
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---- Burger button ----------------------------------------------------- */
.mia-burger {
	display: none;
	position: relative;
	width: 30px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	flex: 0 0 auto;
}
.mia-burger span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--mia-red);
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.mia-burger span:nth-child(1) {
	top: 2px;
}
.mia-burger span:nth-child(2) {
	top: 10px;
}
.mia-burger span:nth-child(3) {
	top: 18px;
}
.mia-nav.is-open .mia-burger span:nth-child(1) {
	top: 10px;
	transform: rotate(45deg);
}
.mia-nav.is-open .mia-burger span:nth-child(2) {
	opacity: 0;
}
.mia-nav.is-open .mia-burger span:nth-child(3) {
	top: 10px;
	transform: rotate(-45deg);
}

/* Scroll lock while the mobile menu is open (applied to <html> and <body>) */
.mia-no-scroll {
	overflow: hidden;
	height: 100%;
}

/* =========================================================
   Mobile  (<= 1300px)
   ========================================================= */
@media (max-width: 1300px) {
	.mia-burger {
		display: block;
	}
	
	.mia-nav__inner {
		padding: 0 20px;
		justify-content: space-between;
	}

	/* The collapse wrapper becomes a full-screen panel below the bar */
	.mia-nav__collapse {
		position: fixed;
		top: var(--mia-nav-height);
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex-direction: column;
		align-items: stretch;
		background: #fff;
		border-top: 1px solid #eee;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	}
	.mia-nav.is-open .mia-nav__collapse {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.mia-menu {
		flex-direction: column;
		align-items: stretch;
		margin: 0;
		width: 100%;
	}

	.mia-menu > li {
		display: block;
	}
	.mia-menu > li:not(:first-child)::before {
		display: none; /* no separators on mobile */
	}

	/* The divider line before the menu is desktop-only */
	#mia-primary-menu::before {
		display: none;
	}

	.mia-menu > li > a {
		justify-content: space-between;
		padding: 16px 24px;
		font-size: 18px;
		border-bottom: 1px solid #eee;
	}

	/* Expand/collapse caret */
	.mia-menu__caret {
		display: block;
		width: 10px;
		height: 10px;
		margin-left: 12px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}
	.mia-menu > li.is-expanded > a .mia-menu__caret {
		transform: rotate(-135deg);
	}

	/* Collapsible sub-menu */
	.mia-menu .sub-menu {
		position: static;
		min-width: 0;
		left: 0;
		background: #fbf3f2;
		border-top: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.mia-menu > li.is-expanded > .sub-menu {
		max-height: 1200px;
	}

	/* Show the duplicated parent link inside the sub-menu */
	.mia-mobile-parent {
		display: block;
	}

	.mia-menu .sub-menu a {
		padding: 14px 24px 14px 36px;
		border-bottom: 1px solid #f0e1df !important;
	}

	/* Login + Contact stacked at the bottom of the panel */
	.mia-nav__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin: 0;
		padding: 20px 24px 28px;
	}
	.mia-nav__login {
		justify-content: center;
		font-size: 17px;
		padding: 6px 0;
	}
	.mia-nav__contact {
		justify-content: center;
		padding: 14px 22px;
	}
}