/*
 * Foundation block styles (Phase 4, docs/05 §5, registered in
 * inc/block-styles.php). Ported from the redesign PoC (css/site.css @ ed0ab9f7)
 * using theme.json tokens and base.css aliases only.
 *
 * Icons used here (arrow, check) come from sealcoin-core's icons.css
 * (--sc-icon-* custom properties). Without the plugin the icons are simply
 * not drawn; the text still renders.
 */

/* ---------- Surfaces ---------- */

.is-style-band-orange {
	padding-block: var(--wp--preset--spacing--section-band);
	background: var(--gradient-brand);
	color: var(--c-on-orange);
}

.is-style-band-orange :where(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button)) {
	color: var(--c-on-orange);
}

.is-style-navy {
	background-color: var(--c-navy);
}

.is-style-glow {
	position: relative;
	isolation: isolate;
}

.is-style-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--gradient--glow-top);
	pointer-events: none;
}

/* ---------- Cards ---------- */

.is-style-card,
.is-style-card-primary {
	position: relative;
	padding: var(--wp--custom--card-padding);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: linear-gradient(180deg, var(--c-panel-2), var(--c-panel));
}

.is-style-card-primary {
	border-color: var(--c-orange);
	box-shadow: var(--shadow-glow);
}

/* ---------- Typography variants ---------- */

.is-style-eyebrow {
	font-family: var(--f-display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--c-orange);
}

.is-style-band-orange .is-style-eyebrow {
	color: var(--c-on-orange);
	opacity: 0.75;
}

.is-style-lead {
	max-width: var(--wp--custom--measure--lead);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--c-muted);
}

.is-style-band-orange .is-style-lead {
	color: var(--c-on-orange);
}

.is-style-arrow-link a {
	display: inline-flex;
	gap: var(--wp--custom--gap--icon-text);
	align-items: center;
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-orange);
	text-decoration: none;
}

.is-style-arrow-link a::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: none;
	background-color: currentcolor;
	mask: var(--sc-icon-arrow) center / contain no-repeat;
}

.is-style-arrow-link a:hover {
	color: var(--c-orange-hover);
	text-decoration: underline;
}

/* ---------- Button variants ---------- */

.wp-block-button.is-style-ghost .wp-element-button {
	border: 1px solid var(--line);
	background: transparent;
	color: var(--c-text);
}

/* PoC .btn-dark is #111 on #fff text; the palette has no pure white, so the
   closest text token is used (contrast 17.7:1). */
.wp-block-button.is-style-dark .wp-element-button {
	background: var(--c-on-orange);
	color: var(--c-text);
}

/* Button `arrow` (Phase 8): a trailing arrow icon, as on the PoC primary
   actions. Uses the arrow from sealcoin-core's icons.css. */
.wp-block-button.is-style-arrow .wp-element-button {
	display: inline-flex;
	gap: var(--wp--custom--hero--button-icon-gap);
	align-items: center;
}

.wp-block-button.is-style-ghost .wp-element-button:hover {
	background: color-mix(in srgb, var(--c-orange) 10%, transparent);
	color: var(--c-text);
}

.wp-block-button.is-style-dark .wp-element-button:hover {
	background: var(--c-black);
	color: var(--c-text);
}

.wp-block-button.is-style-arrow .wp-element-button::after {
	content: "";
	width: var(--wp--custom--hero--button-icon-size);
	height: var(--wp--custom--hero--button-icon-size);
	flex: none;
	background-color: currentcolor;
	mask: var(--sc-icon-arrow) center / contain no-repeat;
}

/* ---------- Gradient text (Phase 8) ----------
   An inline span with this class inside a heading or paragraph, e.g. the
   highlighted phrase of the H-01 headline. The editor keeps the span as-is. */

.sc-gradient-text {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Checklist ---------- */

.is-style-checklist {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The icon is positioned in the left gutter rather than being a grid column,
   so an item with inline markup (a bold lead-in, a link) stays one text run. */
.is-style-checklist > li {
	position: relative;
	min-height: var(--wp--custom--gap--checklist-item-min-height);
	padding-left: calc(1.5rem + var(--wp--custom--gap--checklist));
}

/* A bold lead-in (PoC: `.checklist b`). */
.is-style-checklist strong {
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-text);
}

.is-style-checklist > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.15rem;
	background-color: var(--c-orange);
	mask: var(--sc-icon-check) center / contain no-repeat;
}

/* ---------- Paper surface (declared last so it overrides the variants above) ---------- */

/*
 * Paper surface (light). docs/05 §1.2: orange text on paper is 2.07:1 and must
 * never be used; text on paper is ink. Every orange text treatment is forced to
 * ink here, including the eyebrow and arrow-link styles and the editor's
 * "orange" text colour. Orange backgrounds (primary buttons) are unaffected:
 * their text is on-orange.
 */
.is-style-paper {
	background-color: var(--c-paper);
	color: var(--c-ink);
}

.is-style-paper :where(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button)) {
	color: var(--c-ink);
}

.is-style-paper .is-style-lead {
	color: var(--c-ink-muted);
}

.is-style-paper .is-style-eyebrow,
.is-style-paper .is-style-arrow-link a,
.is-style-paper .is-style-arrow-link a:hover,
.is-style-paper .has-orange-color,
.is-style-paper .has-orange-hover-color,
.is-style-paper .has-orange-line-color {
	color: var(--c-ink) !important;
}

.is-style-paper .is-style-checklist > li::before {
	background-color: var(--c-ink);
}