/*
Theme Name: More Than Care
Theme URI: https://mtc.princedev.co.uk
Author: More Than Care
Author URI: https://mtc.princedev.co.uk
Description: A warm, branded theme for More Than Care — a domiciliary care provider. Designed to feel human and approachable rather than corporate, with a soft butterfly-inspired palette, generous whitespace, and full block-editor support for content built in Gutenberg.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
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: morethancare
Tags: one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. CSS Custom Properties — Brand tokens
   ========================================================================== */
:root {
	/* Brand palette — pulled from the butterfly logo */
	--mtc-navy:        #163A5F;   /* "MORE THAN CARE" wordmark navy */
	--mtc-navy-deep:   #0E2540;
	--mtc-teal:        #3DB5B5;   /* upper-wing teal */
	--mtc-teal-bright: #4FCBC8;   /* highlight teal */
	--mtc-teal-soft:   #BFE7E5;
	--mtc-leaf:        #5FB35A;   /* lower-wing leaf green */
	--mtc-leaf-bright: #7BC972;
	--mtc-leaf-soft:   #CDEAC8;
	--mtc-sky:         #5DA8C2;   /* secondary, used sparingly */
	--mtc-sky-soft:    #C5E0EA;
	--mtc-cream:       #FAF6F0;
	--mtc-surface:     #EEF7F4;   /* slightly green-tinted surface */
	--mtc-white:       #FFFFFF;
	--mtc-text:        #2A3F5C;
	--mtc-muted:       #6B7B92;
	--mtc-border:      #DDEEEB;   /* matches surface tint */
	--mtc-warm-accent: #F5D9B8;

	/* Typography */
	--mtc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--mtc-font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Scale */
	--mtc-radius-sm: 8px;
	--mtc-radius:    16px;
	--mtc-radius-lg: 28px;
	--mtc-radius-xl: 40px;

	/* Shadows — soft, never harsh */
	--mtc-shadow-sm: 0 2px 6px rgba(31, 58, 95, 0.06);
	--mtc-shadow:    0 12px 32px -12px rgba(31, 58, 95, 0.18);
	--mtc-shadow-lg: 0 24px 60px -20px rgba(31, 58, 95, 0.25);

	/* Layout */
	--mtc-container:     1280px;
	--mtc-container-wide: 1280px;
	--mtc-gutter:        clamp(1.25rem, 4vw, 2.5rem);

	/* Motion */
	--mtc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--mtc-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mtc-text);
	background: var(--mtc-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";
}

/* Faint pastel teal/leaf blobs scattered across the viewport — atmospheric
   brand-tinted backdrop. Positioned relative to the viewport (fixed) so the
   blobs stay anchored as you scroll, never overpowering the content. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55vw 40vh at 92% 8%,  rgba(61, 181, 181, 0.10), transparent 55%),
		radial-gradient(ellipse 50vw 35vh at 8% 32%,  rgba(95, 179, 90, 0.08),  transparent 55%),
		radial-gradient(ellipse 45vw 35vh at 88% 65%, rgba(95, 179, 90, 0.09),  transparent 50%),
		radial-gradient(ellipse 50vw 40vh at 5% 92%,  rgba(61, 181, 181, 0.09), transparent 55%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
	color: var(--mtc-navy);
	text-decoration: none;
	transition: color 0.2s var(--mtc-ease), opacity 0.2s var(--mtc-ease);
}

a:hover, a:focus-visible {
	color: var(--mtc-teal);
}

:focus-visible {
	outline: 3px solid var(--mtc-sky);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mtc-font-display);
	font-weight: 500;
	color: var(--mtc-navy);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}

h1 { font-size: clamp(2rem, 4.2vw + 0.4rem, 3.5rem); font-variation-settings: "opsz" 144, "SOFT" 80; }
h2 { font-size: clamp(1.5rem, 2.5vw + 0.4rem, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.3vw + 0.4rem, 1.55rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mtc-font-body); font-weight: 600; color: var(--mtc-teal); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.mtc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--mtc-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mtc-teal);
	margin-bottom: 1rem;
}

.mtc-eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
}

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */
.mtc-container {
	width: 100%;
	max-width: var(--mtc-container);
	margin: 0 auto;
	padding-inline: var(--mtc-gutter);
}

.mtc-container--wide { max-width: var(--mtc-container-wide); }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem; top: 1rem;
	background: var(--mtc-navy);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--mtc-radius-sm);
	transform: translateY(-150%);
	transition: transform 0.2s var(--mtc-ease);
	z-index: 9999;
}

.skip-link:focus { transform: translateY(0); color: #fff; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.mtc-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.5em;
	border-radius: 999px;
	font-family: var(--mtc-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.2s var(--mtc-ease), box-shadow 0.2s var(--mtc-ease), background 0.2s var(--mtc-ease), color 0.2s var(--mtc-ease);
	text-decoration: none;
}

.mtc-btn--primary,
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link {
	background: var(--mtc-navy);
	color: #fff;
	box-shadow: var(--mtc-shadow-sm);
}

.mtc-btn--primary:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link:hover {
	background: var(--mtc-teal);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--mtc-shadow);
}

.mtc-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--mtc-navy);
	border-color: var(--mtc-navy);
}

.mtc-btn--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--mtc-navy);
	color: #fff;
}

.mtc-btn--ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--mtc-navy);
	border-color: transparent;
	padding-inline: 0.5em;
}

.mtc-btn--ghost::after { content: "→"; transition: transform 0.2s var(--mtc-ease); }
.mtc-btn--ghost:hover::after { transform: translateX(4px); }

/* ==========================================================================
   6. Header
   ========================================================================== */
.mtc-topbar {
	background: var(--mtc-navy);
	color: rgba(255,255,255,0.92);
	font-size: 0.85rem;
	padding: 0.6rem 0;
	font-weight: 500;
}

.mtc-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

.mtc-topbar__contact {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.mtc-topbar__contact a,
.mtc-topbar__hours {
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.mtc-topbar__contact a:hover { color: var(--mtc-teal-soft); }

/* Size all inline icon SVGs to match the surrounding text — without this,
   <svg class="icon"> with no width/height attrs falls back to the browser
   default (300×150) and blows up the layout. */
svg.icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.mtc-topbar svg.icon { width: 0.95em; height: 0.95em; opacity: 0.85; }

/* Mobile topbar — drop the opening hours and the italic tagline so just the
   phone + email survive on a single tidy row. */
@media (max-width: 700px) {
	.mtc-topbar__hours,
	.mtc-topbar__motto {
		display: none;
	}
	.mtc-topbar__inner {
		justify-content: center;
	}
}

.mtc-topbar__motto {
	font-family: var(--mtc-font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--mtc-teal-soft);
}

.mtc-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background:
		linear-gradient(135deg,
			#C9E4ED 0%,
			#8FCBDC 35%,
			#4DB6B6 75%,
			#5FB35A 100%);
	border-bottom: 1px solid transparent;
	transition: padding 0.25s var(--mtc-ease), box-shadow 0.25s var(--mtc-ease);
	overflow: hidden;
}

/* Soft green-leaf glow on the right side only — kept the right-hand glow as a
   nod to the poster's painted look, but removed the left-hand white radial that
   was bleaching the brand area and making the logo look faded. */
.mtc-header::after {
	content: "";
	position: absolute;
	bottom: -60%; right: -10%;
	width: 60%; height: 240%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(95, 179, 90, 0.22), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Faint dashed underline accent — subtle nod to the poster's dotted lines */
.mtc-header__accent {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(22, 58, 95, 0.18) 50%, transparent 50%);
	background-size: 8px 1px;
	background-repeat: repeat-x;
	pointer-events: none;
	z-index: 1;
}

.mtc-header.is-scrolled {
	box-shadow: var(--mtc-shadow);
}

.mtc-header.is-scrolled .mtc-header__inner {
	padding-block: 0.75rem;
}

.mtc-header.is-scrolled .mtc-branding__logo img,
.mtc-header.is-scrolled .mtc-branding__logo svg {
	max-height: 56px;
}

.mtc-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1.5rem;
	transition: padding-block 0.25s var(--mtc-ease);
}

.mtc-branding {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--mtc-font-display);
	color: var(--mtc-navy);
	margin-right: auto;
}

.mtc-branding__logo img,
.mtc-branding__logo svg {
	max-height: 88px;
	width: auto;
	display: block;
	transition: max-height 0.25s var(--mtc-ease);
}

/* When a custom logo is uploaded, the logo IS the wordmark — hide the text and let
   the logo go big. The header gradient gives it a poster-like canvas. */
.mtc-branding.has-custom-logo .mtc-branding__text { display: none; }
.mtc-branding.has-custom-logo .mtc-branding__logo img { max-height: 110px; }
.mtc-header.is-scrolled .mtc-branding.has-custom-logo .mtc-branding__logo img { max-height: 64px; }

/* Render the uploaded logo at full strength + a soft drop-shadow so it lifts
   off the gradient instead of visually blending into it. */
.mtc-branding__logo img,
.mtc-branding__logo-img,
.mtc-branding.has-custom-logo .mtc-branding__logo img,
.mtc-branding.has-custom-logo .mtc-branding__logo-img {
	mix-blend-mode: normal;
	opacity: 1;
	filter: drop-shadow(0 4px 16px rgba(22, 58, 95, 0.15));
}

.mtc-branding__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.mtc-branding__name {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mtc-branding__tag {
	font-family: var(--mtc-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mtc-teal);
	margin-top: 0.35em;
}

/* Primary nav */
.mtc-primary-nav {
	display: none;
}

.mtc-primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

.mtc-primary-nav a {
	display: inline-block;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	color: var(--mtc-navy);
	font-weight: 600;
	font-size: 0.98rem;
	position: relative;
}

.mtc-primary-nav a:hover,
.mtc-primary-nav .current-menu-item > a,
.mtc-primary-nav .current_page_item > a,
.mtc-primary-nav .current-menu-ancestor > a {
	background: rgba(255, 255, 255, 0.55);
	color: var(--mtc-navy);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Sub-menus */
.mtc-primary-nav .menu-item-has-children { position: relative; }

.mtc-primary-nav .menu-item-has-children > a::after {
	content: "▾";
	font-size: 0.7em;
	margin-left: 0.35em;
	opacity: 0.55;
}

.mtc-primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 240px;
	background: #fff;
	border-radius: var(--mtc-radius);
	box-shadow: var(--mtc-shadow-lg);
	padding: 0.5rem;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s var(--mtc-ease), transform 0.2s var(--mtc-ease), visibility 0.2s;
	border: 1px solid var(--mtc-border);
}

.mtc-primary-nav .menu-item-has-children:hover > .sub-menu,
.mtc-primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.mtc-primary-nav .sub-menu a {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: var(--mtc-radius-sm);
	width: 100%;
	font-size: 0.95rem;
}

.mtc-header__cta {
	display: none;
}

/* Mobile toggle */
.mtc-menu-toggle {
	margin-left: auto;
	background: var(--mtc-navy);
	border: 0;
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s var(--mtc-ease);
}

.mtc-menu-toggle:hover { background: var(--mtc-teal); }

.mtc-menu-toggle__icon,
.mtc-menu-toggle__icon::before,
.mtc-menu-toggle__icon::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.25s var(--mtc-ease), opacity 0.25s var(--mtc-ease);
	position: relative;
}

.mtc-menu-toggle__icon::before { position: absolute; top: -7px; }
.mtc-menu-toggle__icon::after  { position: absolute; top: 7px; }

body.mtc-menu-open .mtc-menu-toggle__icon { background: transparent; }
body.mtc-menu-open .mtc-menu-toggle__icon::before { transform: translateY(7px) rotate(45deg); }
body.mtc-menu-open .mtc-menu-toggle__icon::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer
   - z-index sits BELOW the header so the close-button remains tappable
   - padding-top clears the topbar + sticky header (with the larger logo) so
     menu items aren't hidden behind it */
.mtc-mobile-nav {
	position: fixed;
	inset: 0;
	background: var(--mtc-surface);
	z-index: 400;
	padding: clamp(11rem, 26vh, 14rem) var(--mtc-gutter) 3rem;
	transform: translateY(-100%);
	transition: transform 0.4s var(--mtc-ease);
	overflow-y: auto;
	visibility: hidden;
}

body.mtc-menu-open { overflow: hidden; }
body.mtc-menu-open .mtc-mobile-nav { transform: translateY(0); visibility: visible; }

/* When the mobile menu is open, pin the topbar to the top of the viewport
   (above the drawer's z-index) and shift the sticky header down by the
   topbar's measured height so the contact strip remains visible. */
body.mtc-menu-open .mtc-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 510;
}

body.mtc-menu-open .mtc-header {
	top: var(--mtc-topbar-height, 40px);
}

.mtc-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mtc-mobile-nav .sub-menu {
	margin-top: 0.5rem;
	margin-left: 1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--mtc-teal-soft);
	gap: 0;
}

/* Scope to menu-list links only — without this, the .mtc-btn CTAs inside
   .mtc-mobile-nav__cta inherit menu-link styles (navy text on the navy
   button = invisible) and the hover state turns the button grey. */
.mtc-mobile-nav ul a {
	display: block;
	padding: 0.85rem 1rem;
	font-family: var(--mtc-font-display);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--mtc-navy);
	border-radius: var(--mtc-radius);
}

.mtc-mobile-nav ul a:hover,
.mtc-mobile-nav .current-menu-item > a {
	background: var(--mtc-surface);
}

.mtc-mobile-nav .sub-menu a {
	font-family: var(--mtc-font-body);
	font-size: 1rem;
	font-weight: 500;
	padding-block: 0.55rem;
}

.mtc-mobile-nav__cta {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 980px) {
	.mtc-primary-nav { display: block; }
	.mtc-header__cta { display: inline-flex; }
	.mtc-menu-toggle { display: none; }
	.mtc-mobile-nav { display: none; }
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.mtc-footer {
	margin-top: 6rem;
	background: var(--mtc-navy);
	color: rgba(255,255,255,0.82);
	position: relative;
	overflow: hidden;
}

.mtc-footer::before {
	content: "";
	position: absolute;
	top: -180px; right: -180px;
	width: 480px; height: 480px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(61, 181, 181, 0.35), transparent 70%);
	pointer-events: none;
}

.mtc-footer::after {
	content: "";
	position: absolute;
	bottom: -240px; left: -160px;
	width: 520px; height: 520px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(95, 179, 90, 0.28), transparent 70%);
	pointer-events: none;
}

.mtc-footer__cta {
	background: linear-gradient(135deg, var(--mtc-teal) 0%, var(--mtc-leaf) 100%);
	color: #fff;
	padding: clamp(2.5rem, 5vw, 4rem);
	border-radius: var(--mtc-radius-xl);
	/* Sits cleanly inside the navy footer band with breathing room above and
	   below — no longer pulled up out of the footer (was clashing with the
	   per-page CTA banners that pages typically end with). */
	margin-top: 3.5rem;
	margin-bottom: 3.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
	box-shadow: var(--mtc-shadow-lg);
	position: relative;
	z-index: 1;
}

.mtc-footer__cta h2 { color: #fff; margin: 0 0 0.4em; }
.mtc-footer__cta p { color: rgba(255,255,255,0.92); margin: 0; max-width: 52ch; }

.mtc-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mtc-footer__cta .mtc-btn--primary {
	background: #fff;
	color: var(--mtc-navy);
}

.mtc-footer__cta .mtc-btn--primary:hover {
	background: var(--mtc-navy);
	color: #fff;
}

.mtc-footer__cta .mtc-btn--outline {
	border-color: rgba(255,255,255,0.7);
	color: #fff;
}

.mtc-footer__cta .mtc-btn--outline:hover {
	background: #fff;
	color: var(--mtc-navy);
	border-color: #fff;
}

@media (min-width: 820px) {
	.mtc-footer__cta {
		grid-template-columns: 1.4fr 1fr;
	}
	.mtc-footer__cta-actions { justify-content: flex-end; }
}

.mtc-footer__main {
	display: grid;
	gap: 2.5rem;
	padding-block: 3rem;
	position: relative;
	z-index: 1;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.mtc-footer__main { grid-template-columns: 1.5fr 1fr 1.4fr; }
}

@media (min-width: 1000px) {
	.mtc-footer__main { grid-template-columns: 1.6fr 1fr 1.4fr; }
}

.mtc-footer h4 {
	color: #fff;
	font-family: var(--mtc-font-display);
	font-size: 1.05rem;
	margin-bottom: 1.25rem;
	font-weight: 500;
}

.mtc-footer a {
	color: rgba(255,255,255,0.82);
}

.mtc-footer a:hover { color: var(--mtc-teal-soft); }

.mtc-footer__about p { font-size: 0.95rem; line-height: 1.7; max-width: 38ch; }

.mtc-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #fff;
	font-family: var(--mtc-font-display);
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.mtc-footer__brand img,
.mtc-footer__brand svg { max-height: 48px; width: auto; }

.mtc-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.mtc-footer__contact-item {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: 0.95rem;
}

.mtc-footer__contact-item .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	color: var(--mtc-teal-soft);
}

.mtc-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-block: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.65);
	position: relative;
	z-index: 1;
}

.mtc-footer__bottom ul {
	flex-direction: row;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.mtc-socials {
	display: flex;
	gap: 0.5rem;
}

.mtc-socials a {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background 0.2s var(--mtc-ease), transform 0.2s var(--mtc-ease);
}

.mtc-socials a:hover {
	background: var(--mtc-teal);
	transform: translateY(-2px);
	color: #fff;
}

.mtc-socials svg { width: 18px; height: 18px; }

/* ==========================================================================
   8. Page / posts / 404
   ========================================================================== */
/* Page hero — title band at the top of each non-home page. Darker, weightier
   typography to stand out, with a dotted-heart-and-trails SVG decoration in
   the upper right (matching the heart motif on the brand team poster). */
.mtc-page-hero {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 100%);
	padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(61, 181, 181, 0.18);
}

/* Soft teal blob — subtle background atmosphere for the hero band */
.mtc-page-hero::before {
	content: "";
	position: absolute;
	left: -160px; bottom: -160px;
	width: 420px; height: 420px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(61, 181, 181, 0.14), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Small dotted heart sitting just after each page title — brand motif from
   the team poster. Inline-block via ::after so it follows the last word of
   the H1 and respects line wrapping. Sized in em so it scales with the H1. */
.mtc-page-hero h1::after {
	content: "";
	display: inline-block;
	width: 0.82em;
	height: 0.82em;
	margin-left: 0.35em;
	vertical-align: -0.05em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23163A5F' stroke-width='4' stroke-linecap='round' stroke-dasharray='3 5'><path d='M 50 85 C 18 62, 8 38, 25 22 C 38 12, 50 22, 50 38 C 50 22, 62 12, 75 22 C 92 38, 82 62, 50 85 Z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.85;
}

.mtc-page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
}

.mtc-page-hero h1 {
	font-size: clamp(2rem, 4.5vw + 0.3rem, 3.6rem);
	color: var(--mtc-navy-deep);
	line-height: 1.05;
	margin-bottom: 0.45em;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}

.mtc-page-hero__lede {
	font-size: clamp(1rem, 0.8vw + 0.7rem, 1.2rem);
	color: var(--mtc-text);
	line-height: 1.5;
	max-width: 58ch;
	font-weight: 500;
}

.mtc-content-area {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.mtc-prose {
	max-width: 760px;
	margin: 0 auto;
}

.mtc-prose > * + * { margin-top: 1.25em; }
.mtc-prose h2 { margin-top: 2em; }
.mtc-prose h3 { margin-top: 1.6em; }

.mtc-prose blockquote {
	border-left: 4px solid var(--mtc-teal);
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
	font-family: var(--mtc-font-display);
	font-size: 1.4rem;
	font-style: italic;
	color: var(--mtc-navy);
}

.mtc-post-card {
	background: #fff;
	border-radius: var(--mtc-radius-lg);
	overflow: hidden;
	box-shadow: var(--mtc-shadow-sm);
	transition: transform 0.25s var(--mtc-ease), box-shadow 0.25s var(--mtc-ease);
	display: flex;
	flex-direction: column;
}

.mtc-post-card:hover { transform: translateY(-4px); box-shadow: var(--mtc-shadow); }

.mtc-post-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--mtc-surface); }
.mtc-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--mtc-ease); }
.mtc-post-card:hover .mtc-post-card__media img { transform: scale(1.05); }

.mtc-post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.mtc-post-card__meta { font-size: 0.82rem; color: var(--mtc-muted); }
.mtc-post-card__title { margin: 0; font-size: 1.25rem; }
.mtc-post-card__title a { color: var(--mtc-navy); }
.mtc-post-card__title a:hover { color: var(--mtc-teal); }
.mtc-post-card__more { margin-top: auto; }

.mtc-posts-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.mtc-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.mtc-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #fff;
	color: var(--mtc-navy);
	font-weight: 600;
	box-shadow: var(--mtc-shadow-sm);
	transition: background 0.2s var(--mtc-ease), color 0.2s var(--mtc-ease);
}

.mtc-pagination .page-numbers.current,
.mtc-pagination .page-numbers:hover {
	background: var(--mtc-navy);
	color: #fff;
}

.mtc-404 {
	text-align: center;
	padding: 6rem 0;
}

.mtc-404 .mtc-404__code {
	font-family: var(--mtc-font-display);
	font-size: clamp(6rem, 18vw, 12rem);
	font-weight: 500;
	color: var(--mtc-teal);
	line-height: 1;
	margin: 0;
	font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ==========================================================================
   9. Block editor — make Gutenberg pages look on-brand
   ========================================================================== */

/* Wide / full alignment */
.alignwide  { max-width: var(--mtc-container-wide); margin-inline: auto; }
.alignfull  { width: 100%; }

/* Default block spacing inside main */
.mtc-main > * { margin-block: 1.5rem; }
.mtc-main > .alignfull { margin-inline: 0; }

/* Constrain top-level page content to header content width (1280px) with
   the same gutter as the header container, so paragraphs/headings sitting
   directly under .entry-content can't overflow the viewport. Alignfull
   blocks break back out to viewport width. */
.entry-content {
	max-width: var(--mtc-container);
	margin-inline: auto;
	padding-inline: var(--mtc-gutter);
}

.entry-content > .alignfull {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* Vertical rhythm between top-level sections in Gutenberg-built pages.
   Adds breathing room so adjacent groups/columns/banners read as distinct
   sections instead of one continuous stream. */
.entry-content > * + * {
	margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

.entry-content > *:first-child { margin-block-start: 0; }
.entry-content > *:last-child  { margin-block-end:   0; }

/* Adjacent gradient/soft-band groups get extra space so they read as discrete
   bands rather than a single coloured slab. */
.entry-content > .wp-block-group.is-style-mtc-soft-band + .wp-block-group,
.entry-content > .wp-block-group.has-background + .wp-block-group {
	margin-block-start: clamp(3rem, 6vw, 5.5rem);
}

/* Group blocks with brand backgrounds */
.wp-block-group.has-background {
	border-radius: var(--mtc-radius-lg);
	padding: clamp(2rem, 5vw, 4rem);
}

.wp-block-group.alignfull.has-background {
	border-radius: 0;
}

/* Cover block softening */
.wp-block-cover {
	border-radius: var(--mtc-radius-lg);
	overflow: hidden;
	min-height: 520px;
}

.wp-block-cover.alignfull { border-radius: 0; }

.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3 { color: #fff; }

/* Image block — soft rounded by default */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--mtc-radius);
}

.wp-block-image.is-style-rounded img { border-radius: 50%; }

/* Custom image style — rounded rectangle. (Class slug kept as "mtc-organic"
   for backwards compatibility with existing page content; visual is a soft
   rounded square rather than the original asymmetric blob.) */
.wp-block-image.is-style-mtc-organic img {
	border-radius: var(--mtc-radius-lg);
}

/* Quote block */
.wp-block-quote, .wp-block-pullquote {
	font-family: var(--mtc-font-display);
	font-style: italic;
	font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
	color: var(--mtc-navy);
	border-left: 4px solid var(--mtc-teal);
	padding-left: 1.5rem;
	margin-block: 2rem;
}

.wp-block-pullquote {
	border-left: 0;
	border-top: 1px solid var(--mtc-border);
	border-bottom: 1px solid var(--mtc-border);
	padding: 2rem;
	text-align: center;
}

.wp-block-pullquote::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 1rem;
	background: var(--mtc-teal-soft);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17a4 4 0 01-4-4V8a4 4 0 014-4h2v3H7a1 1 0 00-1 1v1h3v8H7zm10 0a4 4 0 01-4-4V8a4 4 0 014-4h2v3h-2a1 1 0 00-1 1v1h3v8h-2z'/></svg>") center/contain no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17a4 4 0 01-4-4V8a4 4 0 014-4h2v3H7a1 1 0 00-1 1v1h3v8H7zm10 0a4 4 0 01-4-4V8a4 4 0 014-4h2v3h-2a1 1 0 00-1 1v1h3v8h-2z'/></svg>") center/contain no-repeat;
}

/* Tables */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	background: #fff;
	border-radius: var(--mtc-radius);
	overflow: hidden;
	box-shadow: var(--mtc-shadow-sm);
}

.wp-block-table th, .wp-block-table td {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--mtc-border);
	text-align: left;
}

.wp-block-table th { background: var(--mtc-surface); color: var(--mtc-navy); font-weight: 600; }
.wp-block-table tr:last-child td { border-bottom: 0; }

/* Gallery / columns gap */
.wp-block-columns { gap: 1.75rem; }

/* Card-style group — subtle brand tint, soft top accent edge */
.wp-block-group.is-style-mtc-card {
	position: relative;
	background: linear-gradient(180deg, #F4FBF9 0%, #FFFFFF 80%);
	border-radius: var(--mtc-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--mtc-shadow-sm);
	border: 1px solid var(--mtc-border);
	overflow: hidden;
	transition: transform 0.25s var(--mtc-ease), box-shadow 0.25s var(--mtc-ease);
	height: 100%;  /* fill column so cards in a row are equal-height */
}

/* Slim teal accent strip at the top of every card */
.wp-block-group.is-style-mtc-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mtc-teal) 0%, var(--mtc-leaf) 100%);
}

.wp-block-group.is-style-mtc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mtc-shadow);
}

/* Card columns: render as a 2-column CSS grid that wraps to a single column
   on small screens. A lone last card (odd count) spans both columns so there's
   no awkward half-width orphan in the final row. */
.wp-block-columns:has(> .wp-block-column > .wp-block-group.is-style-mtc-card) {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 1.5rem !important;
	flex-wrap: nowrap !important;
}

.wp-block-columns:has(> .wp-block-column > .wp-block-group.is-style-mtc-card) > .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}

.wp-block-columns:has(> .wp-block-column > .wp-block-group.is-style-mtc-card) > .wp-block-column:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.wp-block-columns:has(> .wp-block-column > .wp-block-group.is-style-mtc-card) {
		grid-template-columns: 1fr !important;
	}
}

/* Soft-band group — elevated white card on the teal-tinted page bg */
.wp-block-group.is-style-mtc-soft-band {
	background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 100%);
	border-radius: var(--mtc-radius-xl);
	padding: clamp(2rem, 5vw, 4.5rem);
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 40px -16px rgba(22, 58, 95, 0.10);
	border: 1px solid var(--mtc-border);
}

.wp-block-group.is-style-mtc-soft-band::before {
	content: "";
	position: absolute;
	top: -100px; right: -100px;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: rgba(61, 181, 181, 0.14);
	pointer-events: none;
}

.wp-block-group.is-style-mtc-soft-band::after {
	content: "";
	position: absolute;
	bottom: -120px; left: -80px;
	width: 240px; height: 240px;
	border-radius: 50%;
	background: rgba(95, 179, 90, 0.12);
	pointer-events: none;
}

/* Heading mark / accent */
.has-text-align-center .mtc-eyebrow { justify-content: center; }

mark, .mtc-mark {
	background: linear-gradient(180deg, transparent 60%, var(--mtc-teal-soft) 60%);
	padding: 0 0.15em;
	color: inherit;
}

/* Success-stories cards — alternating tinted backgrounds with rounded edges
   to make each story feel like its own contained section. */
.mtc-story {
	border-radius: var(--mtc-radius-lg);
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--mtc-border);
	overflow: hidden;
}

.mtc-story--A {
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(191, 231, 229, 0.30) 100%);
}

.mtc-story--B {
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(205, 234, 200, 0.30) 100%);
}

/* Third-party widget containers — clean on-brand frame for CQC + Facebook */
.mtc-cqc-widget,
.mtc-fb-feed {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 1.5rem;
	background: var(--mtc-white);
	border: 1px solid var(--mtc-border);
	border-radius: var(--mtc-radius);
	box-shadow: var(--mtc-shadow-sm);
	margin-top: 1rem;
	min-height: 120px;
}

.mtc-cqc-widget iframe,
.mtc-cqc-widget > div,
.mtc-fb-feed iframe,
.mtc-fb-feed > div {
	max-width: 100%;
}

.mtc-fb-feed {
	min-height: 720px;
	overflow: hidden;
}

/* Wide variant — wrapper spans full container width with the FB iframe
   centered inside (Facebook caps the embed itself at 500px). */
.mtc-fb-feed--wide {
	width: 100%;
	padding: clamp(1.5rem, 4vw, 3rem);
}

.mtc-fb-feed .fb-page,
.mtc-fb-feed .fb-page > span,
.mtc-fb-feed .fb-page iframe {
	width: 100% !important;
	max-width: 500px;
	margin: 0 auto;
}

.mtc-fb-feed blockquote {
	font-style: italic;
	color: var(--mtc-muted);
	margin: 0;
	padding: 1rem;
	text-align: center;
}

/* ==========================================================================
   10. Animations / motion (respect reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   11. Comments (basic, on-brand)
   ========================================================================== */
.comments-area {
	max-width: 760px;
	margin: 4rem auto 0;
	padding-top: 3rem;
	border-top: 1px solid var(--mtc-border);
}

.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--mtc-border); }
.comment-author { font-weight: 600; color: var(--mtc-navy); }
.comment-metadata { font-size: 0.82rem; color: var(--mtc-muted); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--mtc-border);
	border-radius: var(--mtc-radius-sm);
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var(--mtc-text);
	margin-top: 0.4rem;
	transition: border-color 0.2s var(--mtc-ease);
}

.comment-form textarea { min-height: 140px; }

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--mtc-teal);
	box-shadow: 0 0 0 4px rgba(61, 181, 181, 0.18);
}

.comment-form p { margin-bottom: 1rem; }

/* ==========================================================================
   12. WP core utility classes (bring-aboard)
   ========================================================================== */
.alignleft  { float: left;  margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { margin-bottom: 1.5rem; max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: 0.85rem; color: var(--mtc-muted); margin-top: 0.5rem; text-align: center; }
.bypostauthor { /* hook for styling author posts */ }
.sticky { position: relative; }
.sticky::before {
	content: "Featured";
	position: absolute;
	top: 1rem; right: 1rem;
	background: var(--mtc-teal);
	color: #fff;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	z-index: 2;
}