/*
Theme Name: FromLA
Theme URI: https://blog.musette-japan.com/
Author: Musette Japan
Description: 旧 Movable Type の FromLA の見た目（黒い背景の 3 カラム）を再現する、昔ながらのブログ用テーマ。左：Links・Recent Entries・Monthly Archives、中央：記事、右：Search・Categories。
Version: 0.1.6
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fromla
*/

/* ---- 基本（現行の FromLA の画面から計った値：外側 #333、本文の枠 #111、枠線 #666、文字 白、リンク #ccc、文字の大きさ 12px・行の高さ 18px、幅 980px） ---- */
html { background: #333; }
body {
	margin: 0;
	padding: 0 0 24px;
	background: #333;
	color: #fff;
	font: 12px/1.5 "Lucida Grande", Verdana, Arial, Helvetica, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}
a { color: #ccc; text-decoration: none; }
a:hover, a:focus { color: #fff; text-decoration: underline; }
img { border: 0; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 全体の枠 ---- */
#wrap {
	box-sizing: content-box;
	width: 980px;
	margin: 0 auto;
	background: #111;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
}

/* ---- ヘッダー（バナー画像 860×78。画像がなければ文字）。画像の高さは幅に合わせて決める（狭い画面で縦横の比が崩れないように） ---- */
#header {
	background: #000;
	border-bottom: 1px solid #666;
	overflow: hidden;
}
#header a { display: block; }
#header img { display: block; width: 860px; max-width: 100%; height: auto; }
#header .site-title-text {
	display: block;
	padding: 14px 20px 0;
	color: #fff;
	font: italic 700 40px/1 Georgia, "Times New Roman", serif;
}
#header .site-title-text small {
	margin-left: 12px;
	font: 400 11px/1 Verdana, Arial, sans-serif;
	color: #ccc;
}

/* ---- 3 カラム（見た目は 左・中央・右。DOM は 左・中央・右の順） ---- */
#cols { display: flex; align-items: stretch; }
/* DOM は 中央・左・右の順（読み上げ・検索のため記事を先に）。見た目は order で 左・中央・右 */
#left { order: 1; }
#main { order: 2; }
#right { order: 3; }
#left { width: 206px; box-sizing: border-box; padding: 18px 15px 20px 16px; border-right: 1px solid #666; }
#main { width: 558px; box-sizing: border-box; padding: 22px 18px 20px; }
#right { width: 216px; box-sizing: border-box; padding: 18px 16px 20px 15px; border-left: 1px solid #666; }

/* ---- サイドバー ---- */
.side-title {
	margin: 0 0 8px;
	border: 1px solid #666;
	color: #ccc;
	text-align: center;
	font: 400 11px/20px Verdana, Arial, sans-serif;
}
.sidebar section { margin: 0 0 26px; }
.sidebar ul { margin: 0; padding: 0 0 0 16px; list-style: circle; }
.sidebar li { margin: 0; padding: 0; line-height: 18px; }
.sidebar .count { color: #ccc; }
.searchform input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 145px;
	margin: 0 0 3px;
	padding: 2px 4px;
	border: 1px solid #807f83;
	border-radius: 4px;
	background: #fff;
	color: #000;
	font-size: 12px;
}
.searchform button {
	padding: 2px 4px;
	border: 1px solid #807f83;
	border-radius: 4px;
	background: #e9e9ec;
	color: #000;
	font-size: 12px;
	cursor: pointer;
}

/* ---- 記事 ---- */
.archive-title { margin: 0 0 22px; padding: 0 0 4px; border-bottom: 1px dotted #ccc; color: #fff; font-size: 12px; }
.entry { margin: 0 0 34px; }
.entry-date { margin: 0 0 18px; padding-left: 6px; color: #fff; font-weight: 700; }
.entry-title { margin: 0 0 30px; padding: 0 0 3px 6px; border-bottom: 1px dotted #ccc; color: #ccc; font-size: 12px; font-weight: 700; line-height: 18px; }
.entry-title a { color: #ccc; }
.entry-title a:hover { color: #fff; text-decoration: none; }
.entry-body { color: #fff; overflow-wrap: anywhere; }
.entry-body p { margin: 0 0 18px; }
.entry-body a { text-decoration: underline; }
.entry-body img, .entry-body video, .entry-body iframe { max-width: 100%; height: auto; }
.entry-body blockquote { margin: 0 0 18px 12px; padding-left: 12px; border-left: 2px solid #666; color: #ccc; }
.entry-body figure { margin: 0 0 18px; }
.entry-body figcaption { color: #ccc; font-size: 11px; }
.entry-body ul, .entry-body ol { margin: 0 0 18px; }
.entry-body table { max-width: 100%; border-collapse: collapse; }
.entry-body th, .entry-body td { padding: 2px 6px; border: 1px solid #666; }
.entry-body .more-link { display: inline-block; margin: 0 0 18px; }
.entry-meta { margin: 20px 0 0; padding: 4px 0 0; border-top: 1px dotted #ccc; color: #fff; font-size: 11px; text-align: right; }
.entry-nav, .pagination { margin: 0 0 20px; overflow: hidden; }
.entry-nav .prev, .pagination .older { float: left; }
.entry-nav .next, .pagination .newer { float: right; }

/* ---- フッター ---- */
#footer { padding: 10px 18px 14px; border-top: 1px solid #666; color: #ccc; font-size: 11px; text-align: center; }

/* ---- 狭い画面（スマホ）：1 列にして、記事を先に ---- */
@media (max-width: 1010px) {
	#wrap { width: auto; max-width: 980px; }
}
@media (max-width: 760px) {
	body { font-size: 14px; }
	#cols { flex-direction: column; }
	#main { order: 1; width: auto; }
	#left { order: 2; width: auto; border-right: 0; border-top: 1px solid #666; }
	#right { order: 3; width: auto; border-left: 0; border-top: 1px solid #666; }
	.side-title { font-size: 12px; }
	.searchform input[type="search"] { max-width: none; }
}
@media print {
	html, body, #wrap { background: #fff; color: #000; border: 0; }
	#header, #left, #right, #footer { display: none; }
	a, .entry-title, .entry-title a, .entry-date, .entry-body, .entry-meta { color: #000; }
}