/**
 * Global header — layout/values from Figma node 209:4 (Dental Clinic
 * header; the design has two homepage variants confirmed identical for
 * this row so far, so this is treated as the shared global header per
 * master prompt §29). Desktop values below are read from Figma
 * (1520px inner width, 60px pill fields, 35px radius, #2f80ed CTA).
 * Tablet/mobile breakpoints are NOT yet pulled from Figma responsive
 * frames (§38) — the stacking below is a safe placeholder that avoids
 * horizontal overflow (§39), not a fidelity claim.
 */

.eliteclinic-header {
	font-family: var(--eliteclinic-font-body);
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.eliteclinic-header__inner {
	max-width: 1520px;
	margin-inline: auto;
	padding: 30px 20px 0;
}

/* Row 1: logo + nav + social + language */
.eliteclinic-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 17px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.eliteclinic-header__logo {
	font-weight: 700;
	font-size: 20px;
	color: var(--eliteclinic-color-neutral);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.eliteclinic-header__logo::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eliteclinic-color-primary);
	display: inline-block;
}

.eliteclinic-header__nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.eliteclinic-header__nav-list a {
	color: var(--eliteclinic-color-neutral);
	opacity: 0.7;
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.eliteclinic-header__social-icons a,
.eliteclinic-header__lang {
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.eliteclinic-header__social-icons a:hover {
	transform: translateY(-2px);
	opacity: 0.8;
}

.eliteclinic-header__nav-list a svg,
.eliteclinic-header__lang svg {
	width: 10px;
	height: 6px;
	flex-shrink: 0;
}

.eliteclinic-header__nav-list a:hover,
.eliteclinic-header__nav-list a:focus-visible {
	opacity: 1;
}

.eliteclinic-header__nav-list .current-menu-item > a,
.eliteclinic-header__nav-list li.eliteclinic-nav-active > a {
	background: var(--eliteclinic-color-surface-tint);
	color: var(--eliteclinic-color-primary);
	opacity: 1;
	padding: 8px 24px;
	border-radius: var(--eliteclinic-radius-pill);
	font-weight: 600;
}

.eliteclinic-header__utility {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.eliteclinic-header__social {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--eliteclinic-color-neutral);
}

.eliteclinic-header__social-icons {
	display: flex;
	align-items: center;
	gap: 15px;
}

.eliteclinic-header__social-icons a {
	color: var(--eliteclinic-color-neutral);
	display: inline-flex;
}

.eliteclinic-header__social-icons svg {
	width: 15px;
	height: 15px;
}

.eliteclinic-header__lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	color: var(--eliteclinic-color-neutral);
	background: none;
	border: none;
	cursor: pointer;
}

/* Row 2: quick-appointment bar */
.eliteclinic-header__appointment {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px 0;
	flex-wrap: wrap;
}

.eliteclinic-header__field {
	flex: 1 1 180px;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	padding: 0 24px;
	border: 1px solid rgba(17, 17, 17, 0.15);
	border-radius: var(--eliteclinic-radius-pill);
	color: var(--eliteclinic-color-neutral);
}

.eliteclinic-header__field svg {
	width: 16px;
	height: 16px;
	opacity: 0.4;
	flex-shrink: 0;
}

.eliteclinic-header__field input,
.eliteclinic-header__field select {
	border: none;
	background: none;
	font-family: inherit;
	font-size: 16px;
	color: rgba(17, 17, 17, 0.5);
	width: 100%;
	appearance: none;
}

.eliteclinic-header__field input::placeholder {
	color: rgba(17, 17, 17, 0.5);
}

.eliteclinic-header__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	height: 60px;
	padding: 0 8px 0 24px;
	background: var(--eliteclinic-color-primary);
	color: var(--eliteclinic-color-white);
	border: none;
	border-radius: var(--eliteclinic-radius-pill);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.eliteclinic-header__submit-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--eliteclinic-color-white);
	color: var(--eliteclinic-color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.eliteclinic-header__submit-icon svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 991px) {
	.eliteclinic-header__appointment {
		flex-direction: column;
		align-items: stretch;
	}

	.eliteclinic-header__field,
	.eliteclinic-header__submit {
		width: 100%;
	}

	.eliteclinic-header__submit {
		justify-content: center;
	}
}

@media (max-width: 900px) {
	/* Stacking top-row items at full width sidesteps the classic
	   flexbox "min-width: auto" trap — a nested flex-wrap container
	   (the nav list) only wraps correctly within its actual available
	   width once its parent has a real width instead of shrinking to
	   fit its own unwrapped content. Found via a real 375px screenshot
	   check (master prompt §39) — the unconstrained nav was overflowing
	   past the viewport edge instead of wrapping onto more rows. */
	.eliteclinic-header__top {
		flex-direction: column;
		align-items: flex-start;
	}

	.eliteclinic-header__branding,
	.eliteclinic-header__top nav,
	.eliteclinic-header__utility {
		width: 100%;
		min-width: 0;
	}

	.eliteclinic-header__nav-list {
		width: 100%;
	}
}