/*
Theme Name: EFT Matrix
Theme URI: https://eftmatrix.co.uk
Author: The Web Design Co.
Author URI: https://fotoworkuk.com
Description: Custom native WordPress block theme for EFT Matrix, an EFT and Matrix Reimprinting practice in London. Calm editorial direction, locally hosted Alegreya and Commissioner, design tokens driven entirely by theme.json.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eft-matrix
Tags: block-theme, full-site-editing, accessibility-ready, one-column, custom-colors, custom-menu, editor-style

EFT Matrix is distributed under the GPL v2 or later.

Bundled fonts, both SIL Open Font License 1.1, licence texts in assets/fonts/:
  Alegreya     (c) 2011 The Alegreya Project Authors, Juan Pablo del Peral / Huerta Tipografica
  Commissioner (c) 2019 The Commissioner Project Authors, Kostas Bartsokas
*/

/*
 * Design tokens live in theme.json, never here.
 * This file carries only what theme.json cannot express.
 * No inline styles anywhere in this project, per agency standard.
 */

/* Root layout gap above <main>. Core emits
   :where(.wp-site-blocks) > * { margin-block-start: var(--wp--style--block-gap) }
   which opens 1.5rem of page background between the header and <main> on every
   template. The header and the first band of each page are meant to meet, so
   that margin is zeroed here. Core's :where() carries zero specificity, so a
   single element selector wins without !important. The footer keeps its gap. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Reading measure. theme.json contentSize caps the column, this caps the line. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--wp--custom--measure);
}

/* Visible focus on every interactive surface. Handover section 20 requires this.
   Deep Teal is used because Light Aqua and Fresh Green fail the 3:1 non-text threshold. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus-ring) solid var(--wp--preset--color--deep-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip link, revealed on focus. */
.eft-matrix-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--deepest-teal);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.eft-matrix-skip-link:focus {
	left: 0;
}

/* Prevent iOS Safari zooming on focus. Agency standard, 16px minimum. */
@media (max-width: 767px) {
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

/* Motion gate. REMOVED 2026-08-31, and it is worth knowing exactly why,
   because it is a rule most style guides tell you to write.

   Two reasons, and the second is a bug rather than a preference.

   1. The client has instructed that the animations run everywhere. See
      FORCE_MOTION in assets/js/motion.js for the reasoning: on iOS this
      query also reports true in Low Power Mode, which is a battery state and
      not a stated preference, so honouring it left iPhones on low battery
      with a dead site.

   2. IT BROKE THE NAVIGATION OVERLAY IN SAFARI. Measured in WebKit at 390px:
      with this block live and prefers-reduced-motion set, tapping the burger
      opened core's overlay and closed it again in the same beat, so the menu
      could not be opened at all. Bisected by disabling one stylesheet at a
      time: no style.css, and it opens. The universal
      animation-duration: 0.01ms !important reaches core's own overlay
      animation, and core's Interactivity API does not survive it. That is
      not something a theme can gate around, because the rule has to be
      universal to be worth writing.

   If it is ever reinstated, exclude the navigation overlay from it and
   re-test the burger in WebKit, not only in Chromium, which does not
   reproduce this.

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
*/

/* Animated sections must be readable before JS runs, so nothing is hidden in
   CSS at all. assets/js/motion.js adds .eft-matrix-animate-ready to <body>
   only after GSAP has downloaded and executed, and hides the reveal targets
   itself at that point. The consequence is the one that matters: a crawler,
   a visitor with JS disabled, and a failed GSAP request all get the finished
   page rather than a blank one. This class is the hook for anything that
   needs to know motion is live. */
.eft-matrix-animate-ready {
	--eft-matrix-motion: 1;
}

/* Logo lockup in the hero card keeps its aspect ratio without reserving the
   wrong box before the image decodes. */
.eft-matrix-hero-mark img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin-inline: auto;
}

@media (min-width: 782px) {
	.eft-matrix-hero-mark img {
		max-width: 380px;
	}
}

/* The hero's ground, underneath the cover background image. It is not visible
   in normal use: the image is opaque and carries its own Deepest Teal wash. It
   is here for the moment before the image paints, and for the case where it
   404s, when a cover block has no ground of its own and the off-white copy
   would otherwise land on white. Deepest Teal holds that failure state at
   10.35:1 instead of unreadable. */
.eft-matrix-hero {
	background-color: var(--wp--preset--color--deepest-teal);
}

/* The triad is three words with a gap between them, not a punctuated list.
   HTML collapses a run of typed spaces to one, so the gap has to be
   word-spacing or it silently disappears. It moved off the H1 and onto this H2
   on 2026-08-31 when the hero headline became a sentence: word-spacing on a
   sentence gaps every word, which is why the H1 must never carry it again.
   Set in em so it tracks the heading down its clamp, and eased off at phone
   widths where the line wraps anyway. */
.eft-matrix-triad {
	word-spacing: 0.45em;
}

@media (max-width: 600px) {
	.eft-matrix-triad {
		word-spacing: 0.2em;
	}
}

/* Card grids: make every card in a row the same height. */
.eft-matrix-outcomes .wp-block-group.is-style-eft-matrix-card,
.eft-matrix-support .wp-block-group.is-style-eft-matrix-card,
.eft-matrix-insights .wp-block-group.is-style-eft-matrix-card {
	display: flex;
	flex-direction: column;
}

/* Turning those cards into flex columns has a side effect worth naming, since
   it looked like a design choice for months and was not one. Core's constrained
   layout sets margin-left and margin-right to auto !important on every child.
   In block flow that does nothing visible. In a flex column the auto margins
   absorb the free space instead, so each child shrinks to its content width and
   centres. Card headings were therefore centred while their body copy stayed
   left: "Feel calmer" was carrying 102px of computed auto margin. The methods
   cards were never affected because they are not flexed.
   The !important here is required only because core's is. */
.eft-matrix-outcomes .wp-block-group.is-style-eft-matrix-card > *,
.eft-matrix-support .wp-block-group.is-style-eft-matrix-card > *,
.eft-matrix-insights .wp-block-group.is-style-eft-matrix-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Mobile: centre headings, intros and CTAs. Lists and long paragraphs stay
   left-aligned, because centred body copy is harder to read. Agency standard. */
@media (max-width: 767px) {
	.eft-matrix-hero,
	.eft-matrix-hero .wp-block-column {
		text-align: center;
	}

	.eft-matrix-hero .wp-block-buttons,
	.eft-matrix-methods .wp-block-buttons,
	.eft-matrix-testimonials .wp-block-buttons,
	.eft-matrix-insights .wp-block-buttons,
	.eft-matrix-practitioner .wp-block-buttons,
	.eft-matrix-cta .wp-block-buttons {
		justify-content: center;
	}

	.eft-matrix-practitioner .wp-block-heading {
		text-align: center;
	}

	/* Buttons size to their label, never full width. Agency standard. */
	.wp-block-button__link {
		width: auto;
	}

	.wp-block-list,
	.eft-matrix-recognition p,
	.eft-matrix-why p {
		text-align: left;
	}
}