/**
 * core/button — surface context.
 *
 * theme.json owns the button's box: type, radius, padding, the solid fill and
 * the outline treatment on a white surface. This file owns the one thing
 * theme.json cannot express — which border the outline variation wears, which
 * depends on what it is sitting on and on the viewport.
 *
 * Three outline borders are bound by context: border-strong on white,
 * border-inverse on dark, border-brand on mobile. One variation, three
 * surfaces, no second button block.
 *
 * The contract is that section-panel, hero, cta-footer, footer and the mobile
 * drawer emit .is-surface-dark or .is-surface-brand on the surface root, and
 * that a light card nested inside one of those emits .is-surface-light to get
 * back. A surface that forgets does not render a wrong border: it renders no
 * button. Border and label resolve from the same pair of properties, so a dark
 * panel missing its class shows a #2e2f31 border AND a #2e2f31 label on
 * #2e2f31. Nothing throws and nothing looks broken in the editor outline —
 * check it in review rather than by eye.
 */

/**
 * Surfaces declare the treatment, the button only consumes it. Inheritance
 * handles nesting for free: a dark panel inside a white page overrides for its
 * own subtree and nothing else.
 *
 * The light values repeat theme.json's outline variation, and the solid
 * values repeat styles.elements.button, on purpose — so both variations
 * still render legibly if this file ever fails to load.
 */
:root,
.is-surface-light {
	--miraigo-outline-border: var(--wp--preset--color--border-strong);
	--miraigo-outline-ink: var(--wp--preset--color--text-primary);
	--miraigo-outline-hover-fill: var(--wp--preset--color--border-strong);
	--miraigo-outline-hover-ink: var(--wp--preset--color--text-inverse);
	--miraigo-solid-fill: var(--wp--preset--color--background-brand);
	--miraigo-solid-ink: var(--wp--preset--color--text-inverse);
	--miraigo-solid-hover-fill: var(--wp--custom--color--brand-hover);
	--miraigo-solid-hover-ink: var(--wp--preset--color--text-inverse);
	--miraigo-focus-ring: var(--wp--preset--color--text-primary);
}

/**
 * The brand-red panel gets the dark treatment. border-strong on #ee293a is
 * illegible and border-brand on #ee293a is invisible; white is the only
 * readable choice.
 */
.is-surface-dark {
	--miraigo-outline-border: var(--wp--preset--color--border-inverse);
	--miraigo-outline-ink: var(--wp--preset--color--text-inverse);
	--miraigo-outline-hover-fill: var(--wp--preset--color--border-inverse);
	--miraigo-outline-hover-ink: var(--wp--preset--color--text-primary);
	--miraigo-solid-fill: var(--wp--preset--color--background-brand);
	--miraigo-solid-ink: var(--wp--preset--color--text-inverse);
	--miraigo-solid-hover-fill: var(--wp--custom--color--brand-hover);
	--miraigo-solid-hover-ink: var(--wp--preset--color--text-inverse);
	--miraigo-focus-ring: var(--wp--preset--color--text-inverse);
}

/**
 * A brand-red panel makes the SOLID button disappear, not just the outline one. styles.elements.button is
 * background-brand + text-inverse everywhere, which on .is-surface-brand is
 * red text-on-fill on a red panel — the same failure the outline border
 * avoids. Flip the fill: background-primary
 * (white) with text-brand ink reads as a red-on-white CTA on the red panel,
 * the same shape the outline treatment already uses on dark.
 *
 * Its hover cannot invert to brand-hover red — text-brand on brand-hover
 * measures 1.24:1. A dark fill with white ink is the legible option instead
 * (13.40:1), and it reads clearly as a state change against the red panel.
 */
.is-surface-brand {
	--miraigo-outline-border: var(--wp--preset--color--border-inverse);
	--miraigo-outline-ink: var(--wp--preset--color--text-inverse);
	--miraigo-outline-hover-fill: var(--wp--preset--color--border-inverse);
	--miraigo-outline-hover-ink: var(--wp--preset--color--text-primary);
	--miraigo-solid-fill: var(--wp--preset--color--background-primary);
	--miraigo-solid-ink: var(--wp--preset--color--text-brand);
	--miraigo-solid-hover-fill: var(--wp--preset--color--text-primary);
	--miraigo-solid-hover-ink: var(--wp--preset--color--text-inverse);
	--miraigo-focus-ring: var(--wp--preset--color--text-inverse);
}

/**
 * The breakpoint is 768px, matching the theme's other mobile rules.
 *
 * Surface beats viewport. The brand border is a light-surface rule only, which
 * is why the dark and brand declarations above are not repeated
 * here — a red border on a dark or red panel is a combination the design never
 * shows.
 *
 * Only the border changes. The hover fill stays border-strong:
 * filling with the brand red would put white text on #ee293a at 4.19:1, which
 * fails AA for a 17px/600 label. Red as a 1.5px border is non-text contrast
 * (WCAG 1.4.11, 3:1) and clears it; red as a fill behind a label is not.
 */
@media (max-width: 767.98px) {

	:root,
	.is-surface-light {
		--miraigo-outline-border: var(--wp--preset--color--border-brand);
	}
}

/**
 * Base box, lowest specificity in the file on purpose: every rule below that
 * targets .is-style-outline or :not(.is-style-outline) has to win over this
 * one, so it has to be declared first (stylelint no-descending-specificity).
 *
 * The computed height from theme.json's padding is ~42.7px, under the 44px
 * touch target, a 1.3px deviation kept on purpose. Labels wrap rather than
 * truncate — "Descubrir Planes y Aceleradores" at 350px is the worst real
 * case — so the box grows instead of clipping.
 */
.wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--control--min-target);
	text-align: center;
	overflow-wrap: anywhere;
	transition:
		background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-button > .wp-block-button__link {
		transition: none;
	}
}

/**
 * theme.json's global button focus ring is text-primary, which disappears on a
 * dark or brand panel. The ring follows the surface instead.
 */
.wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--miraigo-focus-ring);
	outline-offset: var(--wp--custom--focus--offset);
}

/**
 * The button never sets its own width. Full-width-on-mobile belongs to
 * cta-pair and plan-card, which own the stacking; this only makes sure the
 * button does not resist them. Declared here, right after the base rule it
 * extends and before any .is-style-outline/:hover selector, so specificity
 * only ever climbs going down the file (stylelint no-descending-specificity).
 */
.wp-block-button.wp-block-button__width-100 > .wp-block-button__link {
	inline-size: 100%;
}

/*
 * The outline box itself, not just its colours. theme.json's `outline`
 * variation only reaches real core/button blocks: since WordPress 6.6 its
 * CSS is printed per instance (`is-style-outline--N`), so a button a block
 * writes by hand (miraigo/how-it-works-scroll's outro) kept the solid red
 * fill of styles.elements.button. Same values as the variation.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: var(--wp--custom--border--button) solid var(--miraigo-outline-border);
	background-color: transparent;
	padding-block: calc(var(--wp--preset--spacing--25) - var(--wp--custom--border--button));
	padding-inline: var(--wp--preset--spacing--35);
	color: var(--miraigo-outline-ink);
}

/**
 * The solid button (no is-style-* class) follows the same surface contract.
 * Everywhere but .is-surface-brand this repeats styles.elements.button, so
 * the only visible change is on the brand-red panel.
 *
 * :not(.is-style-outline, .is-style-login) -- "login" (parts/footer.html,
 * the dark pill on the brand-red panel) is its own third fixed treatment
 * from theme.json, not the surface-reactive solid fill every other button
 * gets. Without this exclusion this rule's equal specificity, loaded after
 * theme.json's inline styles, would silently overwrite it back to solid
 * brand-red.
 */
.wp-block-button:not(.is-style-outline, .is-style-login) > .wp-block-button__link {
	background-color: var(--miraigo-solid-fill);
	color: var(--miraigo-solid-ink);
}

.wp-block-button:not(.is-style-outline, .is-style-login) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline, .is-style-login) > .wp-block-button__link:focus-visible {
	background-color: var(--miraigo-solid-hover-fill);
	color: var(--miraigo-solid-hover-ink);
}

/**
 * Hover inverts into the surface's fill. One rule, every surface, no
 * per-context duplication.
 *
 * :focus-visible rather than :focus on purpose — :focus leaves the button
 * stuck in the inverted state after a tap on touch, where the mobile border
 * treatment is the only one that exists.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--miraigo-outline-hover-fill);
	color: var(--miraigo-outline-hover-ink);
}

/**
 * "Añadir acelerador" (the plan-summary bar in patterns/plans-tiers.php) is the one outline button with a leading glyph. `mask` +
 * `currentColor` rather than mobile-header's plain `background-image` for the
 * same plus.svg: this button inverts ink on hover/focus (rule above), so the
 * glyph has to track `color` instead of sitting at the SVG's default black.
 */
.plans-summary-bar .wp-block-button.is-style-outline > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	inline-size: 12px;
	block-size: 12px;
	margin-inline-end: var(--wp--preset--spacing--20);
	background-color: currentcolor;
	-webkit-mask: url(../../icons/plus.svg) no-repeat center / contain;
	mask: url(../../icons/plus.svg) no-repeat center / contain;
}

/**
 * Opt-in: the outline button turns into a white-filled one below 768px.
 * The dark "tecnología" panel's "Consulta rápida" (patterns/home-technology.php)
 * is a white button next to the red "Solicitar Demo", not a white outline.
 * Opted in per cta-pair, never by surface, so other dark panels keep the
 * outline.
 *
 * Ink is text-primary, not red: #ee293a on white is 4.19:1,
 * which fails AA for a 17px/600 label. Same call the mobile light outline
 * above makes (red border, dark label). `:not(.has-background)` matches the
 * specificity of core's own outline reset, which paints it transparent.
 */
@media (max-width: 767.98px) {

	.is-outline-fill-mobile .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
		background-color: var(--wp--preset--color--background-primary);
		color: var(--wp--preset--color--text-primary);
	}

	.is-outline-fill-mobile .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
	.is-outline-fill-mobile .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
		background-color: var(--wp--preset--color--gray-200);
	}
}