/*
Theme Name: smabros_theme
Theme URI: https://generatepress.com
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability.
Version: 3.6.1
Actual CSS can be found in /assets/css/ folder.
*/

/* ==========================================================================
   ▼▼▼ 1. サイト全体のダークモード設定 ▼▼▼
   ========================================================================== */

/* 全体の背景と基本文字色 */
body, #page, .site-content {
    background-color: #121212 !important; /* 高級感のある黒 */
    color: #d1d1d1 !important;           /* 柔らかい白 */
}

/* 記事・ウィジェットの枠（カード部分） */
.inside-article, 
.sidebar .widget, 
.comments-area, 
.no-results, 
.paging-navigation,
.custom-404-content,
.custom-404-extra {
    background-color: #1e1e1e !important;
    color: #d1d1d1 !important;
    border: 1px solid #2c2c2c !important;
    border-radius: 8px;
}

/* ヘッダー、ナビゲーション、フッター */
.site-header, 
.main-navigation, 
.site-footer,
.footer-widgets {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #2c2c2c !important;
}

/* 見出し、リンク */
h1, h2, h3, h4, h5, h6, 
h1 a, h2 a, h3 a, .entry-title a,
.main-title a {
    color: #ffffff !important;
}

a {
    color: #4da3ff;
    text-decoration: none;
}

a:hover {
    color: #80bfff;
    text-decoration: underline;
}

/* 境界線やライン */
hr, .entry-content hr {
    border-top: 1px solid #333 !important;
    background-color: transparent !important;
}

.custom-404-extra div, 
.my-related-posts li {
    border-bottom: 1px dashed #333 !important;
}

/* ==========================================================================
   ▼▼▼ 2. ヘッダー・モバイル表示の調整 ▼▼▼
   ========================================================================== */

@media (max-width: 768px) {
    /* ヘッダーの中身を強制的に「縦並び」にする */
    .site-header .inside-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
    }
    /* ロゴとタイトルの枠リセット */
    .site-branding,
    .site-branding-container {
        float: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
    }
    /* ロゴ画像設定 */
    .site-logo {
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 10px;
        display: block;
    }
    .site-logo img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
    /* タイトル文字設定 */
    .main-title {
        float: none !important;
        width: 100%;
        font-size: 20px !important;
        line-height: 1.3;
        white-space: normal;
        margin: 0;
    }
    /* キャッチフレーズ */
    .site-description {
        float: none !important;
        text-align: center;
        margin-top: 5px;
    }
}

/* ヘッダー右端のレイアウト調整 */
.inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   ▼▼▼ 3. その他ユーティリティ（言語ボタン・文字数制限） ▼▼▼
   ========================================================================== */

/* 文字数制限（3点リーダー） */
.widget_recent_entries a,
.wp-block-latest-posts__post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; 
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 言語アイコンボタン */
.lang-icon-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid #333;
    border-radius: 30px;
    color: #333 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
}

.lang-icon-btn svg {
    flex-shrink: 0;
}

.lang-text {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}

.lang-icon-btn:hover {
    background-color: #333;
    color: #fff !important;
}

@media (max-width: 480px) {
    .lang-text { display: none; }
    .lang-icon-btn { padding: 8px; }
}

html, body {
    background-color: #121212 !important;
}

#page, .site-content, .site-header, .site-footer, .main-navigation {
    background-color: #121212 !important;
    color: #d1d1d1 !important;
}

/* 記事部分とサイドバー */
.inside-article, .sidebar .widget, .comments-area, .custom-404-content, .custom-404-extra {
    background-color: #1e1e1e !important;
    color: #d1d1d1 !important;
    border: 1px solid #2c2c2c !important;
}

/* 文字色とリンク */
h1, h2, h3, h4, h5, h6, .entry-title a, .main-title a {
    color: #ffffff !important;
}

a {
    color: #4da3ff !important;
}

/* フォームやボタンなどの細かい部分 */
input, textarea, select {
    background-color: #2c2c2c !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}
/* プロフィール（著者情報）エリアの背景を黒くする */
.author-box,
.author-info,
.entry-author,
.archive-description {
    background-color: #1e1e1e !important;
    color: #d1d1d1 !important;
    border: 1px solid #2c2c2c !important;
}


/* -------------------------------------------
   著者プロフィール 強制ダークモード化
------------------------------------------- */

/* "author" または "profile" という名前を含むすべてのブロックを対象にする */
div[class*="author"],
div[class*="profile"],
section[class*="author"],
aside[class*="author"],
.author-box,
.entry-author,
.saboxplugin-wrap {
    background-color: #1e1e1e !important; /* 背景をダークグレーに */
    background-image: none !important;      /* 背景画像を削除 */
    border: 1px solid #2c2c2c !important;   /* 枠線をなじませる */
    color: #d1d1d1 !important;              /* 本文文字色 */
    box-shadow: none !important;            /* 白い影を消す */
    margin-top: 20px;
    padding: 20px;
}

/* プロフィールの中の見出し（名前など）を強制的に見える色にする */
/* （サイト全体設定の「hタグ＝白」を、この中だけ「グレー/水色」に上書き） */
div[class*="author"] h3,
div[class*="author"] h4,
div[class*="author"] h5,
div[class*="author"] .author-title,
.author-box .author-title,
.entry-author h4 {
    color: #4da3ff !important; /* リンク色と同じ水色、または #ffffff */
    background-color: transparent !important;
}

/* プロフィールの中の文章やpタグも色を指定 */
div[class*="author"] p,
.author-box p {
    color: #d1d1d1 !important;
}

/* アイコン画像周りの白枠対策 */
div[class*="author"] img,
.author-box img {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* もし箱の「さらに外側」が白い場合（記事本文の下のエリア全体） */
.site-main .post-navigation,
.site-main .paging-navigation,
.site-main .author-box-container {
    background-color: #1e1e1e !important;
}
/* ページヘッダー（カテゴリー名やアーカイブ名など）の背景を黒くする */
header.page-header,
.page-header {
    background-color: #1e1e1e !important;
    color: #d1d1d1 !important;
    border: 1px solid #2c2c2c !important;
    /* もし余白がキツキツの場合は以下のpadding調整を使ってください */
    /* padding: 30px !important; */
    margin-bottom: 20px !important; /* 下の記事との間隔調整 */
}

/* ページタイトルの文字色を確実に白にする */
header.page-header h1.page-title,
.page-header .page-title {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* ページヘッダー内の説明文やリンクも色調整 */
header.page-header p,
.page-header .taxonomy-description {
    color: #d1d1d1 !important;
}
.entry-content strong,
.entry-content b,
.inside-article strong,
.inside-article b {
    color: #ffffff !important; /* 文字は白 */
    /*background: linear-gradient(transparent 60%, rgba(0, 166, 255, 0.3) 60%)*/ !important; /* 下半分に薄い黄色 */
}
#page, .site-content, .inside-article {
    color: #e0e0e0 !important; /* d1d1d1より少し明るい */
}

@media (max-width: 768px) {
    /* 個別記事ページのタイトル (H1) */
    h1.entry-title,
    .page-header h1 {
        font-size: 24px !important; /* ←ここで好きな大きさに変更 (20px～24px推奨) */
        line-height: 1.3 !important; /* 行間も少し詰める */
        margin-bottom: 15px !important; /* 下の余白調整 */
        word-wrap: break-word; /* 長い単語でのレイアウト崩れ防止 */
    }
    h2.entry-title,
    h2.entry-title a {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
}