/**
 * DEV-5 global header.
 * Desktop: utility bar -> centered brand -> separated navigation row.
 * Mobile: compact top bar with fullscreen menu trigger.
 */

.am-site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--am-layer-header);
	background: color-mix(in srgb, var(--am-color-background) 97%, transparent);
	transition: background-color var(--am-duration-standard) var(--am-ease-standard), box-shadow var(--am-duration-standard) var(--am-ease-standard);
}

body.admin-bar .am-site-header {
	top: 32px;
}

.am-site-header[data-state="scrolled"],
.am-site-header[data-state="internal"],
.am-site-header[data-state="menu-open"] {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--am-color-border) 92%, transparent);
	backdrop-filter: blur(16px);
}

.am-utility-bar,
.am-site-brand,
.am-site-navigation-bar {
	display: none;
}

.am-mobile-topbar {
	display: grid;
	height: var(--am-shell-mobile-top-height);
	padding-inline: max(var(--am-gutter), env(safe-area-inset-left));
	place-items: center;
	border-bottom: var(--am-border-width) solid color-mix(in srgb, var(--am-color-border) 75%, transparent);
	background: color-mix(in srgb, var(--am-color-background) 96%, transparent);
}

.am-mobile-topbar__mark {
	color: var(--am-color-text);
	font-family: var(--am-font-display);
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.am-mobile-topbar__context,
.am-mobile-topbar .am-shell-menu-button {
	display: none !important;
}

.am-button--header {
	min-height: 2.75rem;
	padding-inline: var(--am-space-5);
	white-space: nowrap;
}

@media (min-width: 72rem) {
	.am-mobile-topbar {
		display: none;
	}

	.am-utility-bar {
		display: block;
		min-height: var(--am-shell-desktop-utility-height);
		border-bottom: var(--am-border-width) solid color-mix(in srgb, var(--am-color-border) 72%, transparent);
		background: var(--am-color-text);
		color: var(--am-color-white);
	}

	.am-utility-bar__inner {
		display: flex;
		min-height: var(--am-shell-desktop-utility-height);
		align-items: center;
		justify-content: space-between;
		gap: var(--am-space-5);
	}

	.am-utility-bar__contacts,
	.am-utility-bar__social {
		display: flex;
		align-items: center;
		gap: var(--am-space-5);
		margin: 0;
		padding: 0;
		font-size: 0.75rem;
		letter-spacing: 0.05em;
		list-style: none;
	}

	.am-utility-bar a,
	.am-utility-bar span {
		color: var(--am-color-white);
		text-decoration: none;
	}

	.am-utility-bar a:hover {
		color: var(--am-color-primary);
	}

	.am-site-brand {
		display: block;
		height: var(--am-shell-desktop-brand-height);
		overflow: hidden;
		background: var(--am-color-background);
		transition: height var(--am-duration-editorial) var(--am-ease-emphasized), opacity var(--am-duration-standard) var(--am-ease-standard);
	}

	.am-site-brand__inner {
		display: grid;
		height: 100%;
		place-items: center;
	}

	.am-site-brand__link {
		display: inline-flex;
		max-width: min(34rem, 62vw);
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: var(--am-color-text);
		text-align: center;
		text-decoration: none;
	}

	.am-site-brand__logo-image {
		width: auto;
		max-width: 30rem;
		max-height: 4.6rem;
		object-fit: contain;
	}

	.am-site-brand__qualification {
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.24em;
		text-transform: uppercase;
	}

	.am-site-brand__name {
		margin-top: 0.15rem;
		font-family: var(--am-font-display);
		font-size: clamp(2.1rem, 1.7rem + 1.4vw, 3.25rem);
		font-weight: 500;
		letter-spacing: -0.03em;
		line-height: 0.95;
	}

	.am-site-navigation-bar {
		display: block;
		height: var(--am-shell-desktop-navigation-height);
		border-top: var(--am-border-width) solid color-mix(in srgb, var(--am-color-border) 78%, transparent);
		border-bottom: var(--am-border-width) solid color-mix(in srgb, var(--am-color-border) 78%, transparent);
		background: var(--am-color-background);
	}

	.am-site-navigation-bar__inner {
		display: grid;
		height: 100%;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--am-space-5);
	}

	.am-site-navigation-bar__inner::before {
		content: "";
	}

	.am-desktop-navigation {
		grid-column: 2;
	}

	.am-site-navigation-bar .am-button--header {
		grid-column: 3;
		justify-self: end;
	}

	.am-site-header[data-state="scrolled"] .am-site-brand {
		height: 0;
		overflow: hidden;
		border: 0;
		opacity: 0;
		pointer-events: none;
	}

}

@media (max-width: 48.875rem) {
	body.admin-bar .am-site-header {
		top: 46px;
	}
}

/* DEV-5.1 visual refinement ------------------------------------------- */
@media (min-width: 72rem) {
	.am-utility-bar__meta {
		margin: 0;
		color: color-mix(in srgb, var(--am-color-white) 78%, transparent);
		font-size: 0.75rem;
		letter-spacing: 0.05em;
	}

	.am-site-brand__link {
		max-width: min(38rem, 68vw);
	}

	.am-site-brand__logo-image {
		width: clamp(13.5rem, 18vw, 16.75rem);
		max-width: 100%;
		max-height: 5.65rem;
	}
}

/* DEV-5.2.1 compact, visually cropped identity ------------------------ */
@media (min-width: 72rem) {
	.am-site-brand__link--logo {
		position: relative;
		width: min(var(--am-manager-logo-width, 500px), 58vw);
		height: min(calc(var(--am-manager-brand-height, 100px) - 12px), 88px);
		max-width: min(46rem, 74vw);
		overflow: hidden;
	}

	.am-site-brand__logo-image {
		position: absolute;
		top: 50%;
		left: 50%;
		width: min(var(--am-manager-logo-width, 500px), 58vw);
		max-width: none;
		max-height: var(--am-manager-logo-height, 118px);
		object-fit: contain;
		transform: translate(-50%, -50%) scale(var(--am-manager-logo-scale, 1.42));
		transform-origin: center;
	}

	.am-site-navigation-brand {
		display: inline-flex;
		min-width: 8rem;
		max-width: 13rem;
		align-items: center;
		justify-self: start;
		grid-column: 1;
		color: var(--am-color-text);
		font-family: var(--am-font-display);
		font-size: 1.75rem;
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		opacity: 0;
		transform: translateY(-0.25rem);
		transition: opacity var(--am-duration-standard) var(--am-ease-standard), transform var(--am-duration-standard) var(--am-ease-standard);
		pointer-events: none;
	}

	.am-site-navigation-brand__logo-image {
		display: block;
		width: auto;
		max-width: 11.5rem;
		max-height: 2.55rem;
		object-fit: contain;
	}

	.am-site-header[data-state="scrolled"] .am-site-navigation-brand {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

@media (min-width: 72rem) {
	.am-site-navigation-bar__inner::before {
		display: none;
	}
}


/* DEV-5.3 social utility controls -------------------------------------- */
@media (min-width: 72rem) {
	.am-utility-bar__social {
		gap: 0.45rem;
	}

	.am-utility-bar__social-link {
		display: inline-grid;
		width: 1.75rem;
		height: 1.75rem;
		place-items: center;
		border: 1px solid color-mix(in srgb, var(--am-color-white) 24%, transparent);
		border-radius: 50%;
		background: color-mix(in srgb, var(--am-color-white) 5%, transparent);
		color: var(--am-color-white);
		transition: background-color var(--am-duration-micro) var(--am-ease-standard), border-color var(--am-duration-micro) var(--am-ease-standard), color var(--am-duration-micro) var(--am-ease-standard), transform var(--am-duration-micro) var(--am-ease-standard);
	}

	.am-utility-bar__social-link .am-icon {
		width: 0.95rem;
		height: 0.95rem;
		stroke-width: 1.7;
	}

	.am-utility-bar__social-link:hover,
	.am-utility-bar__social-link:focus-visible {
		border-color: var(--am-color-primary);
		background: var(--am-color-primary);
		color: var(--am-color-text);
		transform: translateY(-1px);
	}
}


/* DEV-5.4: preview social marks remain visible until the Manager supplies URLs. */
@media (min-width: 72rem) {
	.am-utility-bar__social-link--preview {
		cursor: default;
		opacity: 0.78;
	}

	.am-utility-bar__social--preview {
		margin-left: auto;
	}
}


/* DEV-5.26 mobile identity: one centered, prominent logo only. */
.am-mobile-topbar__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--am-color-text);
	text-decoration: none;
}

.am-mobile-topbar__mark--logo {
	width: min(16rem, 72vw);
	height: calc(var(--am-shell-mobile-top-height) - 1rem);
	overflow: hidden;
}

.am-mobile-topbar__logo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.am-mobile-topbar__fallback {
	font-family: var(--am-font-display);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
}

@media (max-width: 30rem) {
	.am-mobile-topbar__mark--logo {
		width: min(14.25rem, 76vw);
	}
}
