/*
Theme Name: TrustLoro
Theme URI: https://trustloro.com
Author: Ramón Gutiérrez
Description: Blue-Chip Lab — a block theme for TrustLoro. Premium, minimalist, high-trust. Design system in theme.json (branding: TL-Website-v2/.agent/rules/branding.md). Bilingual ES/EN via Polylang.
Version: 0.2.3
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: trustloro
*/

/* Phase 2 design system. Loaded on the front end AND in the block editor via
   add_editor_style(), so patterns look the same in both. theme.json still owns
   tokens — palette, type scale, spacing — and the pre-Phase-2 utility classes. */
html { scroll-behavior: smooth; }
::selection { background: rgba(199, 154, 75, 0.22); }

/* ---------- Grounds ----------
   Sections are align:full and carry their own inner padding. Navy is a ground
   now, not a floating card, so it takes no radius and no shadow. */

/* Muted text is one token, swapped per ground. Sand is darker than paper, so the base
   muted lands at 4.03:1 there and fails AA. Enumerating classes per ground meant any new
   muted class silently missed the correction — About's rule-grid paragraphs did exactly
   that. One list, one token. #4F5F70 is a contrast-only literal here, not a palette
   entry — same precedent as the button's #B8862F hover. */
:root {
	--tl-muted-text: var(--wp--preset--color--muted);
}

.tl-ground-sand {
	background: var(--wp--preset--color--sand);
	--tl-muted-text: #4F5F70;
}

.tl-ground-navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

.tl-ground-navy :is(h1, h2, h3) {
	color: var(--wp--preset--color--paper);
}

.tl-muted,
.tl-worktag {
	color: var(--tl-muted-text);
}

.tl-ground-navy .tl-lead,
.tl-ground-navy .tl-muted {
	color: var(--wp--preset--color--paper-dim);
}

.tl-ground-navy .tl-label {
	color: var(--wp--preset--color--paper);
}

.tl-ground-navy a:not(.wp-element-button) {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(241, 236, 227, 0.4);
}

/* The lead's measure cap belongs here, not inline: core has no max-width support for
   paragraphs, so an inline value is invisible to the block inspector and drifts between
   patterns. One value, one place — and templates/404.html gets it for free. */
.tl-lead {
	max-width: 40rem;
}

/* ---------- The label device ----------
   Mono label with a gold leading rule. At wide widths it leaves the content
   flow for its own column, so it structures the page instead of floating
   above a paragraph. Identical on every page — that repetition is the point. */

.tl-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tl-muted-text);
}

.tl-label::before {
	content: "";
	flex: 0 0 1.75rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

@media (min-width: 1000px) {
	.tl-labelled {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	/* Core's constrained-layout rule sets margin-inline:auto with !important, which
	   both centres the child and suppresses grid stretch. Matching its weight is the
	   only way to align content against the label column. */
	.tl-labelled > * {
		grid-column: 2;
		margin-inline: 0 !important;
	}

	.tl-labelled > .tl-label {
		grid-column: 1;
		grid-row: 1;
		margin-top: 0.6rem;
	}

	/* The rule reads as a margin marker at this width, not a bullet. */
	.tl-labelled > .tl-label::before {
		flex-basis: 1.25rem;
	}
}

/* ---------- Diagram grammar ----------
   Muted for the current state, gold for the changed state and the path
   between. Three of the four variants are real text in block markup, so they
   stay editable, translate cleanly, and are read directly by search and
   generative engines. Only the hub is SVG. */

.tl-diagram {
	margin: 0;
}

.tl-node-label {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tl-muted-text);
}

/* Gold clears AA only on navy (5.91:1); on paper it is 2.19 and on sand it is 1.90, and
   no gold dark enough to pass is still recognisably gold. So on light grounds the gold
   dot carries the accent — it is decorative and exempt — and the label text goes navy. */
.tl-node-to .tl-node-label {
	color: var(--wp--preset--color--navy);
}

/* Navy by default — .tl-node-text is not part of the muted-text family above. Only the
   spine variant below recolors it to muted, so only the spine variant needs the token. */
.tl-node-text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--wp--preset--color--navy);
}

.tl-ground-navy .tl-node-text {
	color: var(--wp--preset--color--paper);
}

.tl-ground-navy .tl-node-label {
	color: var(--wp--preset--color--paper-dim);
}

.tl-ground-navy .tl-node-to .tl-node-label {
	color: var(--wp--preset--color--gold);
}

/* A filled dot marks each node's position on the hairline; .tl-node-to recolors it gold
   as the diagram's single point of change. */
.tl-node {
	position: relative;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(20, 38, 63, 0.16);
}

.tl-ground-navy .tl-node {
	border-top-color: rgba(241, 236, 227, 0.22);
}

.tl-node::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.tl-node-to::before {
	background: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 4px rgba(199, 154, 75, 0.18);
}

/* Pair and trio: nodes in a row, gold path between them. The connectors are
   grid-placed pseudo-elements, so the block markup stays free of empty
   spacer blocks that an editor would have to look at. */

.tl-diagram-pair,
.tl-diagram-trio {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
	grid-template-columns: 1fr;
}

/* Core gives every child after the first a top margin. A grid row cannot absorb it:
   items step down and hairlines stop aligning across columns. Every Phase 2 grid
   whose children are blocks needs this reset. */
.tl-diagram-pair > .tl-node,
.tl-diagram-trio > .tl-node,
.tl-rule-grid > *,
.tl-evidence > * {
	margin-block: 0;
}

@media (min-width: 760px) {
	.tl-diagram-pair {
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
	}

	.tl-diagram-trio {
		grid-template-columns: 1fr auto 1fr auto 1fr;
		align-items: start;
	}

	.tl-diagram-pair::before,
	.tl-diagram-trio::before,
	.tl-diagram-trio::after {
		content: "";
		grid-row: 1;
		align-self: start;
		margin-top: -1px;
		width: clamp(2rem, 6vw, 4rem);
		height: 1px;
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--muted),
			var(--wp--preset--color--gold)
		);
	}

	.tl-diagram-pair::before,
	.tl-diagram-trio::before {
		grid-column: 2;
	}

	.tl-diagram-trio::after {
		grid-column: 4;
	}
}

/* Spine: ordered steps down a single gold line. Vertical at every width —
   a horizontal spine would either scroll or shrink the text below reading
   size on a phone. */

.tl-diagram-spine {
	display: grid;
	gap: 0;
	position: relative;
	padding-left: 2rem;
}

.tl-diagram-spine::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 3px;
	width: 1px;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--muted),
		var(--wp--preset--color--gold)
	);
}

.tl-diagram-spine .tl-node {
	border-top: 0;
	padding-top: 0;
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tl-diagram-spine .tl-node:last-child {
	padding-bottom: 0;
}

.tl-diagram-spine .tl-node::before {
	top: 0.45rem;
	left: -2rem;
}

/* Hub: the one SVG diagram. It needs curved paths and carries only short
   labels, so it does not fight the editor the way a text-heavy SVG would. */

.tl-diagram-hub {
	display: block;
	width: 100%;
	height: auto;
	max-width: 560px;
	margin-inline: auto;
}

.tl-diagram-hub .tl-hub-node {
	fill: none;
	stroke: var(--wp--preset--color--muted);
	stroke-width: 1;
}

.tl-diagram-hub .tl-hub-path {
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 1.25;
	opacity: 0.75;
}

.tl-diagram-hub .tl-hub-core {
	fill: var(--wp--preset--color--gold);
}

.tl-diagram-hub text {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	fill: var(--wp--preset--color--muted);
}

.tl-ground-navy .tl-diagram-hub .tl-hub-node {
	stroke: var(--wp--preset--color--paper-dim);
}

.tl-ground-navy .tl-diagram-hub text {
	fill: var(--wp--preset--color--paper-dim);
}

/* SVG colours text via fill, not color, so the muted-text token cannot reach it — hub
   labels need the same #4F5F70 darkening applied directly. */
.tl-ground-sand .tl-diagram-hub text {
	fill: #4F5F70;
}

/* ---------- Rule grid ----------
   Replaces the tl-card box. A hairline and generous space read as considered;
   a bordered, rounded, shadowed card reads as a template. */

.tl-rule-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 860px) {
	.tl-rule-grid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}
}

.tl-rule-grid > * {
	border-top: 1px solid rgba(20, 38, 63, 0.16);
	padding-top: 1.25rem;
	padding-bottom: 1.75rem;
}

.tl-ground-navy .tl-rule-grid > * {
	border-top-color: rgba(241, 236, 227, 0.22);
}

.tl-rule-grid h3 {
	margin: 0 0 0.5rem;
}

.tl-rule-grid p {
	margin: 0;
	color: var(--tl-muted-text);
	font-size: 1rem;
}

.tl-ground-navy .tl-rule-grid p {
	color: var(--wp--preset--color--paper-dim);
}

/* ---------- Sequence steps ----------
   The Sequence section IS the spine diagram — same grammar, with an h3 per
   step. It reuses .tl-diagram-spine and .tl-node rather than defining a
   second, near-identical device. */

.tl-diagram-spine h3 {
	margin: 0 0 0.4rem;
}

.tl-diagram-spine .tl-node-text {
	max-width: 60ch;
	color: var(--tl-muted-text);
}

.tl-ground-navy .tl-diagram-spine .tl-node-text {
	color: var(--wp--preset--color--paper-dim);
}

/* ---------- Evidence ----------
   Screenshot and argument side by side. Evidence, not decoration — so the
   image gets real width rather than a decorative strip. */

.tl-evidence {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	.tl-evidence {
		grid-template-columns: 1.35fr 1fr;
	}

	.tl-evidence.tl-evidence-flip > :first-child {
		order: 2;
	}
}

/* ---------- Portrait ----------
   The source is a cool-white studio wall; the site's ground is warm paper.
   Desaturating and warming alone made the wall lighter and more obviously
   pasted-on, because the mismatch is brightness rather than only temperature.
   The grade also darkens very slightly to land the wall on the paper ground. */

.tl-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	filter: saturate(0.78) sepia(0.14) contrast(1.02) brightness(0.97);
}

.tl-portrait-about {
	max-width: 440px;
}

.tl-portrait-tight {
	max-width: 260px;
}

/* ---------- Onward link ----------
   A quieter exit beside the closing CTA — the button stays primary, this is
   for the reader who isn't ready to book yet. Paper and sand inherit the
   default link color from theme.json (navy, high contrast on both). Navy
   needs its own rule: full paper reads as loud as the button, and muted (the
   ground's other default) fails AA here — paper-dim clears it at 8.46:1. */

.tl-onward-link {
	margin: 0;
}

.tl-onward-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tl-ground-navy .tl-onward-link a {
	color: var(--wp--preset--color--paper-dim);
	text-decoration-color: rgba(185, 194, 206, 0.5);
}

.tl-ground-navy .tl-onward-link a:hover {
	color: var(--wp--preset--color--paper);
}

/* ---------- Contact form ----------
   The form is set to inherit the theme, so Fluent Forms ships almost no field
   styling and the inputs would otherwise land as browser defaults in the middle
   of the section grid. Fields sit on paper, which means the gold marker carries
   focus while label text stays navy — the same split the section labels use,
   because no gold dark enough to pass AA still reads as gold. #FAF7F2 is a
   contrast-only literal (paper lifted just enough to read as an input), same
   precedent as the button's #B8862F hover. */

.tl-form {
	max-width: 640px;

	/* The plugin paints every error signal — required asterisk, invalid border,
	   message text — from this one variable, through four-class selectors that
	   outrank anything sane written here. Its #F56C6C is 2.46:1 on paper, an AA
	   fail; #A3341F clears at 5.82:1. Override the token, not the selectors. */
	--fluentform-danger: #A3341F;
}

.tl-form .ff-el-group {
	margin-bottom: 1.4rem;
}

.tl-form .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.45rem;
}

.tl-form .ff-el-form-control {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	background: #FAF7F2;
	border: 1px solid rgba(20, 38, 63, 0.22);
	border-radius: 2px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tl-form .ff-el-form-control::placeholder {
	color: var(--tl-muted-text);
	opacity: 1;
}

.tl-form .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(199, 154, 75, 0.28);
}

.tl-form textarea.ff-el-form-control {
	min-height: 8rem;
	resize: vertical;
}

.tl-form .ff-el-form-check {
	margin-bottom: 0.35rem;
}

.tl-form .ff-el-form-check label {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--navy);
}

.tl-form .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--gold);
}

/* The "button" radio style renders each option as label > span and paints the
   selected state #1a7efb, the one blue left on the site. Navy carries the
   selected state and gold stays reserved for the submit action, so the two
   never compete for the same meaning. Focus is an outline rather than a
   box-shadow because the plugin already uses box-shadow for the seam between
   grouped buttons. That outline is navy, not gold: gold is 2.19:1 on paper and
   a focus indicator is functional, not decorative, so it owes WCAG 1.4.11 its
   3:1. Navy clears at 14.25:1 on paper and 11.21:1 on sand — the same fallback
   the section labels already make when gold cannot carry the contrast.

   The selectors mirror the plugin's own five-class chain and prepend .tl-form,
   because a shorter chain loses the cascade to it. */

.tl-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	color: var(--wp--preset--color--navy);
	background: #FAF7F2;
	border-color: rgba(20, 38, 63, 0.22);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tl-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--sand);
}

.tl-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within > span {
	background: #FAF7F2;
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.tl-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
.tl-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected:first-child label > span,
.tl-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label:focus-within > span {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	box-shadow: none;
}

.tl-form .ff-btn-submit {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--gold);
	border: 0;
	border-radius: 11px;
	padding: 0.9rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tl-form .ff-btn-submit:hover {
	background: #B8862F;
}

.tl-form .text-danger {
	font-size: 0.85rem;
}