/*
 * MCCI — front-end supplemental styles.
 *
 * theme.json owns the design tokens (colors, type, spacing, element styles).
 * This file only carries effects theme.json cannot express:
 *   - architectural 1px grid lines
 *   - the signature hero-curve
 *   - image blend-mode / grayscale / hover-scale motion
 *   - the newsletter underline input
 * Everything references the CSS custom properties emitted from theme.json.
 */

/* ---------------------------------------------------------------------------
 * Global rhythm
 * ------------------------------------------------------------------------- */
:root {
	--mcci-line: var( --wp--custom--line--width, 1px ) solid var( --wp--custom--line--color, #d2cfc7 );
}

/* Sticky site header. The <header> template-part wrapper is the sticky element
 * (its containing block is the tall .wp-site-blocks); the inner .mcci-header
 * only spans its own height, so sticking it directly does nothing. Footer uses
 * a <footer> wrapper, so this header-only selector never affects it. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Content sits flush under the header — remove the global blockGap that would
 * otherwise open a gap between the header and <main> (lets the hero start right
 * below the header so it can occupy a true viewport-minus-header height). */
.wp-site-blocks > main {
	margin-block-start: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Smooth scrolling is part of the motion spec. */
@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------------------
 * Editorial accent — lowercase italic serif for "human" words in headings.
 * Usage in the editor: wrap a word in an <em> inside a heading, or apply the
 * "Acento serif" text style.
 * ------------------------------------------------------------------------- */
h1 em,
h2 em,
h3 em,
.mcci-accent {
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------------------------------------------------------------------------
 * Label — wide-tracked uppercase micro type.
 * ------------------------------------------------------------------------- */
/* Readable measure: keep centered running text under ~70 chars/line. Centered
 * paragraphs otherwise stretch the full container (~91 chars) and read poorly. */
p.has-text-align-center {
	max-width: 34em;
	margin-inline: auto;
}

.mcci-label,
.has-label-font-size {
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking--label, 0.2em );
	font-weight: 400;
	line-height: 1.4;
	/* WCAG AA: sage (#8B876B) is only 2.98:1 on sand, so label TEXT on light
	 * backgrounds uses moss (#6A6750 → 4.68:1). Dark sections flip to sage-light. */
	color: var( --wp--preset--color--moss, #6a6750 );
}

/* Labels on dark sections use the lighter sage (6.7:1 on charcoal). */
.has-charcoal-background-color .mcci-label,
.has-dark-background-color .mcci-label,
.has-charcoal-background-color .has-label-font-size,
.mcci-consent .mcci-label {
	color: var( --wp--preset--color--sage-light, #a8a488 );
}

/* ---------------------------------------------------------------------------
 * Architectural grid lines. Add class .mcci-grid-lines to a Group/Columns
 * block to draw 1px separators between its children.
 * ------------------------------------------------------------------------- */
.mcci-border-top { border-top: var( --mcci-line ); }
.mcci-border-bottom { border-bottom: var( --mcci-line ); }
.mcci-border-left { border-left: var( --mcci-line ); }
.mcci-border-right { border-right: var( --mcci-line ); }

.mcci-grid-lines > * + * {
	border-top: var( --mcci-line );
}

@media ( min-width: 782px ) {
	.mcci-grid-lines.is-horizontal > * + * {
		border-top: 0;
		border-left: var( --mcci-line );
	}
}

/* ---------------------------------------------------------------------------
 * Hero curve — signature asymmetric rounded image frame.
 * ------------------------------------------------------------------------- */
.mcci-hero-curve,
.mcci-hero-curve img {
	border-top-right-radius: var( --wp--custom--hero-curve, 35vw );
	border-bottom-left-radius: var( --wp--custom--hero-curve, 35vw );
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Image treatments — depth via scale + opacity, never shadows.
 * ------------------------------------------------------------------------- */
.mcci-media {
	overflow: hidden;
}

.mcci-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform var( --wp--custom--motion--image, 700ms cubic-bezier( 0.4, 0, 0.2, 1 ) );
}

/* When the container defines its own height (cards, hero), fill and crop it. */
.mcci-media[style*="aspect-ratio"] img,
.mcci-card .mcci-media img {
	height: 100%;
}

@media ( prefers-reduced-motion: no-preference ) {
	.mcci-media:hover img,
	a:hover .mcci-media img {
		transform: scale( 1.05 );
	}
}

/* Dark sections: desaturate imagery for the minimalist ritual look. Grayscale
 * only — mix-blend-mode:luminosity over a flat charcoal fill renders the image
 * near-black, so it is reserved for cases with a textured/colored backdrop. */
.has-charcoal-background-color .mcci-media img,
.has-dark-background-color .mcci-media img {
	filter: grayscale( 100% ) contrast( 1.05 );
}

/* Opt-in luminosity blend for media placed over a colored/textured backdrop. */
.mcci-media.is-luminosity img {
	mix-blend-mode: luminosity;
}

/* ---------------------------------------------------------------------------
 * Room / property card — 4:5 portrait media, bottom-aligned type.
 * ------------------------------------------------------------------------- */
.mcci-card {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--20, 16px );
}

.mcci-card .mcci-media {
	aspect-ratio: 4 / 5;
}

/* ---------------------------------------------------------------------------
 * Newsletter input — transparent field with a single underline.
 * ------------------------------------------------------------------------- */
.mcci-newsletter input[type="email"],
.mcci-newsletter input[type="text"] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--sage-light, #9ca3af );
	border-radius: 0;
	padding: 8px 0;
	font-family: inherit;
	font-weight: 300;
	color: inherit;
	width: 100%;
}

.mcci-newsletter input::placeholder {
	color: currentColor;
	opacity: 0.55;
}

.mcci-newsletter input:focus {
	outline: none;
	border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * Decorative pulse — perfect circle CTA indicator.
 * ------------------------------------------------------------------------- */
.mcci-pulse {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var( --wp--preset--color--sage, #8b876b );
}

@media ( prefers-reduced-motion: no-preference ) {
	.mcci-pulse {
		animation: mcci-pulse 2.4s var( --wp--custom--motion--slow, cubic-bezier( 0.4, 0, 0.2, 1 ) ) infinite;
	}
}

@keyframes mcci-pulse {
	0%, 100% { transform: scale( 1 ); opacity: 1; }
	50% { transform: scale( 1.6 ); opacity: 0.4; }
}

/* ---------------------------------------------------------------------------
 * Accessibility — visible focus for keyboard users.
 * ------------------------------------------------------------------------- */
:where( a, button, input, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--sage, #8b876b );
	outline-offset: 2px;
}