/*
Theme Name: MOFUTERRA
Theme URI:
Author: MOFUTERRA
Description: MOFUTERRA TRAVEL JOURNAL
Version: 1.0.0
Text Domain: mofuterra
*/


/* =========================================================
   MOFUTERRA TRAVEL JOURNAL
   BASE STYLE — FINAL
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {

	/* -----------------------------------------
	   BRAND COLORS
	----------------------------------------- */

	--mt-ivory: #F3EDE5;
	--mt-mocha: #4F3C33;
	--mt-apricot: #D98259;
	--mt-orange: #A94327;
	--mt-gold: #D6A55E;


	/* -----------------------------------------
	   NEUTRAL / SUPPORT COLORS
	----------------------------------------- */

	--mt-text: #49372D;
	--mt-dark-brown: #38271F;
	--mt-terracotta: #B95737;
	--mt-terracotta-soft: #BF5736;

	--mt-beige: #E9E1D6;
	--mt-greige: #B9B0A6;
	--mt-taupe: #887668;

	--mt-white: #FFFAF4;
	--mt-white-warm: #FFFAF5;


	/* -----------------------------------------
	   LEGACY / COMMON ALIASES
	   既存CSSとの互換用
	----------------------------------------- */

	--mt-bg: var(--mt-ivory);
	--mt-bg-soft: #F7F2EB;
	--mt-bg-light: #FAF7F2;

	--mt-brown: var(--mt-mocha);
	--mt-brown-dark: var(--mt-dark-brown);

	--mt-terracotta-dark: var(--mt-orange);


	/* -----------------------------------------
	   LINES
	----------------------------------------- */

	--mt-line: rgba(73, 55, 45, 0.20);
	--mt-line-soft: rgba(73, 55, 45, 0.12);
	--mt-line-light: rgba(255, 250, 244, 0.22);


	/* -----------------------------------------
	   TYPOGRAPHY
	----------------------------------------- */

	--mt-font-serif:
		"Noto Serif JP",
		"Yu Mincho",
		"YuMincho",
		"Hiragino Mincho ProN",
		"Hiragino Mincho Pro",
		serif;

	--mt-font-display:
		"Cormorant Garamond",
		"Times New Roman",
		serif;

	--mt-font-sans:
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		Arial,
		"Noto Sans JP",
		sans-serif;


	/* -----------------------------------------
	   LAYOUT
	----------------------------------------- */

	--mt-page-width: 1100px;
	--mt-wide-width: 1240px;

	--mt-side-space: 64px;

	--mt-radius-large: 34px;
	--mt-radius-medium: 24px;
	--mt-radius-small: 12px;


	/* -----------------------------------------
	   SHADOWS
	----------------------------------------- */

	--mt-shadow-soft:
		0 14px 40px rgba(56, 39, 31, 0.08);

	--mt-shadow-medium:
		0 18px 50px rgba(56, 39, 31, 0.12);


	/* -----------------------------------------
	   TRANSITION
	----------------------------------------- */

	--mt-transition: 0.35s ease;

}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;

	scroll-behavior: smooth;

	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;

	background: var(--mt-ivory);

	color: var(--mt-text);

	font-family: var(--mt-font-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;

	letter-spacing: 0.02em;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.admin-bar {
	/* WordPress管理バーはWordPress側に任せる */
}


/* =========================================================
   03. HTML ELEMENTS
========================================================= */

main,
header,
footer,
section,
article,
aside,
nav {
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;

	list-style: none;
}

img,
picture,
video,
svg {
	display: block;

	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	border: 0;
	padding: 0;

	background: none;

	color: inherit;

	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* =========================================================
   04. LINKS
========================================================= */

a {
	color: inherit;

	text-decoration: none;

	transition:
		color var(--mt-transition),
		opacity var(--mt-transition),
		background-color var(--mt-transition),
		border-color var(--mt-transition),
		transform var(--mt-transition),
		box-shadow var(--mt-transition);
}

a:hover {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 1px solid var(--mt-terracotta);

	outline-offset: 4px;
}


/* =========================================================
   05. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--mt-text);

	font-family: var(--mt-font-serif);
	font-weight: 400;

	line-height: 1.5;
}

p {
	color: inherit;
}

strong,
b {
	font-weight: 600;
}

em,
i {
	font-style: italic;
}


/* =========================================================
   06. ENGLISH DISPLAY TYPE
========================================================= */

.mt-display,
.mt-en,
.mofuterra-display {
	font-family: var(--mt-font-display);
}


/* =========================================================
   07. COMMON LAYOUT
========================================================= */

.site {
	width: 100%;
	min-height: 100vh;
}

.site-main {
	display: block;

	width: 100%;
}

.mt-container {
	width: min(
		calc(100% - (var(--mt-side-space) * 2)),
		var(--mt-page-width)
	);

	margin-inline: auto;
}

.mt-container-wide {
	width: min(
		calc(100% - (var(--mt-side-space) * 2)),
		var(--mt-wide-width)
	);

	margin-inline: auto;
}


/* =========================================================
   08. COMMON SECTION LABEL
========================================================= */

.mt-section-label {
	display: block;

	color: var(--mt-terracotta);

	font-family: var(--mt-font-sans);
	font-size: 13px;
	font-weight: 500;

	line-height: 1.4;

	letter-spacing: 0.28em;

	text-transform: uppercase;
}


/* =========================================================
   09. COMMON TEXT LINK
========================================================= */

.mt-text-link {
	position: relative;

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

	gap: 44px;

	min-width: 180px;

	padding: 0 0 10px;

	border-bottom:
		1px solid currentColor;

	color: var(--mt-text);

	font-family: var(--mt-font-sans);
	font-size: 13px;
	font-weight: 500;

	line-height: 1.3;

	letter-spacing: 0.18em;

	text-transform: uppercase;
}

.mt-text-link:hover {
	color: var(--mt-terracotta);

	opacity: 0.78;
}

.mt-text-link__arrow {
	font-size: 18px;
	line-height: 1;
}


/* =========================================================
   10. COMMON BUTTON
========================================================= */

.mt-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;

	min-width: 180px;

	padding:
		14px
		18px;

	background: var(--mt-terracotta);

	color: var(--mt-white);

	font-family: var(--mt-font-sans);
	font-size: 12px;
	font-weight: 600;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	transition:
		background-color var(--mt-transition),
		transform var(--mt-transition),
		box-shadow var(--mt-transition);
}

.mt-button:hover {
	background: var(--mt-orange);

	color: var(--mt-white);

	transform: translateY(-3px);

	box-shadow: var(--mt-shadow-soft);
}


/* =========================================================
   11. COMMON PAPER / CARD
========================================================= */

.mt-paper {
	background: var(--mt-white-warm);

	border:
		1px solid var(--mt-line-soft);
}

.mt-card {
	background: var(--mt-white-warm);

	border:
		1px solid var(--mt-line-soft);

	transition:
		transform var(--mt-transition),
		box-shadow var(--mt-transition);
}

.mt-card:hover {
	transform: translateY(-4px);

	box-shadow: var(--mt-shadow-soft);
}


/* =========================================================
   12. SCREEN READER TEXT
========================================================= */

.screen-reader-text {
	position: absolute !important;

	width: 1px;
	height: 1px;

	padding: 0;
	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);

	white-space: nowrap;

	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;

	z-index: 100000;

	top: 12px;
	left: 12px;

	width: auto;
	height: auto;

	padding: 12px 18px;
	margin: 0;

	overflow: visible;

	clip: auto;
	clip-path: none;

	background: var(--mt-white);

	color: var(--mt-text);

	font-family: var(--mt-font-sans);
	font-size: 14px;
}


/* =========================================================
   13. WORDPRESS DEFAULT
========================================================= */

.alignleft {
	float: left;

	margin-right: 2em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;

	margin-left: 2em;
	margin-bottom: 1.5em;
}

.aligncenter {
	display: block;

	margin-right: auto;
	margin-left: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	margin-top: 8px;

	color: var(--mt-taupe);

	font-size: 13px;
	line-height: 1.7;
}

.gallery-caption {
	color: var(--mt-taupe);
}

.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}


/* =========================================================
   14. SELECTION
========================================================= */

::selection {
	background: var(--mt-terracotta);

	color: var(--mt-white);
}


/* =========================================================
   15. SCROLLBAR
========================================================= */

@media (min-width: 1025px) {

	body {
		scrollbar-width: thin;

		scrollbar-color:
			rgba(73, 55, 45, 0.35)
			transparent;
	}

}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1024px) {

	:root {
		--mt-side-space: 36px;
		--mt-radius-large: 28px;
	}

	body {
		font-size: 15px;
	}

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 767px) {

	:root {
		--mt-side-space: 20px;
		--mt-radius-large: 22px;
		--mt-radius-medium: 18px;
	}

	body {
		font-size: 15px;
		line-height: 1.85;

		letter-spacing: 0.015em;
	}

	.mt-section-label {
		font-size: 11px;

		letter-spacing: 0.22em;
	}

	.mt-text-link {
		gap: 28px;

		min-width: 160px;

		font-size: 11px;
	}

	.mt-button {
		min-width: 160px;

		padding:
			13px
			16px;

		font-size: 11px;
	}

}


/* =========================================================
   18. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

	:root {
		--mt-side-space: 16px;
	}

}


/* =========================================================
   19. REDUCED MOTION
========================================================= */

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

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;

		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

}