/* ---------------------------------------------------------------------------
 * LyfCalc editorial blocks
 *
 * Loaded on the front end and again as an editor style, so a pattern from
 * inc/block-patterns.php looks the same in the editor as it does published.
 *
 * Everything here does one of two jobs: bridge the class names the design uses
 * onto the markup core blocks actually emit (a button's link, a quote's
 * wrapper), or undo the .entry rules that assume bare the_content() output and
 * would otherwise fight the cards.
 * ------------------------------------------------------------------------- */

/* --- Cards built from core group blocks ---------------------------------- */

/* On a classic theme (no theme.json) WordPress wraps a Group block's children
   in .wp-block-group__inner-container — see wp_restore_group_inner_container().
   Every structural rule below therefore names both the group and that wrapper,
   so the patterns render identically whether or not the wrapper is there, and
   keep working if a theme.json is added later and it disappears. */

/* .entry constrains paragraphs to 70ch for readability; inside a card the card
   is already the measure, so let the text fill it. */
.entry .card p,
.entry .card ul,
.entry .card ol { max-width: none; }

/* A card's last child should not push the padding out of true. */
.card > *:last-child,
.card > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

/* --- Formula card -------------------------------------------------------- */

/* .formula is defined in main.css; these keep it honest inside a card and
   cover the case where an editor uses a Code block instead of a paragraph. */
.formula { margin: 0; }
.entry p.formula { margin: 0; max-width: none; }
.formula-note { margin: 8px 0 0; }
.entry p.formula-note { margin: 8px 0 0; max-width: none; }

.card .wp-block-code,
.card pre.formula {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: var(--mono);
}
.card .wp-block-code code {
	font: 400 var(--fs-h6)/1.5 var(--mono);
	color: var(--ink);
	background: none;
	padding: 0;
}

/* --- Tinted callout ------------------------------------------------------ */

.card--tint p,
.card--tint li { color: var(--ink-on-tint); }
.card--tint a { color: var(--primary-dark); text-decoration: underline; }

/* --- Calculator call-to-action ------------------------------------------- */

/* main.css makes .cta-row the flex row. When the group's children sit inside an
   inner container the row has only that one child, so the same flex rules are
   repeated on the wrapper and it is stretched to fill the card. */
.cta-row > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	width: 100%;
}

.cta-row > *,
.cta-row > .wp-block-group__inner-container > * { min-width: 0; margin: 0; }

/* Let the text shrink and re-wrap before the button drops to its own line, so
   the row survives a narrow editor canvas as well as a narrow screen. */
.cta-row__text { flex: 1 1 240px; }
.cta-row .wp-block-buttons { flex: 0 0 auto; }

.cta-row__text > *:last-child,
.cta-row__text > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

.cta-row__title {
	font-size: var(--fs-h5);
	font-weight: 650;
	color: var(--ink);
	margin: 0 0 4px;
}
.cta-row__meta { margin: 0; }
.entry .cta-row p { max-width: none; }

.cta-row .wp-block-buttons { margin: 0; gap: 8px; }
.cta-row .wp-block-button { margin: 0; }

/* Core renders the button as .wp-block-button__link, so the .btn--primary look
   is applied here rather than asking editors to type class names. */
.cta-row .wp-block-button__link {
	height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius);
	font-size: var(--fs-p);
	font-weight: 600;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.cta-row .wp-block-button__link:hover,
.cta-row .wp-block-button__link:focus-visible {
	background: var(--primary-dark);
	color: #fff;
	text-decoration: none;
}

/* --- Quotation ----------------------------------------------------------- */

/* main.css scopes blockquote styling to .entry, which the editor canvas does
   not have. Repeating it unscoped keeps the editor preview truthful, so any
   change here has to be made in both files.

   A quote on this site reproduces a source document rather than emphasising a
   line, so it is set at body size inside the supporting-material tint instead
   of being enlarged. The cite line is the source, ruled off from the quote. */
.wp-block-quote {
	margin: 24px 0;
	padding: 24px;
	background: var(--primary-tint);
	border: 1px solid var(--primary-tint-border);
	border-radius: var(--radius);
	font-size: var(--fs-p);
	font-style: normal;
	color: var(--ink-2);
	line-height: 1.7;
	max-width: 70ch;
}
.wp-block-quote p { margin: 0 0 16px; max-width: none; }
.wp-block-quote p:last-of-type { margin-bottom: 0; }
.wp-block-quote cite {
	display: block;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--primary-tint-border);
	font-size: var(--fs-sm);
	font-style: normal;
	/* --ink-4 measures 2.78:1 on this tint, below the 4.5:1 AA floor for text
	   this size. --ink-3 measures 5.12:1. */
	color: var(--ink-3);
}

/* --- FAQ ----------------------------------------------------------------- */

/* Built from core Details blocks, so the open and closed states come from the
   browser and there is no JavaScript to keep alive. Everything here is the
   marker, the spacing and the rules between items. */
.faq { margin: 32px 0; }
.faq > .wp-block-group__inner-container > h2,
.faq > h2 { margin: 0 0 8px; }

.faq .wp-block-details {
	border-top: 1px solid var(--line);
	padding: 0;
	margin: 0;
}
.faq .wp-block-details:last-child { border-bottom: 1px solid var(--line); }

.faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 40px 18px 0;
	position: relative;
	font-weight: 600;
	font-size: var(--fs-p);
	color: var(--ink);
	line-height: 1.45;
}
/* Safari keeps its own triangle unless this pseudo-element is cleared too. */
.faq .wp-block-details > summary::-webkit-details-marker { display: none; }

.faq .wp-block-details > summary:hover { color: var(--primary); }
.faq .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* A chevron drawn from two borders, so it needs no icon font or SVG and
   rotates cleanly when the item opens. */
.faq .wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--ink-4);
	border-bottom: 2px solid var(--ink-4);
	transform: rotate(45deg);
	transition: transform .18s ease;
}
.faq .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.faq .wp-block-details[open] > summary { color: var(--ink); }

.faq .wp-block-details > *:not(summary) {
	margin: 0 0 16px;
	padding-right: 40px;
	color: var(--ink-2);
	line-height: 1.65;
}
.entry .faq .wp-block-details p { max-width: 66ch; }

/* The fallback shape, used when core/details is unavailable. */
.faq > .wp-block-group__inner-container > h3,
.faq > h3 {
	margin: 24px 0 4px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: var(--fs-p);
	font-weight: 600;
}