/*
Theme Name: Miriam Maternity
Theme URI: https://miriammaternity.com
Author: Miriam Maternity
Description: Calm, warm child theme for Miriam Maternity - mindful antenatal education with a midwife. Built on Twenty Twenty-Five.
Template: twentytwentyfive
Version: 1.0.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miriam-maternity
*/

/* ---------------------------------------------------------------
   Miriam Maternity - supplementary styles
   Palette and typography live in theme.json; this file covers the
   few things block styles cannot express cleanly.
   --------------------------------------------------------------- */

:root {
	--mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Site title uses the script accent only where it is decorative. */
.mm-script {
	font-family: "Marck Script", "Josefin Sans", cursive;
	font-weight: 400;
}

/* Hero ------------------------------------------------------------ */

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

.mm-hero h1 {
	text-wrap: balance;
	letter-spacing: -0.01em;
}

.mm-hero p {
	text-wrap: pretty;
	max-width: 44ch;
}

/* Soft rounded imagery, consistent across blocks ------------------ */

.mm-round img,
.wp-block-image.mm-round img {
	border-radius: 999px;
}

.mm-soft img,
.wp-block-image.mm-soft img,
.wp-block-cover.mm-soft {
	border-radius: 18px;
}

/* Service / feature cards ----------------------------------------- */

.mm-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--teal) 26%, transparent);
	border-radius: 18px;
	background: var(--wp--preset--color--base);
	transition: transform 0.35s var(--mm-ease), box-shadow 0.35s var(--mm-ease);
}

/* Equal-height cards, but only when a card is alone in its column. Applying a
   percentage height to stacked cards makes each one claim the full column. */
.wp-block-column > .mm-card:only-child {
	height: 100%;
}

.mm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px -18px rgba(40, 26, 57, 0.4);
}

.mm-card h3 {
	margin-top: 0;
}

/* Numbered "why choose us" markers */
.mm-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.6rem;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--teal) 70%, transparent);
	display: block;
	margin-bottom: 0.35rem;
}

/* Testimonials ---------------------------------------------------- */

.mm-quote {
	border: 0;
	border-left: 3px solid var(--wp--preset--color--teal);
	padding: 0.2rem 0 0.2rem 1.4rem;
	margin: 0;
	font-style: normal;
}

.mm-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-style: normal;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* Reviews use CSS multi-column so the two columns self-balance. Splitting them
   into two block columns by hand leaves one side much longer, and would need
   re-balancing by hand every time a review is added. */
.mm-reviews {
	column-count: 2;
	column-gap: 1.5rem;
}

@media (max-width: 781px) {
	.mm-reviews {
		column-count: 1;
	}
}

/* Review cards keep their own quieter treatment.
   Note: no `height: 100%` here. These cards stack inside a flex column, whose
   stretched height is definite, so a percentage height makes every card claim
   the whole column instead of its own content height. */
.mm-review {
	/* inline-block keeps a card from being split across the column break */
	display: inline-block;
	width: 100%;
	background: var(--wp--preset--color--surface);
	border-radius: 18px;
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	margin-bottom: 1.25rem;
	font-size: 1rem;
	line-height: 1.62;
	break-inside: avoid;
}

.mm-review p {
	margin: 0 0 0.7rem;
}

.mm-review p:last-of-type {
	margin-bottom: 0;
}

.mm-review .mm-review-cite {
	margin-top: 1rem;
}

.mm-review cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--teal-deep);
}

/* Buttons --------------------------------------------------------- */

.wp-block-button__link {
	transition: transform 0.25s var(--mm-ease), background-color 0.25s var(--mm-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Contact details list -------------------------------------------- */

.mm-contact-line {
	display: flex;
	gap: 0.65rem;
	align-items: baseline;
}

.mm-contact-line strong {
	min-width: 5.5rem;
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Contact Form 7 - make it look like it belongs ------------------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--teal-deep);
	outline-offset: 1px;
	border-color: transparent;
}

.wpcf7 label {
	display: block;
	margin-bottom: 1rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
}

.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--teal-deep);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2.2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: transform 0.25s var(--mm-ease), background-color 0.25s var(--mm-ease);
}

.wpcf7 input[type="submit"]:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--ink);
}

/* Accessibility: never suppress focus rings */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-deep);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}