/*
 * Header styling inspired by the supplied Docodoor reference.
 * The existing site title and WordPress navigation remain editable in the admin.
 */

:root {
	--ame-header-background: #f6f6f7;
	--ame-header-text: #282828;
	--ame-header-accent: #8031d0;
	--ame-header-font: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.l-header {
	background: var(--ame-header-background);
	color: var(--ame-header-text);
}

@media (min-width: 1000px) {
	.l-header__body.l-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: clamp(32px, 4vw, 70px);
		max-width: 100%;
		min-height: clamp(72px, 5vw, 88px);
		padding: clamp(28px, 2.5vw, 44px) clamp(40px, 5.7142857143vw, 100px);
		transition: padding 0.4s;
	}

	.l-header__left {
		display: none;
	}

	.l-header__center {
		flex: 0 0 auto;
		padding: 0;
	}

	.l-header__right {
		align-self: stretch;
		margin-left: auto;
	}

	.l-header__logo {
		font-size: clamp(24px, 1.65vw, 29px);
	}

	.l-header__logo.has-text > .c-headLogo {
		font-family: var(--ame-header-font);
		font-size: 1em;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.c-gnav {
		gap: clamp(4px, 0.6vw, 12px);
		font-family: var(--ame-header-font);
		font-size: clamp(15px, 1.1428571429vw, 20px);
		font-weight: 700;
		letter-spacing: 0.08em;
	}

	.c-gnav__li > .c-gnav__a {
		padding: 0 clamp(10px, 1vw, 18px);
	}

	.c-gnav > .c-gnav__li:not(.ame-header-contact) > .c-gnav__a {
		color: var(--ame-header-text);
		transition: color 0.4s linear;
	}

	.c-gnav > .c-gnav__li:not(.ame-header-contact):hover > .c-gnav__a,
	.c-gnav > .c-gnav__li:not(.ame-header-contact) > .c-gnav__a:focus-visible {
		color: var(--ame-header-accent);
	}

	.c-gnav > .ame-header-contact {
		align-self: center;
		height: auto;
		margin-left: clamp(20px, 3.2vw, 56px);
	}

	.c-gnav > .ame-header-contact > .c-gnav__a {
		display: grid;
		place-items: center;
		min-width: clamp(170px, 11.4285714286vw, 201px);
		height: clamp(58px, 3.93vw, 69px);
		padding: 0 clamp(28px, 2.2vw, 38px);
		border-radius: 9999px;
		background: var(--ame-header-text);
		color: #fff;
		letter-spacing: 0;
		line-height: 1;
		transition: background-color 0.25s, transform 0.25s;
	}

	.c-gnav > .ame-header-contact:hover {
		color: #fff;
	}

	.c-gnav > .ame-header-contact > .c-gnav__a:hover,
	.c-gnav > .ame-header-contact > .c-gnav__a:focus-visible {
		background: var(--ame-header-accent);
		transform: translateY(-2px);
	}
}

@media (max-width: 999px) {
	.l-header__body {
		min-height: 72px;
		padding: 12px 4vw;
	}

	.l-header__logo {
		font-size: clamp(20px, 5vw, 23px);
	}

	.l-header__logo.has-text > .c-headLogo {
		font-family: var(--ame-header-font);
		font-size: 1em;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.c-drawerNav .ame-header-contact > .c-drawerNav__a {
		margin: 12px;
		border-radius: 9999px;
		background: var(--ame-header-text);
		color: #fff;
		font-family: var(--ame-header-font);
		font-weight: 700;
		text-align: center;
	}
}