/* ────────────────────────────────────────────────────────────
   02-style-variations.css
   Section background system — applied to the outermost
   generateblocks/element container of every pattern section.

   WordPress register_block_style() outputs is-style-{name} on
   the block element. These rules target that rendered class.

   Slug mapping (functions.php → rendered class → CSS target):
     bg-light  → is-style-bg-light  → .is-style-bg-light
     bg-medium → is-style-bg-medium → .is-style-bg-medium
     bg-dark   → is-style-bg-dark   → .is-style-bg-dark

   Uses --wp--preset--color--* vars to stay in sync with
   the block editor palette defined in theme.json.
   ──────────────────────────────────────────────────────────── */

/* ── Section backgrounds ────────────────────────────────────── */

.is-style-bg-light {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-body);
}

.is-style-bg-medium {
	background-color: var(--wp--preset--color--gray-soft);
	color: var(--wp--preset--color--text-body);
}

.is-style-bg-dark {
	background-color: var(--wp--preset--color--blue-primary);
	color: var(--wp--preset--color--text-inverse);
}

/* ── Text inversions on dark background ─────────────────────── */

.is-style-bg-dark .wp-block-heading,
.is-style-bg-dark p {
	color: var(--wp--preset--color--text-inverse);
}

.is-style-bg-dark a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.is-style-bg-dark a:hover {
	color: var(--wp--preset--color--gray-soft);
}

/* ── Button inversions on dark background ───────────────────── */

.is-style-bg-dark .wp-block-button .wp-block-button__link,
.is-style-bg-dark .wp-block-button a.wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue-primary);
	border-color: var(--wp--preset--color--white);
}

.is-style-bg-dark .wp-block-button .wp-block-button__link:hover,
.is-style-bg-dark .wp-block-button a.wp-block-button__link:hover {
	background-color: var(--color-overlay-light-heavy); /* rgba — WP presets can't express opacity */
	color: var(--wp--preset--color--blue-primary);
}

.is-style-bg-dark .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-bg-dark .wp-block-button.is-style-outline a.wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

.is-style-bg-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-bg-dark .wp-block-button.is-style-outline a.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue-primary);
}