/* OrthoConnect — site header (template part "header"). */

/* The template-part wrapper is the sticky element (its parent is .wp-site-blocks). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 20;
}

:root { --oc-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18m-13 4h2m4 0h2m-8 3h2'/%3E%3C/svg%3E"); }
.oc-header {
	position: relative;
	background: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--border-width) solid var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--shadow--header);
	transition: box-shadow 180ms ease, border-color 180ms ease;
}
.oc-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--teal-line);
	box-shadow: 0 0.4rem 1.4rem rgb(18 51 75 / 10%);
}
.oc-header .oc-header__inner {
	min-height: var(--wp--custom--header-height);
	margin-block: 0;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

/* Logo: show only the artwork, crop the supplied image's white margin. */
.oc-header .oc-logo {
	position: relative;
	flex-shrink: 0;
	width: 10rem;
	height: 6.25rem;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}
.oc-header .oc-logo a {
	display: block;
	width: 100%;
	height: 100%;
}
.oc-header .oc-logo img {
	position: absolute;
	left: -0.875rem;
	top: -2.375rem;
	width: 11.5rem !important;
	height: 11.5rem !important;
	max-width: none;
}

/* Desktop navigation */
.oc-header .oc-nav {
	flex: 1;
	justify-content: center;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}
.oc-header .oc-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	flex-wrap: nowrap;
	justify-content: center;
}
.oc-header .oc-nav .wp-block-navigation-item__content {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--tap-size);
	padding: 0;
	white-space: nowrap;
	color: var(--wp--preset--color--text);
	transition: color 180ms ease;
}
.oc-header .oc-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
}
.oc-header .oc-nav .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
.oc-header .oc-nav .wp-block-navigation-item__content[aria-current]::after {
	transform: scaleX(1);
}
.oc-header .oc-nav .wp-block-navigation-item__content:hover,
.oc-header .oc-nav .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--teal);
}
/* Legacy in-menu CTA item: the bar CTA stays visible at every width, so hide it. */
.oc-header .oc-nav .wp-block-navigation-item.oc-nav__cta,
.oc-header .oc-nav .is-menu-open .wp-block-navigation-item.oc-nav__cta {
	display: none;
}

/* Header CTA button */
.oc-header .oc-header__actions {
	flex-shrink: 0;
	margin: 0;
	gap: var(--wp--preset--spacing--30);
}
.oc-header .oc-header__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control-height);
	padding-inline: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* Hamburger: hidden on desktop (core hides it above 600px; we collapse at 1190px) */
.oc-header .oc-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--navy);
	width: var(--wp--custom--tap-size);
	height: var(--wp--custom--tap-size);
	justify-content: center;
	align-items: center;
	border-radius: var(--wp--custom--radius--small);
	padding: var(--wp--preset--spacing--20);
}
.oc-header .oc-nav .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--surface);
}

/* ---- Collapse to a dropdown panel at <= 1190px ---- */
@media (max-width: 1190px) {
	.oc-header .oc-header__inner { gap: var(--wp--preset--spacing--60); }
	.oc-header .oc-header__actions { order: 2; margin-left: auto; }
	.oc-header .oc-nav { order: 3; flex: 0 0 auto; position: static; }

	.oc-header .oc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.oc-header .oc-nav .wp-block-navigation__responsive-container-open { display: flex; }
	.oc-header .oc-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }

	/* The three positioned wrappers that would hijack anchoring */
	.oc-header .oc-nav .wp-block-navigation__responsive-container.is-menu-open,
	.oc-header .oc-nav .wp-block-navigation__responsive-dialog,
	.oc-header .oc-nav .wp-block-navigation__responsive-close { position: static; }

	.oc-header .oc-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		inset: 100% 0 auto 0;
		z-index: 30;
		width: auto;
		height: auto;
		padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter);
		overflow: visible;
		color: var(--wp--preset--color--text);
		background: var(--wp--preset--color--base);
		border-bottom: var(--wp--custom--border-width) solid var(--wp--preset--color--line);
		box-shadow: var(--wp--custom--shadow--raised);
		animation: oc-menu-in 180ms ease-out;
	}
	.oc-header .oc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { max-height: none; margin: 0; padding: 0; }
	.oc-header .oc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { padding: 0; }
	.oc-header .oc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		--navigation-layout-align: stretch;
		--navigation-layout-justification-setting: flex-start;
		align-items: stretch;
		padding: 0;
		max-height: calc(100dvh - var(--wp--custom--header-height) - 2rem);
		overflow-y: auto;
	}
	.oc-header .oc-nav .is-menu-open .wp-block-navigation__container {
		display: grid;
		gap: var(--wp--preset--spacing--10);
		width: 100%;
		justify-content: stretch;
		align-items: stretch;
	}
	.oc-header .oc-nav .is-menu-open .wp-block-navigation-item { align-items: stretch; width: 100%; }
	.oc-header .oc-nav .is-menu-open .wp-block-navigation-item__content {
		flex: 1;
		padding: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--note);
		justify-content: flex-start;
		text-align: left;
		border-radius: var(--wp--custom--radius--small);
	}
	.oc-header .oc-nav .is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) { outline: 0; }
	.oc-header .oc-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }
	.oc-header .oc-nav .is-menu-open .wp-block-navigation-item__content[aria-current] {
		background: var(--wp--preset--color--teal-light);
	}
	/* X sits where the hamburger was */
	.oc-header .oc-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: calc(var(--wp--custom--header-height) / -2 - var(--wp--custom--tap-size) / 2);
		right: var(--wp--custom--gutter);
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--wp--custom--tap-size);
		height: var(--wp--custom--tap-size);
		padding: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--navy);
		border-radius: var(--wp--custom--radius--small);
	}
}

@keyframes oc-menu-in {
	from { opacity: 0; transform: translateY(-0.5rem); }
	to { opacity: 1; transform: none; }
}

/* ---- Tablet / phone ---- */
@media (max-width: 760px) {
	.oc-header .oc-header__inner { min-height: 5.75rem; gap: var(--wp--preset--spacing--30); }
	.oc-header .oc-logo { width: 8rem; height: 5.125rem; }
	.oc-header .oc-logo img {
		left: -0.6875rem;
		top: -1.9375rem;
		width: 9.25rem !important;
		height: 9.25rem !important;
	}
	.oc-header .oc-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc(5.75rem / -2 - var(--wp--custom--tap-size) / 2);
	}
	/* CTA collapses to a 44px calendar icon button, as in the original */
	.oc-header .oc-header__actions { gap: var(--wp--preset--spacing--20); }
	.oc-header .oc-header__actions .wp-block-button__link {
		position: relative;
		width: var(--wp--custom--tap-size);
		min-height: var(--wp--custom--tap-size);
		padding: var(--wp--preset--spacing--30);
		font-size: 0;
		line-height: 0;
		overflow: hidden;
	}
	.oc-header .oc-header__actions .wp-block-button__link::before {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		width: 1.375rem;
		height: 1.375rem;
		background: currentColor;
		-webkit-mask: var(--oc-icon-calendar) center / contain no-repeat;
		mask: var(--oc-icon-calendar) center / contain no-repeat;
	}
	.oc-header .oc-nav { margin-left: auto; }
}

/* No native underline on nav hover: the bar is the ::after effect. */
.oc-header .oc-nav .wp-block-navigation-item__content, .oc-header .oc-nav .wp-block-navigation-item__content:is(:hover, :focus, :focus-visible, :active) { text-decoration: none !important; }