/*
 * bend component layer.
 * Visual variants extend Core blocks and consume theme.json tokens.
 */

:root {
	--bend-content-width: var(--wp--style--global--content-size, var(--wp--custom--bend--layout--content-width));
	--bend-wide-width: var(--wp--style--global--wide-size, var(--wp--custom--bend--layout--wide-width));
	--bend-gutter: var(--bend-layout-gutter, var(--wp--custom--bend--layout--gutter));
	--bend-radius-none: var(--wp--custom--bend--radius--none);
	--bend-radius-small: var(--wp--custom--bend--radius--small);
	--bend-radius-medium: var(--wp--custom--bend--radius--medium);
	--bend-radius-large: var(--wp--custom--bend--radius--large);
	--bend-radius-pill: var(--wp--custom--bend--radius--pill);
	--bend-shadow-subtle: var(--wp--preset--shadow--subtle);
	--bend-shadow-small: var(--wp--preset--shadow--small);
	--bend-shadow-medium: var(--wp--preset--shadow--medium);
	--bend-shadow-floating: var(--wp--preset--shadow--floating);
	--bend-duration-fast: var(--wp--custom--bend--transition--fast);
	--bend-duration-normal: var(--wp--custom--bend--transition--normal);
	--bend-duration-slow: var(--wp--custom--bend--transition--slow);
	--bend-easing-standard: var(--wp--custom--bend--transition--easing);
}

.is-style-bend-ghost .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--action-primary);
}

.is-style-bend-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-secondary);
	border-color: var(--wp--preset--color--surface-secondary);
	color: var(--wp--preset--color--action-primary-hover);
}

.is-style-bend-link .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	border-radius: var(--bend-radius-none);
	color: var(--wp--preset--color--action-primary);
	min-block-size: 2.75rem;
	padding-inline: 0;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.22em;
}

.is-style-bend-link .wp-block-button__link:hover {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--action-primary-hover);
}

.is-style-bend-small .wp-block-button__link {
	font-size: var(--wp--preset--font-size--body-small);
	min-block-size: 2.75rem;
	padding: 0.55rem 1rem;
}

.is-style-bend-large .wp-block-button__link {
	font-size: var(--wp--preset--font-size--body-large);
	min-block-size: 3.5rem;
	padding: 0.9rem 1.5rem;
}

:where(.is-style-bend-nav-accent) > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
	color: var(--wp--preset--color--action-primary);
	font-weight: 700;
}

:where(.is-style-bend-nav-button, .is-style-bend-nav-outline) > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
	border: 1px solid var(--wp--preset--color--action-primary);
	border-radius: var(--bend-radius-pill);
	min-block-size: 2.75rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

:where(.is-style-bend-nav-button) > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
	background: var(--wp--preset--color--action-primary);
	color: var(--wp--preset--color--surface-primary);
}

:where(.is-style-bend-nav-outline) > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
	background: transparent;
	color: var(--wp--preset--color--action-primary);
}

:where(.is-style-bend-nav-button, .is-style-bend-nav-outline) > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle):hover,
:where(.is-style-bend-nav-button, .is-style-bend-nav-outline).current-menu-item > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle),
:where(.is-style-bend-nav-button, .is-style-bend-nav-outline).current-menu-ancestor > :where(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
	background: var(--wp--preset--color--action-primary-hover);
	border-color: var(--wp--preset--color--action-primary-hover);
	color: var(--wp--preset--color--surface-primary);
	text-decoration: none;
}

:where(
	.is-style-bend-service-card,
	.is-style-bend-project-card,
	.is-style-bend-post-card,
	.is-style-bend-product-card,
	.is-style-bend-testimonial-card
) {
	background: var(--wp--preset--color--surface-primary);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--bend-radius-large);
	box-shadow: var(--bend-shadow-subtle);
	height: 100%;
	overflow: hidden;
	padding: var(--wp--preset--spacing--l);
	transition:
		border-color var(--bend-duration-fast) var(--bend-easing-standard),
		box-shadow var(--bend-duration-normal) var(--bend-easing-standard),
		transform var(--bend-duration-normal) var(--bend-easing-standard);
}

.is-style-bend-service-card {
	border-block-start: 0.25rem solid var(--wp--preset--color--brand-primary);
}

.is-style-bend-project-card :where(.wp-block-image, .wp-block-post-featured-image),
.is-style-bend-post-card :where(.wp-block-image, .wp-block-post-featured-image),
.is-style-bend-product-card :where(.wp-block-image, .wc-block-components-product-image) {
	border-radius: var(--bend-radius-medium);
	overflow: hidden;
}

.is-style-bend-testimonial-card {
	border-inline-start: 0.25rem solid var(--wp--preset--color--brand-accent);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	:where(
		.is-style-bend-service-card,
		.is-style-bend-project-card,
		.is-style-bend-post-card,
		.is-style-bend-product-card,
		.is-style-bend-testimonial-card
	):hover {
		border-color: var(--wp--preset--color--border-strong);
		box-shadow: var(--bend-shadow-small);
		transform: translateY(-0.125rem);
	}
}

fieldset {
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--bend-radius-medium);
	margin: 0;
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--m);
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--action-primary);
	block-size: 1.25rem;
	inline-size: 1.25rem;
	margin: 0 0.5rem 0 0;
	vertical-align: middle;
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
	box-shadow: 0 0 0 1px var(--wp--preset--color--error);
}

:where(input, select, textarea)[aria-invalid="false"] {
	border-color: var(--wp--preset--color--success);
}

:where(button, input, select, textarea):disabled,
.wp-element-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
}

.wp-element-button[aria-disabled="true"] {
	pointer-events: none;
}

.is-style-bend-helper,
.is-style-bend-success,
.is-style-bend-error {
	font-size: var(--wp--preset--font-size--body-small);
	margin-block: var(--wp--preset--spacing--xs) 0;
}

.is-style-bend-helper {
	color: var(--wp--preset--color--text-secondary);
}

.is-style-bend-success {
	color: var(--wp--preset--color--success);
}

.is-style-bend-error {
	color: var(--wp--preset--color--error);
}

@media (forced-colors: active) {

	:where(
		.is-style-bend-service-card,
		.is-style-bend-project-card,
		.is-style-bend-post-card,
		.is-style-bend-product-card,
		.is-style-bend-testimonial-card,
		.is-style-bend-nav-button > .wp-block-navigation-item__content,
		.is-style-bend-nav-button > .wp-block-navigation-submenu__toggle,
		.is-style-bend-nav-outline > .wp-block-navigation-item__content,
		.is-style-bend-nav-outline > .wp-block-navigation-submenu__toggle,
		fieldset,
		input,
		select,
		textarea
	) {
		border-color: CanvasText;
	}
}