/* ==========================================================================
   HEADER
   --------------------------------------------------------------------------
   Built to the Figma frames. Two strips:

     .mtfs-topbar        dark, 70px — socials, contact, search, language
     .mtfs-header__main  white, 86px — logo, navigation, search, CTA

   Behaviour is Bootstrap's: the navigation is a navbar with real dropdowns,
   the mobile drawer is an offcanvas, and the header search is a modal.

   Responsive plan, on Bootstrap's own breakpoints:
     < md (768)    top bar centres and wraps; contact text can go to two lines
     < xl (1200)   navigation, header search and CTA move into the drawer;
                   top bar search and language switcher are hidden
     >= xl         the full desktop header from the design

   The switch is xl rather than lg because the full row needs about 1160px:
   a 180px logo, eight menu items, the search pill and the call to action.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */

.mtfs-header {
	background: var(--mtfs-white);
}

.mtfs-header__main {
	background: var(--mtfs-white);
	border-bottom: 1px solid var(--mtfs-color-border);
}

.mtfs-header__inner {
	min-height: var(--mtfs-header-h);
}

/* Sticky state, toggled by assets/js/main.js once the header scrolls away. */
.mtfs-header--sticky.is-stuck {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--mtfs-z-header);
	box-shadow: var(--mtfs-shadow);
	animation: mtfs-slide-down 240ms ease;
}

/* Drop the top bar once pinned — the sticky header only needs the main row. */
.mtfs-header--sticky.is-stuck .mtfs-topbar {
	display: none;
}

@keyframes mtfs-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: none; }
}


/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.mtfs-topbar {
	background: var(--mtfs-black-2);
	color: var(--mtfs-white);
	font-size: var(--mtfs-size-body-2);
}

.mtfs-topbar__inner {
	min-height: var(--mtfs-topbar-h);
	padding-block: var(--mtfs-space-2);
}

.mtfs-topbar__link {
	color: var(--mtfs-white);
	text-decoration: none;
	white-space: nowrap;
}

.mtfs-topbar__link:hover {
	color: var(--mtfs-white);
	opacity: 0.8;
}

/* The thin rule between the social icons and the contact details. */
.mtfs-topbar__divider {
	width: 1px;
	height: 18px;
	background: var(--mtfs-outline-on-dark);
}

/* Social icons sit bare on the dark strip — no chip behind them here. */
.mtfs-topbar__social .mtfs-social__link,
.mtfs-newsletter__social .mtfs-social__link {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--mtfs-white);
}

.mtfs-topbar__social .mtfs-social__link:hover,
.mtfs-newsletter__social .mtfs-social__link:hover {
	background: none;
	color: var(--mtfs-white);
	opacity: 0.75;
}


/* Top bar search — an outlined field on the dark strip. */
.mtfs-topbar__search {
	position: relative;
	width: var(--mtfs-topbar-field-w);
	max-width: 100%;
}

.mtfs-topbar__search-icon {
	position: absolute;
	top: 50%;
	left: var(--mtfs-space-4);
	transform: translateY(-50%);
	color: var(--mtfs-white);
	pointer-events: none;
	opacity: 0.85;
}

.mtfs-topbar__search input {
	width: 100%;
	height: var(--mtfs-control-h);
	padding-left: calc(var(--mtfs-space-4) + 26px);
	padding-right: var(--mtfs-space-4);
	border: 1px solid var(--mtfs-outline-on-dark);
	border-radius: var(--mtfs-radius-sm);
	background: transparent;
	color: var(--mtfs-white);
	font-size: var(--mtfs-size-body-2);
}

.mtfs-topbar__search input::placeholder {
	color: var(--mtfs-on-dark-muted);
	opacity: 1;
}

.mtfs-topbar__search input:focus {
	outline: 0;
	border-color: var(--mtfs-white);
}

/* Hide the browser's own clear button so the field matches the design. */
.mtfs-topbar__search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}


/* Language switcher — same height and border as the search field. */
.mtfs-topbar__lang-toggle {
	height: var(--mtfs-control-h);
	padding-inline: var(--mtfs-space-3);
	border: 1px solid var(--mtfs-outline-on-dark);
	border-radius: var(--mtfs-radius-sm);
	background: transparent;
	color: var(--mtfs-white);
	font-size: var(--mtfs-size-body-2);
	white-space: nowrap;
}

.mtfs-topbar__lang-toggle:hover {
	border-color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   Branding
   -------------------------------------------------------------------------- */

.mtfs-logo__link {
	color: var(--mtfs-color-heading);
}

.mtfs-logo__img {
	width: var(--mtfs-logo-width);
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.mtfs-logo__text {
	font-family: var(--mtfs-font-heading);
	font-size: var(--mtfs-size-h4);
	font-weight: 700;
	line-height: 1.2;
}


/* --------------------------------------------------------------------------
   Header actions
   -------------------------------------------------------------------------- */

/* The search pill: light chip, gray-2 fill, no border. */
.mtfs-header__search-toggle {
	height: var(--mtfs-cta-h);
	padding-inline: var(--mtfs-space-4);
	border: 0;
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-color-surface);
	color: var(--mtfs-color-body);
	font-size: var(--mtfs-size-body-2);
	transition: background-color var(--mtfs-transition), color var(--mtfs-transition);
}

.mtfs-header__search-toggle:hover,
.mtfs-header__search-toggle[aria-expanded="true"] {
	background: var(--mtfs-tint-primary);
	color: var(--mtfs-color-primary);
}

.mtfs-header__cta {
	height: var(--mtfs-cta-h);
	white-space: nowrap;
}

/* Offcanvas toggle — icon only, matching the CTA height. */
.mtfs-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mtfs-cta-h);
	height: var(--mtfs-cta-h);
	padding: 0;
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-white);
	color: var(--mtfs-color-heading);
}

.mtfs-nav-toggle:hover {
	background: var(--mtfs-color-surface);
}


/* --------------------------------------------------------------------------
   Desktop navigation
   --------------------------------------------------------------------------
   Sits in the same row as the logo, so it is centred in the space left over
   between the logo and the action buttons.
   -------------------------------------------------------------------------- */

.mtfs-nav__list {
	justify-content: center;
	gap: var(--mtfs-space-1);
}

.mtfs-nav .nav-link {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-1);
	padding: var(--mtfs-space-2) var(--mtfs-space-3);
	color: var(--mtfs-color-body);
	font-family: var(--mtfs-font-heading);
	font-size: var(--mtfs-size-menu);
	font-weight: var(--mtfs-weight-menu);
	white-space: nowrap;
	transition: color var(--mtfs-transition);
}

.mtfs-nav .nav-link:hover,
.mtfs-nav .nav-link:focus {
	color: var(--mtfs-color-primary);
}

/*
 * The design draws every item in the same slate, current page included — so
 * the current page is marked by leaving its underline out rather than by
 * recolouring it blue, which was the one thing in the row that did not match.
 * The underline itself is the shared rule in 08-components.css.
 */
.mtfs-nav .nav-item.active > .nav-link::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/*
 * Bootstrap's caret is a CSS triangle; swap in the theme chevron so the header
 * matches the icon set. A mask keeps it on currentColor.
 *
 * The viewBox is cropped to the stroke itself rather than left as the icon
 * set's 24x24 square. In a square box the chevron only fills the middle half,
 * so an `em`-sized caret came out at roughly half the design's 13x7 and read
 * as a different mark entirely. Cropped, the declared size IS the drawn size.
 */
.mtfs-nav .dropdown-toggle::after,
.mtfs-nav-mobile .dropdown-toggle::after {
	width: var(--mtfs-caret-w);
	height: var(--mtfs-caret-h);
	margin-left: var(--mtfs-space-1);
	border: 0;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='1 1.5 7 6.5 13 1.5'/%3e%3c/svg%3e") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='1 1.5 7 6.5 13 1.5'/%3e%3c/svg%3e") center / contain no-repeat;
	transition: transform var(--mtfs-transition);
}

.mtfs-nav .nav-item.show > .dropdown-toggle::after {
	transform: rotate(180deg);
}

/* Dropdown animation ------------------------------------------------------
   display:none cannot be transitioned, so the menu stays display:block and is
   hidden with visibility/opacity instead. Bootstrap still owns the open state
   (.show) and Popper still positions it; this only adds the motion.

   visibility:hidden keeps a closed menu out of the accessibility tree and out
   of the tab order, which opacity alone would not do. */
@media (min-width: 1200px) {

	.mtfs-nav .dropdown-menu {
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-10px) scale(0.98);
		transform-origin: top center;
		pointer-events: none;
		transition:
			opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0.22s;
	}

	.mtfs-nav .dropdown-menu.show,
	.mtfs-nav .nav-item.dropdown:hover > .dropdown-menu,
	.mtfs-nav .nav-item.dropdown:focus-within > .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	/* A small invisible bridge over the gap between the link and the menu, so
	   the pointer can travel down without the menu closing under it. */
	.mtfs-nav .nav-item.dropdown > .dropdown-menu::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		height: 10px;
	}

	/* Items fade in one after another as the menu opens. */
	.mtfs-nav .dropdown-menu > li {
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.mtfs-nav .dropdown-menu.show > li,
	.mtfs-nav .nav-item.dropdown:hover > .dropdown-menu > li,
	.mtfs-nav .nav-item.dropdown:focus-within > .dropdown-menu > li {
		opacity: 1;
		transform: none;
	}

	.mtfs-nav .dropdown-menu > li:nth-child(1) { transition-delay: 0.02s; }
	.mtfs-nav .dropdown-menu > li:nth-child(2) { transition-delay: 0.05s; }
	.mtfs-nav .dropdown-menu > li:nth-child(3) { transition-delay: 0.08s; }
	.mtfs-nav .dropdown-menu > li:nth-child(4) { transition-delay: 0.11s; }
	.mtfs-nav .dropdown-menu > li:nth-child(n+5) { transition-delay: 0.14s; }

	/* A dropdown item slides a touch on hover, matching the buttons. */
	.mtfs-nav .dropdown-item {
		transition: background-color var(--mtfs-transition), color var(--mtfs-transition), padding-left var(--mtfs-transition);
	}

	.mtfs-nav .dropdown-item:hover,
	.mtfs-nav .dropdown-item:focus {
		padding-left: calc(var(--mtfs-space-4) + 6px);
	}
}

/* Third-level menus fly out to the side rather than stacking. */
@media (min-width: 1200px) {

	.dropdown-submenu {
		position: relative;
	}

	.dropdown-submenu > .dropdown-menu-nested {
		top: 0;
		left: 100%;
		margin-top: calc(var(--mtfs-space-2) * -1);
		border-radius: var(--mtfs-radius-sm);
	}

	.dropdown-submenu:hover > .dropdown-menu-nested,
	.dropdown-submenu:focus-within > .dropdown-menu-nested {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	/* A nested menu slides in from the side rather than downwards. */
	.dropdown-submenu > .dropdown-menu-nested {
		transform: translateX(-8px);
	}

	.dropdown-submenu > .dropdown-toggle::after {
		float: right;
		transform: rotate(-90deg);
	}
}


/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

.mtfs-nav-mobile {
	flex-direction: column;
}

.mtfs-nav-mobile .nav-item {
	border-bottom: 1px solid var(--mtfs-color-border);
}

.mtfs-nav-mobile .nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--mtfs-space-4);
	color: var(--mtfs-color-heading);
	font-family: var(--mtfs-font-heading);
	font-size: var(--mtfs-size-menu);
	font-weight: var(--mtfs-weight-menu);
}

.mtfs-nav-mobile .nav-link:hover,
.mtfs-nav-mobile .nav-item.active > .nav-link {
	background: var(--mtfs-color-surface);
	color: var(--mtfs-color-primary);
}

/* Inside the drawer a sub-menu expands in place instead of floating. */
.mtfs-nav-mobile .dropdown-menu {
	position: static !important;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--mtfs-color-surface);
	box-shadow: none;
	transform: none !important;
}

.mtfs-nav-mobile .dropdown-item {
	padding: var(--mtfs-space-3) var(--mtfs-space-4) var(--mtfs-space-3) var(--mtfs-space-6);
	border-bottom: 1px solid var(--mtfs-color-border);
	white-space: normal;
}

.mtfs-nav-mobile .nav-item.show > .dropdown-toggle::after {
	transform: rotate(180deg);
}

/* Bootstrap pushes .btn-close right with margin-left:auto, which needs the
   title to be a real flex item that does not grow — otherwise the close button
   ends up sitting against the logo. */
.mtfs-offcanvas .offcanvas-header {
	justify-content: space-between;
	gap: var(--mtfs-space-3);
}

.mtfs-offcanvas .offcanvas-title {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.mtfs-offcanvas .offcanvas-header .btn-close {
	flex: none;
	margin: 0;
}

.mtfs-offcanvas .offcanvas-title .mtfs-logo__img {
	width: 140px;
}

.mtfs-offcanvas__contact a {
	color: var(--mtfs-color-body);
	text-decoration: none;
	font-size: var(--mtfs-size-body-2);
}

.mtfs-offcanvas__contact a:hover {
	color: var(--mtfs-color-primary);
}


/* --------------------------------------------------------------------------
   Page title band
   --------------------------------------------------------------------------
   The gradient runs top to bottom: peach into pale blue.
   -------------------------------------------------------------------------- */

.mtfs-page-hero {
	display: flex;
	align-items: center;
	min-height: var(--mtfs-hero-h);
	padding-block: var(--mtfs-section-space);
	background: linear-gradient(180deg, var(--mtfs-hero-from) 0%, var(--mtfs-hero-to) 100%);
	text-align: center;
}

.mtfs-page-hero__title {
	margin: 0;
	color: var(--mtfs-color-heading);
}

.mtfs-page-hero__subtitle {
	margin: var(--mtfs-space-5) 0 0;
	color: var(--mtfs-color-body);
}

.mtfs-page-hero__subtitle p:last-child {
	margin-bottom: 0;
}

/* Order Services opens on two paragraphs of introduction, which the frame sets
   left across the full container — centred body copy of that length reads
   badly, and every other frame's title is a single centred line. */
.mtfs-page-hero--start {
	text-align: start;
}

/* An uploaded image replaces the gradient and needs a scrim for white text. */
.mtfs-page-hero--image {
	position: relative;
	background-size: cover;
	background-position: center;
}

.mtfs-page-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mtfs-overlay-soft);
}

.mtfs-page-hero--image .container {
	position: relative;
}

.mtfs-page-hero--image .mtfs-page-hero__title {
	color: var(--mtfs-white);
}

.mtfs-page-hero--image .mtfs-page-hero__subtitle {
	color: var(--mtfs-on-dark);
}


/* --------------------------------------------------------------------------
   Breadcrumb bar
   --------------------------------------------------------------------------
   A white strip with a full-container pill inside it.
   -------------------------------------------------------------------------- */

.mtfs-breadcrumbs {
	padding-block: var(--mtfs-space-4);
	background: var(--mtfs-white);
	border-bottom: 1px solid var(--mtfs-color-border);
}

.mtfs-breadcrumbs__bar {
	display: flex;
	align-items: center;
	min-height: var(--mtfs-crumb-h);
	padding-inline: var(--mtfs-space-4);
	background: var(--mtfs-color-surface);
	border-radius: var(--mtfs-radius);
}

.mtfs-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mtfs-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mtfs-size-body-2);
	color: var(--mtfs-color-body);
}

.mtfs-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mtfs-space-2);
}

.mtfs-breadcrumbs__link {
	color: var(--mtfs-color-body);
	text-decoration: none;
}

.mtfs-breadcrumbs__link:hover {
	color: var(--mtfs-color-primary);
}

.mtfs-breadcrumbs__sep {
	opacity: 0.5;
}

.mtfs-breadcrumbs__current {
	color: var(--mtfs-color-heading);
}


/* --------------------------------------------------------------------------
   Below xl — the desktop header collapses
   --------------------------------------------------------------------------
   The full header needs about 1160px: the logo, eight menu items, the search
   toggle and the call to action. Bootstrap's lg is 992, which left the button
   hanging off the right edge and the top bar wrapping onto a second line
   between there and 1160 — so the drawer takes over at xl instead.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

	.mtfs-topbar__inner {
		min-height: 0;
		padding-block: var(--mtfs-space-3);
	}

	.mtfs-header__inner {
		min-height: 72px;
	}

	.mtfs-logo__img {
		width: 150px;
	}

	.mtfs-page-hero {
		min-height: 0;
		padding-block: var(--mtfs-space-6);
	}
}

@media (max-width: 575.98px) {

	.mtfs-topbar {
		font-size: var(--mtfs-size-body-3);
	}

	.mtfs-logo__img {
		width: 130px;
	}

	.mtfs-breadcrumbs__bar {
		padding: var(--mtfs-space-3);
	}
}


/* --------------------------------------------------------------------------
   Search modal
   -------------------------------------------------------------------------- */

.mtfs-search-modal .modal-content {
	border: 0;
	border-radius: var(--mtfs-radius);
	box-shadow: var(--mtfs-shadow-lg);
}

.mtfs-search-modal .modal-header {
	padding: var(--mtfs-space-5) var(--mtfs-space-5) 0;
}

.mtfs-search-modal .modal-body {
	padding: var(--mtfs-space-4) var(--mtfs-space-5) var(--mtfs-space-6);
}

.mtfs-search-modal .form-control {
	height: 56px;
}

.mtfs-search-modal .btn {
	padding-inline: var(--mtfs-space-5);
}

.mtfs-search-modal__hint {
	margin: var(--mtfs-space-3) 0 0;
	font-size: var(--mtfs-size-body-2);
	color: var(--mtfs-color-muted);
}

/* Drop in from slightly above rather than Bootstrap's default slide. */
.mtfs-search-modal.fade .modal-dialog {
	transform: translateY(-24px) scale(0.98);
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mtfs-search-modal.show .modal-dialog {
	transform: none;
}

/* GTranslate needs somewhere to render before it will load its script at all;
   the topbar's own switcher is the visible control, so its target is kept out
   of the layout rather than removed — display:none would stop it rendering. */
.mtfs-topbar__gt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}