/*
Theme Name: MoodMatters.Today
Theme URI: https://moodmatters.today
Author: MoodMatters.Today
Author URI: https://moodmatters.today
Description: Custom Gutenberg block theme for MoodMatters.Today — the honest broker of mood science. Educational, never therapeutic. Brand: Kintsugi. Self-hosted fonts (GDPR).
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.2.12
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mmt
*/

/* Block themes style almost everything via theme.json. This file holds only
   small utilities that theme.json can't express. */

/* Accessible skip link (revealed on focus). */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	z-index: 999999;
}
.skip-link.screen-reader-text:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--eggshell);
	border-radius: 6px;
}

/* Outline buttons: the core style inherits the button colour (teal), which on
   eggshell is only ~2.2:1. Force ink text/border so outline CTAs meet AA.
   (All current outline buttons sit on the light eggshell background.) */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* Evidence/study tag — Geist Mono, uppercase, tracked. Reusable utility for
   Ledger entries and article meta (Style Sheet v2.0: science-signal only). */
.mmt-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tag);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Canonical newsletter signup — the single 13 July component (mmt/newsletter-signup).
   Emotional copy (eyebrow / headline / intro) uses native blocks + theme.json type;
   the rules below only re-skin the embedded Brevo "The Signal" form to brand. Brevo
   ships inline styles + an external sib-styles.css, so these overrides are scoped and
   use !important to win the cascade — the Path A tax, removed at Path B (native form). */
.mmt-newsletter { margin-block: var(--wp--preset--spacing--50, 2rem); }

/* Drop Brevo's grey panel + white card → sit on the page ground, left-aligned. */
.mmt-newsletter .sib-form {
	background: transparent !important;
	padding: 0 !important;
	text-align: left !important;
}
.mmt-newsletter #sib-container {
	max-width: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: left !important;
}

/* Canon type across the form — no Roboto/Helvetica reaches the eye. */
.mmt-newsletter .sib-form,
.mmt-newsletter .sib-form :is(p, span, label, input, button) {
	font-family: var(--wp--preset--font-family--sans) !important;
}

/* Field / consent labels → Jakarta 600, ink. */
.mmt-newsletter .entry__label {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--small) !important;
	margin-bottom: 0.4rem !important;
}

/* Email input → theme field: full-width, generous (farsighted), ink border, 6px. */
.mmt-newsletter #EMAIL {
	width: 100% !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	padding: 0.7rem 0.85rem !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Consent text + helper spec → ink, readable. */
.mmt-newsletter .sib-optin span { color: var(--wp--preset--color--ink) !important; }
.mmt-newsletter .entry__specification {
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--tag) !important;
	opacity: 0.75;
}

/* Links (privacy notice) → accessible teal-text; beats Brevo's #sib-container a. */
.mmt-newsletter a,
.mmt-newsletter #sib-container a {
	color: var(--wp--preset--color--teal-text) !important;
	text-decoration: underline !important;
}

/* Submit → theme button: teal fill, ink text, 6px, hover/focus invert. */
.mmt-newsletter .sib-form-block__button {
	display: inline-block !important;
	background: var(--wp--preset--color--teal) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	padding: 0.7rem 1.5rem !important;
	text-align: center !important;
}
.mmt-newsletter .sib-form-block__button:hover,
.mmt-newsletter .sib-form-block__button:focus-visible {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--eggshell) !important;
}

/* Visible focus (older/farsighted audience). */
.mmt-newsletter :is(#EMAIL, input[type="checkbox"], .sib-form-block__button):focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-text) !important;
	outline-offset: 2px;
}

/* Membership tier cards — align rows across the 4-card row. Cards are
   core/columns (flexbox), so this uses a reserved eyebrow slot + flex-column
   (works with WordPress's native mobile stacking, no grid override). */
.mmt-tiers .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
/* Flex gap owns the vertical rhythm; drop default block margins inside cards. */
.mmt-tiers .wp-block-column > * { margin-block: 0; }

/* Eyebrow slot: collapsed when empty on mobile (no gap); a fixed row is
   reserved on desktop (below) so every card's title starts on the same line. */
.mmt-tier__badge { margin: 0; line-height: 1.4; }
.mmt-tier__badge:empty { display: none; }

/* Price: amount + unit locked to one baseline-aligned line — never wraps
   ("€149 / month" stays whole on every card). */
.mmt-tier__price {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 0.3rem;
}
/* Amount keeps the theme's x-large price size; unit stays small. Both never
   wrap, so "€149 / month" holds on one line. */
.mmt-tier__unit { white-space: nowrap; }

/* Push each CTA to the card bottom so all four buttons align (cards are equal
   height via the row's flex stretch). Must follow the margin-block reset. */
.mmt-tiers .wp-block-buttons { margin-top: auto; }

/* Desktop only (cards side by side): reserve the eyebrow row so titles align,
   including the empty slots in badge-less cards. */
@media (min-width: 782px) {
	.mmt-tier__badge,
	.mmt-tier__badge:empty { display: block; min-height: 1.4rem; }
}

/* ---------------------------------------------------------------------------
 * The map (/stability-map/) — instrument + terrain. Scoped .mmt-map-*.
 * Bands are Geist Mono instrument-readout voice (12px, uppercase, tracked);
 * coral appears only as a non-text accent (error border, under-strain
 * underline) — never as text on light (AA).
 * ------------------------------------------------------------------------ */
.mmt-map-form { margin-top: var(--wp--preset--spacing--50); }
.mmt-map-item { border: 0; padding: 0; margin: 0 0 var(--wp--preset--spacing--50); }
.mmt-map-item legend { font-weight: 600; line-height: 1.5; margin-bottom: 0.75rem; padding: 0; }
.mmt-map-item__n { color: var(--wp--preset--color--teal-text); margin-right: 0.25rem; }
.mmt-map-item__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mmt-map-option { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(26, 26, 26, 0.25); border-radius: 6px; padding: 0.5rem 0.85rem; cursor: pointer; font-size: 0.95rem; }
.mmt-map-option:has(input:checked) { background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); }
.mmt-map-option input { accent-color: var(--wp--preset--color--teal-text); margin: 0; }
.mmt-map-item.is-unanswered { outline: 2px solid var(--wp--preset--color--coral); outline-offset: 8px; border-radius: 4px; }
.mmt-map-form__error { border-left: 3px solid var(--wp--preset--color--coral); padding-left: 0.85rem; font-weight: 600; }
.mmt-map-form__actions { margin-top: var(--wp--preset--spacing--50); }

.mmt-map-result { margin-top: var(--wp--preset--spacing--60); }
.mmt-map-result h2:focus { outline: none; }
.mmt-map-terrain { list-style: none; padding: 0; margin: var(--wp--preset--spacing--50) 0 0; }
.mmt-map-terrain__item { border-top: 1px solid rgba(26, 26, 26, 0.15); padding: var(--wp--preset--spacing--40) 0; margin: 0; }
.mmt-map-terrain__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mmt-map-terrain__head h3 { margin: 0; }
.mmt-map-band { font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-text); white-space: nowrap; }
.mmt-map-terrain__item[data-band="under-strain"] .mmt-map-band { color: var(--wp--preset--color--ink); border-bottom: 2px solid var(--wp--preset--color--coral); }
.mmt-map-terrain__desc { margin: 0.5rem 0 0; }
.mmt-map-terrain__detail { border: 1px solid rgba(26, 26, 26, 0.15); border-radius: 10px; padding: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40); }
.mmt-map-terrain__detail p { margin: 0 0 0.75rem; }
.mmt-map-terrain__detail p:last-child { margin-bottom: 0; }
.mmt-map-grade, .mmt-map-read { font-size: 0.95rem; }
.mmt-map-care { border: 1px solid rgba(26, 26, 26, 0.15); border-radius: 10px; padding: var(--wp--preset--spacing--40); margin: var(--wp--preset--spacing--40) 0 0; }
.mmt-map-note { margin-top: var(--wp--preset--spacing--50); font-style: italic; }
/* Post-map email offer: hidden until the reader has their map (§5 — the map
   comes before any email ask). JS adds .is-revealed on render. */
.mmt-map-postmap { display: none; }
.mmt-map-postmap.is-revealed { display: block; }

/* ---------------------------------------------------------------------------
 * The Ledger (/the-ledger/) — graded entries. Scoped .mmt-ledger-*.
 * Grade rendering follows canon conflict C2: token-native letter + word chips
 * ("B · Moderate"), ink and teal-text only. Coral marks the E-Contradicted
 * token itself and nothing else — never a whole row, never a second grade
 * colour. Hue is never the sole carrier: every chip states its letter AND its
 * word, so the grade survives greyscale and colour-blind reading.
 * ------------------------------------------------------------------------ */
.mmt-ledger-list { list-style: none; padding: 0; margin: var(--wp--preset--spacing--60) 0 0; counter-reset: none; }
.mmt-ledger-entry { border-top: 1px solid rgba(26, 26, 26, 0.15); padding: var(--wp--preset--spacing--50) 0; margin: 0; }
.mmt-ledger-entry:first-child { border-top: 0; padding-top: 0; }

.mmt-ledger-grades { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.6rem; }
.mmt-ledger-chip { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.mmt-ledger-chip__label { color: var(--wp--preset--color--teal-text); }
.mmt-ledger-chip strong { font-weight: 600; color: var(--wp--preset--color--ink); }
/* The only sanctioned coral in the Ledger: the E token, underlined not filled,
   so coral never becomes a text colour on eggshell (2.24:1 territory). */
.mmt-ledger-chip.is-contradicted strong { border-bottom: 2px solid var(--wp--preset--color--coral); padding-bottom: 1px; }

.mmt-ledger-lever { margin: 0 0 0.5rem; }
.mmt-ledger-verdict { margin: 0 0 0.75rem; }
.mmt-ledger-why { margin: 0 0 var(--wp--preset--spacing--40); font-size: 0.95rem; }

.mmt-ledger-meta { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: 0.4rem 1.25rem; margin: 0; font-size: 0.95rem; }
.mmt-ledger-meta dt { font-weight: 600; color: var(--wp--preset--color--teal-text); }
.mmt-ledger-meta dd { margin: 0; }
.mmt-ledger-pending { font-style: italic; }

@media (max-width: 600px) {
	.mmt-ledger-meta { grid-template-columns: 1fr; gap: 0.15rem; }
	.mmt-ledger-meta dd { margin-bottom: 0.6rem; }
}