/* =========================================================
   Mobile Massage London – styles for the Elementor pages
   Layout (columns, gaps, backgrounds, padding) is set inside Elementor,
   so you can change it there. This file handles typography, cards,
   images, buttons and mobile polish.
   ========================================================= */

/* ---------- Containers ---------- */
.elementor .mml-section { --mml-text-color: var(--mml-ink); }
.elementor .mml-section > .e-con-inner { max-width: min(100%, var(--content-width)); }

/* Single-column sections: comfortable reading width */
.elementor .mml-narrow > .e-con-inner > .elementor-widget:not(.mml-wide),
.elementor .mml-narrow > .e-con-inner > .e-con:not(.mml-wide) {
	width: 100%;
	max-width: var(--mml-text);
	margin-left: auto;
	margin-right: auto;
}
.elementor .mml-narrow .mml-faq { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }

/* Spacing rhythm */
.elementor .mml-section .elementor-widget-heading + .elementor-widget-text-editor { margin-top: -.25rem; }
.elementor .mml-section .mml-eyebrow + .elementor-widget-heading { margin-top: -.6rem; }
.elementor .mml-section .mml-grid,
.elementor .mml-section .mml-wide.elementor-widget-html,
.elementor .mml-section .mml-inline-img { margin-top: .75rem; margin-bottom: .75rem; }

/* ---------- Typography ---------- */
.elementor .mml-section .elementor-heading-title {
	margin: 0;
	font-family: var(--mml-font-heading);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--mml-ink);
	text-wrap: balance;
}
.elementor .mml-section h1.elementor-heading-title { font-size: var(--mml-fs-h1); font-weight: 400; }
.elementor .mml-section h2.elementor-heading-title { font-size: var(--mml-fs-h2); }
.elementor .mml-section h3.elementor-heading-title { font-size: var(--mml-fs-h3); }
.elementor .mml-section .elementor-heading-title em { font-style: italic; color: var(--mml-gold-500); }
.elementor .mml-section .elementor-heading-title a { color: inherit; text-decoration: none; }

.elementor .mml-section .mml-eyebrow .elementor-heading-title {
	font-family: var(--mml-font-body);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mml-gold-500);
}

.elementor .mml-section .elementor-widget-text-editor {
	font-family: var(--mml-font-body);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--mml-ink);
}
.elementor .mml-section .elementor-widget-text-editor p { margin: 0 0 1em; }
.elementor .mml-section .elementor-widget-text-editor > :last-child,
.elementor .mml-section .elementor-widget-text-editor .elementor-widget-container > :last-child { margin-bottom: 0; }
.elementor .mml-section .elementor-widget-text-editor ul,
.elementor .mml-section .elementor-widget-text-editor ol { margin: 0 0 1em; padding-left: 1.2rem; }
.elementor .mml-section .elementor-widget-text-editor li { margin-bottom: .45em; padding-left: .2rem; }
.elementor .mml-section .elementor-widget-text-editor li::marker { color: var(--mml-gold-500); font-weight: 600; }
.elementor .mml-section .elementor-widget-text-editor a { color: var(--mml-green-700); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Dark sections (hero, prices, CTA) ---------- */
.elementor .mml-section--dark .elementor-heading-title,
.elementor .mml-hero .elementor-heading-title,
.elementor .mml-cta .elementor-heading-title { color: var(--mml-cream-50); }
.elementor .mml-section--dark .elementor-heading-title em,
.elementor .mml-hero .elementor-heading-title em,
.elementor .mml-cta .elementor-heading-title em { color: var(--mml-sand-400); }
.elementor .mml-section--dark .mml-eyebrow .elementor-heading-title,
.elementor .mml-hero .mml-eyebrow .elementor-heading-title,
.elementor .mml-cta .mml-eyebrow .elementor-heading-title { color: var(--mml-sand-400); }
.elementor .mml-section--dark .elementor-widget-text-editor,
.elementor .mml-hero .elementor-widget-text-editor,
.elementor .mml-cta .elementor-widget-text-editor { color: var(--mml-cream-200); }
.elementor .mml-section--dark .elementor-widget-text-editor a,
.elementor .mml-hero .elementor-widget-text-editor a,
.elementor .mml-cta .elementor-widget-text-editor a { color: var(--mml-sand-400); }
.elementor .mml-section--dark .elementor-widget-text-editor li::marker { color: var(--mml-sand-400); }

/* Hero */
.elementor .mml-hero .elementor-widget-text-editor:not(.mml-checks) { font-size: clamp(1.05rem, .4vw + 1rem, 1.2rem); }
.elementor .mml-hero .mml-checks ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.elementor .mml-hero .mml-checks li { position: relative; margin: 0; padding-left: 1.6rem; }
.elementor .mml-hero .mml-checks li::before {
	content: ""; position: absolute; left: 0; top: .5em; width: .9rem; height: .5rem;
	border-left: 2px solid var(--mml-sand-400); border-bottom: 2px solid var(--mml-sand-400); transform: rotate(-45deg);
}
.elementor .mml-hero .mml-split__img img {
	border-radius: 50% 50% 22px 22px / 32% 32% 22px 22px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .28);
}

/* CTA */
.elementor .mml-cta { text-align: center; }
.elementor .mml-cta .mml-buttons { justify-content: center; }

/* ---------- Split sections (text + image) ---------- */
.elementor .mml-split__media .elementor-widget-image { width: 100%; }
.elementor .mml-split__img img {
	display: block; width: 100%; height: auto;
	border-radius: 22px;
	box-shadow: 0 24px 48px rgba(23, 38, 30, .12);
}
.elementor .mml-inline-img img {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; object-position: center 75%;
	border-radius: 18px;
}

/* ---------- Buttons ---------- */
.elementor .mml-buttons { margin-top: .5rem; }
.elementor .mml-buttons > .elementor-widget-button { width: auto; }
.elementor .mml-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .95rem 1.7rem; border: 1px solid transparent; border-radius: 999px;
	background: var(--mml-green-800); color: var(--mml-cream-50);
	font-family: var(--mml-font-body); font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
	box-shadow: none;
	transition: background-color .2s var(--mml-ease), color .2s var(--mml-ease), border-color .2s var(--mml-ease), transform .2s var(--mml-ease);
}
.elementor .mml-btn .elementor-button:hover,
.elementor .mml-btn .elementor-button:focus { background: var(--mml-green-900); color: var(--mml-white); transform: translateY(-1px); }
.elementor .mml-btn--primary .elementor-button { background: var(--mml-sand-400); color: var(--mml-green-900); }
.elementor .mml-btn--primary .elementor-button:hover,
.elementor .mml-btn--primary .elementor-button:focus { background: #d8c6a4; color: var(--mml-green-900); }
.elementor .mml-btn--light .elementor-button { background: var(--mml-cream-50); color: var(--mml-green-800); }
.elementor .mml-btn--light .elementor-button:hover,
.elementor .mml-btn--light .elementor-button:focus { background: var(--mml-white); color: var(--mml-green-900); }
.elementor .mml-btn--ghost-light .elementor-button { background: transparent; color: var(--mml-cream-50); border-color: rgba(244, 239, 230, .45); }
.elementor .mml-btn--ghost-light .elementor-button:hover,
.elementor .mml-btn--ghost-light .elementor-button:focus { background: rgba(244, 239, 230, .08); border-color: var(--mml-cream-50); color: var(--mml-white); }
/* Green button on light sections */
.elementor .mml-section--light .mml-btn--primary .elementor-button,
.elementor .mml-section--cream .mml-btn--primary .elementor-button { background: var(--mml-green-800); color: var(--mml-cream-50); }
.elementor .mml-section--light .mml-btn--primary .elementor-button:hover,
.elementor .mml-section--cream .mml-btn--primary .elementor-button:hover { background: var(--mml-green-900); color: var(--mml-white); }

/* ---------- Grids: cards and steps ---------- */
.elementor .mml-grid.e-con,
.elementor .mml-grid > .e-con-inner { grid-template-rows: none !important; grid-auto-rows: auto; }

.elementor .mml-card {
	overflow: hidden;
	background: var(--mml-white);
	border: 1px solid var(--mml-line);
	border-radius: var(--mml-radius-lg);
	transition: transform .3s var(--mml-ease), box-shadow .3s var(--mml-ease), border-color .3s var(--mml-ease);
}
.elementor .mml-section--light .mml-card { background: var(--mml-cream-100); }
.elementor .mml-card:hover { transform: translateY(-3px); box-shadow: var(--mml-shadow); border-color: var(--mml-sand-400); }
.elementor .mml-card > .elementor-widget:not(.mml-card__img) { padding-left: 1.5rem; padding-right: 1.5rem; }
.elementor .mml-card > .elementor-widget:not(.mml-card__img):first-child { padding-top: 1.6rem; }
.elementor .mml-card > .elementor-widget:last-child { padding-bottom: 1.6rem; }
.elementor .mml-card .mml-card__img { margin: 0; }
.elementor .mml-card .mml-card__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.elementor .mml-card h3.elementor-heading-title { font-size: 1.5rem; }
.elementor .mml-card h3.elementor-heading-title a::after { content: " →"; font-family: var(--mml-font-body); font-size: .85em; color: var(--mml-gold-500); }
.elementor .mml-card .elementor-widget-text-editor { font-size: .98rem; color: var(--mml-muted); }
.elementor .mml-card .elementor-widget-text-editor a { color: var(--mml-green-700); font-weight: 600; }
.elementor .mml-section--dark .mml-card { background: rgba(244, 239, 230, .05); border-color: var(--mml-line-dark); }

.elementor .mml-steps { counter-reset: mml-step; }
.elementor .mml-step {
	counter-increment: mml-step;
	padding: 1.6rem 1.5rem 1.5rem;
	background: var(--mml-cream-50);
	border-top: 3px solid var(--mml-green-800);
	border-radius: var(--mml-radius-lg);
}
.elementor .mml-step h3.elementor-heading-title::before {
	content: counter(mml-step, decimal-leading-zero);
	display: block;
	margin-bottom: .6rem;
	font-family: var(--mml-font-heading); font-size: 2.4rem; line-height: 1; font-style: italic; color: var(--mml-gold-500);
}
.elementor .mml-step h3.elementor-heading-title { font-size: 1.4rem; }
.elementor .mml-step .elementor-widget-text-editor { font-size: .98rem; color: var(--mml-muted); }

/* ---------- Tables, FAQ ---------- */
.elementor .mml-section .mml-table { margin: 0; }
.elementor .mml-faq { border-top: 1px solid var(--mml-line); }
.elementor .mml-faq .mml-faq-item > p { color: var(--mml-muted); }

/* ---------- Booking form ---------- */
.mml-form {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: var(--mml-white);
	border: 1px solid var(--mml-line);
	border-radius: var(--mml-radius-lg);
	box-shadow: var(--mml-shadow);
	font-family: var(--mml-font-body);
}
.mml-form__grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mml-form__field { margin: 0; }
.mml-form__field--full { grid-column: 1 / -1; }
.mml-form label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--mml-green-800); }
.mml-form input, .mml-form select, .mml-form textarea {
	width: 100%; min-height: 48px; padding: .75rem .9rem;
	border: 1px solid var(--mml-line); border-radius: 10px; background: var(--mml-cream-50);
	font: inherit; font-size: 1rem; color: var(--mml-ink);
}
.mml-form textarea { min-height: 96px; resize: vertical; }
.mml-form input:focus, .mml-form select:focus, .mml-form textarea:focus { outline: none; border-color: var(--mml-green-600); box-shadow: 0 0 0 3px rgba(61, 90, 74, .15); background: var(--mml-white); }
.mml-form__submit {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 1.25rem;
	border: 0; border-radius: 999px; background: #25d366; color: #073b1d; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.mml-form__submit:hover { background: #1fbf5b; }
.mml-form__error { margin: 1rem 0 0; color: #a3341f; font-weight: 600; }
.mml-form__note { margin: .75rem 0 0; font-size: .85rem; color: var(--mml-muted); text-align: center; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.elementor .mml-split .mml-split__media { max-width: 620px; margin-left: auto; margin-right: auto; }
	.elementor .mml-split .mml-split__text { max-width: var(--mml-text); margin-left: auto; margin-right: auto; }
	.elementor .mml-hero .mml-split__media { max-width: 440px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.elementor .mml-section .elementor-widget-text-editor { font-size: 1rem; }
	.elementor .mml-hero .mml-split__media { max-width: 300px; }
	.elementor .mml-hero .mml-checks ul { flex-direction: column; gap: .4rem; }
	.elementor .mml-buttons { width: 100%; }
	.elementor .mml-buttons > .elementor-widget-button { width: 100%; }
	.elementor .mml-btn .elementor-button { width: 100%; padding: 1rem 1.25rem; }
	.elementor .mml-card:hover { transform: none; }
	.elementor .mml-inline-img img { aspect-ratio: 16 / 9; }
	.mml-form__grid { grid-template-columns: 1fr; }
	.elementor .mml-section .mml-table table { min-width: 520px; }
}

/* Sub-headings after body text get a little breathing room */
.elementor .mml-section .elementor-widget-text-editor + .elementor-widget-heading { margin-top: .9rem; }