/* =========================================================
   MOFUTERRA TRAVEL JOURNAL
   HEADER.CSS
   FINAL
========================================================= */


/* =========================================================
   01. HEADER BASE
   TOP = HEROと同じ背景
========================================================= */

.mtj-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;

	width: 100%;

	background:
		linear-gradient(
			110deg,
			#f7f2eb 0%,
			#f5efe7 42%,
			#ead8cb 72%,
			#df8b62 100%
		);

	color: #49372d;

	border-bottom:
		1px solid rgba(73, 55, 45, 0.10);

	box-shadow: none;

	transition:
		background 0.40s ease,
		background-color 0.40s ease,
		color 0.40s ease,
		box-shadow 0.40s ease,
		border-color 0.40s ease,
		backdrop-filter 0.40s ease;
}


/* WordPress管理バー */

.admin-bar .mtj-header {
	top: 32px;
}


/* =========================================================
   02. INNER
========================================================= */

.mtj-header__inner {
	width: min(calc(100% - 80px), 1760px);

	height: 92px;

	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 44px;

	transition:
		height 0.38s ease,
		width 0.38s ease;
}


/* =========================================================
   03. BRAND
========================================================= */

.mtj-header__brand {
	display: inline-flex;
	align-items: baseline;

	gap: 13px;

	flex-shrink: 0;

	color: inherit;
	text-decoration: none;

	white-space: nowrap;
}


/* MOFUTERRA */

.mtj-header__brand-main {
	display: block;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 36px;
	font-weight: 600;
	line-height: 1;

	letter-spacing: 0.025em;

	color: inherit;

	transition:
		font-size 0.38s ease,
		color 0.38s ease;
}


/* TRAVEL JOURNAL */

.mtj-header__brand-sub {
	display: block;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 9px;
	font-weight: 600;
	line-height: 1;

	letter-spacing: 0.22em;

	color: inherit;

	opacity: 0.74;

	transition:
		color 0.38s ease,
		opacity 0.38s ease;
}


/* BRAND HOVER */

.mtj-header__brand:hover {
	color: inherit;

	opacity: 0.78;
}


/* =========================================================
   04. DESKTOP NAVIGATION
========================================================= */

.mtj-header__nav {
	margin-left: auto;
}


.mtj-header__nav ul {
	display: flex;
	align-items: center;

	gap: clamp(23px, 2.2vw, 46px);

	margin: 0;
	padding: 0;

	list-style: none;
}


.mtj-header__nav li {
	margin: 0;
	padding: 0;

	list-style: none;
}


.mtj-header__nav a {
	position: relative;

	display: block;

	padding: 11px 0;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 11px;
	font-weight: 600;
	line-height: 1;

	letter-spacing: 0.17em;

	color: inherit;

	text-decoration: none;

	white-space: nowrap;

	transition:
		color 0.28s ease,
		opacity 0.28s ease;
}


/* underline */

.mtj-header__nav a::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: 3px;

	width: 100%;
	height: 1px;

	background: currentColor;

	transform: scaleX(0);
	transform-origin: right center;

	transition:
		transform 0.32s ease;
}


.mtj-header__nav a:hover {
	color: inherit;

	opacity: 0.65;
}


.mtj-header__nav a:hover::after {
	transform: scaleX(1);

	transform-origin: left center;
}


/* =========================================================
   05. SCROLLED HEADER
   40px以上スクロール後
========================================================= */

.mtj-header.is-scrolled {
	background: rgba(73, 55, 45, 0.97);

	color: #f3ede5;

	border-bottom-color:
		rgba(243, 237, 229, 0.11);

	box-shadow:
		0 8px 30px rgba(35, 24, 18, 0.12);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


.mtj-header.is-scrolled .mtj-header__inner {
	height: 72px;
}


.mtj-header.is-scrolled .mtj-header__brand-main {
	font-size: 31px;
}


.mtj-header.is-scrolled .mtj-header__brand-sub {
	opacity: 0.72;
}


/* =========================================================
   06. OTHER PAGES
   トップページ以外は最初から濃茶
========================================================= */

body:not(.mofuterra-front-page) .mtj-header {
	position: sticky;

	top: 0;

	background: #49372d;

	color: #f3ede5;

	border-bottom-color:
		rgba(243, 237, 229, 0.10);
}


.admin-bar body:not(.mofuterra-front-page) .mtj-header {
	top: 32px;
}


/* =========================================================
   07. MOBILE MENU BUTTON
========================================================= */

.mtj-header__menu-button {
	display: none;

	position: relative;

	width: 42px;
	height: 42px;

	flex-shrink: 0;

	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;

	color: inherit;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
}


.mtj-header__menu-button span {
	position: absolute;

	left: 8px;

	width: 26px;
	height: 1px;

	background: currentColor;

	transition:
		top 0.32s ease,
		transform 0.32s ease,
		opacity 0.32s ease;
}


.mtj-header__menu-button span:first-child {
	top: 16px;
}


.mtj-header__menu-button span:last-child {
	top: 25px;
}


/* OPEN */

.mtj-header__menu-button.is-open span:first-child {
	top: 21px;

	transform: rotate(45deg);
}


.mtj-header__menu-button.is-open span:last-child {
	top: 21px;

	transform: rotate(-45deg);
}


/* =========================================================
   08. MOBILE NAVIGATION
========================================================= */

.mtj-mobile-nav {
	position: fixed;

	top: 0;
	left: 0;

	z-index: 9998;

	width: 100%;
	height: 100vh;
	height: 100dvh;

	padding:
		118px
		32px
		48px;

	overflow-y: auto;

	background: #49372d;

	color: #f3ede5;

	opacity: 0;
	visibility: hidden;

	transform: translateY(-8px);

	pointer-events: none;

	transition:
		opacity 0.34s ease,
		visibility 0.34s ease,
		transform 0.34s ease;
}


.mtj-mobile-nav.is-open {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	pointer-events: auto;
}


.mtj-mobile-nav ul {
	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;

	border-top:
		1px solid rgba(243, 237, 229, 0.14);
}


.mtj-mobile-nav li {
	margin: 0;
	padding: 0;

	list-style: none;

	border-bottom:
		1px solid rgba(243, 237, 229, 0.14);
}


.mtj-mobile-nav a {
	display: flex;
	align-items: baseline;

	gap: 24px;

	width: 100%;

	padding: 18px 0;

	color: #f3ede5;
	text-decoration: none;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 27px;
	font-weight: 500;
	line-height: 1.1;

	letter-spacing: 0.07em;
}


.mtj-mobile-nav a span {
	width: 25px;

	flex-shrink: 0;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 9px;

	letter-spacing: 0.14em;

	color: #d6a55e;
}


/* =========================================================
   09. SMALL DESKTOP
========================================================= */

@media (max-width: 1180px) {

	.mtj-header__inner {
		width: min(calc(100% - 48px), 1760px);

		gap: 26px;
	}


	.mtj-header__brand-main {
		font-size: 31px;
	}


	.mtj-header__brand-sub {
		font-size: 8px;

		letter-spacing: 0.16em;
	}


	.mtj-header__nav ul {
		gap: 21px;
	}


	.mtj-header__nav a {
		font-size: 10px;

		letter-spacing: 0.14em;
	}

}


/* =========================================================
   10. MOBILE / TABLET
========================================================= */

@media (max-width: 980px) {

	.mtj-header__inner {
		width: calc(100% - 40px);

		height: 72px;

		gap: 18px;
	}


	.mtj-header__nav {
		display: none;
	}


	.mtj-header__menu-button {
		display: block;

		z-index: 10000;
	}


	.mtj-header__brand {
		gap: 9px;
	}


	.mtj-header__brand-main {
		font-size: 27px;
	}


	.mtj-header__brand-sub {
		font-size: 7px;

		letter-spacing: 0.14em;
	}


	/* スクロール後 */

	.mtj-header.is-scrolled .mtj-header__inner {
		height: 62px;
	}


	.mtj-header.is-scrolled .mtj-header__brand-main {
		font-size: 24px;
	}


	.mtj-header.is-scrolled .mtj-header__brand-sub {
		font-size: 7px;
	}


	/* メニュー開いている時は濃茶 */

	.mtj-header:has(
		.mtj-header__menu-button.is-open
	) {
		background: #49372d;

		color: #f3ede5;

		border-bottom-color:
			rgba(243, 237, 229, 0.10);
	}

}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 767px) {

	.mtj-header__inner {
		width: calc(100% - 32px);

		height: 68px;
	}


	.mtj-header__brand {
		gap: 8px;
	}


	.mtj-header__brand-main {
		font-size: 25px;

		letter-spacing: 0.015em;
	}


	.mtj-header__brand-sub {
		font-size: 6px;

		letter-spacing: 0.12em;
	}


	.mtj-header.is-scrolled .mtj-header__inner {
		height: 60px;
	}


	.mtj-header.is-scrolled .mtj-header__brand-main {
		font-size: 23px;
	}


	.mtj-mobile-nav {
		padding:
			104px
			24px
			40px;
	}


	.mtj-mobile-nav a {
		padding: 17px 0;

		font-size: 25px;
	}

}


/* =========================================================
   12. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.mtj-header__inner {
		width: calc(100% - 26px);
	}


	.mtj-header__brand {
		gap: 6px;
	}


	.mtj-header__brand-main {
		font-size: 23px;
	}


	.mtj-header__brand-sub {
		font-size: 5.5px;

		letter-spacing: 0.10em;
	}


	.mtj-header__menu-button {
		width: 38px;
		height: 38px;
	}


	.mtj-header__menu-button span {
		left: 7px;

		width: 24px;
	}

}


/* =========================================================
   13. WORDPRESS ADMIN BAR
========================================================= */

@media screen and (max-width: 782px) {

	.admin-bar .mtj-header {
		top: 46px;
	}


	.admin-bar body:not(.mofuterra-front-page) .mtj-header {
		top: 46px;
	}

}


/* =========================================================
   14. MENU OPEN
========================================================= */

body.mtj-menu-open {
	overflow: hidden;
}


/* =========================================================
   15. ACCESSIBILITY
========================================================= */

.mtj-header a:focus-visible,
.mtj-header button:focus-visible,
.mtj-mobile-nav a:focus-visible {
	outline: 1px solid #d6a55e;

	outline-offset: 4px;
}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.mtj-header,
	.mtj-header *,
	.mtj-mobile-nav,
	.mtj-mobile-nav * {
		transition: none !important;
	}

}