/*
Theme Name: Meklara Luxe
Theme URI: https://meklara.com
Author: Meklara
Description: An optional reference theme for the Meklara WordPress connector — a calm, editorial, image-led presentation layer for a brokerage website. The connector plugin does not depend on this theme; any block theme can replace it.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meklara-luxe
Tags: full-site-editing, block-patterns, real-estate, editorial
*/

/*
 * Block themes take their design tokens from theme.json. This file carries only
 * what theme.json cannot express: the handful of components the Meklara plugin
 * renders server-side, and the editorial details that make the site feel like a
 * brokerage rather than a plugin demo.
 *
 * ⛔ The plugin must never depend on a class defined here. These are styles for
 * markup the plugin emits, not behaviour the plugin needs.
 */

/* ── The navigation overlay ──────────────────────────────────────────────── */
/*
 * ⛔ THIS LIVES IN THE THEME, NOT THE PLUGIN.
 * It paints WordPress's own navigation block, which is the THEME's furniture.
 * The plugin must adapt to whatever theme a brokerage installs (Patrick,
 * 2026-09-22), so it may style its own sections and nothing else. When the
 * Meklara plugin runs on Kadence or Twenty Twenty-Five, that theme's menu stays
 * that theme's menu.
 */
/*
 * The menu is part of the site, not a browser artefact. Ink, not white; the
 * display face at a size worth tapping; and it arrives rather than appearing.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mk-charcoal) !important;
	color: #fff;
	padding: clamp(1.5rem, 6vw, 3rem) var(--mk-gutter);
	animation: mk-menu-in 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--mk-display);
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	padding-block: 0.35rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: var(--mk-max); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.05rem; font-family: var(--mk-body); color: rgba(255,255,255,.75); }
@keyframes mk-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}
/* A finger-sized control, whatever the viewport. */
@media (max-width: 900px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}

/* ── This theme's own voice ──────────────────────────────────────────────── */
/*
 * The Meklara plugin asks the ACTIVE THEME for its typography, palette and
 * measures before falling back to its own. That is what lets the connector sit
 * on Kadence or Twenty Twenty-Five without repainting them — and it means this
 * theme must state its voice, rather than relying on the plugin to carry it.
 */
:root {
	--meklara-display: "Newsreader", "Iowan Old Style", Georgia, serif;
	--meklara-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Measured from the Mas Property build, 2026-09-22. */
	--meklara-ink: #182F3F;        /* navy text */
	--meklara-canvas: #F8F6F4;     /* warm paper band */
	--meklara-paper: #ffffff;
	--meklara-graphite: #0D1B24;   /* ink navy band */
	--meklara-muted: #6A7783;
	--meklara-rule: #E3DED8;
	--meklara-accent: #9A7B4F;
	--meklara-charcoal: #0D1B24;
	--mas-sand: #E1D5CC;           /* the ground the hero sits in */
	--mas-navy: #0D1B24;
	--mas-paper: #F8F6F4;
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
/*
 * The composition, measured band by band on masproperty.vantera.io: a hero in
 * sand, an ink-navy band, a warm-paper band, an ink band, then white — each one
 * full-bleed, each with its own vertical rhythm (56 / 80 / 96px), and never two
 * the same ground running. That alternation is most of what makes the page read
 * as chapters rather than as a feed.
 */
.mk-band--ink,
.mk-market.alignfull,
.mk-close.alignfull {
	background: var(--mas-navy);
	color: #fff;
}
.mk-band--paper { background: var(--mas-paper); }
.mk-band--white { background: #fff; }
.mk-band--sand { background: var(--mas-sand); }
.mk-band--ink { padding-block: clamp(3rem, 6vw, 3.5rem); }
.mk-band--paper { padding-block: clamp(3.5rem, 7vw, 5rem); }
.mk-band--white { padding-block: clamp(4rem, 8vw, 6rem); }

/*
 * The micro-label. Theirs is 10px at 1.6px tracking — 0.16em — uppercase, and
 * it opens every band. Ours was 0.68rem at 0.12em, which reads as small text
 * rather than as a label.
 */
.mk-eyebrow {
	font-family: var(--meklara-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--meklara-ink) 60%, transparent);
}
.mk-band--ink .mk-eyebrow, .mk-market .mk-eyebrow, .mk-eyebrow--light { color: rgba(255, 255, 255, 0.62); }

/*
 * The button: square, white on navy or navy on white, with the label set as a
 * micro-label rather than as a word. Measured: 10px, 1.6px tracking, 0 radius,
 * 24px of horizontal padding.
 */
.mk-button, .wp-block-button__link, .mk-more--button {
	border-radius: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 1.15rem 1.5rem;
}

/* Headings sit at their sizes, not ours: 61px and 33px, weight 500. */
.mk-hero-heading.meklara-hero-heading { font-weight: 500; letter-spacing: -0.005em; }
@media (min-width: 1025px) {
	.mk-hero-heading.meklara-hero-heading { font-size: clamp(3rem, 4.4vw, 3.9rem); line-height: 0.96; }
	.mk-h2, .mk-market-heading, .mk-explore-heading, .mk-close-heading, .mk-team-heading { font-size: clamp(2rem, 2.4vw, 2.1rem); line-height: 1.12; font-weight: 500; }
}

/* ── Controls ────────────────────────────────────────────────────────────── */
/*
 * Patrick, 2026-09-22: "all dropdowns, boxes etc can be different but not
 * standard like we have now."
 *
 * A native <select> paints itself: system chrome, a system chevron, a system
 * focus ring, and a rounded rectangle nobody chose. Underneath it is still a
 * native select — which is what makes it work with a keyboard, with VoiceOver
 * and with the iOS wheel — but everything you can see is ours: the label above
 * it as a micro-label, the value set in the reading face, one hairline between
 * cells, and a chevron we draw.
 */
.meklara-field,
.mk-herobar .meklara-field {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding: 0.9rem 1.15rem;
	background: #fff;
	border: 0;
	border-right: 1px solid var(--meklara-rule);
	border-radius: 0;
}
.meklara-field:last-of-type { border-right: 0; }
.meklara-field > span,
.meklara-field > label,
.mk-herobar .meklara-field-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--meklara-ink) 55%, transparent);
}
.meklara-field select,
.meklara-field input,
.meklara-input,
.mk-herobar select,
.mk-herobar input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 1.6rem 0 0;
	margin: 0;
	width: 100%;
	font-family: var(--meklara-body);
	font-size: max(16px, 1rem);
	line-height: 1.3;
	color: var(--meklara-ink);
	box-shadow: none;
	cursor: pointer;
}
/* Our chevron, not the system's: a 1px stroke, sized to the type, never a glyph. */
.meklara-field:has(select)::after {
	content: "";
	position: absolute;
	right: 1.15rem;
	bottom: 1.35rem;
	width: 9px;
	height: 9px;
	border-right: 1px solid color-mix(in srgb, var(--meklara-ink) 55%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--meklara-ink) 55%, transparent);
	transform: rotate(45deg) translateY(-2px);
	pointer-events: none;
}
/* Focus is a line under the cell, in the accent — never a browser halo. */
.meklara-field select:focus-visible,
.meklara-field input:focus-visible,
.meklara-input:focus-visible {
	outline: none;
	box-shadow: 0 2px 0 0 var(--meklara-accent);
}
.meklara-field:focus-within { background: #fff; }

/* The bar itself: white, square, sitting on the photograph with one shadow. */
.mk-herobar {
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 18px 50px rgba(13, 27, 36, 0.18);
}
.mk-herobar-submit.mk-button,
.mk-button--primary,
.meklara-button--primary {
	background: var(--mas-navy);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-inline: 2rem;
	transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-herobar-submit.mk-button:hover,
.mk-button--primary:hover { background: #16303f; }
.mk-herobar-submit.mk-button:active { transform: scale(0.985); }

/* Every other box: square, hairline, no system rounding. */
.meklara-card, .mk-dev-card, .mk-person-media, .meklara-panel, .meklara-box,
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea {
	border-radius: 0;
}
textarea, input[type="text"], input[type="email"], input[type="search"], input[type="tel"] {
	border: 1px solid var(--meklara-rule);
	background: #fff;
	padding: 0.95rem 1.1rem;
	font-size: max(16px, 1rem);
}
textarea:focus-visible, input:focus-visible { outline: none; border-color: var(--meklara-accent); }

/*
 * A page that opens on a photograph opens ON the photograph.
 *
 * The hero began 24px down the page, so a strip of warm paper sat above it and
 * the white wordmark straddled the seam (Patrick's iPhone, 2026-09-22). The
 * header is fixed and transparent over a hero; the hero itself must start at
 * the very top, and nothing above it may reserve space.
 */
body.mk-has-hero .mk-page,
body.mk-has-hero main.mk-page { padding-top: 0; margin-top: 0; }
body.mk-has-hero .mk-page > *:first-child { margin-top: 0; }
body.mk-has-hero .mk-hero.meklara-hero-panel { margin-top: 0; }

/*
 * The wordmark over a photograph is a mark, not a paragraph: theirs sits in a
 * hairline box at the top-left corner. Ours keeps the display face but takes
 * the same scale and the same corner, so the header reads as part of the
 * picture rather than as a strip laid over it.
 */
.mk-header--over:not(.is-scrolled) .mk-wordmark a {
	font-size: 1.15rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
}
@media (max-width: 900px) {
	.mk-header { padding-block: 0.85rem; }
	.mk-header--over:not(.is-scrolled) .mk-wordmark a { font-size: 1.05rem; }
}

/* ── The Locations band ──────────────────────────────────────────────────── */
.mk-locations { background: var(--mas-navy); color: #fff; }
.mk-locations-inner {
	max-width: var(--mk-max, 1600px);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 3.5rem) var(--mk-gutter, 1.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1025px) {
	/* Heading left, photographs right — the shape they use. */
	.mk-locations-inner { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); }
}
.mk-locations-heading {
	font-family: var(--meklara-display);
	font-weight: 500;
	font-size: clamp(1.7rem, 2.4vw, 2.1rem);
	line-height: 1.12;
	margin: 0;
	color: #fff;
}
.mk-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(0.75rem, 1.4vw, 1rem); }
.mk-location { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; }
.mk-location-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0a151c; }
@media (min-width: 700px) { .mk-location-media { aspect-ratio: 4 / 5; } }
.mk-location-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1); }
@media (hover: hover) { .mk-location:hover .mk-location-image { transform: scale(1.03); } }
/* The label sits ON the photograph, over a floor dark enough to read against. */
.mk-location-body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	gap: 0.15rem;
	padding: clamp(1rem, 2vw, 1.4rem);
	background: linear-gradient(to top, rgba(10, 21, 28, 0.86) 0%, rgba(10, 21, 28, 0.38) 55%, rgba(10, 21, 28, 0) 100%);
}
.mk-location-name { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.mk-location-country { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); }
.mk-location-go { margin-top: 0.5rem; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }

/* ── The developments strip ──────────────────────────────────────────────── */
.mk-devstrip { background: var(--mas-navy); color: #fff; }
.mk-devstrip-inner {
	max-width: var(--mk-max, 1600px);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 3.5rem) var(--mk-gutter, 1.5rem);
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 1025px) {
	.mk-devstrip-inner { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
}
.mk-devstrip-heading { font-family: var(--meklara-display); font-weight: 500; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.14; margin: 0.6rem 0 0.9rem; color: #fff; max-width: 14ch; }
.mk-devstrip-text { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.76); margin: 0 0 1.5rem; max-width: 34ch; }
/* On a phone the tiles are a rail you swipe, not a grid you scroll past. */
.mk-devstrip-tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 62%;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--mk-gutter, 1.5rem));
	padding-inline: var(--mk-gutter, 1.5rem);
}
.mk-devstrip-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 1025px) {
	.mk-devstrip-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.mk-devtile { position: relative; display: block; scroll-snap-align: start; overflow: hidden; text-decoration: none; color: #fff; }
.mk-devtile-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0a151c; }
.mk-devtile-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1); }
@media (hover: hover) { .mk-devtile:hover .mk-devtile-image { transform: scale(1.03); } }
.mk-devtile-body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	gap: 0.2rem;
	padding: clamp(0.9rem, 1.6vw, 1.2rem);
	background: linear-gradient(to top, rgba(10, 21, 28, 0.88) 0%, rgba(10, 21, 28, 0.36) 60%, rgba(10, 21, 28, 0) 100%);
}
.mk-devtile-place { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mk-devtile-name { font-family: var(--meklara-display); font-size: 1.15rem; line-height: 1.18; }
.mk-devtile-from { font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }

/* A ghost button for an ink band: hairline, square, micro-label. */
.mk-button--ghost {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	text-decoration: none;
	padding: 1rem 1.6rem;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-button--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.72); }

/* ── The property card, their shape ──────────────────────────────────────── */
.meklara-card { background: transparent; border: 0; }
.meklara-card-link { text-decoration: none; color: inherit; display: grid; gap: 0.75rem; }
.meklara-card-frame { aspect-ratio: 16 / 10; overflow: hidden; background: var(--meklara-canvas); }
.meklara-card-place { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--meklara-ink) 55%, transparent); }
.meklara-card-title { font-family: var(--meklara-display); font-weight: 500; font-size: 1.22rem; line-height: 1.2; margin: 0.1rem 0 0; }
.meklara-card-price { font-size: 0.95rem; font-weight: 500; }
/* The meta row: hairline-separated facts, the way a listing sheet sets them. */
.meklara-card-facts { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: color-mix(in srgb, var(--meklara-ink) 68%, transparent); }
.meklara-card-facts > span + span { padding-left: 0.75rem; border-left: 1px solid var(--meklara-rule); }

/* ── The numbered standard ───────────────────────────────────────────────── */
.mk-numbered { display: grid; gap: 0; }
.mk-numbered-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 2rem);
	padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
	border-top: 1px solid var(--meklara-rule);
}
.mk-numbered-item:last-child { border-bottom: 1px solid var(--meklara-rule); }
.mk-numbered-figure {
	grid-row: span 2;
	margin: 0;
	font-family: var(--meklara-display);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1;
	color: color-mix(in srgb, var(--meklara-ink) 38%, transparent);
}
.mk-numbered-title { margin: 0 0 0.3rem; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.mk-numbered-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: color-mix(in srgb, var(--meklara-ink) 72%, transparent); }
.mk-standard { align-items: start; gap: clamp(2rem, 5vw, 5rem); }

/* A band's own heading block: label, then the line. */
.mk-sect-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mk-sect-head .mk-h2 { margin: 0; font-family: var(--meklara-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.14; }