/* public/css/style.css - 保守研究所ウェブサイト全体共通スタイルシート */

/* === 1. 基本設定 (リセットとフォント) === */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),
  
    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}

/* === 2. ヘッダー共通スタイル === */
header {
    display: flex;
    justify-content: space-between; /* 左と右の要素を両端に配置 */
    align-items: center;
    padding: 1rem 20px;
    background-color: #333; /* 暗い背景 */
    color: #fff; /* 文字色を白に */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-wrap: nowrap; /* ヘッダー全体が改行しないように */
}

/* サイトロゴとタイトル */
.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 縮小しないように */
}

.logo-link {
    display: inline-block;
    margin-right: 10px; /* ロゴと研究所名の間のスペース */
    line-height: 0; /* ロゴの親要素のline-heightをリセットして余白をなくす */
}

.logo {
    height: 2.5em; /* ロゴの高さを調整 (h1のフォントサイズ基準) */
    vertical-align: middle; /* テキストとの垂直方向の配置を調整 */
}

header h1 {
    margin: 0;
    font-size: 2.2rem;
    white-space: nowrap; /* 「保守研究所」が改行しないように */
}

header h1 a {
    color: #fff;
    text-decoration: none; /* リンクの下線を消す */
}

/* ヘッダー右側のコントロール（メインメニュー、会員エリア、ハンバーガーメニュー） */
.header-right-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* 各要素間のスペース */
}

/* メインナビゲーション（デスクトップ用） */
.main-navigation {
    margin-left: auto; /* 左側のマージンをautoに設定して右に寄せる */
    display: flex; /* Flexbox でリンクを横並び */
    align-items: center;
}

.main-navigation a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
    transition: color 0.3s ease;
    padding: 5px 0;
    white-space: nowrap; /* メニュー項目が改行しないように */
}

.main-navigation a:hover {
    color: #ddd;
}

/* 会員エリアの表示情報 */
.member-info {
    margin-right: 15px;
    font-size: 0.9em;
    color: #fff; /* 白字で表示 */
    white-space: nowrap; /* 改行しないように */
}

/* 会員エリアのリンク（ログイン/ログアウトボタン） */
.member-area a {
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 8px 15px;
    margin-left: 0; /* main-navigationからのmarginは親要素のgapで制御 */
    color: #fff; /* リンクの色を白に */
    text-decoration: none; /* 下線を消す */
    font-weight: bold;
    white-space: nowrap; /* ボタン内のテキストが改行しないように */
}

.member-area a:hover {
    background-color: #fff;
    color: #333;
}

/* ハンバーガーメニューボタンの初期設定（デスクトップでは非表示） */
.hamburger-menu {
    display: none; /* デフォルトでは非表示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* モバイルメニューより手前に */
    margin-left: 15px; /* member-area とのスペース */
}

.hamburger-menu .line {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: transform 0.3s ease;
}

/* モバイルナビゲーションの初期設定（デスクトップでは非表示） */
.mobile-navigation {
    display: none; /* デフォルトでは非表示 */
    position: fixed; /* 画面に固定 */
    top: 0;
    left: -100%; /* 画面外に隠しておく */
    width: 70%; /* メニューの幅 */
    height: 100%;
    background-color: #333; /* 背景色 */
    padding-top: 80px; /* ヘッダーの高さ分スペースを空ける */
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    transition: left 0.3s ease; /* スライドイン/アウトのアニメーション */
    z-index: 1000;
    flex-direction: column; /* 縦並び */
    align-items: flex-start; /* 左寄せ */
}

.mobile-navigation a {
    color: #fff;
    text-decoration: none;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box; /* パディングを含めて幅を100%にする */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-navigation a:hover {
    background-color: #555;
}

/* JavaScriptで追加されるクラス */
.mobile-navigation.is-open {
    left: 0; /* 画面内にスライドイン */
    display: flex; /* Flexboxで表示 */
}

/* ハンバーガーメニューのアニメーション */
.hamburger-menu.is-active .line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.hamburger-menu.is-active .line:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.is-active .line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* === 3. メインコンテンツ共通スタイル === */
main {
    padding: 20px;
    max-width: 950px; /* サイト全体の最大幅 */
    margin: 0 auto 0 auto; /* **上部のマージンを追加 (例: 30px)。下は現状維持** */
    background-color: rgb(255 255 255 / 0.5);
}

h2, h3 {
    color: #555;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-top: 30px;
}

ul {
    list-style: disc;
    margin-left: 20px;
}

/* === 4. フッター共通スタイル === */
footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: #fff;
    font-size: 0.9rem;
}

footer a {
    color: #fff;
    text-decoration: none; /* リンクの下線を消す */
}

/* === 5. トップページ固有スタイル (index.php) === */
.key-visual {
    position: relative; /* **ここが重要: 絶対配置の基準にする** */
    width: 100%;
    overflow: hidden; /* 画像がはみ出さないように */
}

.key-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.key-visual-text {
    position: absolute; /* **絶対配置であることを確認** */
    top: 20px; /* 画像の上端からの距離を調整 */
    left: 20px; /* 画像の左端からの距離を調整 */
    transform: none; /* 中央揃えのtransformを解除 */
    color: #fff;
    text-align: left; /* 左揃えに変更 */
    width: auto; /* 幅を自動調整に戻すか、必要に応じて設定 */
    max-width: 50%; /* 親要素の幅に対して最大50%など、適宜調整 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}


.key-visual-text h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #fff;
    border-bottom: none;
    padding-bottom: 0;
    text-align: left;
    white-space: nowrap; /* テキストを折り返さないように */
}

.main-content-wrapper {
    max-width: 1200px; /* index.phpのmainコンテンツを囲むラッパー */
    margin: 0 auto;
    padding: 20px;
    /* mainタグ自体が中央寄せとパディングを持つので、ここではこれだけ */
}

.announcements-section {
    background-color: #f0f8ff; /* 薄い青背景 */
    border-left: 5px solid #007bff;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
}
.announcements-section h3 {
    margin-top: 0;
    color: #007bff;
    font-size: 1.8em;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.announcements-section ul {
    list-style: none;
    padding: 0;
}
.announcements-section li {
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
}
.announcements-section li .date {
    font-size: 0.9em;
    color: #555;
    flex-shrink: 0; /* 日付が縮まないように */
    margin-right: 15px;
    width: 90px; /* 日付の幅を固定して揃える */
}
.announcements-section li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    flex-grow: 1; /* タイトルが残りの幅を占める */
}
.announcements-section li a:hover {
    text-decoration: underline;
    color: #0056b3;
}
.more-announcements-link {
    text-align: right;
    margin-top: 20px;
}
.more-announcements-link .button {
    display: inline-block;
    background-color: #28a745; /* 緑色のボタン */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.more-announcements-link .button:hover {
    background-color: #218838;
}
.about-section {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fefefe;
}
.about-section h3 {
    color: #333;
    font-size: 1.8em;
    margin-bottom: 15px;
}
.about-section p {
    line-height: 1.6;
}

/* === 6. 記事一覧・編集・閲覧ページ共通スタイル (note/...) === */

/* メッセージボックス */
.message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-weight: bold;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

/* 記事リストコンテナ (index.php, edit.php, view.php で共通の枠) */
.article-list-container,
.form-container,
.article-container {
    max-width: 960px; /* index, view は960px, editは800pxだが、ここではlist/viewに合わせて960pxで共通化 */
    margin: 30px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 検索・フィルターエリア */
.search-filter-area {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap; /* 小さい画面で折り返す */
}
.search-filter-area form {
    display: flex;
    flex-grow: 1;
    gap: 5px;
}
.search-filter-area input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.search-filter-area button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.search-filter-area button:hover {
    background-color: #0056b3;
}
.filter-buttons {
    display: flex;
    gap: 5px;
}
.filter-buttons button {
    background-color: #6c757d;
    border-color: #6c757d;
}
.filter-buttons button.active {
    background-color: #007bff;
    border-color: #007bff;
}

/* 記事作成ボタン (一覧ページ上部) */
.create-article-button-container {
    text-align: right;
    margin-bottom: 20px;
}
.create-article-button {
    display: inline-block;
    background-color: #28a745; /* 緑色 */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.create-article-button:hover {
    background-color: #218838;
}

/* 記事カード (一覧ページ) */
.article-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.article-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
}
.article-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}
.article-card h3 a {
    color: #333;
    text-decoration: none;
}
.article-card h3 a:hover {
    text-decoration: underline;
}
.article-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}
.article-meta span {
    margin-right: 15px;
}
.article-type-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    margin-left: 10px;
}
.article-type-tag.blog {
    background-color: #28a745; /* 緑色 */
}
.article-type-tag.announcement {
    background-color: #ffc107; /* 黄色 */
    color: #333;
}
.article-content-preview {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 3行で切り詰める */
    -webkit-box-orient: vertical;
}
.no-articles {
    text-align: center;
    color: #777;
    padding: 50px 0;
}

/* ページネーション */
.pagination {
    text-align: center;
    margin-top: 20px;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
}
.pagination a:hover {
    background-color: #f0f0f0;
}
.pagination span.current {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
}

/* 記事編集フォーム (edit.php) */
.form-container { /* .article-list-containerと共通 */
    /* 上記の.article-list-containerのスタイルを継承 */
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.form-group input[type="text"],
.form-group textarea,
.form-group select {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}
.form-group textarea {
    min-height: 300px;
    resize: vertical;
}
.form-actions {
    text-align: right;
    margin-top: 20px;
}
.form-actions button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-left: 10px;
}
.form-actions button:hover {
    background-color: #0056b3;
}


/* 記事詳細表示 (view.php) */
.article-container { /* .article-list-containerと共通 */
    /* 上記の.article-list-containerのスタイルを継承 */
}
.article-container h1 {
    font-size: 2.2em;
    margin-bottom: 10px;
}
.article-detail-meta {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.article-detail-meta img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.article-detail-meta span {
    margin-right: 15px;
}
.article-content {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 30px;
}
.article-content pre {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
}
.article-content code {
    font-family: Consolas, monospace;
}
.back-link {
    display: block;
    margin-top: 20px;
    text-align: center;
}
.edit-link {
    margin-left: auto; /* 右端に寄せる */
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.edit-link:hover {
    background-color: #0056b3;
}
.delete-link {
    margin-left: 10px; /* 編集ボタンとの間隔 */
    background-color: #dc3545; /* 赤色 */
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: none; /* ボタンだがリンクのように見せるため */
    display: inline-block; /* <a>タグと並べるため */
}
.delete-link:hover {
    background-color: #c82333;
}


/* === 7. メディアクエリ：レスポンシブデザイン用 === */
@media screen and (max-width: 768px) { /* 768px 以下の場合 */
    .main-navigation {
        display: none; /* デスクトップナビゲーションを非表示 */
    }

    /* member-area はモバイルでも表示する */
    .member-area {
        display: block; /* デフォルトでブロック要素として表示 */
        margin-left: 0; /* 不要なマージンをリセット */
    }
    /* member-area 内のaタグのスタイルを調整（ハンバーガーメニューの隣に合うように） */
    .member-area a {
        margin: 0; /* 左右のマージンをリセット */
        padding: 5px 10px; /* パディングを調整 */
        font-size: 0.9em; /* フォントサイズを少し小さく */
        white-space: nowrap; /* 改行させない */
    }


    .hamburger-menu {
        display: block; /* ハンバーガーメニューを表示 */
    }

    /* header-right-controls 内での表示順序を調整 */
    .header-right-controls {
        order: 1; /* 右端に配置 */
        margin-left: auto; /* 右寄せ */
    }
    .site-branding {
        order: 0; /* 左寄せ */
    }

    /* トップページ キービジュアル */
    .key-visual {
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
    }
    .key-visual-text h2 {
        font-size: 1.3em;
    }
    .key-visual-text p {
        font-size: 1em;
    }

    /* メインコンテンツのパディング調整 */
    main {
        padding: 15px;
    }
}

/* さらに小さい画面（例：スマホ縦向き）での調整 */
@media screen and (max-width: 480px) {
    header {
        padding: 0.8rem 15px; /* 上下のパディングを少し減らす */
    }
    header h1 {
        font-size: 1.5rem; /* h1 のフォントサイズを小さくする */
    }
    .logo {
        height: 1.8em; /* ロゴもそれに合わせて小さくする */
    }
    .mobile-navigation {
        width: 85%;
    }
    .header-right-controls {
        gap: 10px;
    }
    .member-area a {
        padding: 5px 8px;
        font-size: 0.85em;
    }
    .hamburger-menu .line {
        width: 25px;
    }
}