/**
 * The Blue Tree Quotes — VIP greeting block.
 *
 * TBT Style Book v1.0: §2 neutrals, §3 typography, §4 spacing scale.
 * Controls follow Style Book v2.1 §7 (see the hover note below).
 *
 * The block sits on the white VIP page, not on a coloured panel. It is
 * editorial, not a card: no background, no border box, no shadow. A single
 * blue left rule marks the thought as a pull quote (§5 — borders stay quiet
 * until they carry meaning).
 *
 * Three tiers:
 *   VOICE  — Roboto Slab, ink. The welcome line (26px), the quote and the
 *            stranger message (20px).
 *   LABEL  — Roboto, 14px, muted. The lead-in and the author.
 *   ACTION — Roboto 700, 16px. The buttons under the block.
 *
 * The welcome line is larger than the quote on purpose. The quote sits
 * directly above the LATEST LESSONS heading and must not compete with it.
 *
 * TWO STATES, ONE STYLESHEET. The signed-out block (.tbt-quotes--stranger)
 * reuses __welcome, __hello, __thought and __intro, so it inherits the type
 * tiers and the blue rule without a second set of rules. Only __message is its
 * own: it shares the voice tier with __quote p because it speaks in the same
 * voice, but it is not a quotation, so the ::before / ::after quotation marks
 * stay scoped to __quote p alone. That is why the two selectors travel together
 * everywhere except there.
 *
 * The action row sits outside __thought, so the buttons line up with the left
 * edge of the welcome line rather than hiding behind the blue rule.
 *
 * Colours fall back to literal Style Book §2 values because the Hub token
 * starter does not yet define --tbt-ink or --tbt-muted. When it does, these
 * resolve upward with no edit here.
 *
 * font-family carries !important because Divi's global typography rules
 * otherwise override the plugin on the front end.
 *
 * SPECIFICITY — read before editing the rhythm block at the bottom.
 * The margin reset is `.tbt-quotes p` (0,1,1), deliberately, so that it
 * outranks Divi's own `.et_pb_text p` paragraph margins. Anything that puts
 * spacing back therefore has to outrank the reset in turn, which is why every
 * rhythm selector repeats the `.tbt-quotes` scope. A bare `.tbt-quotes__welcome`
 * is only (0,1,0): the reset wins, the margin is silently dropped and the block
 * collapses into one solid run of text. Do not "simplify" those selectors.
 *
 * The page background, row padding and logo belong to the Divi row, not here.
 */

.tbt-quotes {
	--tbtq-ink: var(--tbt-ink, #1f2937);
	--tbtq-muted: var(--tbt-muted, #667085);
	--tbtq-rule: var(--tbt-blue, #0856c9);

	--tbtq-blue: var(--tbt-blue, #0856c9);
	--tbtq-blue-hover: var(--tbt-blue-hover, #4b84ce);
	--tbtq-surface: var(--tbt-surface, #ffffff);
	--tbtq-border: var(--tbt-border, #d8e3f0);
	--tbtq-selected-bg: var(--tbt-selected-bg, #edf4ff);
	--tbtq-focus-ring: var(--tbt-focus-ring, 0 0 0 3px rgba(8, 86, 201, .18));
	--tbtq-radius-control: var(--tbt-radius-control, 12px);

	--tbtq-welcome-size: 26px;
	--tbtq-quote-size: 20px;
	--tbtq-voice-weight: 400;
	--tbtq-voice-leading: 1.4;
	--tbtq-label-size: 14px;
	--tbtq-label-leading: 1.5;

	--tbtq-rule-width: 3px;
	--tbtq-rule-gap: 24px;

	--tbtq-gap-welcome: 32px;
	--tbtq-gap-intro: 8px;
	--tbtq-gap-quote: 12px;
	--tbtq-gap-actions: 24px;
	--tbtq-gap-button: 12px;

	--tbtq-font-voice: var(--tbt-font-content, "Roboto Slab", Georgia, serif);
	--tbtq-font-label: var(--tbt-font-ui, "Roboto", Arial, sans-serif);

	color: var(--tbtq-ink);
	max-width: 760px;
}

/* Divi gives every paragraph a bottom margin and every blockquote a border and
   padding. Clear them here; the rhythm block reinstates what we actually want. */

.tbt-quotes p,
.tbt-quotes blockquote {
	margin: 0;
}

.tbt-quotes .tbt-quotes__quote {
	border: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- *
 * The rule
 *
 * Single-sided border, so no radius (Style Book §5). It spans the lead-in
 * and the quote together: the lead-in is part of the thought, not a heading
 * standing outside it.
 * ---------------------------------------------------------------- */

.tbt-quotes .tbt-quotes__thought {
	border-left: var(--tbtq-rule-width) solid var(--tbtq-rule);
	border-radius: 0;
	padding-left: var(--tbtq-rule-gap);
}

/* ---------------------------------------------------------------- *
 * Tier 1 — voice
 * ---------------------------------------------------------------- */

.tbt-quotes__welcome,
.tbt-quotes__quote p,
.tbt-quotes__message {
	color: var(--tbtq-ink);
	font-family: var(--tbtq-font-voice) !important;
	font-weight: var(--tbtq-voice-weight);
	line-height: var(--tbtq-voice-leading);
}

.tbt-quotes__welcome {
	font-size: var(--tbtq-welcome-size);
}

.tbt-quotes__quote p,
.tbt-quotes__message {
	font-size: var(--tbtq-quote-size);
}

.tbt-quotes__hello {
	font-weight: 700;
}

/* Quotation marks belong to an actual quotation, so they stay off __message. */

.tbt-quotes__quote p::before {
	content: "\201C";
}

.tbt-quotes__quote p::after {
	content: "\201D";
}

/* ---------------------------------------------------------------- *
 * Tier 2 — label
 * ---------------------------------------------------------------- */

.tbt-quotes__intro,
.tbt-quotes__quote cite {
	color: var(--tbtq-muted);
	display: block;
	font-family: var(--tbtq-font-label) !important;
	font-size: var(--tbtq-label-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--tbtq-label-leading);
}

/* ---------------------------------------------------------------- *
 * Tier 3 — action
 *
 * Style Book §7: 12px radius, ~44px control height, Roboto 700, sentence case,
 * a subtle lift on hover, a blue focus ring, and one primary action per view —
 * which is why render_actions() promotes only the first button in a row.
 *
 * The hover blue is the v2.1 primary hover (#4b84ce): primary lightens on
 * hover, it does not darken.
 *
 * WHY !important ON color AND text-decoration. Divi sets link colour and the
 * hover underline through customizer output whose selector can carry an ID
 * (#page-container … a). No class-only selector can outrank an ID, so these two
 * properties need the same escape hatch that font-family already uses above,
 * for the same reason. Nothing else here takes !important.
 * ---------------------------------------------------------------- */

.tbt-quotes .tbt-quotes__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tbtq-gap-button);
	margin-top: var(--tbtq-gap-actions);
}

.tbt-quotes .tbt-quotes__button {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--tbtq-radius-control);
	display: inline-flex;
	font-family: var(--tbtq-font-label) !important;
	font-size: 16px;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-height: 44px;
	padding: 0 24px;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.tbt-quotes .tbt-quotes__button--primary {
	background-color: var(--tbtq-blue);
	color: #fff !important;
}

.tbt-quotes .tbt-quotes__button--primary:hover,
.tbt-quotes .tbt-quotes__button--primary:focus {
	background-color: var(--tbtq-blue-hover);
	transform: translateY(-1px);
}

.tbt-quotes .tbt-quotes__button--secondary {
	background-color: var(--tbtq-surface);
	border-color: var(--tbtq-border);
	color: var(--tbtq-blue) !important;
}

.tbt-quotes .tbt-quotes__button--secondary:hover,
.tbt-quotes .tbt-quotes__button--secondary:focus {
	background-color: var(--tbtq-selected-bg);
	border-color: var(--tbtq-blue);
	transform: translateY(-1px);
}

.tbt-quotes .tbt-quotes__button:focus-visible {
	box-shadow: var(--tbtq-focus-ring);
	outline: none;
}

/* ---------------------------------------------------------------- *
 * Vertical rhythm
 *
 * Every selector here carries the extra `.tbt-quotes` scope so it outranks the
 * (0,1,1) margin reset above. See the SPECIFICITY note in the file header.
 * ---------------------------------------------------------------- */

.tbt-quotes .tbt-quotes__welcome {
	margin-bottom: var(--tbtq-gap-welcome);
}

.tbt-quotes .tbt-quotes__intro {
	margin-bottom: var(--tbtq-gap-intro);
}

.tbt-quotes .tbt-quotes__quote p {
	margin-bottom: var(--tbtq-gap-quote);
}

/* No author means no attribution element, so drop the trailing gap. */
.tbt-quotes .tbt-quotes__quote p:last-child {
	margin-bottom: 0;
}