/* ==========================================================================
   Mpower U Wellness: base + components (uses tokens.css)
   ========================================================================== */

/* ---- Reset-ish & base ---- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html:not(.mu-motion-force) *, html:not(.mu-motion-force) *::before, html:not(.mu-motion-force) *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
	margin: 0;
	background: var(--mu-bg);
	color: var(--mu-text);
	font-family: var(--mu-font-body);
	font-size: var(--mu-fs-body);
	font-weight: var(--mu-weight-regular);
	line-height: var(--mu-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mu-font-heading);
	font-weight: var(--mu-weight-heading);
	color: var(--mu-heading);
	line-height: var(--mu-lh-head);
	letter-spacing: -0.01em;
	margin: 0 0 var(--mu-space-4);
}
h1 { font-size: var(--mu-fs-h1); }
h2 { font-size: var(--mu-fs-h2); }
h3 { font-size: var(--mu-fs-h3); }
h4 { font-size: var(--mu-fs-h4); }
p  { margin: 0 0 var(--mu-space-4); }
.mu-lead { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-weight: var(--mu-weight-light); }
.mu-small { font-size: var(--mu-fs-small); }

.mu-eyebrow {
	display: inline-block;
	font-size: var(--mu-fs-label);
	font-weight: var(--mu-weight-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mu-deep-teal);
	margin-bottom: var(--mu-space-3);
}

a { color: var(--mu-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--mu-dur) var(--mu-ease); }
a:hover { color: var(--mu-deep-teal-dark); text-decoration-thickness: 2px; }

/* ---- Focus (visible, keyboard-friendly) ---- */
:focus-visible {
	outline: 3px solid var(--mu-focus);
	outline-offset: 3px;
	border-radius: 4px;
	box-shadow: 0 0 0 6px #fff;
}
.mu-on-dark :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--mu-deep-teal); }

/* ---- Skip link ---- */
.mu-skip-link {
	position: absolute; left: var(--mu-space-4); top: -100px; z-index: 10000;
	background: var(--mu-deep-teal); color: #fff; padding: var(--mu-space-3) var(--mu-space-5);
	border-radius: var(--mu-radius-s); text-decoration: none; font-weight: var(--mu-weight-medium);
}
.mu-skip-link:focus { top: var(--mu-space-4); color: #fff; }

/* ---- Layout helpers ---- */
.mu-container { width: 100%; max-width: var(--mu-container); margin-inline: auto; padding-inline: var(--mu-gutter); }
.mu-container--narrow { max-width: var(--mu-container-narrow); }
.mu-section { padding-block: var(--mu-section-y); position: relative; overflow: hidden; overflow: clip; }
.mu-section--ivory { background: var(--mu-ivory); }
.mu-section--sand  { background: var(--mu-sand); }
.mu-section--stone { background: var(--mu-stone); }
.mu-section--teal  { background: var(--mu-deep-teal); color: #fff; }
.mu-section--teal h1, .mu-section--teal h2, .mu-section--teal h3, .mu-section--teal h4 { color: #fff; }
.mu-section--teal a { color: #fff; }
.mu-section--teal a.mu-btn--gold, .mu-section--teal a.mu-btn--gold:hover { color: var(--mu-slate); }   /* slate on gold = 5.3:1 */
.mu-section--teal a.mu-btn--light, .mu-section--teal a.mu-btn--light:hover { color: var(--mu-deep-teal); }
.mu-section--teal .mu-eyebrow { color: var(--mu-sand); }  /* sand on deep teal = 5.2:1 */
.mu-grid { display: grid; gap: var(--mu-space-5); }
.mu-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.mu-stack > * + * { margin-top: var(--mu-space-4); }

/* ---- Buttons ---- */
.mu-btn, .elementor-button.mu-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--mu-space-2);
	min-height: var(--mu-tap-min); padding: 0.75rem 1.75rem;
	font-family: var(--mu-font-body); font-size: 1rem; font-weight: var(--mu-weight-medium); line-height: 1.2;
	border: 1px solid transparent; border-radius: var(--mu-radius-pill);
	text-decoration: none; cursor: pointer;
	transition: background-color 300ms var(--mu-ease), color 300ms var(--mu-ease), border-color 300ms var(--mu-ease), transform 300ms var(--mu-ease), box-shadow 300ms var(--mu-ease);
}
.mu-btn:hover { transform: translateY(-1px); text-decoration: none; }
.mu-btn--primary { background: var(--mu-deep-teal); color: #fff; box-shadow: var(--mu-shadow-s); }
.mu-btn--primary:hover { background: var(--mu-gold); color: var(--mu-slate); box-shadow: var(--mu-shadow-m); }
.mu-btn--outline { background: transparent; color: var(--mu-deep-teal); border-color: var(--mu-gold); }
.mu-btn--outline:hover { background: var(--mu-gold); color: var(--mu-slate); }
.mu-btn--gold { background: var(--mu-gold); color: var(--mu-slate); }          /* slate on gold = 5.3:1 */
.mu-btn--gold:hover { background: #fff; color: var(--mu-deep-teal); }
.mu-btn--light { background: #fff; color: var(--mu-deep-teal); }                /* for dark sections */
.mu-btn--light:hover { background: var(--mu-gold); color: var(--mu-slate); }
.mu-link-arrow { font-weight: var(--mu-weight-medium); text-decoration: none; display: inline-flex; gap: .4em; align-items: center; min-height: 44px; }
.mu-link-arrow::after { content: "→"; transition: transform var(--mu-dur) var(--mu-ease); }
.mu-link-arrow:hover::after { transform: translateX(4px); }

/* ---- Cards ---- */
.mu-card {
	background: #fff; border: 1px solid var(--mu-border); border-radius: var(--mu-radius-l);
	box-shadow: var(--mu-shadow-s); overflow: hidden; display: flex; flex-direction: column;
	transition: transform var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease);
}
.mu-card:hover { transform: translateY(-2px); box-shadow: var(--mu-shadow-m); }
.mu-card--sand { background: var(--mu-sand); border-color: transparent; }
.mu-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mu-stone); }
.mu-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-card__body { padding: var(--mu-space-5); display: flex; flex-direction: column; gap: var(--mu-space-3); flex: 1; }
.mu-card__body h3 { margin: 0; }
.mu-card__body p { margin: 0; }
.mu-card__body .mu-link-arrow { margin-top: auto; }

/* Image slot (swap-friendly: fixed ratio + cover) */
.mu-slot { overflow: hidden; border-radius: var(--mu-radius-l); background: var(--mu-stone); }
.mu-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-slot--4x5 { aspect-ratio: 4 / 5; }
.mu-slot--16x9 { aspect-ratio: 16 / 9; }
.mu-slot--1x1 { aspect-ratio: 1 / 1; }

/* ---- Forms ---- */
.mu-field { display: flex; flex-direction: column; gap: var(--mu-space-2); margin-bottom: var(--mu-space-4); }
.mu-field label { font-weight: var(--mu-weight-medium); font-size: var(--mu-fs-small); color: var(--mu-slate); }
.mu-input, .mu-field input[type="text"], .mu-field input[type="email"], .mu-field input[type="tel"], .mu-field select, .mu-field textarea {
	width: 100%; min-height: var(--mu-tap-min); padding: 0.75rem 1rem;
	font: inherit; color: var(--mu-slate); background: #fff;
	border: 1.5px solid #6B7D80; border-radius: var(--mu-radius-m);
	transition: border-color var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease);
}
.mu-field textarea { min-height: 140px; resize: vertical; }
.mu-input:hover, .mu-field input:hover, .mu-field select:hover, .mu-field textarea:hover { border-color: var(--mu-deep-teal); }
.mu-field input:focus, .mu-field select:focus, .mu-field textarea:focus { border-color: var(--mu-deep-teal); outline: 3px solid var(--mu-aqua); outline-offset: 0; box-shadow: none; }
.mu-check { display: flex; gap: var(--mu-space-3); align-items: flex-start; font-size: var(--mu-fs-small); min-height: 44px; padding-block: .5rem; cursor: pointer; }
.mu-check input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--mu-deep-teal); flex: none; }

/* ---- FAQ (native details/summary: accessible without JS) ---- */
.mu-faq { border-top: 1px solid var(--mu-border); }
.mu-faq details { border-bottom: 1px solid var(--mu-border); }
.mu-faq summary {
	list-style: none; cursor: pointer; padding: var(--mu-space-5) 0; padding-right: 3rem; position: relative;
	font-weight: var(--mu-weight-medium); font-size: 1.125rem; color: var(--mu-deep-teal); min-height: var(--mu-tap-min);
}
.mu-faq summary::-webkit-details-marker { display: none; }
.mu-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.75rem; font-weight: 300; line-height: 1; transition: transform var(--mu-dur) var(--mu-ease); }
.mu-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mu-faq .mu-faq__a { padding: 0 0 var(--mu-space-5); max-width: 62ch; }

/* ---- Credential / trust strip ---- */
.mu-chips { display: flex; flex-wrap: wrap; gap: var(--mu-space-3); list-style: none; padding: 0; margin: 0; }
.mu-chip { background: #fff; border: 1px solid var(--mu-border); border-radius: var(--mu-radius-pill); padding: .5rem 1rem; font-size: var(--mu-fs-small); color: var(--mu-slate); }

/* ---- Brand motifs (decorative; always aria-hidden) ---- */
.mu-motif { position: absolute; pointer-events: none; user-select: none; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.mu-motif--rings       { -webkit-mask-image: var(--mu-motif-rings);       mask-image: var(--mu-motif-rings);       aspect-ratio: 1 / 1; }
.mu-motif--wave        { -webkit-mask-image: var(--mu-motif-wave);        mask-image: var(--mu-motif-wave);        aspect-ratio: 535 / 147; }
.mu-motif--fingerprint { -webkit-mask-image: var(--mu-motif-fingerprint); mask-image: var(--mu-motif-fingerprint); aspect-ratio: 299 / 429; }
.mu-motif--gold  { color: var(--mu-gold); }
.mu-motif--aqua  { color: var(--mu-aqua); }
.mu-motif--teal  { color: var(--mu-deep-teal); }
.mu-motif--sand  { color: var(--mu-sand); }

/* ---- Utilities ---- */
.mu-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mu-on-dark { color: #fff; }

/* Make Elementor-built sections inherit brand tokens */
.elementor-widget-heading .elementor-heading-title { font-family: var(--mu-font-heading); }
.elementor-widget-text-editor, .elementor-widget-text-editor p { font-family: var(--mu-font-body); }

hr { border: 0; border-top: var(--mu-line-gold); }