/*
 * Content column: typography + the launch content kit. Loaded on the front
 * AND as an editor style. Token defaults live here; per-site values are
 * injected inline as html:root{} from theme_mods (inc/helpers.php).
 */

:root {
	--tm-bg: #f1f1ee;
	--tm-card: #ffffff;
	--tm-ink: #131313;
	--tm-muted: #5c5c56;
	--tm-accent: #ffd233;
	--tm-on-accent: #131313;
	--tm-link: #1f3fd8;
	--tm-chrome: #141414;
	--tm-chrome-text: #f4f4f1;
	--tm-line: #131313;
	--tm-success: #1e9e5a;
	--tm-danger: #d93b3b;
	--tm-border-w: 2px;
	--tm-shadow: 5px 5px 0 rgba(19, 19, 19, 1);
	--tm-container: 1200px;
	--tm-content: 1020px;
	--tm-narrow: 820px;
	--tm-font-display: 'Archivo Black', 'Arial Black', sans-serif;
	--tm-font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/archivo-black-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/archivo-black-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/plex-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/plex-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--tm-bg);
	color: var(--tm-ink);
	font-family: var(--tm-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--tm-font-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 1.8em 0 0.55em;
	text-wrap: balance;
}

h4,
h5,
h6 {
	font-family: var(--tm-font-body);
	font-weight: 700;
	margin: 1.6em 0 0.5em;
}

h1 {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	margin-top: 0;
}

h2 {
	font-size: clamp(1.3rem, 3vw, 1.7rem);
}

h3 {
	font-size: 1.1rem;
}

p,
ul,
ol {
	margin: 0 0 1.35em;
}

a {
	color: var(--tm-link);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--tm-ink);
}

:focus-visible {
	outline: 3px solid var(--tm-link);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: var(--tm-border-w) solid var(--tm-line);
	margin: 2.5rem 0;
}

blockquote {
	margin: 1.75rem 0;
	padding: 1rem 1.4rem;
	border: var(--tm-border-w) solid var(--tm-line);
	border-left-width: 10px;
	background: var(--tm-card);
}

/*
 * --- Lists ---
 * Markers apply to unclassed lists AND the stock Gutenberg .wp-block-list
 * only: pasted custom HTML that ships its own list classes/styling keeps it
 * (the Fernpress marker-conflict lesson).
 */

.post-entry ul:not([class]),
.post-entry ul.wp-block-list,
.editor-styles-wrapper ul:not([class]),
.editor-styles-wrapper ul.wp-block-list {
	list-style: none;
	padding-left: 1.6em;
}

.post-entry ul:not([class]) > li,
.post-entry ul.wp-block-list > li,
.editor-styles-wrapper ul:not([class]) > li,
.editor-styles-wrapper ul.wp-block-list > li {
	position: relative;
	margin: 0.45em 0;
}

.post-entry ul:not([class]) > li::before,
.post-entry ul.wp-block-list > li::before,
.editor-styles-wrapper ul:not([class]) > li::before,
.editor-styles-wrapper ul.wp-block-list > li::before {
	content: '';
	position: absolute;
	left: -1.35em;
	top: 0.52em;
	width: 9px;
	height: 9px;
	background: var(--tm-accent);
	border: 2px solid var(--tm-ink);
}

.post-entry ol:not([class]),
.post-entry ol.wp-block-list {
	padding-left: 1.6em;
}

.post-entry ol:not([class]) > li,
.post-entry ol.wp-block-list > li {
	margin: 0.45em 0;
}

.post-entry ol:not([class]) > li::marker,
.post-entry ol.wp-block-list > li::marker {
	font-family: var(--tm-font-display);
	color: var(--tm-ink);
}

/* --- Tables --- */

.wp-block-table {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--tm-card);
	border: var(--tm-border-w) solid var(--tm-line);
	font-size: 0.97rem;
}

th,
td {
	padding: 0.6em 0.85em;
	text-align: left;
	border-bottom: 1px solid rgba(19, 19, 19, 0.18);
}

thead th {
	background: var(--tm-ink);
	color: var(--tm-chrome-text);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

/* Spec table: first column reads as row headers. */
.is-style-tm-params td:first-child {
	background: var(--tm-ink);
	color: var(--tm-chrome-text);
	font-weight: 700;
	width: 42%;
}

/* Scale/comparison table: accent header. */
.is-style-tm-scale thead th {
	background: var(--tm-accent);
	color: var(--tm-on-accent);
}

/* --- Buttons --- */

.tm-btn,
.wp-block-button__link {
	display: inline-block;
	background: var(--tm-accent);
	color: var(--tm-on-accent);
	font-family: var(--tm-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: var(--tm-border-w) solid var(--tm-line);
	border-radius: 0;
	padding: 0.7em 1.5em;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tm-btn:hover,
.wp-block-button__link:hover {
	background: var(--tm-accent);
	color: var(--tm-on-accent);
	transform: translate(-3px, -3px);
	box-shadow: var(--tm-shadow);
}

.tm-btn--ghost,
.is-style-outline .wp-block-button__link {
	background: var(--tm-card);
	color: var(--tm-ink);
}

/* --- Launch content kit ------------------------------------------------- */

/*
 * Pros / cons: two bordered cards with chip headers.
 *
 * Wrapper tolerance: on classic cores without theme.json, core/group gets a
 * .wp-block-group__inner-container injected — the grid must live on whichever
 * element DIRECTLY holds the panels. The theme ships theme.json (flat DOM),
 * but content built before the fix / on old cores still renders correctly:
 * with a wrapper the outer grid has one child (single full-width track,
 * harmless) and the inner one does the real two-column work. Columns-based
 * markup (wp:column {"className":"tm-pros"}) works either way.
 */
.tm-pros-cons,
.tm-pros-cons > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.tm-pros-cons {
	margin: 1.75rem 0;
}

.tm-pros,
.tm-cons {
	background: var(--tm-card);
	border: var(--tm-border-w) solid var(--tm-line);
	padding: 1.1rem 1.25rem 1.25rem;
}

.tm-pros > :first-child,
.tm-cons > :first-child {
	display: inline-block;
	margin: -1.7rem 0 0.75rem;
	padding: 0.25em 0.8em;
	font-family: var(--tm-font-display);
	font-size: 0.95rem;
	text-transform: uppercase;
	border: var(--tm-border-w) solid var(--tm-line);
}

.tm-pros > :first-child {
	background: var(--tm-success);
	color: #fff;
}

.tm-cons > :first-child {
	background: var(--tm-danger);
	color: #fff;
}

.tm-pros ul:not([class]),
.tm-pros ul.wp-block-list,
.tm-cons ul:not([class]),
.tm-cons ul.wp-block-list {
	margin-bottom: 0;
}

.tm-pros ul:not([class]) > li::before,
.tm-pros ul.wp-block-list > li::before {
	background: var(--tm-success);
}

.tm-cons ul:not([class]) > li::before,
.tm-cons ul.wp-block-list > li::before {
	background: var(--tm-danger);
}

/* CTA card: full-width bordered banner with hazard tape on top. */
.tm-cta-card {
	background: var(--tm-card);
	border: var(--tm-border-w) solid var(--tm-line);
	border-top: 10px solid transparent;
	border-image: repeating-linear-gradient(-45deg, var(--tm-accent) 0 12px, var(--tm-ink) 12px 24px) 10;
	padding: 1.4rem 1.5rem;
	margin: 1.75rem 0;
}

.tm-cta-card > :first-child,
.tm-cta-card > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

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

/* Poster frame: dark provider infographics on the light surface. */
.tm-poster {
	background: var(--tm-chrome);
	border: var(--tm-border-w) solid var(--tm-line);
	box-shadow: var(--tm-shadow);
	padding: 0.75rem;
	margin: 1.75rem 0;
}

.tm-poster img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.tm-poster figcaption {
	color: var(--tm-chrome-text);
	font-size: 0.85rem;
	text-align: center;
	padding-top: 0.6rem;
	opacity: 0.8;
}

/* Media utilities: portrait screenshots and logo rows never blow up. */
.tm-shot--portrait img,
img.tm-shot--portrait {
	max-height: 560px;
	width: auto;
	margin-inline: auto;
	display: block;
}

.tm-logo-row,
.tm-logo-row > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.tm-logo-row img {
	max-height: 56px;
	width: auto;
}

/* --- Yoast FAQ / How-To skins --- */

.schema-faq-section {
	background: var(--tm-card);
	border: var(--tm-border-w) solid var(--tm-line);
	padding: 0.9rem 1.15rem;
	margin-bottom: 0.9rem;
}

.schema-faq-question {
	display: block;
	font-weight: 700;
	font-size: 1.02rem;
	margin-bottom: 0.35em;
}

.schema-faq-answer {
	margin: 0;
	color: var(--tm-muted);
}

.schema-how-to-steps {
	counter-reset: tm-step;
	list-style: none;
	padding-left: 0;
}

.schema-how-to-step {
	position: relative;
	padding-left: 3.2rem;
	margin-bottom: 1.1rem;
}

.schema-how-to-step::before {
	counter-increment: tm-step;
	content: counter(tm-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	background: var(--tm-accent);
	border: var(--tm-border-w) solid var(--tm-line);
	font-family: var(--tm-font-display);
	font-size: 1rem;
}

.schema-how-to-step-name {
	display: block;
	font-weight: 700;
}

.schema-how-to-step-text {
	margin: 0.25em 0 0;
	color: var(--tm-muted);
}

/* Generic details/summary accordions. */
.wp-block-details {
	background: var(--tm-card);
	border: var(--tm-border-w) solid var(--tm-line);
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
}

/*
 * --- Bold-only label paragraphs (trust pages) ---
 * inc/labels.php classifies a paragraph consisting entirely of one <strong>
 * as `.tm-label` server-side. Rendered as a highlighter-swiped display label.
 */

.post-entry .tm-label {
	margin: 2.5rem 0 0.9rem;
	font-family: var(--tm-font-display);
	font-size: 1.2rem;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.post-entry .tm-label > strong {
	font-weight: 400;
	background: linear-gradient(transparent 55%, var(--tm-accent) 55%, var(--tm-accent) 92%, transparent 92%);
	padding-inline: 2px;
}

.post-entry .tm-label:first-child {
	margin-top: 0;
}

/* Content frame: geometry enforced by the container. */
.post-entry {
	max-width: 100%;
	overflow-x: clip;
}