/*
 * ArneIron Blocks — buttons. EVERY button rule of every ArneIron block, in one place
 * (registered as `arneiron-blocks-buttons`, listed in the `style` of each block
 * that renders a .btn or a carousel arrow: hero, cta-banner, feature-cards,
 * price-table, carousel, posts).
 * Readable source (GPL-2.0-or-later).
 */


/* ---- cta-banner ---- */
.wp-block-arneiron-cta-banner .btn {
	align-items: center;
	border-radius: var(--wp--custom--radius--md,6px);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--base,1rem);
	font-weight: 600;
	gap: var(--wp--preset--spacing--2,4px);
	justify-content: center;
	min-height: 44px;
	padding: var(--wp--preset--spacing--3,8px) var(--wp--preset--spacing--6,24px);
	text-decoration: none;
	transition: background-color .15s ease,color .15s ease,border-color .15s ease;
}
.wp-block-arneiron-cta-banner .btn--lg {
	font-size: var(--wp--preset--font-size--lg,1.125rem);
	padding: var(--wp--preset--spacing--4,12px) var(--wp--preset--spacing--7,32px);
}
.wp-block-arneiron-cta-banner .btn--primary {
	background: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	color: var(--c-on-accent,var(--wp--preset--color--base,#fff));
}
.wp-block-arneiron-cta-banner .btn--primary:hover {
	background: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	border-color: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-cta-banner .btn--secondary {
	background: transparent;
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	color: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
}
.wp-block-arneiron-cta-banner .btn--secondary:hover {
	background: var(--c-surface-2,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 5%,var(--wp--preset--color--base,#fff)));
	color: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-cta-banner .btn:focus-visible {
	outline: 2px solid var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	outline-offset: 2px;
}
@media (prefers-reduced-motion:reduce) {
	.wp-block-arneiron-cta-banner .btn {
		transition: none;
	}
}

/* ---- feature-cards ---- */
.wp-block-arneiron-feature-cards .btn {
	align-items: center;
	align-self: start;
	border-radius: var(--wp--custom--radius--md,6px);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--sm,.875rem);
	font-weight: 600;
	justify-content: center;
	min-height: 40px;
	text-decoration: none;
	transition: background-color .15s ease,color .15s ease,border-color .15s ease;
}
.wp-block-arneiron-feature-cards .btn,
.wp-block-arneiron-feature-cards .btn--sm {
	padding: var(--wp--preset--spacing--2,4px) var(--wp--preset--spacing--5,16px);
}
.wp-block-arneiron-feature-cards .btn--secondary {
	background: transparent;
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	color: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
}
.wp-block-arneiron-feature-cards .btn--secondary:hover {
	background: var(--c-surface-2,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 5%,var(--wp--preset--color--base,#fff)));
	color: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-feature-cards .btn:focus-visible {
	outline: 2px solid var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	outline-offset: 2px;
}
@media (prefers-reduced-motion:reduce) {
	.wp-block-arneiron-feature-cards .btn {
		transition: none;
	}
}

/* ---- hero ---- */
.wp-block-arneiron-hero .btn {
	align-items: center;
	border-radius: var(--wp--custom--radius--md,6px);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--base,1rem);
	font-weight: 600;
	gap: var(--wp--preset--spacing--2,4px);
	justify-content: center;
	min-height: 44px;
	padding: var(--wp--preset--spacing--3,8px) var(--wp--preset--spacing--6,24px);
	text-decoration: none;
	transition: background-color .15s ease,color .15s ease,border-color .15s ease;
}
.wp-block-arneiron-hero .btn--lg {
	font-size: var(--wp--preset--font-size--lg,1.125rem);
	padding: var(--wp--preset--spacing--4,12px) var(--wp--preset--spacing--7,32px);
}
.wp-block-arneiron-hero .btn--primary {
	background: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	color: var(--c-on-accent,var(--wp--preset--color--base,#fff));
}
.wp-block-arneiron-hero .btn--primary:hover {
	background: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	border-color: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-hero .btn--secondary {
	background: transparent;
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	color: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
}
.wp-block-arneiron-hero .btn--secondary:hover {
	background: var(--c-surface-2,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 5%,var(--wp--preset--color--base,#fff)));
	color: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-hero .btn:focus-visible {
	outline: 2px solid var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	outline-offset: 2px;
}
@media (prefers-reduced-motion:reduce) {
	.wp-block-arneiron-hero .btn {
		transition: none;
	}
}

/* ---- price-table (Token Packages) ---- */
.wp-block-arneiron-price-table.is-style-packages .pricing .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2, 4px);
	padding: var(--wp--preset--spacing--3, 8px) var(--wp--preset--spacing--5, 16px);
	border-radius: var(--wp--custom--radius--md, 6px);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base, 1rem);
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
	margin-top: auto;
	align-self: stretch;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wp-block-arneiron-price-table.is-style-packages .btn--block {
	width: 100%;
}
.wp-block-arneiron-price-table.is-style-packages .btn--primary,
.wp-block-arneiron-price-table.is-style-packages .is-popular .btn {
	background: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	color: var(--c-on-accent,var(--wp--preset--color--base,#fff));
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
}
.wp-block-arneiron-price-table.is-style-packages .btn--primary:hover,
.wp-block-arneiron-price-table.is-style-packages .is-popular .btn:hover {
	background: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	border-color: var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-price-table.is-style-packages .btn--secondary {
	background: transparent;
	color: var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
	border: 1px solid var(--c-accent,var(--wp--preset--color--contrast,#3f4654));
}
.wp-block-arneiron-price-table.is-style-packages .btn--secondary:hover {
	background: var(--c-surface-2,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 5%,var(--wp--preset--color--base,#fff)));
}
.wp-block-arneiron-price-table.is-style-packages .btn:focus-visible {
	outline: 2px solid var(--c-accent-strong,color-mix(in srgb,var(--wp--preset--color--contrast,#14181f) 85%,var(--wp--preset--color--base,#fff)));
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-arneiron-price-table.is-style-packages .btn {
		transition: none;
	}
}

/* ---- carousel arrows: arneiron/carousel and arneiron/posts (carousel layout) ----
   Square "ghost" buttons in the main colour (the theme's --c-accent; other themes'
   contrast colour) with a 12px chevron, filled with a white chevron on hover and
   keyboard focus. They share the track's grid cell, so they are vertically centred
   on the slides (not on the dots row below).
     - Room beside the track (view.js adds .has-room-for-arrows when 48px are free
       between the track and the window edge on both sides): 40px, OUTSIDE the
       first and last card, 8px from them.
     - No room (narrow windows, full-width blocks, or no JavaScript): 32px, inset
       8px over the card edges, on the page background so they stay legible.
   Never wider than the track, so the page never scrolls sideways.
   The doubled class outranks themes that style every <button> (Twenty Twenty-One). */
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.arneiron-slider__button,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.arneiron-posts__button {
	grid-area: track;
	align-self: center;
	position: relative;
	z-index: 2;
	inset: auto;
	margin: 0 8px;
	transform: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	background: var(--c-bg, var(--wp--preset--color--base, #fff));
	color: var(--c-accent, var(--wp--preset--color--contrast, #3f4654));
	border: 1px solid var(--c-accent, var(--wp--preset--color--contrast, #3f4654));
	border-radius: var(--wp--custom--radius--sm, 0);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.swiper-button-prev,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.swiper-button-prev {
	justify-self: start;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.swiper-button-next,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.swiper-button-next {
	justify-self: end;
}
.wp-block-arneiron-carousel .arneiron-slider__frame.has-room-for-arrows > .arneiron-slider__button.arneiron-slider__button,
.wp-block-arneiron-posts .arneiron-posts__frame.has-room-for-arrows > .arneiron-posts__button.arneiron-posts__button {
	width: 40px;
	height: 40px;
	background: transparent;
}
.wp-block-arneiron-carousel .arneiron-slider__frame.has-room-for-arrows > .arneiron-slider__button.swiper-button-prev,
.wp-block-arneiron-posts .arneiron-posts__frame.has-room-for-arrows > .arneiron-posts__button.swiper-button-prev {
	margin: 0 0 0 -48px;
}
.wp-block-arneiron-carousel .arneiron-slider__frame.has-room-for-arrows > .arneiron-slider__button.swiper-button-next,
.wp-block-arneiron-posts .arneiron-posts__frame.has-room-for-arrows > .arneiron-posts__button.swiper-button-next {
	margin: 0 -48px 0 0;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.arneiron-slider__button:hover,
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.arneiron-slider__button:focus-visible,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.arneiron-posts__button:hover,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.arneiron-posts__button:focus-visible {
	background: var(--c-accent, var(--wp--preset--color--contrast, #3f4654));
	color: #fff;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.arneiron-slider__button:focus-visible,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.arneiron-posts__button:focus-visible {
	outline: 2px solid var(--c-accent, var(--wp--preset--color--contrast, #3f4654));
	outline-offset: 2px;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button.swiper-button-disabled,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button .swiper-navigation-icon,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button .swiper-navigation-icon {
	width: auto;
	height: 12px;
}
.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button::after,
.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button::after {
	font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-arneiron-carousel .arneiron-slider__frame > .arneiron-slider__button,
	.wp-block-arneiron-posts .arneiron-posts__frame > .arneiron-posts__button {
		transition: none;
	}
}

/* ---- Hover / focus states: .arneiron-btn--filled / .arneiron-btn--ghost (hub#5402) ----
 * Every button an ArneIron block renders carries one of the two classes. On
 * :hover and :focus-visible a filled button darkens and a ghost button fills,
 * both to --wp--custom--button--hover-bg, and the label turns
 * --wp--custom--button--hover-ink (white wherever that background is dark,
 * >= 4.5:1). The ArneIron themes set both tokens per style variation; on any
 * other theme the fallbacks are the accent-strong preset and white. The same
 * rules ship in the theme (assets/css/buttons.css). !important on the state
 * properties only: they must beat colour-utility classes and per-block rules. */
:is(.arneiron-btn--filled):is(:hover, :focus-visible) {
	background: var(--arneiron-btn-hover-paint, var(--wp--custom--button--hover-bg, var(--wp--preset--color--accent-strong, #2a2f3a))) !important;
	color: var(--wp--custom--button--hover-ink, #fff) !important;
}

:is(.arneiron-btn--ghost):is(:hover, :focus-visible) {
	background: var(--wp--custom--button--hover-bg, var(--wp--preset--color--accent-strong, #2a2f3a)) !important;
	border-color: var(--wp--custom--button--hover-bg, var(--wp--preset--color--accent-strong, #2a2f3a)) !important;
	color: var(--wp--custom--button--hover-ink, #fff) !important;
}

:is(.arneiron-btn--filled, .arneiron-btn--ghost):is(:hover, :focus-visible) :is(span, svg, i):not([class*="__tip"]) {
	color: inherit !important;
}

/* Swiper paints its arrow glyph from --swiper-navigation-color. */
.arneiron-btn--ghost:is(.swiper-button-prev, .swiper-button-next):is(:hover, :focus-visible) {
	--swiper-navigation-color: var(--wp--custom--button--hover-ink, #fff);
}