/*
 * ServIT theme component styles.
 *
 * Everything that can be expressed as a design token lives in theme.json.
 * This file only covers the handful of components that theme.json cannot
 * describe: the sticky header, the language switcher, the service cards and
 * the anchor-scrolling behaviour.
 */

/* ---------------------------------------------------------------- basics */

html {
	scroll-behavior: smooth;
}

/* Section anchors must clear the sticky header when jumped to. */
[id="services"],
[id="contact"] {
	scroll-margin-top: calc(var(--wp--custom--header--height) + 1rem);
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(.wp-element-button:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--small);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------- shared elements */

.servit-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	margin-bottom: 0;
}

.servit-lead {
	max-width: 42rem;
	text-wrap: pretty;
}

.servit-brand.wp-block-image {
	margin: 0;
	line-height: 0;
}

.servit-brand.wp-block-image img {
	height: auto;
	display: block;
}

/* --------------------------------------------------------------- header */

.servit-header {
	position: sticky;
	top: 0;
	z-index: 20;
	min-height: var(--wp--custom--header--height);
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Only show the rule once the page has scrolled under the header. */
@supports (animation-timeline: scroll()) {
	.servit-header {
		animation: servit-header-pin linear both;
		animation-timeline: scroll();
		animation-range: 0 6rem;
	}

	@keyframes servit-header-pin {
		to {
			border-bottom-color: var(--wp--preset--color--border);
			box-shadow: 0 8px 24px -20px rgba(12, 17, 22, 0.5);
		}
	}
}

/* Fallback for browsers without scroll-driven animations. */
@supports not (animation-timeline: scroll()) {
	.servit-header {
		border-bottom-color: var(--wp--preset--color--border);
	}
}

/* ------------------------------------------------------ language switcher */

.servit-lang__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.servit-lang__link {
	display: inline-block;
	padding: 0.4rem 0.6rem;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.servit-lang__link abbr {
	text-decoration: none;
	border: 0;
	cursor: inherit;
}

.servit-lang__link:hover,
.servit-lang__link:focus-visible {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
}

.servit-lang__link.is-active {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary-strong);
}

.servit-lang--footer .servit-lang__link:hover,
.servit-lang--footer .servit-lang__link:focus-visible {
	background-color: var(--wp--preset--color--border);
}

/* ----------------------------------------------------------------- hero */

.servit-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Soft brand-blue wash behind the headline, kept well below text contrast. */
.servit-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 130%;
	z-index: -1;
	background:
		radial-gradient(48rem 26rem at 18% 12%, rgba(0, 123, 220, 0.13), transparent 62%),
		radial-gradient(38rem 22rem at 88% 0%, rgba(0, 123, 220, 0.08), transparent 60%);
	pointer-events: none;
}

.servit-hero__title {
	text-wrap: balance;
	max-width: 20ch;
}

/* ------------------------------------------------------------- buttons */

.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1.5px;
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------- service cards */

.servit-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.servit-card:hover {
	transform: translateY(-3px);
	border-color: rgba(0, 123, 220, 0.35);
	box-shadow: var(--wp--preset--shadow--lift);
}

.servit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--primary-strong);
	background-color: rgba(0, 123, 220, 0.1);
}

.servit-card :where(h3) {
	margin-block: 0;
}

.servit-card :where(p) {
	margin-block-end: 0;
	text-wrap: pretty;
}

/* -------------------------------------------------------------- contact */

.servit-contact :where(a) {
	color: var(--wp--preset--color--base);
	text-decoration-color: var(--wp--preset--color--primary-light);
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

.servit-contact :where(a):hover {
	color: var(--wp--preset--color--primary-light);
}

.servit-contact .servit-eyebrow {
	color: var(--wp--preset--color--primary-light);
}

.servit-contact__value {
	font-weight: 600;
	margin-block: 0;
}

.servit-contact__details > .wp-block-group {
	min-width: 14rem;
}

.servit-contact__person {
	margin-top: var(--wp--preset--spacing--50);
	color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------- footer */

.servit-footer .servit-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	opacity: 1;
	margin-block: 0;
	width: 100%;
}

.servit-footer :where(p) {
	margin-block: 0;
}