/*
Theme Name: Chaselumen
Theme URI: https://chaselumen.com
Description: Chaselumen child theme. Carries the brand design tokens (colour, type scale, spacing), block-style variants and the component CSS that block attributes cannot express. Never edit the parent theme (hostinger-ai-theme) — a parent update erases it.
Author: Chaselumen
Template: hostinger-ai-theme
Version: 3.1.1
Requires at least: 6.6
Requires PHP: 8.1
License: GPLv3
Text Domain: chaselumen
*/

/* ------------------------------------------------------------------ base ---
   WordPress emits the design system itself from theme.json (palette, type
   scale, spacing, buttons). Only structure and components live here.

   Design language: warm architectural x industrial precision.
   - Warm paper ground, charcoal ink, ONE brass accent (~5-10% of the surface).
   - Hairline rules and visible grid structure instead of cards and shadows.
   - Sharp corners. No glassmorphism, no gradient blobs, no floating panels.
   - The brass "light line" is the brand's single decorative device; it repeats
     the glowing crossbar of the E in the logo. Used sparingly, never as noise.
*/

.wp-site-blocks {
	--cl-grid: var(--wp--style--global--wide-size);
}

/* ---------------------------------------------------------- section rhythm ---
   Full-bleed background + controlled inner grid (brief §9). */
.is-style-cl-section {
	padding-block: clamp(4.25rem, 8vw, 8.5rem);
}

.is-style-cl-section-tight {
	padding-block: var(--wp--preset--spacing--80);
}

@media (max-width: 781px) {
	.is-style-cl-section {
		padding-block: var(--wp--preset--spacing--80);
	}

	.is-style-cl-section-tight {
		padding-block: var(--wp--preset--spacing--70);
	}
}

/* ------------------------------------------------------------------ type ---
   Small tracked caps are the connective tissue of the whole system: every
   eyebrow, label, table head and footer heading uses them. */
.cl-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0 0 1.25rem;
}

/* Section header rhythm: numbered eyebrow / heading / lead paragraph.
   The rhythm lives here rather than in per-block style attributes, because a
   static block renders its SAVED markup — block-comment styles never arrive. */
.cl-sec-head {
	margin-bottom: var(--wp--preset--spacing--70);
}

.cl-sec-head > h2 {
	margin-bottom: 0;
}

.cl-lead {
	max-width: 62ch;
	margin-bottom: 0;
	color: var(--wp--preset--color--muted);
}

.has-night-background-color .cl-lead,
.is-style-cl-dark .cl-lead {
	color: #9a9a9a;
}

/* Buttons: theme.json's `elements.button` typography is emitted as
   `:root :where(...)`, which the block library's own `.wp-block-button__link`
   rules out-rank — so the designed size/weight needs one explicit declaration.
   Kept in the stylesheet (never inline) so the button label, link and colour
   stay fully editable in Gutenberg. */
.wp-block-button__link {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* ------------------------------------------------------------- editor only ---
   The block editor always renders the page title, and it is an h1, so it picked
   up the display size (~62px) and read as a big stray headline sitting above the
   hero. Every page on this site uses the page-no-title template, so the FRONT END
   shows no page title at all — this only makes the editor look like the site.
   The bare .wp-block-post-title selector is deliberate: it applies whether the
   canvas is wrapped in .editor-styles-wrapper or is the editor iframe's body. */
.wp-block-post-title,
.editor-post-title__input {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* The brass light-line: the brand's one recurring flourish. */
.cl-lightline {
	height: 2px;
	margin: 0;
	border: 0;
	/* Flat, matching the 2026-10-19 monochrome logo: no gradient, no glow.
	   The light-line is a plain rule that inherits the section's text colour. */
	background: currentColor;
	opacity: 0.8;
}

/* Hairline rules. A group with no content and only a top border. */
.cl-rule {
	border-top: 1px solid var(--wp--preset--color--line);
}

.cl-rule--dark {
	border-top-color: var(--wp--preset--color--line-dark);
}

.cl-rule--thick {
	border-top-width: 2px;
	border-top-color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------ product families ---
   An editorial index, not a row of cards: number / name / descriptor / arrow,
   separated by hairlines. Hovering shifts the row and lights the arrow. */
.cl-rows {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cl-rows--dark {
	border-bottom-color: var(--wp--preset--color--line-dark);
}

.cl-row {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--50);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
	transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.cl-row:hover {
	background: var(--wp--preset--color--stone);
	padding-left: var(--wp--preset--spacing--40);
}

.cl-rows--dark .cl-row {
	border-top-color: var(--wp--preset--color--line-dark);
}

.cl-rows--dark .cl-row:hover {
	background: rgba(255, 255, 255, 0.035);
}

.cl-row-num {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brass-deep);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.cl-rows--dark .cl-row-num {
	color: var(--wp--preset--color--brass);
}

.cl-row-name {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 0.35rem;
}

.cl-row-name a {
	color: inherit;
}

.cl-row-desc {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
	max-width: 46ch;
}

.cl-rows--dark .cl-row-desc {
	color: #9a9a9a;
}

.cl-row-arrow {
	font-size: 1.125rem;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	transition: transform 0.18s ease, color 0.18s ease;
}

.cl-row:hover .cl-row-arrow {
	transform: translateX(5px);
	color: var(--wp--preset--color--brass-deep);
}

.cl-rows--dark .cl-row:hover .cl-row-arrow {
	color: var(--wp--preset--color--brass);
}

@media (max-width: 600px) {
	.cl-row {
		grid-template-columns: 2.25rem minmax(0, 1fr);
	}

	.cl-row-arrow {
		display: none;
	}
}

/* ------------------------------------------------------- specification ---
   Custom-engineering grid. Cells are separated by hairlines so the block
   reads as a datasheet, not a set of cards. */
.cl-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 1px solid var(--wp--preset--color--line);
}

.cl-spec {
	padding: var(--wp--preset--spacing--50);
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cl-spec-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.cl-spec-desc {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@media (max-width: 899px) {
	.cl-specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cl-specs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------- applications ---
   Typographic grid; each cell carries its own hairline so the block reads as
   a plan view rather than a deck of cards. */
.cl-apps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--wp--preset--color--line);
}

.cl-app {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50)
		var(--wp--preset--spacing--60) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cl-app-num {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brass-deep);
	margin: 0 0 0.9rem;
	font-variant-numeric: tabular-nums;
}

.cl-app-name {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
}

.cl-app-desc {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@media (max-width: 899px) {
	.cl-apps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 7 applications in a 3-column grid leaves two empty cells in the last row.
   The 8th cell spans two columns, so the grid closes completely and the space
   carries a conversion link instead of a hole. */
.cl-app--cta {
	grid-column: span 2;
	background: var(--wp--preset--color--stone);
	padding-inline: var(--wp--preset--spacing--50);
}

@media (max-width: 899px) {
	.cl-app--cta {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.cl-apps {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-apps > .cl-app:last-child {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}
}

/* ------------------------------------------------------ manufacturing ---
   Numbered process flow on the dark ground. Numbers in brass, hairline
   separators, no icons. */
.cl-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--line-dark);
}

.cl-step {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line-dark);
}

.cl-step-num {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brass);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.cl-step-name {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.3rem;
}

.cl-step-desc {
	font-size: 0.875rem;
	line-height: 1.55;
	color: #9a9a9a;
	margin: 0;
}

@media (max-width: 781px) {
	.cl-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------- why us ---
   Two-column factual list with hairline separators. */
.cl-whys {
	border-top: 1px solid var(--wp--preset--color--line);
}

.cl-why {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cl-why-name {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.cl-why-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@media (max-width: 700px) {
	.cl-why {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------- glossary ---
   Technical reference terms. Compact two-column definition list. */
.cl-terms {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 1px solid var(--wp--preset--color--line);
}

.cl-term {
	padding: var(--wp--preset--spacing--50);
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cl-term-key {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-deep);
	margin: 0 0 0.55rem;
}

.cl-term-val {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@media (max-width: 899px) {
	.cl-terms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cl-terms {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------ dark bands ---
   Text colours on the dark ground. Headings inherit, which is why the theme
   never sets a global heading colour. */
.has-night-background-color,
.is-style-cl-dark {
	color: var(--wp--preset--color--paper);
}

.cl-on-dark-muted {
	color: #9a9a9a;
}

/* Links on the dark ground must not stay brass-deep (2.7:1 there). */
.has-night-background-color a,
.is-style-cl-dark a {
	color: var(--wp--preset--color--paper);
}

.has-night-background-color a:hover,
.is-style-cl-dark a:hover {
	color: var(--wp--preset--color--brass);
}

/* ------------------------------------------------------------- buttons ---
   Sharp 2px corners, brass fill, charcoal label. The outline variant reads as
   a drawn rule rather than a filled pill. */
.wp-block-button.is-style-cl-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-cl-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Outline on dark grounds. Keyed off the preset class WordPress already emits
   so no page markup has to know about it. */
.has-night-background-color .wp-block-button.is-style-cl-outline .wp-block-button__link,
.is-style-cl-dark .wp-block-button.is-style-cl-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--wp--preset--color--paper);
	background: transparent;
}

.has-night-background-color .wp-block-button.is-style-cl-outline .wp-block-button__link:hover,
.is-style-cl-dark .wp-block-button.is-style-cl-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--night);
	border-color: var(--wp--preset--color--paper);
}

/* Solid button on the dark ground: paper fill, charcoal label. */
.has-night-background-color .wp-block-button.is-style-cl-solid-light .wp-block-button__link,
.is-style-cl-dark .wp-block-button.is-style-cl-solid-light .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--night);
}

.has-night-background-color .wp-block-button.is-style-cl-solid-light .wp-block-button__link:hover,
.is-style-cl-dark .wp-block-button.is-style-cl-solid-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--brass);
	border-color: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--night);
}

/* ---------------------------------------------------------------- lists ---*/
.is-style-no-bullets,
ul.is-style-no-bullets {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.is-style-no-bullets li {
	list-style: none;
	margin-bottom: 0.5rem;
}

/* --------------------------------------------------------- spec tables ---
   Wide spec tables need a scroll container. macOS overlay scrollbars are
   invisible until you scroll, so a hint is mandatory below the breakpoint. */
.cl-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cl-table-scroll table {
	min-width: 860px;
	width: 100%;
	border-collapse: collapse;
}

.cl-table-scroll thead th {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--ink);
	text-align: left;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cl-table-scroll th:not(:first-child),
.cl-table-scroll td.cl-num {
	text-align: center;
}

.cl-table-scroll th,
.cl-table-scroll td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 899.98px) {
	.cl-table-scroll {
		position: relative;
	}

	.cl-table-scroll::after {
		content: "Scroll horizontally to see all columns →";
		display: block;
		font-size: 0.75rem;
		color: var(--wp--preset--color--muted);
		padding-top: 0.5rem;
	}
}

/* --------------------------------------------------------------- header ---
   Height is fixed at 78px: adding nav items or a taller logo must never make
   the header grow (hard requirement from the brief). */
.cl-header {
	min-height: 78px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cl-header .wp-block-site-logo img {
	height: auto;
}

.cl-header .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

/* Nav links: quiet by default, brass rule on hover. */
.cl-header .wp-block-navigation-item__content:hover,
.cl-header .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--brass);
}

@media (max-width: 599px) {
	.cl-header {
		min-height: 64px;
	}
}

/* --------------------------------------------------------------- footer ---*/
.cl-footer a {
	text-decoration: none;
}

.cl-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brass);
}

.cl-footer .cl-rule {
	margin-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------- page shell ---
   Full-bleed sections are spaced by their own padding. The layout engine also
   applies a flow block-gap between them, which left a paper-coloured strip
   wherever two dark bands meet (visible between the closing CTA and footer).
   Collapse it: sections own their rhythm. */
.entry-content > .wp-block-group.alignfull,
.wp-block-post-content > .wp-block-group.alignfull {
	margin-block: 0;
}

/* Hero light band: one brass rule closing the hero, with the product-family
   nav sitting directly under it. An earlier version stacked four floating
   rules, which read as stray lines rather than a fixture. */
.cl-hero-band {
	margin-top: var(--wp--preset--spacing--90);
}

.cl-hero-nav {
	margin-top: var(--wp--preset--spacing--50);
}

.cl-hero-navitem {
	margin: 0;
}

.cl-hero-navitem a {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.cl-hero-navitem a:hover {
	color: var(--wp--preset--color--brass);
}

/* ------------------------------------------------------- accessibility ---*/
.cl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible focus ring everywhere — the brief calls out poor focus states. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass-deep);
	outline-offset: 2px;
}

.has-night-background-color a:focus-visible,
.is-style-cl-dark a:focus-visible {
	outline-color: var(--wp--preset--color--brass);
}

/* Restrained motion: honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
   REFERENCE PASS — 2026-10-19
   Adapted from the visual language of ls-light.com: STYLE ONLY, no content,
   images or copy taken. What was lifted: extreme weight contrast, hairline
   rules, tracked-out micro-labels, blueprint tick scales, outline-first
   buttons, and much more air.

   The type half of this lives in theme.json (light-300 headings at roughly
   double size, 11px bold tracked labels). This block carries what block
   attributes cannot express. Everything here stays editable in Gutenberg —
   only rhythm and decoration are set, never content.
   ========================================================================== */

/* Labels: tiny, bold, wide-tracked — the counterweight to the thin headlines. */
.cl-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0 0 1.6rem;
}

/* Hairline under every section headline, full column width. */
.cl-sec-head > h2 {
	padding-bottom: 1.15rem;
	border-bottom: 1px solid currentColor;
	border-bottom-color: color-mix(in srgb, currentColor 28%, transparent);
}

/* Navigation: small, tracked, uppercase — quiet, like the reference. */
.cl-header .wp-block-navigation-item__content {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Header CTA stays the one filled button on a light ground. */
.cl-header .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Blueprint tick scale under the header — a pseudo-element so the 78px header
   height is untouched (a real block would add ~7px). */
.cl-header {
	position: relative;
}

.cl-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 7px;
	background-image: repeating-linear-gradient(
		90deg, currentColor 0 1px, transparent 1px 14px);
	background-size: 100% 7px;
	background-repeat: repeat-x;
	opacity: 0.18;
	pointer-events: none;
}

/* Blueprint tick scale. A technical flourish rather than a plain rule. */
.cl-ticks {
	height: 7px;
	margin: 0;
	border: 0;
	background-image: repeating-linear-gradient(
		90deg, currentColor 0 1px, transparent 1px 14px);
	background-repeat: repeat-x;
	background-size: 100% 7px;
	opacity: 0.3;
}

/* Rotated section label for the left gutter. Decorative; hidden where there is
   no gutter to sit in. */
.cl-rot {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
	opacity: 0.45;
}

@media (max-width: 1000px) {
	.cl-rot {
		display: none;
	}
}

/* Buttons: OUTLINE by default, uppercase and tracked. A filled button is the
   exception (.is-style-cl-solid) and flips to white on dark grounds — an ink
   fill on an ink section is invisible, which is exactly what happened when the
   palette went monochrome. */
.wp-block-button__link {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 1em 2em;
	border: 1px solid currentColor;
	background: transparent;
	border-radius: 0;
	transition: box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1px currentColor;
}

.is-style-cl-solid .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.is-style-cl-solid .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.has-night-background-color .wp-block-button.is-style-cl-solid .wp-block-button__link,
.is-style-cl-dark .wp-block-button.is-style-cl-solid .wp-block-button__link {
	background: #ffffff;
	border-color: #ffffff;
	color: #0a0a0a;
}

.has-night-background-color .wp-block-button.is-style-cl-solid .wp-block-button__link:hover,
.is-style-cl-dark .wp-block-button.is-style-cl-solid .wp-block-button__link:hover {
	background: transparent;
	color: #ffffff;
}