/* header — 112px graphite bar, inline SVG logo, six links plus the red CTA.
 *
 * The logo goes in as inline SVG (not <img>) so it inherits currentColor.
 */

.tci-header {
	background: var(--wp--preset--color--graphite);
	position: relative;
	z-index: 50;
}

.tci-header__inner {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding-inline: var(--tci-gutter);
	height: var(--tci-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: nowrap;
}

.tci-header__logo {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--bone);
}

.tci-header__logo svg {
	width: 90px;
	height: 90px;
}

/* Fallback when the SVG is missing: the wordmark, never an empty header. */
.tci-header__wordmark {
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: 34px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--bone);
}

.tci-header__right {
	display: flex;
	align-items: center;
	gap: 36px;
}

.tci-nav {
	display: flex;
	align-items: center;
	gap: 30px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	letter-spacing: 0.02em;
}

.tci-nav a {
	color: var(--tci-on-graphite-2);
	padding-bottom: 3px;
	border-bottom: var(--tci-rule) solid transparent;
}

.tci-nav a:hover {
	color: var(--wp--preset--color--bone);
}

/* Current page: bone text with a red underline. */
.tci-nav .current-menu-item > a,
.tci-nav a[aria-current="page"] {
	color: var(--wp--preset--color--bone);
	border-bottom-color: var(--wp--preset--color--red);
}

/* ---- Mobile menu ---------------------------------------------------------
 *
 * Core's Navigation block already renders the hamburger and the overlay, with
 * the focus trap and the aria wiring done. An earlier version of this file
 * hand-rolled a second menu next to it — two menus, one of them without
 * keyboard support. What follows only dresses core's own markup.
 */

/* The hamburger. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--bone);
	background: transparent;
	border: 0;
	padding: 10px;
	cursor: pointer;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* The open overlay: graphite, full bleed, links stacked and separated by a
 * hairline.
 *
 * The colours also come from the block's overlayBackgroundColor /
 * overlayTextColor attributes. This is the belt to that pair of braces: core
 * defaults the overlay to `background-color: inherit`, and since the modal is
 * position:fixed that resolves to nothing and the page shows through. */
.tci-header .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
	padding: var(--tci-gutter);
}

/* The close button needs to be findable against graphite. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--bone);
	padding: 12px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--red);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 32px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: var(--tci-hairline) solid var(--tci-hairline-dark);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 18px 0;
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	border-bottom: 0;
}

@media (max-width: 1024px) {
	.tci-header__logo svg {
		width: 64px;
		height: 64px;
	}

	.tci-nav {
		gap: 22px;
	}
}

/* Core swaps the inline menu for the hamburger below 600px, and that is too
 * late here: six links plus a red button stop fitting at around 860px. Between
 * the two the menu wraps onto a second row and pushes out of the bar — which
 * is exactly what a phone in landscape shows.
 *
 * The breakpoint is not an attribute, so the rules that core applies under
 * 600px are re-applied up to 860px. Nothing new is invented: this is core's own
 * behaviour, moved.
 */
@media (max-width: 860px) {
	.tci-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.tci-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.tci-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		flex-direction: column;
		overflow: auto;
		z-index: 100000;
	}

	.tci-header__logo svg {
		width: 52px;
		height: 52px;
	}

	.tci-header__right {
		gap: 12px;
	}

	/* The appointment button stays in the bar — it is the one action that must
	   never be a tap away behind a hamburger. It just gets smaller. */
	.tci-header__cta .wp-block-button__link {
		padding: 12px 18px;
		font-size: var(--wp--preset--font-size--sm, 14px);
		letter-spacing: 0.08em;
	}
}

@media (max-width: 480px) {
	.tci-header__logo svg {
		width: 44px;
		height: 44px;
	}

	/* Below this the button and the hamburger start fighting for the same
	   40px. The button wins: it is the conversion. */
	.tci-header__cta .wp-block-button__link {
		padding: 11px 14px;
		font-size: var(--wp--preset--font-size--xs, 13px);
	}
}

/* Landscape phone: wide but only ~380px tall. The header must not eat a third
   of the screen, and the open menu has to scroll. */
@media (max-height: 500px) and (orientation: landscape) {
	:root {
		--tci-header-height: 64px;
	}

	.tci-header__logo svg {
		width: 44px;
		height: 44px;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 20px var(--tci-gutter);
		overflow-y: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 8px;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 12px 0;
		font-size: 18px;
	}
}