/**
 * Header and footer styles for Twenty Twenty-Five Custom.
 * All selectors are scoped to the custom template parts.
 */

:root {
	--monatelier-surface: #f5f5f5;
	--monatelier-ink: #111111;
	--monatelier-muted: #a7a7a7;
}

.monatelier-header,
.monatelier-footer {
	box-sizing: border-box;
	margin-block: 0;
	background: var(--monatelier-surface);
	color: var(--monatelier-ink);
}

.monatelier-header *,
.monatelier-footer * {
	box-sizing: border-box;
}

.monatelier-header {
	min-height: 104px;
	padding: 19px clamp(24px, 2.3vw, 32px) 19px clamp(24px, 2.65vw, 36px);
}

.monatelier-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: none;
	min-height: 66px;
	margin: 0 auto;
	gap: 32px;
}

.monatelier-header__brand {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	gap: 15px;
	margin: 0;
}

.monatelier-mark {
	display: block;
	flex: 0 0 auto;
	width: 51.727px;
	height: 60.346px;
	background: url("../img/logo-icon.svg") center / contain no-repeat;
}

.monatelier-header__titles {
	margin: 0;
}

.monatelier-header__titles > * {
	margin: 0;
}

.monatelier-header__eyebrow,
.monatelier-header__site-title {
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}

.monatelier-header__site-title a {
	color: inherit;
	text-decoration: none;
}

.monatelier-header__nav {
	flex-shrink: 0;
	gap: 10px;
	margin: 0;
}

.monatelier-header__nav .wp-block-navigation__container {
	gap: 10px;
}

.monatelier-header__nav .wp-block-navigation-item__content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 215px;
	min-height: 39px;
	padding: 8px 38px 8px 24px;
	border: 1px solid #777;
	border-radius: 999px;
	color: var(--monatelier-ink);
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease;
}

.monatelier-header__nav .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	min-width: 215px;
}

.monatelier-header__nav .wp-block-navigation-item__content::after {
	position: absolute;
	right: 12px;
	content: "→";
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.monatelier-header__nav .wp-block-navigation-item__content:hover,
.monatelier-header__nav .wp-block-navigation-item__content:focus-visible {
	background: var(--monatelier-ink);
	color: #fff;
}

.monatelier-header__nav .wp-block-navigation-item__content:focus-visible,
.monatelier-footer a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.monatelier-footer {
	min-height: 239px;
	padding: 35px 36px 20px;
}

.monatelier-footer__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	min-height: 184px;
	margin: 0 auto;
}

.monatelier-footer__identity {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 14px;
}

.monatelier-footer__logo {
	display: block;
	width: min(204.913px, 100%);
	height: 60.346px;
	background: url("../img/logo-footer.svg") left center / contain no-repeat;
}

.monatelier-footer__details {
	width: 100%;
	margin: 0;
}

.monatelier-footer__details p {
	margin: 0 0 3px;
	max-width: none !important;
	margin-inline: 0 !important;
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.monatelier-footer__details a {
	color: inherit;
	text-decoration: none;
}

.monatelier-footer__copyright {
	width: 100%;
	margin: auto 0 0;
	color: var(--monatelier-muted);
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

/* Improve readability of long Japanese text without affecting header/footer copy. */
.wp-site-blocks main .wp-block-post-content p {
	line-height: 1.75;
}

/* Widen long-form post content on desktop without changing the global layout. */
@media (max-width: 781px) {
	.wp-site-blocks main h1.wp-block-post-title {
		font-size: clamp(24px, 6.5vw, 36px);
		line-height: 1.3;
	}
}

@media (min-width: 782px) {
	.wp-site-blocks main .wp-block-post-title,
	.wp-site-blocks main .wp-block-group.has-small-font-size.is-layout-flex {
		max-width: 760px !important;
	}

	.wp-site-blocks main .wp-block-post-content {
		--wp--style--global--content-size: 760px;
	}

	.wp-site-blocks main .wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 760px !important;
	}

	.wp-site-blocks main h1.wp-block-post-title {
		font-size: 40px;
		line-height: 1.25;
	}
}

@media (max-width: 900px) {
	.monatelier-header {
		padding-inline: 24px;
	}

	.monatelier-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 8px;
		border: 1px solid #777;
		border-radius: 50%;
	}

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

	.monatelier-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 28px 24px;
		background: var(--monatelier-surface);
	}

	.monatelier-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.monatelier-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
	}

	.monatelier-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		min-height: 48px;
	}
}

@media (max-width: 480px) {
	/*
	 * Twenty Twenty-Five uses `text-wrap: pretty` globally. On narrow screens,
	 * Safari can leave conspicuously large gaps at the end of Japanese lines.
	 */
	.wp-site-blocks main .wp-block-post-title,
	.wp-site-blocks main .wp-block-post-content :where(p, h1, h2, h3, h4, h5, h6) {
		text-wrap: wrap;
		text-wrap-style: auto;
	}

	.wp-site-blocks main .wp-block-post > .wp-block-group.alignfull.is-content-justification-space-between.is-nowrap.is-layout-flex {
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.wp-site-blocks main .wp-block-post > .wp-block-group.alignfull.is-content-justification-space-between.is-nowrap.is-layout-flex > :where(.wp-block-post-title, .wp-block-post-date) {
		width: 100%;
		text-align: left;
	}

	.monatelier-header {
		min-height: 88px;
		padding: 13px 16px;
	}

	.monatelier-header__inner {
		min-height: 62px;
		gap: 14px;
	}

	.monatelier-header__brand {
		gap: 10px;
	}

	.monatelier-header .monatelier-mark {
		width: 42px;
		height: 50px;
	}

	.monatelier-header__eyebrow,
	.monatelier-header__site-title {
		font-size: clamp(12px, 3.45vw, 14px);
	}

	.monatelier-footer {
		min-height: 0;
		padding: 30px 20px 20px;
	}

	.monatelier-footer__inner {
		min-height: 0;
	}

	.monatelier-footer__details p {
		font-size: 12px;
	}

	.monatelier-footer__copyright {
		margin-top: 32px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.monatelier-header__nav .wp-block-navigation-item__content {
		transition: none;
	}
}