/*
Theme Name:     lightning-child
Description:    lightningの子テーマ
Author:         login_user
Template:       lightning

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/


/* -----------------------------
 * 全幅セクション
----------------------------- */

/* 基本構造：全幅セクション */
.l-full-width-section {
  position: relative; /** 位置基準を設定 **/
  left: 50%; /** 親の中央基準に寄せる **/
  right: 50%; /** 左右基準を中央に **/
  width: 100vw; /** ビューポート全体の幅を使用 **/
  margin-left: -50vw; /** 左側のはみ出しを補正 **/
  margin-right: -50vw; /** 右側のはみ出しを補正 **/
  background: linear-gradient(180deg, #ffe8b3 0%, #ffffff 100%); /** 背景グラデーション（hero用） **/

  padding: 100px 20px; /** 上下余白 **/
  box-sizing: border-box; /** パディング含めて幅を計算 **/
}

/* 内側の中央整列用 */
.l-full-width-section .l-inner {
  max-width: 1200px; /** コンテンツ中央寄せ用（お好み） **/
  margin: 0 auto;
}

/* hero セクション（中の文字スタイル） */
.hero h1 {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.5;
  color: #6b4a24;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1.1em;
  color: #7a5a2e;
}




/* ---------------------------------------------- 
 * フロントエンドから簡単に記事投稿できるフォーム作成 
 * ---------------------------------------------- */

#frontend-post-form { /* フォーム全体のスタイル設定 */
    background-color: #f7f7f7; /* フォームの背景を薄いグレーに */
    border: 1px solid #ccc; /* 外枠に薄いグレーの線 */
    padding: 20px; /* 内側の余白 */
    margin-bottom: 20px; /* 下に余白を取る */
    border-radius: 5px; /* 角を丸く */
    max-width: 600px; /* 幅を最大600pxに制限 */
}

#frontend-post-form input[type="text"], /* ハンドルネームorタイトル入力欄 */
#frontend-post-form textarea, /* 本文入力欄 */
#frontend-post-form select { /* カテゴリー選択ボックス */
    width: 100%; /* 横幅いっぱいに広げる */
    padding: 8px; /* 内側の余白 */
    margin-bottom: 10px; /* 各入力欄の下に余白 */
    border: 1px solid #bbb; /* 枠線の色をグレーに */
    border-radius: 3px; /* 角を少し丸く */
    box-sizing: border-box; /* パディング含めて幅を計算 */
}

#frontend-post-form input[type="submit"] { /* 送信ボタン */
    background-color: #0073aa; /* WordPressの青色 */
    color: #fff; /* 文字色を白に */
    padding: 10px 20px; /* 内側余白（上下10px・左右20px） */
    border: none; /* 枠線を消す */
    border-radius: 3px; /* 少し角丸に */
    cursor: pointer; /* マウスカーソルを指マークに */
}

#frontend-post-form input[type="submit"]:hover { /* 送信ボタンのホバー時 */
    background-color: #005177; /* 少し濃い青に変化 */
}

/* ---------------------------------------------------
 * 削除パスワードフォーム付き投稿一覧（スタイリッシュ版） 
 * --------------------------------------------------- */

.frontend-post-list { /* 投稿一覧全体のリスト */
  list-style: none; /* 行頭の・マークを消す */
  padding: 0; /* 内側余白をなくす */
  margin: 0; /* 外側余白をなくす */
  max-width: 600px; /* 最大幅を600pxに制限 */
}

.frontend-post-list li { /* 各投稿リスト項目の枠 */
  background: #fff; /* 背景を白に設定 */
  border: 1px solid #ddd; /* 薄いグレーの境界線 */
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ほんのり影をつける */
  padding: 15px 20px; /* 内側余白 */
  margin-bottom: 15px; /* 各項目の間隔 */
  display: flex; /* フレックスレイアウトで縦並び */
  flex-direction: column; /* 縦方向に要素を配置 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* ホバー時のアニメーション */
}

.frontend-post-list li:hover { /* ホバー時の視覚効果 */
  transform: translateY(-2px); /* 少し浮かせる */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* 影を強調 */
}

/* 投稿ハンドルネームorタイトル */
.frontend-post-list strong {
  font-size: 0.95em; /* 文字サイズ */
  color: #333; /* 濃いグレー文字 */
  margin-bottom: 10px; /* 下に余白を追加 */
}

/* パスワード＋削除ボタンを横並びに配置 */
.frontend-post-list form {
  display: flex; /* 横並び */
  align-items: center; /* 縦位置を中央に揃える */
  gap: 10px; /* 要素間の隙間 */
}

/* パスワード入力欄 */
.frontend-post-list input[type="password"] {
  flex: 1; /* 入力欄を広げる */
  padding: 6px 10px; /* 内側余白を確保 */
  border: 1px solid #ccc; /* 薄いグレーの枠線 */
  border-radius: 5px; /* 角を丸く */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* フォーカス時のアニメーション */
}

.frontend-post-list input[type="password"]:focus {
  border-color: #0073aa; /* フォーカス時の青色ライン */
  box-shadow: 0 0 3px rgba(0,115,170,0.4); /* 青い光を追加 */
  outline: none; /* ブラウザ標準の枠を消す */
}

/* 削除ボタン */
.frontend-post-list input.delete-btn {
  background: linear-gradient(135deg, #e53935, #b71c1c); /* 赤のグラデーション背景 */
  color: #fff; /* 白文字 */
  font-weight: bold; /* 太字にする */
  border: none; /* 枠線なし */
  border-radius: 5px; /* 角を丸く */
  margin-left:10px; /* 左に余白 */
  padding: 7px 14px; /* ボタン内の余白 */
  cursor: pointer; /* カーソルを指マークに変更 */
  transition: background 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
}

.frontend-post-list input.delete-btn:hover {
  background: linear-gradient(135deg, #f44336, #c62828); /* 明るめの赤に変化 */
  transform: scale(1.05); /* 少し拡大して浮かせる */
}