/*
 * CC Arch Scaffolding global front-end styles.
 * Shared visual primitives belong here so blocks remain consistent.
 */

:root {
	--cc-arch-button-primary-bg: var(--wp--preset--color--brand-primary, #768d96);
	--cc-arch-button-primary-bg-hover: var(--wp--preset--color--brand-primary-dark, #657075);
	--cc-arch-button-primary-border: var(--wp--preset--color--brand-primary-dark, #657075);
	--cc-arch-button-primary-color: #ffffff;
	--cc-arch-button-secondary-bg: rgb(255 255 255 / 72%);
	--cc-arch-button-secondary-bg-hover: var(--wp--preset--color--brand-surface, #f4f6f7);
	--cc-arch-button-secondary-border: rgb(7 8 9 / 20%);
	--cc-arch-button-secondary-border-hover: var(--wp--preset--color--brand-primary, #768d96);
	--cc-arch-button-secondary-color: var(--wp--preset--color--brand-black, #070809);
	--cc-arch-button-focus: var(--wp--preset--color--brand-primary, #768d96);
}

.cc-arch-button {
	position: relative;
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	padding: 0.82rem 1.3rem;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--manrope, "Manrope", Arial, Helvetica, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	box-shadow: 0 8px 20px rgb(7 8 9 / 12%);
	transform: translateY(0);
	transition:
		transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease;
}

.cc-arch-button > span {
	position: relative;
	z-index: 2;
}

/* Soft highlight sweep used across all CC Arch buttons. */
.cc-arch-button::after {
	position: absolute;
	top: -45%;
	bottom: -45%;
	left: -55%;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 26%), transparent);
	content: "";
	pointer-events: none;
	transform: skewX(-18deg);
	transition: left 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cc-arch-button:hover,
.cc-arch-button:focus-visible {
	box-shadow: 0 13px 28px rgb(7 8 9 / 18%);
}

.cc-arch-button:hover::after,
.cc-arch-button:focus-visible::after {
	left: 115%;
}

.cc-arch-button:active {
	box-shadow: 0 6px 15px rgb(7 8 9 / 14%);
	transform: translateY(-1px);
}

.cc-arch-button--primary,
.cc-arch-button--primary:visited {
	border-color: var(--cc-arch-button-primary-border);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cc-arch-button-primary-bg) 92%, white),
		var(--cc-arch-button-primary-bg)
	);
	color: var(--cc-arch-button-primary-color);
}

.cc-arch-button--primary:hover,
.cc-arch-button--primary:focus-visible {
	border-color: var(--cc-arch-button-primary-bg-hover);
	background: var(--cc-arch-button-primary-bg-hover);
	color: var(--cc-arch-button-primary-color);
}

.cc-arch-button--secondary,
.cc-arch-button--secondary:visited {
	border-color: var(--cc-arch-button-secondary-border);
	background: var(--cc-arch-button-secondary-bg);
	color: var(--cc-arch-button-secondary-color);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.cc-arch-button--secondary::after {
	background: linear-gradient(90deg, transparent, rgb(7 8 9 / 14%), transparent);
}

.cc-arch-button--secondary:hover,
.cc-arch-button--secondary:focus-visible {
	border-color: var(--cc-arch-button-secondary-border-hover);
	background: var(--cc-arch-button-secondary-bg-hover);
	color: var(--cc-arch-button-secondary-color);
}

.cc-arch-button:focus-visible {
	outline: 3px solid var(--cc-arch-button-focus);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.cc-arch-button,
	.cc-arch-button::after {
		transition-duration: 0.01ms !important;
	}
}

.error404 .cc-arch-page-shell {
	padding-top: clamp(7rem, 12vw, 10rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}