/**
 * Site header (Figma V17 @1440): logo left, menu centred, address + phone right.
 *
 * Breakpoints:
 *   ≥ 1100px  full menu in one line
 *   < 1100px  menu collapses to the hamburger (core only collapses below 600px,
 *             too late for seven Japanese items), phone stays visible
 *   < 782px   logo | phone icon (tap to call) + hamburger, as in the Figma
 *             mobile preview
 */

/*
 * Sticky: the template part's own <header> element sticks (the inner group
 * can't, its parent is only as tall as itself). Sits below the WP admin bar
 * when logged in.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transition: box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled {
	box-shadow: 0 2px 16px rgb(0 0 0 / 0.08);
}

/* The hero starts right under the header, as in the design (no block gap).
   .is-root-container is the same spot inside the editor. */
:where(.wp-site-blocks, .is-root-container) > header.wp-block-template-part + *,
:where(.wp-site-blocks, .is-root-container) > .wp-block-template-part:first-child + * {
	margin-block-start: 0;
}

.chasmg-header__bar {
	gap: var(--wp--preset--spacing--30);
	min-height: 60px;
}

.chasmg-header .wp-block-site-logo {
	flex: none;
}

/* Menu */
.chasmg-header .wp-block-navigation {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.1em;
	--wp--style--block-gap: 2rem;
}

.chasmg-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	text-decoration: none;
}

/*
 * One underline for every state, so current, hover and keyboard focus look
 * identical: same line, same position. Hidden by default, drawn in from the
 * centre on hover/focus, always shown on the current page (妊娠・不妊 in the design).
 */
.chasmg-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.chasmg-header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
.chasmg-header .wp-block-navigation :where(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::after,
.chasmg-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

/* No browser underline on top of ours. */
.chasmg-header .wp-block-navigation .wp-block-navigation-item__content,
.chasmg-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/* Overlay (hamburger) menu: larger, stacked items. */
.chasmg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 1.25rem;
	padding-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--large);
}

/* Right-hand clinic info */
.chasmg-header .wp-block-chasmg-clinic-info {
	flex: none;
}

/* Collapse the menu to the hamburger below 1100px. */
@media (max-width: 1099px) {

	.chasmg-header .wp-block-navigation {
		flex: 0 0 auto;
		order: 3;
	}

	.chasmg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
	}

	/*
	 * Hamburger per the Figma mobile preview: three 1px lines, 20px wide,
	 * 6.5px apart, flush with the right gutter. The button stays 44px tall
	 * with extra tap area to the left of the icon.
	 */
	.chasmg-header .wp-block-navigation__responsive-container-open {
		place-items: center end;
		width: 32px;
		height: 44px;
		margin: 0;
		padding: 0;
	}

	.chasmg-header .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.chasmg-header .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 20px;
		height: 14px;
		background:
			linear-gradient(currentcolor, currentcolor) top / 100% 1px no-repeat,
			linear-gradient(currentcolor, currentcolor) center / 100% 1px no-repeat,
			linear-gradient(currentcolor, currentcolor) bottom / 100% 1px no-repeat;
	}

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

	.chasmg-header .wp-block-chasmg-clinic-info {
		margin-left: auto;
	}

	.chasmg-header .wp-block-chasmg-clinic-info__address {
		display: none;
	}
}

@media (max-width: 781px) {

	/* Mobile (Figma): logo | phone icon + hamburger. Number stays readable by screen readers. */
	.chasmg-header .wp-block-chasmg-clinic-info__icon {
		display: block;
		width: 16px;
		height: 16px;
	}

	.chasmg-header .wp-block-chasmg-clinic-info__phone a {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
	}

	.chasmg-header .wp-block-chasmg-clinic-info__number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Compact bar, ~60px tall as in the Figma mobile preview. The block's own
	   padding is an inline style, hence !important. */
	.chasmg-header {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.chasmg-header__bar {
		gap: 0.5rem;
		min-height: 44px;
	}


	.chasmg-header .wp-block-site-logo img {
		width: 113px !important;
		height: auto;
	}
}