/* ==========================================================================
   Shared Sections — pieces every home-page section uses: the centred
   container, section headings, extra button styles, round icon chips,
   "to confirm" tags and the wavy edges between sections.
   ========================================================================== */

/* lists inside the section blocks start clean */
:where([class*="mro-"]) :is(ul, ol, dl, dd) { margin: 0; padding: 0; }
:where([class*="mro-"]) :is(ul, ol) { list-style: none; }

.mro-container {
	width: 100%;
	max-width: var(--wp--custom--container--base);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* the big lowercase hand-lettered heading */
.mro-section-title {
	max-width: 14ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--display);
	text-transform: lowercase;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}
.mro-section-title--on-dark { color: var(--wp--preset--color--base); }

/* ---------- More button styles ---------- */
.mro-button--mint {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--contrast);
}
.mro-button--mint:hover,
.mro-button--mint:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.mro-button--white {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-stronger);
	box-shadow: var(--wp--preset--shadow--soft);
}
.mro-button--white:hover,
.mro-button--white:focus-visible {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--contrast);
}

.mro-button--large {
	min-height: 3.75rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--md);
}

/* ---------- Round icon chip ---------- */
.mro-chip-icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--blob--c);
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--accent-strong);
}

/* ---------- Note shown only in the editor ---------- */
.mro-editor-note {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 2px dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--mint-faint);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- "To confirm" tag: details still waiting on the owner ---------- */
.mro-to-confirm {
	display: inline-block;
	padding: 0.1em 0.55em;
	border: 2px dashed var(--wp--preset--color--flag);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--flag-soft);
	color: var(--wp--preset--color--flag);
	font-weight: var(--wp--custom--weight--bold);
}

/* ---------- Wavy edges between sections ---------- */
.mro-wave {
	display: block;
	width: 100%;
	height: clamp(2.5rem, 6vw, 5.5rem);
	pointer-events: none;
}
.mro-wave--to-mint,
.mro-wave--to-soft { margin-bottom: -1px; }
.mro-wave--from-mint,
.mro-wave--from-soft { margin-top: -1px; }
.mro-wave--to-mint,
.mro-wave--from-mint { fill: var(--wp--preset--color--mint); }
.mro-wave--to-soft,
.mro-wave--from-soft { fill: var(--wp--preset--color--mint-soft); }

.mro-wave--top-faint,
.mro-wave--top-ink {
	position: absolute;
	left: 0;
	bottom: 100%;
	margin-bottom: -1px;
}
.mro-wave--bottom-faint,
.mro-wave--bottom-ink {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: -1px;
	z-index: var(--wp--custom--layer--raised);
}
.mro-wave--top-faint,
.mro-wave--bottom-faint { fill: var(--wp--preset--color--mint-faint); }
.mro-wave--top-ink,
.mro-wave--bottom-ink { fill: var(--wp--preset--color--contrast); }

/* ---------- Motion used by several sections ---------- */
@keyframes mro-sway {
	from { transform: rotate(-3deg); }
	to { transform: rotate(3deg); }
}
@keyframes mro-pulse {
	0% { transform: scale(0.7); opacity: 0.7; }
	70%, 100% { transform: scale(1.6); opacity: 0; }
}
@keyframes mro-marquee { to { transform: translateX(-50%); } }