/**
 * How-To block styles.
 */

.wp-block-madweb-seo-howto {
	display: block;
}

.madweb-seo-howto__title {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast, inherit);
}

.madweb-seo-howto__intro {
	color: var(--wp--preset--color--secondary, var(--wp--preset--color--muted, #6b6b6b));
	margin-bottom: 1rem;
}

.madweb-seo-howto__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--primary, var(--wp--preset--font-family--inter, inherit));
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--secondary, var(--wp--preset--color--muted, #6b6b6b));
}

.madweb-seo-howto__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.madweb-seo-howto__step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	border: 1px solid var(--wp--preset--color--tertiary, var(--wp--preset--color--border, #e8e8e8));
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--base-2, var(--wp--preset--color--neutral, #f7f7f7));
}

.madweb-seo-howto__step-number {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent, var(--wp--preset--color--primary, #1a8917));
	color: var(--wp--preset--color--base, var(--wp--preset--color--background, #ffffff));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--primary, var(--wp--preset--font-family--inter, inherit));
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.madweb-seo-howto__step-title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--primary, var(--wp--preset--font-family--inter, inherit));
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--contrast, inherit);
}

.madweb-seo-howto__step-text {
	color: var(--wp--preset--color--secondary, var(--wp--preset--color--muted, #6b6b6b));
}

.madweb-seo-howto__step-text > :last-child {
	margin-bottom: 0;
}

.madweb-seo-howto__step-image {
	display: block;
	margin-top: 0.5rem;
	max-width: 100%;
	border-radius: 0.375rem;
}

.madweb-seo-howto__extras {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.madweb-seo-howto__tools h4,
.madweb-seo-howto__supplies h4 {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--primary, var(--wp--preset--font-family--inter, inherit));
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast, inherit);
}

.madweb-seo-howto__tools ul,
.madweb-seo-howto__supplies ul {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--wp--preset--color--secondary, inherit);
}

/* ── Frontend Dark Mode ───────────────────────────────────────── */
body.dark-mode .madweb-seo-howto__title,
html[data-theme="dark"] .madweb-seo-howto__title {
	color: var(--wp--preset--color--contrast, #eceff4);
}

body.dark-mode .madweb-seo-howto__intro,
body.dark-mode .madweb-seo-howto__meta,
html[data-theme="dark"] .madweb-seo-howto__intro,
html[data-theme="dark"] .madweb-seo-howto__meta {
	color: var(--wp--preset--color--secondary, #a0aab6);
}

body.dark-mode .madweb-seo-howto__step,
html[data-theme="dark"] .madweb-seo-howto__step {
	border-color: var(--wp--preset--color--tertiary, #3b4252);
	background: var(--wp--preset--color--base-2, #1e232c);
}

body.dark-mode .madweb-seo-howto__step-number,
html[data-theme="dark"] .madweb-seo-howto__step-number {
	background: var(--wp--preset--color--accent, #6b9cff);
	color: #ffffff;
}

body.dark-mode .madweb-seo-howto__step-title,
html[data-theme="dark"] .madweb-seo-howto__step-title {
	color: var(--wp--preset--color--contrast, #eceff4);
}

body.dark-mode .madweb-seo-howto__step-text,
html[data-theme="dark"] .madweb-seo-howto__step-text {
	color: var(--wp--preset--color--secondary, #a0aab6);
}

body.dark-mode .madweb-seo-howto__tools h4,
body.dark-mode .madweb-seo-howto__supplies h4,
html[data-theme="dark"] .madweb-seo-howto__tools h4,
html[data-theme="dark"] .madweb-seo-howto__supplies h4 {
	color: var(--wp--preset--color--contrast, #eceff4);
}

body.dark-mode .madweb-seo-howto__tools ul,
body.dark-mode .madweb-seo-howto__supplies ul,
html[data-theme="dark"] .madweb-seo-howto__tools ul,
html[data-theme="dark"] .madweb-seo-howto__supplies ul {
	color: var(--wp--preset--color--secondary, #a0aab6);
}

@media (prefers-color-scheme: dark) {
	body:not(.dark-mode-off) .madweb-seo-howto__title {
		color: var(--wp--preset--color--contrast, #eceff4);
	}

	body:not(.dark-mode-off) .madweb-seo-howto__intro,
	body:not(.dark-mode-off) .madweb-seo-howto__meta {
		color: var(--wp--preset--color--secondary, #a0aab6);
	}

	body:not(.dark-mode-off) .madweb-seo-howto__step {
		border-color: var(--wp--preset--color--tertiary, #3b4252);
		background: var(--wp--preset--color--base-2, #1e232c);
	}

	body:not(.dark-mode-off) .madweb-seo-howto__step-number {
		background: var(--wp--preset--color--accent, #6b9cff);
		color: #ffffff;
	}

	body:not(.dark-mode-off) .madweb-seo-howto__step-title {
		color: var(--wp--preset--color--contrast, #eceff4);
	}

	body:not(.dark-mode-off) .madweb-seo-howto__step-text {
		color: var(--wp--preset--color--secondary, #a0aab6);
	}

	body:not(.dark-mode-off) .madweb-seo-howto__tools h4,
	body:not(.dark-mode-off) .madweb-seo-howto__supplies h4 {
		color: var(--wp--preset--color--contrast, #eceff4);
	}

	body:not(.dark-mode-off) .madweb-seo-howto__tools ul,
	body:not(.dark-mode-off) .madweb-seo-howto__supplies ul {
		color: var(--wp--preset--color--secondary, #a0aab6);
	}
}