/*
 * Monster Theme 0.1.0: base styles.
 * Every colour, font and size comes from the --mt-* variables printed by inc/tokens.php.
 */

/* 1. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: var(--mt-offset, 0px); -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html:has(body.mt-smooth) { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--mt-page-bg);
	color: var(--mt-text);
	font-family: var(--mt-font-body);
	font-size: var(--mt-body-size);
	line-height: var(--mt-body-line);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

body.mt-layout-boxed { background-color: var(--mt-outer-bg); }

.mt-site { position: relative; }

.mt-layout-boxed .mt-site {
	max-width: var(--mt-box-width);
	margin: 0 auto;
	background: var(--mt-page-bg);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }

a { color: var(--mt-link); text-underline-offset: 0.15em; }
a:hover { color: var(--mt-accent-hover); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--mt-heading);
	font-family: var(--mt-font-heading);
	font-weight: var(--mt-heading-weight);
	line-height: var(--mt-heading-line);
	text-transform: var(--mt-heading-transform);
}
h1 { font-size: var(--mt-h1); }
h2 { font-size: var(--mt-h2); }
h3 { font-size: var(--mt-h3); }
h4 { font-size: var(--mt-h4); }
h5 { font-size: var(--mt-h5); }
h6 { font-size: var(--mt-h6); }

@media (max-width: 767px) {
	h1 { font-size: calc(var(--mt-h1) * var(--mt-phone-scale)); }
	h2 { font-size: calc(var(--mt-h2) * var(--mt-phone-scale)); }
	h3 { font-size: calc(var(--mt-h3) * var(--mt-phone-scale)); }
}

p, ul, ol, dl, figure, blockquote, table, pre { margin: 0 0 1.2em; }
blockquote { padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid var(--mt-accent); font-style: italic; }
hr { margin: 2em 0; border: 0; border-top: 1px solid var(--mt-border); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6em; border-bottom: 1px solid var(--mt-border); text-align: left; }
pre { overflow: auto; padding: 1em; background: var(--mt-surface); }

figcaption, .wp-caption-text { color: var(--mt-muted); font-size: 0.875em; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-right: auto; margin-left: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.mt-skip:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100001;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	clip: auto;
	clip-path: none;
	background: #fff;
	color: #000;
}

:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 2px; }

.mt-icon { flex: none; width: 1.25em; height: 1.25em; vertical-align: middle; }

/* 2. Containers ------------------------------------------------------------ */

.mt-wrap {
	width: 100%;
	max-width: calc(var(--mt-content-width) + 2 * var(--mt-pad));
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--mt-pad);
	padding-left: var(--mt-pad);
}

@media (max-width: 767px) {
	.mt-wrap { padding-right: var(--mt-pad-phone); padding-left: var(--mt-pad-phone); }
}

.mt-header--full .mt-wrap { max-width: none; }

.mt-main-wrap { padding-top: var(--mt-space-top, 48px); padding-bottom: var(--mt-space-bottom, 64px); }
.mt-main-wrap--full { padding-top: var(--mt-space-top, 0px); padding-bottom: var(--mt-space-bottom, 0px); }

.mt-main-wrap--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.mt-sidebar-left .mt-main-wrap--sidebar { grid-template-columns: 300px minmax(0, 1fr); }
.mt-sidebar-left .mt-sidebar { order: -1; }

@media (max-width: 900px) {
	.mt-main-wrap--sidebar,
	.mt-sidebar-left .mt-main-wrap--sidebar { grid-template-columns: minmax(0, 1fr); }
	.mt-sidebar-left .mt-sidebar { order: 0; }
}

.mt-entry__content::after { display: table; clear: both; content: ""; }

/* 3. Buttons and forms ----------------------------------------------------- */

.mt-button,
input[type="submit"],
input[type="button"],
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: var(--mt-button-py) var(--mt-button-px);
	border: 0;
	border-radius: var(--mt-radius);
	background: var(--mt-accent);
	color: var(--mt-accent-text);
	font-family: var(--mt-font-button);
	font-size: 1em;
	font-weight: var(--mt-button-weight);
	line-height: 1.2;
	text-decoration: none;
	text-transform: var(--mt-button-transform);
	cursor: pointer;
	transition: background-color 0.15s;
}

.mt-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover { background: var(--mt-accent-hover); color: var(--mt-accent-text); }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"], textarea, select {
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--mt-border);
	border-radius: var(--mt-input-radius);
	background: var(--mt-page-bg);
	color: var(--mt-text);
	font: inherit;
	line-height: 1.4;
}

textarea { min-height: 8em; }

input:focus, textarea:focus, select:focus {
	border-color: var(--mt-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-accent) 25%, transparent);
}

.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }

/* 4. Header ---------------------------------------------------------------- */

.mt-header {
	position: relative;
	z-index: 50;
	background: var(--mt-header-bg);
	color: var(--mt-header-text);
}

.mt-header a, .mt-sticky a { color: inherit; text-decoration: none; }
.mt-header a.mt-button, .mt-sticky a.mt-button, .mt-header a.mt-button:hover, .mt-sticky a.mt-button:hover { color: var(--mt-accent-text); }

.mt-header__row { display: flex; align-items: center; gap: 24px; min-height: var(--mt-header-height); }
.mt-header__logo { flex: none; line-height: 0; }
.mt-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.mt-logo__img { display: block; width: auto; max-height: var(--mt-logo-height); }
.mt-logo__img--transparent { display: none; }
.mt-logo__text { font-family: var(--mt-font-heading); font-size: 1.5rem; font-weight: var(--mt-heading-weight); line-height: 1.1; }

.mt-header__extras { display: flex; flex: none; align-items: center; gap: 16px; }
.mt-extra { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.9375em; white-space: nowrap; }

/* In the header the email is an icon (the address stays readable to screen readers); the top bar shows it in full. */
.mt-header .mt-extra--email span,
.mt-sticky .mt-extra--email span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mt-header .mt-extra--button, .mt-sticky .mt-extra--button { color: var(--mt-accent-text); }

/* Inline */
.mt-header__desktop--inline .mt-nav { margin-left: auto; }

/* Classic */
.mt-classic__top { display: grid; grid-template-columns: 1fr auto 1fr; }
.mt-header__extras--left { justify-content: flex-start; }
.mt-header__extras--right { justify-content: flex-end; }
.mt-classic__bar { border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.mt-classic__bar-row { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; }
.mt-classic__bar .mt-header__extras { position: absolute; right: var(--mt-pad); }

/* Split */
.mt-split { display: grid; grid-template-columns: auto 1fr auto 1fr auto; }
.mt-nav--left .mt-menu { justify-content: flex-end; }
.mt-nav--right .mt-menu { justify-content: flex-start; }

/* Menu */
.mt-nav .mt-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--mt-font-menu);
	font-size: var(--mt-menu-size);
	font-weight: var(--mt-menu-weight);
	text-transform: var(--mt-menu-transform);
}
.mt-nav .mt-menu > li { position: relative; }
.mt-nav .mt-menu > li > a { position: relative; display: block; padding: 0.5em 0.75em; transition: color 0.15s; }
.mt-nav a:hover,
.mt-nav .current-menu-item > a,
.mt-nav .current-menu-ancestor > a { color: var(--mt-header-hover); }

/* WordPress marks "/#section" links as the current page; they aren't. */
.mt-nav .mt-menu > li > a[href*="#"]:not(:hover),
.mt-menu--panel .current-menu-item > a[href*="#"] { color: inherit; }

.mt-nav .mt-menu > .menu-item-has-children > a { padding-right: 1.5em; }
.mt-nav .mt-menu > .menu-item-has-children > a::before {
	position: absolute;
	top: 50%;
	right: 0.65em;
	width: 0.34em;
	height: 0.34em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: translateY(-70%) rotate(45deg);
}

.mt-hover-underline .mt-nav .mt-menu > li > a::after {
	position: absolute;
	right: 0.75em;
	bottom: 0.15em;
	left: 0.75em;
	height: 2px;
	background: var(--mt-header-hover);
	content: "";
	transform: scaleX(0);
	transition: transform 0.2s;
}
.mt-hover-underline .mt-nav .mt-menu > li > a:hover::after,
.mt-hover-underline .mt-nav .mt-menu > .current-menu-item > a::after,
.mt-hover-underline .mt-nav .mt-menu > .current-menu-ancestor > a::after { transform: scaleX(1); }
.mt-hover-underline .mt-nav .mt-menu > li > a[href*="#"]:not(:hover)::after { transform: scaleX(0); }

.mt-menu-dividers .mt-nav .mt-menu > li + li::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 1.1em;
	margin-top: -0.55em;
	background: var(--mt-accent);
	content: "";
}

.mt-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 240px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--mt-submenu-bg);
	color: var(--mt-submenu-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	font-size: 0.875em;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.mt-nav li:hover > .sub-menu,
.mt-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mt-nav .sub-menu a { display: block; padding: 0.55em 1.2em; color: var(--mt-submenu-text); transition: background-color 0.15s, color 0.15s; }
/* The dropdown has its own hover colour: the header's can match the dropdown (white on white). */
.mt-nav .sub-menu a:hover,
.mt-nav .sub-menu a:focus-visible,
.mt-nav .sub-menu .current-menu-item > a {
	background: color-mix(in srgb, var(--mt-submenu-text) 7%, transparent);
	color: var(--mt-submenu-hover, var(--mt-accent));
}
.mt-nav .sub-menu .sub-menu { top: -8px; left: 100%; }

/* Social icons */
.mt-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mt-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s;
}
.mt-social a:hover { background: var(--mt-accent); color: var(--mt-accent-text); }
.mt-social .mt-icon { width: 16px; height: 16px; }

/* Search */
.mt-search { position: relative; }
.mt-search__toggle, .mt-basket__link {
	display: inline-flex;
	align-items: center;
	padding: 6px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.mt-search__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 70;
	width: 320px;
	padding: 12px;
	background: var(--mt-page-bg);
	color: var(--mt-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.mt-header__extras--left .mt-search__panel { right: auto; left: 0; }

/* Basket */
.mt-basket { position: relative; }
.mt-basket__link { position: relative; gap: 6px; }
.mt-basket .mt-basket__link { color: var(--mt-basket-color, currentColor); }
.mt-basket__link .mt-icon { width: var(--mt-basket-size, 20px); height: var(--mt-basket-size, 20px); }
.mt-basket__label { font-family: var(--mt-font-menu); font-size: 15px; font-weight: var(--mt-menu-weight); line-height: 1; white-space: nowrap; }
.mt-basket__count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--mt-accent);
	color: var(--mt-accent-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.mt-basket__count[data-count="0"] { display: none; }
.mt-basket__mini {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 70;
	width: 320px;
	padding: 16px;
	background: var(--mt-page-bg);
	color: var(--mt-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	font-family: var(--mt-font-body);
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	text-transform: none;
}
.mt-mini__items { margin: 0; padding: 0; list-style: none; }
.mt-mini__item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mt-border); }
.mt-mini__total { display: flex; justify-content: space-between; margin: 10px 0 0; font-weight: 700; }
.mt-mini__actions { display: flex; gap: 8px; margin-top: 12px; }
.mt-mini__actions a { flex: 1; padding: 10px; text-align: center; }
.mt-mini__actions .mt-mini__basket { border: 1px solid var(--mt-border); color: var(--mt-heading); }
.mt-mini__empty { margin: 0; }

/* Transparent header (desktop) */
.mt-transparent .mt-header { position: absolute; right: 0; left: 0; background: var(--mt-header-transparent); }
.mt-transparent--light .mt-header__desktop { color: #fff; }
.mt-transparent--dark .mt-header__desktop { color: #111; }
.mt-transparent .mt-classic__bar { border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
.mt-transparent .mt-logo__img--transparent { display: block; }
.mt-transparent .mt-logo__img--transparent + .mt-logo__img { display: none; }
.mt-transparent .mt-title-bar { padding-top: var(--mt-header-height); }

/* On phones WordPress's admin bar scrolls away with the page, so sticky parts go to the very top. */
@media screen and (max-width: 600px) {
	body.admin-bar { --wp-admin--admin-bar--height: 0px; }
}

/* Header stays at the top */
.mt-sticky-always .mt-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
.mt-sticky-always.mt-transparent .mt-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); }
.mt-sticky-always.mt-transparent.mt-scrolled .mt-header { background: var(--mt-header-bg); color: var(--mt-header-text); }
.mt-sticky-always.mt-transparent.mt-scrolled .mt-header__desktop { color: var(--mt-header-text); }
.mt-sticky-always.mt-transparent.mt-scrolled .mt-logo__img--transparent { display: none; }
.mt-sticky-always.mt-transparent.mt-scrolled .mt-logo__img--transparent + .mt-logo__img { display: block; }

/* Slim bar that slides in */
.mt-sticky {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 90;
	background: var(--mt-sticky-bg);
	color: var(--mt-header-text);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	transform: translateY(-110%);
	transition: transform 0.25s;
}
.mt-layout-boxed .mt-sticky { max-width: var(--mt-box-width); margin: 0 auto; }
.mt-sticky.is-visible { transform: none; }
.mt-sticky__row { display: flex; align-items: center; gap: 24px; height: var(--mt-sticky-height); }
.mt-sticky .mt-nav { margin-left: auto; }
.mt-sticky .mt-nav .mt-menu { display: flex; flex-wrap: nowrap; font-size: calc(var(--mt-menu-size) * 0.9); }
.mt-sticky .mt-logo__img { max-height: calc(var(--mt-sticky-height) - 16px); }

/* Mobile header (shown below the switch point set in the Customizer) */
.mt-header__mobile {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--mt-mobile-height);
	padding: 0 var(--mt-pad-phone);
	background: var(--mt-mobile-bg);
}
.mt-header__mobile .mt-logo__img { max-width: 100%; max-height: calc(var(--mt-mobile-height) - 16px); }
/* The logo gives way to the buttons, so a long site name or wide logo never makes the page wider than the phone. */
.mt-header__mobile .mt-header__logo { flex: 1 1 auto; min-width: 0; }
.mt-header__mobile .mt-logo { max-width: 100%; }
.mt-header__mobile .mt-logo__text { display: block; overflow: hidden; font-size: clamp(15px, 4.6vw, 22px); line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.mt-header__mobile .mt-header__extras { flex: none; gap: 8px; }
.mt-burger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--mt-mobile-icon);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.mt-burger .mt-icon { width: 26px; height: 26px; }
.mt-header__mobile .mt-basket { color: var(--mt-mobile-icon); }
.mt-header__mobile .mt-basket__mini { display: none; }

/* Mobile menu panel */
.mt-panel { position: fixed; inset: 0; z-index: 100000; }
.mt-panel[hidden] { display: none; }
.mt-panel__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s; }
.mt-panel__inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 88vw);
	padding: 64px 24px 32px;
	overflow-y: auto;
	background: var(--mt-panel-bg);
	color: var(--mt-panel-text);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mt-panel__inner:focus { outline: none; }
.mt-panel--left .mt-panel__inner { right: auto; left: 0; transform: translateX(-100%); }
.mt-panel.is-open .mt-panel__overlay { opacity: 1; }
.mt-panel.is-open .mt-panel__inner { transform: none; }
.mt-panel__close { position: absolute; top: 12px; right: 12px; padding: 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.mt-panel__close .mt-icon { width: 26px; height: 26px; }
body.mt-panel-open { overflow: hidden; }

.mt-menu--panel {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-family: var(--mt-font-menu);
	font-weight: var(--mt-menu-weight);
	text-transform: var(--mt-menu-transform);
}
.mt-menu--panel li { position: relative; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.mt-menu--panel a { display: block; padding: 12px 44px 12px 0; color: inherit; font-size: 17px; text-decoration: none; }
.mt-menu--panel .current-menu-item > a { color: var(--mt-accent); }
.mt-menu--panel .sub-menu { display: none; margin: 0; padding: 0 0 8px 14px; list-style: none; }
.mt-menu--panel .sub-menu li { border: 0; }
.mt-menu--panel .sub-menu a { padding: 8px 44px 8px 0; font-size: 15px; }
.mt-menu--panel li.is-open > .sub-menu { display: block; }
.mt-subtoggle {
	position: absolute;
	top: 4px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.mt-subtoggle .mt-icon { transition: transform 0.2s; }
li.is-open > .mt-subtoggle .mt-icon { transform: rotate(180deg); }
.mt-panel__basket {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: var(--mt-radius);
	color: inherit;
	font-family: var(--mt-font-menu);
	font-size: 17px;
	font-weight: var(--mt-menu-weight);
	text-transform: var(--mt-menu-transform);
	text-decoration: none;
}
.mt-panel__basket .mt-icon { flex: none; width: 24px; height: 24px; color: var(--mt-basket-color, currentColor); }
.mt-panel__basket-text { flex: 1 1 auto; }
.mt-panel__basket .mt-basket__label { font-size: 15px; }
.mt-panel__extras { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mt-panel__extras a:not(.mt-button) { color: inherit; text-decoration: none; }

/* 5. Top bar --------------------------------------------------------------- */

.mt-topbar { background: var(--mt-topbar-bg); color: var(--mt-topbar-text); font-size: 13px; }
.mt-topbar a { color: inherit; text-decoration: none; }
.mt-topbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 38px; }
.mt-topbar__left, .mt-topbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.mt-menu--top { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.mt-topbar .mt-social a { width: 26px; height: 26px; }
.mt-topbar .mt-social .mt-icon { width: 14px; height: 14px; }

/* 6. Hero and title bar ---------------------------------------------------- */

.mt-hero { position: relative; }

.mt-title-bar { display: flex; align-items: center; min-height: var(--mt-title-height); background: var(--mt-title-bg); color: var(--mt-title-text); }
.mt-title-bar__inner { padding-top: 20px; padding-bottom: 20px; }
.mt-title-bar__title { margin: 0; color: inherit; font-size: var(--mt-title-size); }
.mt-title-bar--center { text-align: center; }
.mt-breadcrumbs { margin-top: 6px; font-size: 13px; opacity: 0.85; }
.mt-breadcrumbs a { color: inherit; }
.mt-breadcrumbs__sep { margin: 0 0.5em; opacity: 0.6; }

/* 7. Posts ----------------------------------------------------------------- */

.mt-archive-title { margin-bottom: 0.4em; }
.mt-archive-description { margin-bottom: 32px; color: var(--mt-muted); }
.mt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.mt-card { display: flex; flex-direction: column; border: 1px solid var(--mt-border); background: var(--mt-page-bg); }
.mt-card__image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mt-card__body { padding: 20px; }
.mt-card__title { font-size: 1.25rem; }
.mt-card__title a { color: inherit; text-decoration: none; }
.mt-card__meta, .mt-entry__meta { margin-bottom: 0.6em; color: var(--mt-muted); font-size: 0.875em; }
.mt-card__more { font-weight: 700; text-decoration: none; }
.mt-entry__header { margin-bottom: 24px; }
.mt-entry__image { margin-bottom: 32px; }
.mt-entry__image img { display: block; width: 100%; }

.nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.page-numbers { padding: 8px 14px; border: 1px solid var(--mt-border); text-decoration: none; }
.page-numbers.current { border-color: var(--mt-accent); background: var(--mt-accent); color: var(--mt-accent-text); }
.post-navigation .nav-links { justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--mt-border); }
.mt-postnav__label { display: block; color: var(--mt-muted); font-size: 0.8em; text-transform: uppercase; }

.mt-comments { margin-top: 48px; }
.mt-comments__list { padding: 0; list-style: none; }
.mt-comments__list .children { list-style: none; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--mt-border); }
.comment-author img { float: left; margin-right: 12px; border-radius: 50%; }

.mt-none { max-width: 640px; }
.mt-sidebar .widget { margin-bottom: 32px; }
.widget-title { font-size: 1.1rem; }
/* WordPress's block widgets bring their own headings: keep them widget-sized too. */
.mt-sidebar .widget h2, .mt-sidebar .widget h3, .mt-footer .widget h2, .mt-footer .widget h3 { margin-bottom: 0.6em; font-size: 1.1rem; }

/* 8. Footer ---------------------------------------------------------------- */

.mt-footer { padding: var(--mt-footer-pt) 0 var(--mt-footer-pb); background: var(--mt-footer-bg); color: var(--mt-footer-text); }
.mt-footer a { color: var(--mt-footer-link); }
.mt-footer h1, .mt-footer h2, .mt-footer h3, .mt-footer h4, .mt-footer .widget-title { color: var(--mt-footer-heading); }
.mt-footer ul { padding: 0; list-style: none; }
.mt-footer .widget { margin-bottom: 24px; }
.mt-footer__grid { display: grid; gap: 32px; }
.mt-footer__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-footer__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-footer__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.mt-footer__grid--3, .mt-footer__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mt-footer__grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.mt-bottom-bar { background: var(--mt-bottom-bg); color: var(--mt-bottom-text); font-size: 13px; }
.mt-bottom-bar a { color: inherit; }
.mt-bottom-bar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.mt-menu--bottom { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }

/* 9. Shared bottom area ------------------------------------------------------
 * Back-to-top, the event "Book now" bar and plugin items stack here. While Monster
 * Bookings shows its floating "Tickets held" countdown, the area moves up above it.
 */

.mt-bottom-area {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99980;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}
.mt-bottom-area > * { pointer-events: auto; }
body.mb-has-hold-float .mt-bottom-area { bottom: 84px; }

.mt-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mt-heading);
	color: var(--mt-page-bg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	opacity: 0.85;
	text-decoration: none;
}
.mt-to-top:hover { color: var(--mt-page-bg); opacity: 1; }
.mt-to-top[hidden] { display: none; }

@media (max-width: 767px) {
	.mt-bottom-area { right: 12px; bottom: 12px; left: 12px; }
	body.mb-has-hold-float .mt-bottom-area { bottom: 72px; }
}

/* 10. Maintenance mode: holding panel, countdown, notify form --------------- */

.mt-soon { max-width: 640px; margin: 0 auto; padding: 24px 0; text-align: center; }
.mt-soon__message { margin-bottom: 24px; font-size: 1.125em; }
.mt-countdown { display: flex; justify-content: center; gap: 12px; margin: 0 0 28px; }
.mt-countdown span { min-width: 72px; padding: 10px 6px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: var(--mt-radius); font-size: 12px; text-transform: uppercase; }
.mt-countdown b { display: block; font-family: var(--mt-font-heading); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mt-notify__fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mt-notify__fields input { flex: 1 1 220px; width: auto; }
.mt-notify__consent { display: block; margin-top: 10px; font-size: 0.875em; }
.mt-notify__trap { position: absolute; left: -9999px; }
.mt-notify__note { padding: 12px 16px; border-radius: var(--mt-radius); font-weight: 600; }
.mt-notify__note--ok { background: color-mix(in srgb, #1e8e3e 18%, transparent); }
.mt-notify__note--error { background: color-mix(in srgb, #d63638 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
