/**
 * Block styles (is-style-*) registered in inc/block-styles.php.
 *
 * A block style is a one-block look switch the client picks from the Styles
 * panel: a button, a list or a section background. Anything with parts
 * inside (a card, a tile) is a BEM component in components.css instead,
 * because a block style can't name the parts.
 *
 * Every colour here is a token or scheme colour, so each style works on a
 * light page, a dark page and a forced-scheme section without extra CSS.
 *
 * Spacing inside a style: core's flow layout puts margins between a Group's
 * children in CSS outside any layer, which beats this file. A style that
 * owns the spacing between its children sets those margins with !important.
 * That's the only use of !important here, and it's marked "owns spacing".
 */
@layer components {
	/* ---------- Block styles ----------
	   One section per style, named after it: .wp-block-[block].is-style-[name] */

	/* ---------- Buttons ---------- */

	/* Ghost: outline in the heading colour, so it flips with the scheme. */
	.wp-block-button.is-style-ghost {
		--btn-bg: transparent;
		--btn-text: var(--heading-color);
		--btn-border-color: var(--heading-color);
		--btn-bg-hover: var(--heading-color);
		--btn-border-color-hover: var(--heading-color);
		--btn-text-hover: var(--bg-body);
	}

	/* Text link: a Button that looks like an ordinary link, in the colour of
	   the text around it. Used for bound contact details (phone, email,
	   booking), because only a Button can bind both its text and its link. */
	.wp-block-button.is-style-text {
		--btn-bg: transparent;
		--btn-bg-hover: transparent;
		--btn-border-color: transparent;
		--btn-border-color-hover: transparent;
		--btn-text: currentColor;
		--btn-text-hover: currentColor;
		--btn-padding-block: 0;
		--btn-padding-inline: 0;
		--btn-font-size: inherit;
		--btn-radius: 0;
	}

	.wp-block-button.is-style-text .wp-block-button__link {
		font-weight: inherit;
		line-height: inherit;
		text-align: left;
		text-underline-offset: 0.18em;
		text-decoration-thickness: 1px;
	}

	.wp-block-button.is-style-text .wp-block-button__link:hover {
		text-decoration: underline;
	}

	/* ---------- Lists ---------- */

	/* No margin here: the section or slot the list sits in sets its spacing.
	   An !important margin in this layer would beat a section's own
	   !important margin, because important declarations reverse the layer
	   order (found on TRACD Solutions, 9 November 2026). */
	.wp-block-list:is(.is-style-checks, .is-style-checks-columns) {
		padding: 0;
		list-style: none;
	}

	.wp-block-list:is(.is-style-checks, .is-style-checks-columns) > li {
		position: relative;
		padding: 0.75rem 0 0.75rem 1.6rem;
		border-bottom: 1px solid var(--border-color);
	}

	.wp-block-list:is(.is-style-checks, .is-style-checks-columns) > li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 1.2em;
		width: 0.7rem;
		height: 0.38rem;
		border-left: 2px solid var(--tick-color, var(--link-color));
		border-bottom: 2px solid var(--tick-color, var(--link-color));
		transform: rotate(-45deg);
	}

	@media (min-width: 560px) {
		.wp-block-list.is-style-checks-columns {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 2.5rem;
		}
	}

	/* ---------- Section colour schemes (Group) ----------
	   The client picks one from the Styles panel. Light, Dark and Brand
	   force their scheme, so headings, text, links and buttons inside switch
	   with it. Alternate follows the page scheme, one step off the page
	   colour. Use these on a pattern's outer Group, never a bg-- class, or
	   the utility would beat the client's choice. */
	.wp-block-group:is(.is-style-section-light, .is-style-section-alt, .is-style-section-dark, .is-style-section-brand) {
		color: var(--text-color);
	}

	.wp-block-group.is-style-section-light {
		color-scheme: light;
		background-color: var(--bg-body);
	}

	.wp-block-group.is-style-section-alt {
		background-color: var(--bg-surface-alt);
	}

	.wp-block-group.is-style-section-dark {
		color-scheme: dark;
		background-color: var(--bg-body);
	}

	.wp-block-group.is-style-section-brand {
		color-scheme: dark;
		background-color: var(--bg-brand);
	}
}