/* Forme block styles for core blocks. See inc/block-styles.php. */

:root {
	--forme-bs-accent: var( --wp--preset--color--primary-accent, #1463F3 );
	--forme-bs-ink: var( --wp--preset--color--rich-black, #0B1B33 );
	--forme-bs-muted: var( --wp--preset--color--muted, #52627A );
	--forme-bs-line: var( --wp--preset--color--border, rgba( 11, 27, 51, 0.1 ) );
	--forme-bs-surface: var( --wp--preset--color--surface, #EEF4FF );
	--forme-bs-wash: var( --wp--preset--color--cream, #F5F8FE );
	--forme-bs-panel: var( --wp--preset--color--navy-panel, var( --wp--preset--color--rich-black, #0E1F3A ) );
	--forme-bs-warn: var( --forme-status-warning, var( --wp--preset--color--gold-mid, #B54708 ) );
	--forme-bs-warn-bg: var( --forme-status-warning-bg, var( --wp--preset--color--gold-pale, #FFFAEB ) );
	--forme-bs-radius: 14px;
}

/* ── Group: tiles & panels ─────────────────────────────────────────── */
.wp-block-group.is-style-forme-tile,
.wp-block-group.is-style-forme-tile-accent,
.wp-block-group.is-style-forme-tile-warn,
.wp-block-group.is-style-forme-locked {
	background: #fff;
	border: 1px solid var( --forme-bs-line );
	border-radius: var( --forme-bs-radius );
	padding: clamp( 16px, 2.5vw, 24px );
}
.wp-block-group.is-style-forme-tile > :first-child,
.wp-block-group.is-style-forme-tile-accent > :first-child,
.wp-block-group.is-style-forme-tile-warn > :first-child,
.wp-block-group.is-style-forme-panel-dark > :first-child { margin-top: 0; }
.wp-block-group.is-style-forme-tile > :last-child,
.wp-block-group.is-style-forme-tile-accent > :last-child,
.wp-block-group.is-style-forme-tile-warn > :last-child,
.wp-block-group.is-style-forme-panel-dark > :last-child { margin-bottom: 0; }
.wp-block-group.is-style-forme-tile :where( h3, h4 ) { font-size: 17px; margin: 0 0 6px; }
.wp-block-group.is-style-forme-tile :where( p ) { font-size: 14px; line-height: 1.55; color: var( --forme-bs-muted ); }

.wp-block-group.is-style-forme-tile-accent {
	border-color: var( --forme-bs-accent );
	box-shadow: 0 0 0 1px var( --forme-bs-accent ) inset;
}
.wp-block-group.is-style-forme-tile-warn {
	background: var( --forme-bs-warn-bg );
	border-color: transparent;
}
.wp-block-group.is-style-forme-tile-warn :where( h3, h4 ) { font-size: 15px; margin: 0 0 4px; color: var( --forme-bs-ink ); }
.wp-block-group.is-style-forme-tile-warn :where( p ) { font-size: 13px; color: var( --forme-bs-muted ); }

.wp-block-group.is-style-forme-panel-dark {
	background: var( --forme-bs-panel );
	color: #E7EEFB;
	border-radius: var( --forme-bs-radius );
	padding: clamp( 18px, 3vw, 28px );
}
.wp-block-group.is-style-forme-panel-dark :where( h1, h2, h3, h4, strong ) { color: #fff; }
.wp-block-group.is-style-forme-panel-dark :where( p ) { color: #C9D6EE; }
.wp-block-group.is-style-forme-panel-dark a { color: #8DB6FF; }

/* Locked tile: big letter + padlock, content intentionally withheld. */
.wp-block-group.is-style-forme-locked {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 120px;
	background: var( --forme-bs-wash );
	text-align: center;
}
.wp-block-group.is-style-forme-locked :where( p, h3, h4 ) {
	margin: 0;
	font-size: clamp( 40px, 6vw, 56px );
	font-weight: 800;
	color: var( --forme-bs-ink );
	opacity: 0.85;
	line-height: 1;
}
.wp-block-group.is-style-forme-locked::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	background-color: var( --forme-bs-muted );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.wp-block-group.is-style-forme-callout {
	background: var( --forme-bs-surface );
	border-radius: var( --forme-bs-radius );
	padding: 16px 20px;
	align-items: center;
}
.wp-block-group.is-style-forme-callout :where( p ) { margin: 0; font-weight: 600; color: var( --forme-bs-ink ); }

/* ── Table: comparison ─────────────────────────────────────────────── */
.wp-block-table.is-style-forme-compare {
	border: 1px solid var( --forme-bs-line );
	border-radius: var( --forme-bs-radius );
	overflow: hidden;
	background: #fff;
}
.wp-block-table.is-style-forme-compare table { border-collapse: collapse; width: 100%; font-size: 14px; }
.wp-block-table.is-style-forme-compare :where( th, td ) {
	border: 0;
	border-bottom: 1px solid var( --forme-bs-line );
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}
.wp-block-table.is-style-forme-compare tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-forme-compare thead { border-bottom: 0; }
.wp-block-table.is-style-forme-compare thead th { font-weight: 600; background: var( --forme-bs-wash ); }
.wp-block-table.is-style-forme-compare thead th:last-child,
.wp-block-table.is-style-forme-compare td:last-child { color: var( --forme-bs-accent ); }
.wp-block-table.is-style-forme-compare td:first-child { font-weight: 600; color: var( --forme-bs-ink ); width: 28%; }
.wp-block-table.is-style-forme-compare td:not( :first-child ):not( :last-child ) { color: var( --forme-bs-muted ); }
@media ( max-width: 600px ) {
	/* Phone: stack each row as a card so three columns never overflow. */
	.wp-block-table.is-style-forme-compare thead { display: none; }
	.wp-block-table.is-style-forme-compare :where( tr, td ) { display: block; width: auto !important; }
	.wp-block-table.is-style-forme-compare tr { border-bottom: 1px solid var( --forme-bs-line ); padding: 10px 0; }
	.wp-block-table.is-style-forme-compare tr:last-child { border-bottom: 0; }
	.wp-block-table.is-style-forme-compare td { border: 0; padding: 4px 16px; }
	.wp-block-table.is-style-forme-compare td[data-label]::before {
		content: attr( data-label ) ": ";
		font-family: var( --wp--preset--font-family--mono, monospace );
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var( --forme-bs-muted );
	}
}

/* ── Lists ─────────────────────────────────────────────────────────── */
.wp-block-list.is-style-forme-steps { list-style: none; padding: 0; margin: 0; counter-reset: forme-step; display: grid; gap: 14px; }
.wp-block-list.is-style-forme-steps > li {
	counter-increment: forme-step;
	position: relative;
	padding-left: 40px; /* block, not grid: bare text nodes would become grid items */
	min-height: 26px;
}
.wp-block-list.is-style-forme-steps > li::before {
	content: counter( forme-step );
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	background: var( --forme-bs-surface );
	color: var( --forme-bs-accent );
}
.wp-block-list.is-style-forme-steps > li > strong:first-child { display: block; color: var( --forme-bs-ink ); }

.wp-block-list.is-style-forme-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.wp-block-list.is-style-forme-checklist > li { position: relative; padding-left: 28px; }
.wp-block-list.is-style-forme-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 18px;
	height: 18px;
	background-color: var( --forme-bs-accent );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.wp-block-list.is-style-forme-bullets { padding-left: 1.1em; display: grid; gap: 6px; }
.wp-block-list.is-style-forme-bullets > li::marker { color: var( --forme-bs-accent ); }

/* ── Paragraphs & headings ─────────────────────────────────────────── */
p.is-style-forme-eyebrow {
	font-family: var( --wp--preset--font-family--mono, ui-monospace, monospace );
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --forme-bs-accent );
	margin-bottom: 8px;
}
p.is-style-forme-formula {
	font-family: var( --wp--preset--font-family--mono, ui-monospace, monospace );
	font-size: clamp( 20px, 2.4vw, 28px );
	white-space: nowrap;
	overflow-x: auto;
	letter-spacing: 0.02em;
	color: #8DB6FF;
}
p.is-style-forme-small { font-size: 12px; line-height: 1.5; color: var( --forme-bs-muted ); }

/* Wrap the last sentence in <em> (Italic) and it turns accent-coloured. */
.wp-block-heading.is-style-forme-accent-tail em { font-style: normal; color: var( --forme-bs-accent ); }