/* ==========================================================================
   Header — Site-Wide
   Fixed header, glass-morphism, sticky behavior, header CTA button.
   ========================================================================== */

/* Fix logo being behind top header */
.main-header-bar {
	box-shadow: none !important;
	z-index: 10;
}

body:has(#wpadminbar) .site-header {
	top: 32px;
}

#content {
	margin-top: 139px;
}

.ast-header-break-point #content {
	margin-top: 116px;
}

.site-header {
	width: 100%;
	top: 0;
	position: fixed;
	background-color: color-mix(in srgb, var(--ast-global-color-7) 75%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.ast-above-header-bar.ast-sticky-active {
	top: 0 !important;
}

#ast-desktop-header .ast-primary-header-bar.ast-sticky-active {
	top: 52px !important;
}

.header-button {
	padding: 16px 36px;
	background-color: var(--ast-global-color-0);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--ast-global-color-0);
	border-radius: 9rem;
	box-shadow: 0 2px 4px #00000017;
}

.header-button:hover {
	background-color: transparent;
	color: var(--ast-global-color-0);
}

.header-button:active {
	color: var(--ast-global-color-0);
}

.header-button.header-button-highlight {
	animation: header-button-pulse 2s infinite;
}

@keyframes header-button-pulse {
  0% {
		box-shadow: 0 2px 4px #00000017, 0 0 0 0 color-mix(in srgb, var(--ast-global-color-0) 70%, transparent);
  }

  70% {
    box-shadow: 0 2px 4px #00000017, 0 0 0 8px transparent;
  }

  100% {
    box-shadow: 0 2px 4px #00000017, 0 0 0 0 transparent;
  }
}