/*
Theme Name: MatchLayer
Theme URI: https://matchlayer.jp/
Author: MatchLayer
Author URI: https://matchlayer.jp/
Description: MatchLayer プラグイン専用の軽量クラシックテーマ。スマホの左右余白を最小化し、フッターにテーマ名を出さず、プラグインのヘッダーナビ・フッターリンクをそのまま活かします。
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matchlayer-theme
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	--ml-site-max: 1100px;       /* PC の最大幅 */
	--ml-gutter-desktop: 24px;   /* PC の左右ガター */
	--ml-gutter-mobile: 12px;    /* スマホの左右ガター（カスタマイザで上書き可） */
	--ml-section-gap: 32px;      /* セクション間隔（カスタマイザで上書き可） */
	--ml-header-pad-y: 10px;     /* ヘッダーの上下パディング（薄く） */

	--ml-text: #1f2937;
	--ml-muted: #6b7280;
	--ml-border: #e5e7eb;
	--ml-bg: #ffffff;
	--ml-brand: #d6526a;         /* プラグイン未注入時のフォールバック */
}

/* =========================================================
   Base
   ========================================================= */
* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--ml-bg);
	color: var(--ml-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
	line-height: 1.6;
	overflow-x: hidden; /* スマホで意図しない横スクロールを防ぐ */
}

img { max-width: 100%; height: auto; }

/* =========================================================
   Sticky-footer layout
   ========================================================= */
.ml-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.ml-site > main,
main#ml-homepage-template { flex: 1 0 auto; }

/* =========================================================
   Shell (centered gutter container)
   ========================================================= */
.ml-shell {
	width: 100%;
	max-width: var(--ml-site-max);
	margin-inline: auto;
	padding-inline: var(--ml-gutter-desktop);
}

/* =========================================================
   Header
   ========================================================= */
.ml-site-header {
	background: var(--ml-bg);
	border-bottom: 1px solid var(--ml-border);
	padding-block: var(--ml-header-pad-y);
}
.ml-header-row {
	display: flex;
	align-items: center;
	gap: 16px;
}
.ml-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: none;
	color: var(--ml-text);
}
.ml-logo:hover { text-decoration: none; }
.ml-header-row .custom-logo-link { flex: 0 0 auto; display: inline-flex; align-items: center; }
.ml-header-row .custom-logo { max-height: 40px; width: auto; }
/* プラグインのナビを右端へ寄せる（ログイン時/未ログイン時とも .ml-header-nav 内に出力される） */
.ml-header-row .ml-header-nav { margin-left: auto; }

/* =========================================================
   Main
   ========================================================= */
.ml-site-main { padding-block: 24px; }

/* =========================================================
   Footer (テーマ名は出さない)
   ========================================================= */
.ml-site-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--ml-border);
	margin-top: 40px;
	padding-block: 20px;
}
.ml-site-footer .ml-shell { text-align: center; }
/* プラグイン出力の .ml-footer-links はコピーライトの上に置く。既定の余白は緩める */
.ml-site-footer .ml-footer-links { padding: 0 0 4px; }
.ml-copyright {
	margin: 8px 0 0;
	font-size: 0.8rem;
	color: var(--ml-muted);
}

/* =========================================================
   Generic theme button (404 等、プラグイン wrapper 外で使う)
   ========================================================= */
.ml-theme-btn {
	display: inline-block;
	padding: 10px 20px;
	background: var(--ml-brand);
	color: #fff !important;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}
.ml-theme-btn:hover { opacity: 0.9; text-decoration: none; }

.ml-404-title { font-size: 1.5rem; margin: 0 0 12px; }
.entry-title { font-size: 1.6rem; margin: 0 0 16px; }

/* =========================================================
   Mobile: 左右余白の正規化（不満点①の解消）
   ========================================================= */
@media (max-width: 767px) {
	:root { --ml-section-gap: 24px; }

	/* 全要素（ヘッダー/フッター/本文）でテーマのガターを維持する。
	   これによりプレーンな固定ページ（プライバシーポリシー・利用規約・
	   ヘルプ等、.ml-wrapper を持たないテキストページ）でも左右余白が確保される。 */
	.ml-shell { padding-inline: var(--ml-gutter-mobile); }

	/* プラグインの .ml-wrapper は自前で padding:16px を持つため、シェルの
	   ガターと二重にならないよう本文内では左右パディングのみ無効化する。 */
	.ml-site-main .ml-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	.ml-site-main { padding-block: 16px; }
	.ml-site-footer { margin-top: 24px; }
}