/*
Theme Name: MaturityBenefits
Theme URI: https://maturitybenefits.com/
Description: Custom block theme for MaturityBenefits.com. Calm, accessible and fast: navy, teal, ivory and gold, large readable type, no page builder.
Version: 1.1.0
Requires at least: 6.2
Requires PHP: 7.4
Author: MaturityBenefits.com
License: GPL-2.0-or-later
Text Domain: maturitybenefits-theme
*/

/* ==========================================================================
   MaturityBenefits design system
   Tokens come from theme.json (--wp--preset--*). Components below.
   ========================================================================== */
:root {
	--mb-radius: 14px;
	--mb-radius-lg: 24px;
	--mb-shadow: 0 1px 2px rgba(15, 34, 56, .06), 0 8px 24px rgba(15, 34, 56, .07);
	--mb-shadow-lg: 0 2px 4px rgba(15, 34, 56, .06), 0 24px 48px rgba(15, 34, 56, .12);
	--mb-focus: 3px solid #b08a3e;
	--mb-section: clamp(3.5rem, 7vw, 6rem);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a):focus-visible, :where(button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--mb-focus); outline-offset: 3px; border-radius: 4px; }
.skip-link:focus { background: #fff; color: var(--wp--preset--color--navy); padding: .75rem 1rem; z-index: 100000; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--wp--preset--color--teal); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Header ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.mb-site-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--wp--preset--color--line); }
.mb-site-header .wp-block-site-logo img { max-height: 46px; width: auto; }
.mb-site-header .wp-block-navigation-item__content { padding: .5rem .15rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.mb-site-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--teal); }
.mb-site-header .current-menu-item > .wp-block-navigation-item__content { box-shadow: inset 0 -2px 0 var(--wp--preset--color--gold); }
.mb-site-header .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 12px; padding: .5rem !important; min-width: 15rem !important; box-shadow: var(--mb-shadow); }
.mb-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem .75rem; border-radius: 8px; width: 100%; }
.mb-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--teal-tint); }
.mb-header-cta .wp-block-button__link { padding: .7rem 1.15rem; font-size: .975rem; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ivory) !important; padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: .75rem 0; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; justify-content: center; }
@media (max-width: 781px) { .mb-site-header .wp-block-buttons.mb-header-cta { display: none !important; } }

/* ---------- Generic section rhythm ---------- */
.mb-band { padding-top: var(--mb-section) !important; padding-bottom: var(--mb-section) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.mb-band--tight { padding-top: clamp(2.5rem, 5vw, 4rem) !important; padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.mb-bg-ivory { background: var(--wp--preset--color--ivory); }
.mb-bg-white { background: #fff; }
.mb-bg-sand { background: var(--wp--preset--color--sand); }
.mb-bg-navy { background: var(--wp--preset--color--navy); color: #e9edf3; }
.mb-bg-navy :where(h1, h2, h3) { color: #fff; }
.mb-bg-navy a:not(.wp-block-button__link) { color: #fff; }
main > .wp-block-post-content > * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.mb-head-flush { margin-bottom: 0 !important; }
.wp-block-post-content > .alignfull + .alignfull { margin-top: 0; }

.mb-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .8125rem !important; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--wp--preset--color--teal); margin-bottom: .25rem !important; }
.mb-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--wp--preset--color--gold); }
.mb-bg-navy .mb-eyebrow { color: #e5cf9a; }
.mb-lead { font-size: var(--wp--preset--font-size--large) !important; color: var(--wp--preset--color--muted); max-width: 40rem; }
.mb-bg-navy .mb-lead { color: #c9d3e0; }
.mb-section-head { margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.mb-section-head > * { max-width: 44rem; margin-left: 0 !important; }
.mb-section-head h2 { margin-top: .5rem; font-size: clamp(1.875rem, 3.4vw, 2.625rem); }
.mb-center { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.mb-center .mb-eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; min-height: 48px; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(36, 99, 95, .25); }
.is-style-mb-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--navy); box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy); }
.is-style-mb-ghost .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: #fff; box-shadow: none; }
.is-style-mb-light .wp-block-button__link { background: #fff; color: var(--wp--preset--color--navy); }
.is-style-mb-light .wp-block-button__link:hover { background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--navy); }
.mb-link-arrow { font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; gap: .4rem; }
.mb-link-arrow::after { content: "→"; transition: transform .15s ease; }
.mb-link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Hero ---------- */
.mb-hero { background: linear-gradient(180deg, var(--wp--preset--color--ivory) 0%, #f6f1e5 100%); overflow: hidden; }
.mb-hero .wp-block-columns { align-items: center !important; gap: clamp(2rem, 5vw, 4.5rem); }
.mb-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.06; margin: .75rem 0 1.25rem; }
.mb-hero .mb-lead { margin-bottom: 2rem; }
.mb-trust { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; font-size: .975rem; color: var(--wp--preset--color--ink); }
.mb-trust li { display: inline-flex; align-items: center; gap: .5rem; }
.mb-trust svg { color: var(--wp--preset--color--teal); flex: none; }
.mb-hero-media { position: relative; }
.mb-hero-media .wp-block-image { margin: 0; }
.mb-hero-media .wp-block-image img { border-radius: var(--mb-radius-lg); box-shadow: var(--mb-shadow-lg); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mb-hero-media::before { content: ""; position: absolute; inset: auto -2.5rem -2.5rem auto; width: 70%; height: 70%; border-radius: var(--mb-radius-lg); background: var(--wp--preset--color--teal-tint); z-index: 0; }
.mb-hero-media > * { position: relative; z-index: 1; }
.mb-float-card { position: absolute !important; left: -2rem; bottom: 2rem; z-index: 2 !important; background: #fff; border-radius: var(--mb-radius); box-shadow: var(--mb-shadow-lg); padding: 1rem 1.25rem !important; display: flex; gap: .85rem; align-items: center; max-width: 18rem; }
.mb-float-card p { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--wp--preset--color--ink); }
.mb-float-card strong { display: block; color: var(--wp--preset--color--navy); font-size: 1rem; }
@media (max-width: 781px) {
	.mb-hero-media { margin-top: 1rem; }
	.mb-hero-media::before { inset: auto -1rem -1rem auto; }
	.mb-float-card { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
	.mb-hero-media .wp-block-image img { aspect-ratio: 4 / 3.4; }
}

/* ---------- Icon chip ---------- */
.mb-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal); flex: none; }
.mb-icon svg { width: 1.5rem; height: 1.5rem; }
.mb-icon--gold { background: var(--wp--preset--color--gold-tint); color: #8a6a28; }
.mb-icon--navy { background: rgba(255,255,255,.08); color: #e5cf9a; }

/* ---------- Cards ---------- */
.mb-grid { display: grid !important; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.mb-grid > * { margin: 0 !important; }
.mb-card { position: relative; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--mb-radius); padding: 1.75rem !important; display: flex !important; flex-direction: column; gap: .85rem; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mb-card:hover, .mb-card:focus-within { border-color: #cdbf9f; box-shadow: var(--mb-shadow); transform: translateY(-2px); }
.mb-card h3 { margin: .25rem 0 0; font-size: 1.3rem; }
.mb-card p { margin: 0; color: var(--wp--preset--color--muted); font-size: 1.0125rem; }
.mb-card .mb-link-arrow { margin-top: auto; padding-top: .5rem; }
.mb-card .mb-link-arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card clickable */
.mb-bg-navy .mb-card { background: var(--wp--preset--color--navy-soft); border-color: rgba(255,255,255,.1); }
.mb-bg-navy .mb-card p { color: #c9d3e0; }
.mb-bg-navy .mb-card h3 { color: #fff; }
.mb-bg-navy .mb-card .mb-link-arrow { color: #e5cf9a; }
.mb-bg-navy .mb-card:hover { border-color: rgba(229, 207, 154, .5); }

/* ---------- Split comparison ---------- */
.mb-split .wp-block-columns { gap: clamp(2rem, 5vw, 4rem); align-items: center !important; }
.mb-kind { border-radius: var(--mb-radius); padding: 1.75rem !important; border: 1px solid; }
.mb-kind--gov { background: #eaf0f6; border-color: #c5d3e2; }
.mb-kind--product { background: var(--wp--preset--color--gold-tint); border-color: #e2cf9f; }
.mb-kind h3 { margin: 0 0 .75rem; display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; }
.mb-kind ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.mb-kind li { padding-left: 1.6rem; position: relative; }
.mb-kind li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; opacity: .5; }
.mb-kind + .mb-kind { margin-top: 1rem !important; }
.mb-pill { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; font-family: var(--wp--preset--font-family--sans); }
.mb-kind--gov .mb-pill { background: #fff; color: #23466e; }
.mb-kind--product .mb-pill { background: #fff; color: #7a5b1c; }

/* ---------- Steps ---------- */
.mb-steps { counter-reset: step; }
.mb-step { position: relative; padding-top: 3.75rem !important; }
.mb-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--wp--preset--font-family--serif); font-size: 2.75rem; line-height: 1; color: var(--wp--preset--color--gold); font-weight: 500; }
.mb-step h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.mb-step p { margin: 0; color: var(--wp--preset--color--muted); }
.mb-step { border-top: 1px solid var(--wp--preset--color--line); padding-top: 4.5rem !important; }
.mb-step::before { top: 1.25rem; }

/* ---------- Principles ---------- */
.mb-principle { display: flex !important; gap: 1rem; align-items: flex-start; }
.mb-principle h3 { margin: 0 0 .25rem; font-size: 1.125rem; font-family: var(--wp--preset--font-family--sans); font-weight: 600; letter-spacing: 0; }
.mb-principle p { margin: 0; color: var(--wp--preset--color--muted); font-size: 1rem; }
.mb-quote { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.6rem, 3vw, 2.25rem) !important; line-height: 1.3; color: var(--wp--preset--color--navy); font-weight: 500; }

/* ---------- CTA banner ---------- */
.mb-cta { background: var(--wp--preset--color--teal); color: #fff; border-radius: var(--mb-radius-lg); padding: clamp(2rem, 5vw, 3.5rem) !important; position: relative; overflow: hidden; }
.mb-cta::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 16rem; height: 16rem; border-radius: 50%; border: 40px solid rgba(255,255,255,.07); }
.mb-cta h2 { color: #fff; margin: 0 0 .5rem; }
.mb-cta p { color: #dcebe8; margin: 0; }
.mb-cta .wp-block-columns { align-items: center !important; }

/* ---------- Disclaimer note ---------- */
.mb-note { display: flex !important; gap: .85rem; align-items: flex-start; font-size: .9375rem; color: var(--wp--preset--color--muted); }
.mb-note p { margin: 0; }

/* ---------- Inner page hero & prose ---------- */
.mb-page-hero { background: linear-gradient(180deg, var(--wp--preset--color--ivory) 0%, var(--wp--preset--color--sand) 100%); border-bottom: 1px solid var(--wp--preset--color--line); }
.mb-page-hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); margin: .5rem 0 .75rem; }
.mb-page-hero .mb-lead { margin: 0; }
.mb-prose { font-size: 1.125rem; }
.mb-prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--wp--preset--color--line); }
.mb-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mb-prose ul { padding-left: 1.25rem; }
.mb-prose li { margin: .4rem 0; }
.mb-prose li::marker { color: var(--wp--preset--color--gold); }
.mb-callout { background: var(--wp--preset--color--teal-tint); border-left: 4px solid var(--wp--preset--color--teal); border-radius: 0 var(--mb-radius) var(--mb-radius) 0; padding: 1.25rem 1.5rem !important; }
.mb-callout--gold { background: var(--wp--preset--color--gold-tint); border-left-color: var(--wp--preset--color--gold); }
.mb-callout p { margin: 0; }

/* ---------- Footer ---------- */
.mb-site-footer { background: var(--wp--preset--color--navy); color: #c9d3e0; }
.mb-site-footer .wp-block-site-title a { color: #fff; text-decoration: none; }
.mb-site-footer h2 { color: #e5cf9a !important; font-family: var(--wp--preset--font-family--sans) !important; font-size: .8125rem !important; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; }
.mb-site-footer a { color: #e9edf3; text-decoration: none; }
.mb-site-footer a:hover { color: #fff; text-decoration: underline; }
.mb-site-footer ul { list-style: none; padding: 0; margin: 0; }
.mb-site-footer li { margin: .55rem 0; font-size: 1rem; }
.mb-site-footer .wp-block-separator { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.12) !important; opacity: 1; height: 1px; border: 0; }

/* ---------- Search, forms ---------- */
.wp-block-search__input { min-height: 48px; border: 2px solid #8a94a3; border-radius: 8px; font-size: 1.0625rem; padding: .5rem .85rem; }
.wp-block-search__button { min-height: 48px; }
.wp-block-post-title a { text-decoration: none; }