/*
Theme Name: Montenegro Made Easy
Theme URI: https://montenegromadeeasy.co.uk
Author: Built for Montenegro Made Easy
Description: A bespoke travel theme for Montenegro Made Easy — accommodation, transfers, excursions, travel guides and relocation help. Designed to be edited entirely from the WordPress admin, with no paid plugins and no licence fees. Works alongside the MME Core plugin, which holds the content.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: montenegro-made-easy
Tags: travel, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ======================================================================
   1. Design tokens
   =================================================================== */

:root {
	--navy: #1b2a4a;
	--navy-dark: #0f1a2e;
	--navy-mid: #26385e;
	--gold: #c9a54e;
	--gold-light: #d4b76a;
	--gold-dark: #a8862f;
	--off-white: #f8f6f0;
	--white: #ffffff;

	/* WhatsApp, toned down. The brand's own #25d366 shouts over the navy and
	   gold, so these are deeper and less saturated while still unmistakably
	   the WhatsApp green. White text on both clears WCAG AA: 5.11:1 on
	   --whatsapp and 6.09:1 on --whatsapp-dark. Change them here only. */
	--whatsapp: #1e7d51;
	--whatsapp-dark: #15704a;
	--ink: #2b2f38;
	--ink-soft: #5b6270;
	--line: #e4e0d6;
	--line-soft: #efece4;
	--shadow: 0 2px 10px rgba(27, 42, 74, 0.06);
	--shadow-lift: 0 14px 34px rgba(27, 42, 74, 0.14);

	--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-script: 'Dancing Script', 'Brush Script MT', cursive;

	--radius: 6px;
	--radius-lg: 12px;
	--wrap: 1200px;
	--wrap-narrow: 820px;
	--gutter: 24px;
	--section-gap: 84px;
	--header-height: 82px;
}

/* ======================================================================
   2. Reset and base
   =================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

img {
	display: block;
}

a {
	color: var(--navy);
	text-decoration-color: rgba(201, 165, 78, 0.55);
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--gold-dark);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--navy);
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: 0.94rem; text-transform: uppercase; letter-spacing: 0.08em; }

p {
	margin: 0 0 1.15em;
}

ul, ol {
	margin: 0 0 1.15em;
	padding-left: 1.4em;
}

li {
	margin-bottom: 0.4em;
}

blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--gold);
	color: var(--navy);
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-style: italic;
	line-height: 1.5;
}

blockquote p:last-child {
	margin-bottom: 0;
}

hr {
	height: 1px;
	margin: 2.4em 0;
	background: var(--line);
	border: 0;
}

table {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
	font-size: 0.95rem;
}

th, td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

th {
	background: var(--off-white);
	color: var(--navy);
	font-weight: 600;
}

code, pre {
	background: var(--off-white);
	border-radius: 4px;
	font-size: 0.92em;
}

code {
	padding: 2px 6px;
}

pre {
	overflow-x: auto;
	padding: 16px 18px;
}

::selection {
	background: rgba(201, 165, 78, 0.28);
}

:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/* ======================================================================
   3. Layout scaffolding
   =================================================================== */

.container {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.container-narrow {
	max-width: var(--wrap-narrow);
}

.section {
	padding: var(--section-gap) 0;
}

.section--tight {
	padding: 52px 0;
}

.section--alt {
	background: var(--off-white);
}

.section--navy {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.86);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
	color: var(--white);
}

.section-title {
	position: relative;
	margin: 0 0 0.5em;
	padding-bottom: 18px;
	text-align: center;
}

.section-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 58px;
	height: 2px;
	background: var(--gold);
	transform: translateX(-50%);
}

.section-title--left {
	text-align: left;
}

.section-title--left::after {
	left: 0;
	transform: none;
}

.section-intro {
	max-width: 720px;
	margin: 0 auto 42px;
	color: var(--ink-soft);
	font-size: 1.05rem;
	text-align: center;
}

.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%);
	border: 0;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: var(--navy);
	border-radius: var(--radius);
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
}

/* ======================================================================
   4. Buttons
   =================================================================== */

.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover,
.btn:focus,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}

.btn-gold,
.wp-block-button__link {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--navy-dark);
}

.btn-gold:hover,
.btn-gold:focus {
	background: var(--gold-light);
	border-color: var(--gold-light);
	color: var(--navy-dark);
}

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

.btn-navy:hover,
.btn-navy:focus {
	background: var(--navy-mid);
	border-color: var(--navy-mid);
	color: var(--white);
}

.btn-outline {
	background: transparent;
	border-color: var(--navy);
	color: var(--navy);
}

.btn-outline:hover,
.btn-outline:focus {
	background: var(--navy);
	color: var(--white);
}

.btn-ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--white);
}

.btn-ghost:hover,
.btn-ghost:focus {
	background: var(--white);
	border-color: var(--white);
	color: var(--navy);
}

/* The deeper green needs light text on it — near-black would only reach about
   2.9:1, where white gets 5.11:1. */
.btn-whatsapp {
	background: var(--whatsapp);
	border-color: var(--whatsapp);
	color: var(--white);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
	background: var(--whatsapp-dark);
	border-color: var(--whatsapp-dark);
	color: var(--white);
}

.btn-sm {
	padding: 9px 18px;
	font-size: 0.8rem;
}

.btn-lg {
	padding: 17px 40px;
	font-size: 1rem;
}

.btn-block {
	width: 100%;
}

/* ======================================================================
   5. Top strip and header
   =================================================================== */

.mme-topbar {
	background: var(--navy-dark);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.82rem;
}

.mme-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
	flex-wrap: wrap;
}

.mme-topbar-text {
	margin: 0;
	font-family: var(--font-script);
	font-size: 1.05rem;
	color: var(--gold-light);
}

.mme-topbar-contact {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mme-topbar-contact li {
	margin: 0;
}

.mme-topbar-contact a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.mme-topbar-contact a:hover {
	color: var(--gold-light);
}

.mme-topbar-contact i {
	color: var(--gold);
	font-size: 0.78rem;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 300;
	background: var(--white);
	border-bottom: 1px solid var(--line-soft);
	transition: box-shadow 0.25s ease;
}

.site-header.is-stuck {
	box-shadow: 0 4px 20px rgba(27, 42, 74, 0.1);
}

/* The header carries a logo, a nine-item menu and a WhatsApp button, which
   needs more room than the 1200px body column. It gets its own, wider wrap
   so the menu has somewhere to go. */
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1480px;
	min-height: var(--header-height);
}

/* Nothing in the header may be squeezed to nothing. Without this, flexbox
   shrinks the logo and the site name away to make room for the menu, and
   the name ends up printed across the middle of it. */
.site-branding {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
}

.site-branding img,
.custom-logo {
	flex: 0 0 auto;
	width: auto;
	max-height: 56px;
	border-radius: 50%;
}

.site-titles {
	min-width: 0;
}

.site-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
}

.site-title a {
	color: var(--navy);
	text-decoration: none;
}

.site-description {
	margin: 2px 0 0;
	color: var(--ink-soft);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Main navigation ---- */

.main-navigation {
	display: flex;
	align-items: center;
	gap: 14px;
}

.primary-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu li {
	position: relative;
	margin: 0;
}

.primary-menu > li > a {
	display: block;
	padding: 10px 10px;
	color: var(--navy);
	font-size: 0.87rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.primary-menu > li > a::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 5px;
	background: var(--gold);
	transition: width 0.22s ease;
}

.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current-menu-ancestor > a::after,
.primary-menu > li.current_page_item > a::after {
	width: 100%;
}

.primary-menu .menu-item-has-children > a::before {
	content: "\f107";
	float: right;
	margin-left: 7px;
	font-family: "Font Awesome 6 Free";
	font-size: 0.72rem;
	font-weight: 900;
	color: var(--gold);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 320;
	min-width: 236px;
	margin: 0;
	padding: 8px 0;
	background: var(--white);
	border-top: 3px solid var(--gold);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-lift);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu a {
	display: block;
	padding: 10px 20px;
	color: var(--ink);
	font-size: 0.88rem;
	text-decoration: none;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
	background: var(--off-white);
	color: var(--navy);
	padding-left: 25px;
}

.nav-whatsapp {
	flex: 0 0 auto;
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--navy);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

.menu-toggle-bars {
	display: block;
	width: 20px;
}

.menu-toggle-bars span {
	display: block;
	height: 2px;
	margin: 4px 0;
	background: var(--white);
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ======================================================================
   6. Hero
   =================================================================== */

.mme-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	padding: 92px 0;
	overflow: hidden;
	color: var(--white);
	text-align: center;
}

.mme-hero--home {
	min-height: min(78vh, 680px);
}

.mme-hero--slim {
	min-height: 260px;
	padding: 62px 0;
}

.mme-hero-bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(1.04);
}

.mme-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 26, 46, 0.62) 0%, rgba(15, 26, 46, 0.74) 100%);
}

.mme-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
}

.mme-hero-script {
	margin: 0 0 10px;
	color: var(--gold-light);
	font-family: var(--font-script);
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.2;
}

.mme-hero-heading {
	margin: 0 0 18px;
	color: var(--white);
	font-size: clamp(2.15rem, 5.4vw, 3.7rem);
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}

.mme-hero-sub {
	max-width: 680px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.mme-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 30px 0 0;
}

/* ---- Breadcrumbs ---- */

.mme-breadcrumbs {
	background: var(--off-white);
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.82rem;
}

.mme-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 11px 0;
	list-style: none;
}

.mme-breadcrumbs li {
	margin: 0;
	color: var(--ink-soft);
}

.mme-breadcrumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--gold);
}

.mme-breadcrumbs a {
	color: var(--ink-soft);
	text-decoration: none;
}

.mme-breadcrumbs a:hover {
	color: var(--navy);
}

/* ======================================================================
   7. Icon blocks
   =================================================================== */

.mme-block {
	display: block;
	padding: 34px 26px;
	background: var(--white);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	text-align: center;
	text-decoration: none;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mme-block.is-linked:hover,
.mme-block.is-linked:focus {
	transform: translateY(-5px);
	border-color: var(--gold);
	box-shadow: var(--shadow-lift);
}

.mme-block-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 18px;
	background: var(--navy);
	border-radius: 50%;
	color: var(--gold);
	font-size: 1.4rem;
	transition: background 0.22s ease, color 0.22s ease;
}

.mme-block.is-linked:hover .mme-block-icon {
	background: var(--gold);
	color: var(--navy);
}

.mme-block-heading {
	margin: 0 0 10px;
	font-size: 1.18rem;
}

.mme-block-text {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.mme-block-more {
	display: inline-block;
	margin-top: 14px;
	color: var(--gold-dark);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.section--navy .mme-block {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: none;
}

.section--navy .mme-block-text {
	color: rgba(255, 255, 255, 0.76);
}

.section--navy .mme-block-icon {
	background: var(--gold);
	color: var(--navy-dark);
}

/* ======================================================================
   8. Page body / editor content
   =================================================================== */

.entry-content {
	max-width: var(--wrap-narrow);
	margin: 0 auto;
}

.entry-content > .alignwide,
.entry-content > .mme-grid,
.entry-content > .mme-form,
.entry-content > .mme-areas {
	max-width: none;
	width: min(100%, var(--wrap));
	margin-left: 50%;
	transform: translateX(-50%);
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.entry-content h2 {
	margin-top: 1.7em;
}

.entry-content h3 {
	margin-top: 1.5em;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content ul li::marker,
.entry-content ol li::marker {
	color: var(--gold);
}

.entry-content .wp-block-image img {
	border-radius: var(--radius-lg);
}

.entry-content figcaption {
	color: var(--ink-soft);
	font-size: 0.86rem;
	text-align: center;
}

.wp-block-pullquote,
.wp-block-quote {
	border-left: 3px solid var(--gold);
}

.page-links {
	margin-top: 26px;
	font-weight: 600;
}

/* ======================================================================
   9. Closing call to action
   =================================================================== */

.mme-cta {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
	color: rgba(255, 255, 255, 0.86);
}

.mme-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
	flex-wrap: wrap;
}

.mme-cta-copy {
	flex: 1 1 420px;
}

.mme-cta h2 {
	margin: 0 0 8px;
	color: var(--white);
}

.mme-cta p {
	margin: 0;
	max-width: 620px;
}

.mme-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ======================================================================
   10. Accommodation detail
   =================================================================== */

.mme-single-head {
	padding: 46px 0 0;
}

.mme-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
	font-size: 0.92rem;
}

.mme-meta-row li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.mme-meta-row i {
	color: var(--gold);
}

.mme-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 48px;
	align-items: start;
}

.mme-layout--wide {
	grid-template-columns: minmax(0, 1fr);
}

.mme-aside {
	position: sticky;
	top: calc(var(--header-height) + 20px);
}

.mme-panel {
	margin-bottom: 22px;
	padding: 26px 24px;
	background: var(--off-white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.mme-panel h3 {
	margin: 0 0 14px;
	font-size: 1.14rem;
}

.mme-panel--navy {
	background: var(--navy);
	border-color: var(--navy);
	color: rgba(255, 255, 255, 0.84);
}

.mme-panel--navy h3 {
	color: var(--white);
}

.mme-panel--navy a {
	color: var(--gold-light);
}

.mme-price {
	display: block;
	margin: 0 0 4px;
	color: var(--navy);
	font-family: var(--font-heading);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}

.mme-price-note {
	margin: 0 0 18px;
	color: var(--ink-soft);
	font-size: 0.84rem;
}

.mme-facts {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.93rem;
}

.mme-facts li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px dashed var(--line);
}

.mme-facts li:last-child {
	border-bottom: 0;
}

.mme-facts .mme-fact-label {
	color: var(--ink-soft);
}

.mme-facts .mme-fact-value {
	color: var(--navy);
	font-weight: 600;
	text-align: right;
}

.mme-features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mme-features li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 0.96rem;
}

.mme-features i {
	margin-top: 4px;
	color: var(--gold);
	font-size: 0.9rem;
}

/* ---- Unit / room types ---- */

.mme-units {
	display: grid;
	gap: 20px;
}

.mme-unit {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 0;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.mme-unit--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.mme-unit-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mme-unit-body {
	padding: 22px 24px;
}

.mme-unit-body h3 {
	margin: 0 0 6px;
	font-size: 1.2rem;
}

.mme-unit-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.mme-unit-tags li {
	margin: 0;
	padding: 4px 11px;
	background: var(--off-white);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--navy);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mme-unit-body p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

/* ---- Gallery ---- */

.mme-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.mme-gallery a,
.mme-gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

.mme-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mme-gallery a:hover img {
	transform: scale(1.06);
}

.mme-map {
	overflow: hidden;
	border-radius: var(--radius-lg);
	line-height: 0;
}

.mme-map iframe {
	width: 100%;
	min-height: 340px;
	border: 0;
}

/* ---- Highlights (excursions) ---- */

.mme-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mme-highlight {
	margin: 0;
	padding: 24px 22px;
	background: var(--off-white);
	border-radius: var(--radius-lg);
	border-left: 3px solid var(--gold);
}

.mme-highlight h3 {
	margin: 0 0 8px;
	font-size: 1.08rem;
}

.mme-highlight p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.94rem;
}

.mme-highlight i {
	display: block;
	margin-bottom: 12px;
	color: var(--gold);
	font-size: 1.3rem;
}

.mme-quote {
	max-width: 760px;
	margin: 0 auto;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: clamp(1.3rem, 2.6vw, 1.85rem);
	font-style: italic;
	line-height: 1.45;
	text-align: center;
}

.mme-quote::before {
	content: "\201C";
	display: block;
	margin-bottom: -8px;
	color: var(--gold);
	font-size: 3.4rem;
	line-height: 1;
}

/* ======================================================================
   11. Blog
   =================================================================== */

.mme-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

body:not(.no-sidebar) .mme-post-layout {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 22px;
	color: var(--ink-soft);
	font-size: 0.86rem;
}

.entry-meta i {
	margin-right: 6px;
	color: var(--gold);
}

.entry-thumb {
	margin: 0 0 32px;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.entry-footer {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: 0.9rem;
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	font-size: 0.92rem;
}

.widget {
	margin-bottom: 32px;
	padding: 24px 22px;
	background: var(--off-white);
	border-radius: var(--radius-lg);
}

/* Widgets added the modern way are blocks, and their heading is a plain
   h2 rather than the old .widget-title, so it would otherwise come out at
   full page-heading size in the sidebar. Everything that acts as a widget
   heading is pulled back to the same modest size. */
.widget-title,
.widget-area .wp-block-heading,
.widget > h1,
.widget > h2,
.widget > h3,
.widget > h4,
.widget .wp-block-search__label,
.widget .wp-block-group > h2 {
	display: block;
	margin: 0 0 14px;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--navy);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.94rem;
}

.widget li {
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
}

.widget li:last-child {
	border-bottom: 0;
}

/* ---- Pagination ---- */

.mme-pagination {
	margin-top: 48px;
	text-align: center;
}

.mme-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0 3px;
	padding: 0 12px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--navy);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.mme-pagination .page-numbers:hover,
.mme-pagination .page-numbers.current {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

/* ---- Search form ---- */

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

.search-form label {
	flex: 1 1 auto;
}

.search-form .search-field,
.wp-block-search__input {
	width: 100%;
	padding: 12px 14px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.95rem;
}

.search-form .search-field:focus,
.wp-block-search__input:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 165, 78, 0.18);
	outline: none;
}

/* The search block that WordPress supplies for widget areas, dressed to
   match the theme's own search box. */
.wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
}

.wp-block-search__button {
	flex: 0 0 auto;
	padding: 12px 18px;
	background: var(--gold);
	border: 0;
	border-radius: var(--radius);
	color: var(--navy-dark);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s ease;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus {
	background: var(--gold-dark);
	color: var(--white);
}

/* Comments
   -------------------------------------------------------------------
   WordPress builds this form itself, so the theme has to dress it.
   Kept deliberately close to the enquiry forms in the plugin so the
   two never look like they came from different websites. */

.comments-area {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--navy);
}

.comment-reply-title small {
	margin-left: 12px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
}

.comment-list {
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
}

.comment-list ol.children {
	margin: 20px 0 0 clamp(16px, 4vw, 44px);
	padding: 0;
	list-style: none;
}

.comment-list li.comment,
.comment-list li.pingback {
	margin: 0 0 20px;
	padding: 22px 24px;
	background: var(--off-white);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
}

.comment-list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 12px;
}

.comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	color: var(--navy);
}

.comment-list .comment-author img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.comment-list .comment-author .says {
	display: none;
}

.comment-list .comment-metadata,
.comment-list .comment-metadata a {
	color: var(--ink-soft);
	font-size: 0.82rem;
	text-decoration: none;
}

.comment-list .comment-content {
	color: var(--ink);
	font-size: 0.97rem;
	line-height: 1.7;
}

.comment-list .comment-content p:last-child {
	margin-bottom: 0;
}

.comment-list .reply {
	margin-top: 12px;
}

.comment-list .reply a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gold-dark);
	text-decoration: none;
}

.comment-list .reply a:hover,
.comment-list .reply a:focus {
	text-decoration: underline;
}

.comment-awaiting-moderation {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--ink-soft);
	font-size: 0.82rem;
	font-style: italic;
}

.no-comments {
	color: var(--ink-soft);
	font-style: italic;
}

/* The form itself */

.comment-form {
	max-width: 640px;
}

.comment-notes,
.comment-form .logged-in-as {
	margin: 0 0 22px;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.comment-form p {
	margin: 0 0 18px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--navy);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.97rem;
	line-height: 1.55;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 165, 78, 0.18);
	outline: none;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.comment-form .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: 400;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.comment-form .comment-form-cookies-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.comment-form .form-submit {
	margin-bottom: 0;
}

.comment-respond .comment-reply-title #cancel-comment-reply-link {
	margin-left: 12px;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--gold-dark);
}

/* ======================================================================
   12. Footer
   =================================================================== */

.site-footer {
	background: var(--navy-dark);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.94rem;
}

.site-footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 44px;
	padding-top: 66px;
	padding-bottom: 52px;
}

.footer-heading {
	margin: 0 0 18px;
	padding-bottom: 12px;
	position: relative;
	color: var(--white);
	font-size: 1.02rem;
	letter-spacing: 0.02em;
}

.footer-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 36px;
	height: 2px;
	background: var(--gold);
}

.footer-logo img,
.footer-logo-img {
	max-height: 64px;
	width: auto;
	margin-bottom: 16px;
	border-radius: 50%;
}

.footer-blurb {
	margin: 0 0 18px;
	max-width: 340px;
	font-size: 0.92rem;
	line-height: 1.75;
}

.footer-social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-social li {
	margin: 0;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
	background: var(--gold);
	color: var(--navy-dark);
	transform: translateY(-2px);
}

.footer-menu,
.footer-legal-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li {
	margin: 0 0 9px;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-menu a:hover {
	padding-left: 5px;
	color: var(--gold-light);
}

.footer-contact-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 11px;
	font-size: 0.92rem;
}

.footer-contact-list i {
	margin-top: 5px;
	color: var(--gold);
	font-size: 0.86rem;
}

.footer-contact-list a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	word-break: break-word;
}

.footer-contact-list a:hover {
	color: var(--gold-light);
}

.site-footer-bottom {
	background: rgba(0, 0, 0, 0.24);
	font-size: 0.84rem;
}

.site-footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 18px;
	padding-bottom: 18px;
}

.footer-copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
}

.footer-legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.footer-legal-menu li {
	margin: 0;
}

.footer-legal-menu a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.footer-legal-menu a:hover {
	color: var(--gold-light);
}

/* ======================================================================
   13. Floating helpers
   =================================================================== */

.mme-float-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 400;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #25d366;
	border-radius: 50%;
	color: var(--white);
	font-size: 1.6rem;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.mme-float-whatsapp:hover {
	transform: scale(1.07);
	color: var(--white);
}

.mme-to-top {
	position: fixed;
	right: 20px;
	bottom: 86px;
	z-index: 399;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--navy);
	border: 0;
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.mme-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ======================================================================
   14. Odds and ends
   =================================================================== */

.mme-empty {
	padding: 34px 26px;
	background: var(--off-white);
	border: 1px dashed var(--line);
	border-radius: var(--radius-lg);
	color: var(--ink-soft);
	text-align: center;
}

.error-404 {
	padding: 96px 0;
	text-align: center;
}

.error-404 .error-code {
	margin: 0;
	color: var(--gold);
	font-family: var(--font-heading);
	font-size: clamp(4rem, 14vw, 8rem);
	line-height: 1;
}

.alignleft {
	float: left;
	margin: 0 26px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 26px;
}

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

.sticky .entry-title::after {
	content: " \2605";
	color: var(--gold);
}

/* ======================================================================
   14b. Template extras
   -------------------------------------------------------------------
   Everything the newer templates and main.js rely on. Card and grid
   styling lives in the MME Core plugin, so nothing here touches those.
   =================================================================== */

/* ---- Taxonomy filter chips ---- */

.mme-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.mme-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-soft);
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mme-filter:hover,
.mme-filter:focus {
	border-color: var(--gold);
	color: var(--navy);
}

.mme-filter.is-current {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.mme-filter-count {
	color: inherit;
	font-size: 0.76rem;
	opacity: 0.65;
}

/* ---- Archive intro ---- */

.archive-intro {
	max-width: var(--wrap-narrow);
	margin: 0 0 30px;
	color: var(--ink-soft);
}

/* ---- The horizontal facts strip on detail pages ---- */

.mme-property-facts {
	padding-top: 0;
	padding-bottom: 0;
}

.mme-property-facts .container {
	padding-top: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--line-soft);
}

/* An even grid rather than a wrapping row, so the icons line up in columns
   however many facts a place happens to have. */
.mme-property-facts .mme-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 26px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mme-property-facts .mme-facts li {
	display: block;
	padding: 0;
	border: 0;
	text-align: center;
}

.mme-property-facts .mme-fact-icon {
	display: block;
	margin-bottom: 6px;
	color: var(--gold);
	font-size: 1.15rem;
}

.mme-property-facts .mme-fact-label {
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mme-property-facts .mme-fact-value {
	display: block;
	text-align: center;
}

/* The longer, sentence-length details. Same icons, but read as a list. */
.mme-fact-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px 32px;
	margin: 28px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--line-soft);
	list-style: none;
}

.mme-fact-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
}

.mme-fact-note-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--gold);
	font-size: 1rem;
}

.mme-fact-note-body {
	min-width: 0;
}

.mme-fact-note-label {
	display: block;
	color: var(--ink-soft);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mme-fact-note-value {
	display: block;
	margin-top: 2px;
	color: var(--ink);
	font-size: 0.94rem;
	line-height: 1.5;
}

/* ---- Detail page body ---- */

.mme-layout-main {
	min-width: 0;
}

.mme-property-block {
	margin-bottom: 48px;
}

.mme-property-block:last-child {
	margin-bottom: 0;
}

.mme-section-heading {
	margin: 0 0 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	font-size: 1.35rem;
}

.mme-address {
	margin: 0 0 20px;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.mme-address i {
	margin-right: 8px;
	color: var(--gold);
}

.mme-price-wrap {
	margin: 0 0 6px;
}

.mme-price-from {
	display: block;
	color: var(--ink-soft);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mme-panel .btn + .btn {
	margin-top: 10px;
}

.mme-panel-ref {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

/* ---- Related strips ---- */

.mme-nearby,
.mme-child-pages {
	background: var(--off-white);
}

.mme-card--page .mme-card-placeholder,
.mme-card--picture .mme-card-placeholder {
	color: var(--gold);
}

/* ---- Product detail ---- */

.mme-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.mme-product-media {
	overflow: hidden;
	background: var(--off-white);
	border-radius: var(--radius-lg);
}

.mme-product-media img {
	display: block;
	width: 100%;
	height: auto;
}

.mme-product-info {
	min-width: 0;
}

.mme-product-price {
	margin: 0 0 18px;
	color: var(--navy);
	font-family: var(--font-heading);
	font-size: 1.7rem;
	font-weight: 700;
}

.mme-product-merchant {
	margin: 14px 0 0;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

/* ---- Icon block variants ---- */

.mme-blocks--home {
	margin-top: calc(var(--section-gap) * -0.35);
}

.mme-blocks--tight {
	padding-top: 48px;
	padding-bottom: 48px;
}

/* ---- Blog odds and ends ---- */

.mme-post-list {
	margin-bottom: 12px;
}

.mme-sidebar {
	min-width: 0;
}

.entry-date i,
.entry-cats i {
	margin-right: 6px;
}

.entry-tags {
	margin-top: 18px;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.entry-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	background: var(--off-white);
	border-radius: 999px;
	color: var(--ink-soft);
	text-decoration: none;
}

.entry-tags a:hover {
	background: var(--navy);
	color: var(--white);
}

.post-nav-prev,
.post-nav-next {
	max-width: 46%;
}

.post-nav-next {
	text-align: right;
}

/* ---- Search and 404 ---- */

.search-form {
	display: flex;
	gap: 10px;
}

.search-form .search-field {
	flex: 1 1 auto;
	min-width: 0;
}

.mme-search-again,
.mme-404-search {
	max-width: 520px;
	margin: 0 auto 40px;
}

.mme-404-links {
	text-align: left;
}

.mme-empty-actions {
	margin-top: 22px;
	text-align: center;
}

/* ---- Narrow reading column ---- */

.is-narrow .container {
	max-width: var(--wrap-narrow);
}

/* ---- Mobile menu body lock ---- */

body.menu-open,
body.lightbox-open {
	overflow: hidden;
}

/* ---- Sub-menu toggles (added by main.js) ---- */

.submenu-toggle {
	display: none;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.submenu-toggle::before {
	content: "\25BE";
	display: inline-block;
	transition: transform 0.2s ease;
}

.submenu-toggle[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

/* ---- Gallery lightbox (built by main.js) ---- */

.mme-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: rgba(15, 26, 46, 0.94);
}

.mme-lightbox.is-open {
	display: flex;
}

.mme-lightbox-img {
	max-width: 100%;
	max-height: 84vh;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}

.mme-lightbox button {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 50%;
	color: var(--white);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mme-lightbox button:hover,
.mme-lightbox button:focus {
	background: var(--gold);
}

.mme-lightbox-close {
	top: 22px;
	right: 22px;
}

.mme-lightbox-prev {
	left: 22px;
}

.mme-lightbox-next {
	right: 22px;
}

/* ---- Gentle fade-in (added by main.js) ---- */

.will-fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.will-fade.is-in {
	opacity: 1;
	transform: none;
}

/* ---- Extras: responsive ---- */

@media (max-width: 900px) {
	.mme-product-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.submenu-toggle {
		display: inline-block;
		margin-left: 8px;
	}
}

@media (max-width: 600px) {
	.mme-property-facts .mme-facts {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
		gap: 22px 14px;
	}

	.mme-fact-notes {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-nav-prev,
	.post-nav-next {
		max-width: 100%;
		text-align: left;
	}

	.mme-lightbox-prev,
	.mme-lightbox-next {
		top: auto;
		bottom: 22px;
	}
}

/* ======================================================================
   15. Responsive
   =================================================================== */

@media (max-width: 1024px) {
	:root {
		--section-gap: 64px;
	}

	.mme-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mme-aside {
		position: static;
	}

	body:not(.no-sidebar) .mme-post-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
}

/* On the last stretch of laptop width before the burger appears, the site
   name is the one thing that can go: the logo next to it says the same
   thing, and losing it buys the menu the room it needs. */
@media (min-width: 1201px) and (max-width: 1440px) {
	.site-titles {
		display: none;
	}
}

/* The menu turns into the burger well before phone widths. Nine top-level
   items, several of them long, simply will not sit on one line much under
   1200px, and a squashed menu looks worse than a tidy burger. If this number
   changes, change the matching one in assets/js/main.js too. */
@media (max-width: 1200px) {
	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		max-height: 0;
		padding: 0 var(--gutter);
		overflow: hidden;
		background: var(--white);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lift);
		transition: max-height 0.3s ease, padding 0.3s ease;
	}

	.main-navigation.is-open {
		max-height: 80vh;
		padding: 12px var(--gutter) 22px;
		overflow-y: auto;
	}

	.primary-menu {
		display: block;
	}

	.primary-menu > li > a {
		padding: 13px 0;
		border-bottom: 1px solid var(--line-soft);
		font-size: 1rem;
	}

	.primary-menu > li > a::after {
		display: none;
	}

	.primary-menu .menu-item-has-children > a::before {
		float: right;
		transition: transform 0.2s ease;
	}

	.primary-menu .menu-item-has-children.is-open > a::before {
		transform: rotate(180deg);
	}

	.primary-menu .sub-menu {
		position: static;
		max-height: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		overflow: hidden;
		visibility: visible;
		transform: none;
		transition: max-height 0.28s ease;
	}

	.primary-menu .menu-item-has-children.is-open > .sub-menu {
		max-height: 640px;
	}

	.primary-menu .sub-menu a {
		padding: 10px 0 10px 18px;
		border-bottom: 1px solid var(--line-soft);
	}

	.primary-menu .sub-menu a:hover {
		padding-left: 22px;
		background: transparent;
	}

	.nav-whatsapp {
		display: inline-flex;
		width: 100%;
		margin-top: 16px;
	}
}

@media (max-width: 900px) {
	.mme-unit {
		grid-template-columns: minmax(0, 1fr);
	}

	.mme-unit-media img {
		max-height: 240px;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	:root {
		--section-gap: 52px;
		--gutter: 18px;
	}

	.mme-topbar-inner {
		justify-content: center;
		text-align: center;
	}

	.mme-topbar-contact {
		gap: 16px;
		font-size: 0.78rem;
	}

	.mme-hero {
		min-height: 300px;
		padding: 64px 0;
	}

	.mme-hero--home {
		min-height: 68vh;
	}

	.mme-cta-inner {
		text-align: center;
		justify-content: center;
	}

	.mme-cta-actions {
		justify-content: center;
		width: 100%;
	}

	.site-footer-top {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 48px;
	}

	.site-footer-bottom-inner {
		justify-content: center;
		text-align: center;
	}

	.footer-legal-menu {
		justify-content: center;
	}

	.entry-content > .mme-grid,
	.entry-content > .mme-form,
	.entry-content > .mme-areas,
	.entry-content > .alignwide {
		width: 100%;
		margin-left: 0;
		transform: none;
	}
}

@media (max-width: 480px) {
	.mme-topbar-contact li:nth-child(2) {
		display: none;
	}

	.site-branding img,
	.custom-logo {
		max-height: 46px;
	}

	.site-title {
		font-size: 1.1rem;
	}

	.site-description {
		display: none;
	}

	.btn,
	.wp-block-button__link {
		padding: 13px 22px;
		font-size: 0.86rem;
	}

	.mme-hero-actions .btn {
		width: 100%;
	}

	.mme-float-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
		font-size: 1.4rem;
	}

	.mme-to-top {
		right: 14px;
		bottom: 74px;
	}
}

/* ======================================================================
   16. Print
   =================================================================== */

@media print {
	.mme-topbar,
	.site-header,
	.site-footer,
	.mme-float-whatsapp,
	.mme-to-top,
	.mme-breadcrumbs,
	.mme-cta,
	.mme-form {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	.mme-hero {
		min-height: 0;
		padding: 0 0 18pt;
		color: #000;
	}

	.mme-hero-bg,
	.mme-hero-veil {
		display: none;
	}

	.mme-hero-heading,
	.mme-hero-script,
	.mme-hero-sub {
		color: #000;
		text-shadow: none;
	}
}

/* ======================================================================
   17. Motion preferences
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ======================================================================
   18. Location cards, the accommodation lead-in and property photographs
   -------------------------------------------------------------------
   Added for the accommodation listing and the property pages. Card and
   grid styling still comes from the MME Core plugin — everything below
   sits on top of .mme-card and .mme-grid rather than replacing them.
   =================================================================== */

/* ---- "Not sure where to stay?" invitation ---- */

.mme-lead-in {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 44px;
	padding: 28px 32px;
	background: var(--off-white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: var(--radius-lg);
}

.mme-lead-in-text {
	flex: 1 1 340px;
	max-width: 640px;
	margin: 0;
	color: var(--navy);
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	line-height: 1.4;
}

.mme-lead-in-action {
	flex: 0 0 auto;
	margin: 0;
}

/* The button should not be squeezed thin on a phone. */
@media (max-width: 640px) {
	.mme-lead-in {
		padding: 22px 20px;
	}

	.mme-lead-in-action,
	.mme-lead-in-action .btn {
		width: 100%;
	}

	.mme-lead-in-action .btn {
		justify-content: center;
	}
}

/* ---- The area picker ---- */

.mme-areas {
	margin: 0 0 52px;
}

.mme-areas-heading {
	margin: 0 0 22px;
}

/*
   One link per card, stretched over the whole thing. The picture and the
   "see where to stay" line are only there to be looked at, so the card is
   clickable anywhere without a screen reader hearing the same address
   three times over.
*/
.mme-area-card {
	position: relative;
}

.mme-area-card .mme-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mme-area-card:focus-within {
	box-shadow: 0 0 0 3px var(--gold-light), var(--shadow-lift);
}

.mme-area-card .mme-card-title a:focus {
	outline: none;
}

.mme-area-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shown when there is no photograph yet, so a card is never broken or blank. */
.mme-area-card-blank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-dark) 100%);
	color: var(--gold-light);
	font-size: 2.1rem;
}

.mme-area-card-text {
	color: var(--ink-soft);
}

.mme-area-card-foot {
	margin: auto 0 0;
	padding-top: 4px;
	color: var(--gold-dark);
	font-size: 0.88rem;
	font-weight: 600;
}

.mme-area-card:hover .mme-area-card-foot,
.mme-area-card:focus-within .mme-area-card-foot {
	color: var(--navy);
}

/* ---- Property photographs at the top of a listing ---- */

.mme-showcase {
	padding: 34px 0 0;
}

/*
   Overrides the shared gallery grid: this one is a single big picture with
   a scrolling strip under it rather than an even grid of thumbnails.
*/
.mme-gallery.mme-gallery--showcase {
	display: block;
}

.mme-showcase-lead {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	line-height: 0;
}

.mme-showcase-lead img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 0.5s ease;
}

.mme-showcase-lead:hover img {
	transform: scale(1.03);
}

/*
   A sideways strip rather than more rows: a listing can carry thirty photos,
   and stacking them all here would push the price and the facts off the screen.
*/
.mme-showcase-strip {
	display: flex;
	gap: 12px;
	margin: 12px 0 0;
	padding: 2px 2px 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.mme-showcase-shot {
	flex: 0 0 auto;
	width: clamp(140px, 22vw, 230px);
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	scroll-snap-align: start;
	line-height: 0;
}

.mme-showcase-shot img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 0.4s ease;
}

.mme-showcase-shot:hover img {
	transform: scale(1.07);
}

.mme-showcase-strip::-webkit-scrollbar {
	height: 8px;
}

.mme-showcase-strip::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 999px;
}

.mme-showcase-note {
	margin: 10px 0 0;
	color: var(--ink-soft);
	font-size: 0.84rem;
}

/* A property's banner is given more room — the photograph is the selling point. */
.mme-hero--property {
	min-height: min(64vh, 560px);
}

.mme-hero--property .mme-hero-veil {
	background: linear-gradient(180deg, rgba(15, 26, 46, 0.34) 0%, rgba(15, 26, 46, 0.72) 100%);
}

@media (max-width: 640px) {
	.mme-hero--property {
		min-height: 360px;
	}

	.mme-showcase {
		padding-top: 24px;
	}

	.mme-showcase-lead img {
		aspect-ratio: 4 / 3;
	}
}

/* ======================================================================
   19. Home banner slideshow, and the softened WhatsApp green
   -------------------------------------------------------------------
   The banner slideshow only appears when Lynn has picked two or more
   photographs on the settings screen; with none, or only one, the markup
   is the single still picture it always was and nothing below applies.

   The WhatsApp rules here catch the two places the old bright green was
   written out in full outside the button styles — the floating bubble in
   this file, and the plugin's own fallback button style, which loads
   before this stylesheet.
   =================================================================== */

/* ---- Banner slideshow ---- */

.mme-hero-slides {
	position: absolute;
	inset: 0;
}

/*
 * Every slide is stacked in the same place and faded in turn. The fade is
 * slow and long on purpose: the heading sits on top of it, and a quick cut
 * between two photographs behind live text is unpleasant to read across.
 */
.mme-hero-slide {
	opacity: 0;
	transition: opacity 1.4s ease-in-out;
	will-change: opacity;
}

.mme-hero-slide.is-active {
	opacity: 1;
}

/*
 * The words have to stay readable over every photograph, not just the first
 * one, and a slideshow gives no chance to check each in turn. The veil over a
 * rotating banner is therefore a little heavier than the standard one.
 */
.mme-hero--slideshow .mme-hero-veil {
	background: linear-gradient(180deg, rgba(15, 26, 46, 0.66) 0%, rgba(15, 26, 46, 0.78) 100%);
}

/*
 * The client felt the banner photographs looked shaded, and she was right —
 * a flat wash heavy enough for the worst-case photo dulls all of them. So the
 * wash is now much lighter and the legibility is bought where it is actually
 * needed: a soft pool of shade behind the wording itself, plus a shadow on the
 * letters. The photographs read bright; the words stay readable over all six.
 */
.mme-hero--slideshow .mme-hero-veil,
.mme-hero--home .mme-hero-veil {
	background:
		radial-gradient(ellipse 78% 68% at 50% 54%, rgba(8, 15, 28, 0.68) 0%, rgba(8, 15, 28, 0.48) 58%, rgba(8, 15, 28, 0.06) 100%),
		linear-gradient(180deg, rgba(15, 26, 46, 0.30) 0%, rgba(15, 26, 46, 0.20) 42%, rgba(15, 26, 46, 0.40) 100%);
}

.mme-hero--slideshow .mme-hero-heading,
.mme-hero--home .mme-hero-heading {
	text-shadow: 0 2px 18px rgba(6, 12, 22, 0.72), 0 1px 3px rgba(6, 12, 22, 0.55);
}

.mme-hero--slideshow .mme-hero-script,
.mme-hero--home .mme-hero-script,
.mme-hero--slideshow .mme-hero-sub,
.mme-hero--home .mme-hero-sub {
	text-shadow: 0 1px 14px rgba(6, 12, 22, 0.72), 0 1px 2px rgba(6, 12, 22, 0.6);
}

/* ---- WhatsApp green ---- */

/* Written with .btn as well so it beats the plugin's own .btn-whatsapp
   fallback no matter which stylesheet the site loads first. */
.btn.btn-whatsapp {
	background: var(--whatsapp);
	border-color: var(--whatsapp);
	color: var(--white);
}

.btn.btn-whatsapp:hover,
.btn.btn-whatsapp:focus {
	background: var(--whatsapp-dark);
	border-color: var(--whatsapp-dark);
	color: var(--white);
}

a.mme-float-whatsapp {
	background: var(--whatsapp);
	box-shadow: 0 6px 20px rgba(30, 125, 81, 0.38);
}

a.mme-float-whatsapp:hover,
a.mme-float-whatsapp:focus {
	background: var(--whatsapp-dark);
}

/* ---- Less movement, please ---- */

/*
 * Section 17 already slows every animation to nothing, but that would leave
 * the slides jumping from one to the next instead of fading. Under a reduced
 * motion preference the script does not start at all and only the opening
 * photograph is shown, so the banner is a plain still image.
 */
@media (prefers-reduced-motion: reduce) {
	.mme-hero-slide {
		transition: none;
	}

	.mme-hero-slide:first-child {
		opacity: 1;
	}

	.mme-hero-slide:not(:first-child) {
		display: none;
	}
}

/* ======================================================================
   20. Areas with nothing listed yet
   =================================================================== */

/*
   Budva and Kotor have no places to stay on the site yet, but they are the
   two names visitors arrive already knowing, so leaving them off the
   accommodation page read as though we did not cover them. They are shown
   here in a quieter state instead: same photograph, same descriptor, but
   visibly set back from the areas you can actually book, and pointed at the
   contact page rather than at an empty archive.

   The aim is "not ready yet", not "broken" — everything below softens the
   card rather than greying it out, and the colour comes back on hover so it
   never reads as disabled when it is in fact a perfectly good link.
*/

.mme-area-card--unlisted {
	background: var(--off-white);
	border-color: var(--line-soft);
	box-shadow: none;
}

/*
   Pulled back rather than drained: enough colour left that Budva still looks
   like Budva, little enough that the eye goes to the bookable cards first.
*/
.mme-area-card--unlisted .mme-area-card-media img {
	filter: saturate(0.5) brightness(1.04);
	opacity: 0.8;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.4s ease;
}

/*
   A thin wash of the page colour over the photograph. Between this and the
   softened body the card reads as one step behind the others at a glance,
   without either of them having to be greyed out.
*/
.mme-area-card--unlisted .mme-area-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--off-white);
	opacity: 0.24;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.mme-area-card--unlisted:hover .mme-area-card-media img,
.mme-area-card--unlisted:focus-within .mme-area-card-media img {
	filter: none;
	opacity: 1;
}

.mme-area-card--unlisted:hover .mme-area-card-media::after,
.mme-area-card--unlisted:focus-within .mme-area-card-media::after {
	opacity: 0;
}

.mme-area-card--unlisted .mme-card-title a {
	color: var(--ink-soft);
}

.mme-area-card--unlisted:hover .mme-card-title a,
.mme-area-card--unlisted:focus-within .mme-card-title a {
	color: var(--navy);
}

/* A smaller lift than a bookable card gets, so the difference survives hover. */
.mme-area-card--unlisted:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

/*
   The invitation runs to a full sentence, and .mme-card-link is set to
   nowrap for the one-or-two-word links it was written for — left alone it
   would shoot off the side of a phone.
*/
.mme-area-card-foot--unlisted {
	color: var(--ink-soft);
	font-size: 0.84rem;
	font-style: italic;
	font-weight: 500;
}

.mme-area-card-foot--unlisted .mme-card-link {
	color: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	white-space: normal;
}

.mme-area-card--unlisted:hover .mme-area-card-foot--unlisted,
.mme-area-card--unlisted:focus-within .mme-area-card-foot--unlisted {
	color: var(--gold-dark);
}

/* The blank-photograph panel is a shade quieter here too, for the same reason. */
.mme-area-card--unlisted .mme-area-card-blank {
	opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
	.mme-area-card--unlisted:hover {
		transform: none;
	}
}

/* ---- Social links in the top bar ---- */

.mme-topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: var(--gold-light);
	font-size: 0.78rem;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mme-topbar-social a:hover,
.mme-topbar-social a:focus-visible {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--navy-dark);
}

.mme-topbar-social + .mme-topbar-social {
	margin-left: -6px;
}

@media (max-width: 900px) {
	/* The top bar collapses hard on a phone; the footer icons cover it there. */
	.mme-topbar-social {
		display: none;
	}
}