/*
Theme Name: Astra Child
Template: astra
*/

/* ==========================================================================
   Custom Post Type: information_post Styling (Astra Child Theme)
   ========================================================================== */

/* Main content area background and text color, overriding Astra defaults if needed */
.site-content {
    background-color: #2c3e50; /* Matches top page background */
    color: #ecf0f1; /* Light text color for contrast */
}

/* Astra's main content wrapper */
.ast-container {
    padding-top: 40px; /* Adjust padding as needed */
    padding-bottom: 60px; /* Adjust padding as needed */
}

/* Specific article styling for information_post */
.single-information-post-entry {
    background-color: #2c3e50; /* Ensure article background matches site content */
}

/* Main Header Section (for Title) */
.single-post-main-header {
    background-color: #34495e; /* Matching a block color from top page */
    padding: 40px 20px; /* Padding for the title block */
    text-align: center;
    margin-bottom: 30px; /* Space below the title block */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow */
    max-width: 960px; /* Align with content width */
    margin-left: auto;
    margin-right: auto;
}

.single-post-main-header .entry-title {
    color: #fff;
    font-size: 2.5em; /* Title size */
    line-height: 1.2;
    margin: 0; /* Remove default margin */
}

/* Main Featured Image (Post Thumbnail) */
.main-featured-image-wrapper {
    max-width: 960px; /* Align with content width */
    margin: 0 auto 40px; /* Center and add space below */
    text-align: center;
    background-color: #34495e; /* Background for the image block */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.main-featured-image-wrapper img {
    width: 100%; /* Ensure image fills its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Slight shadow for the image itself */
}


/* Main entry content wrapper for padding and max-width */
.single-post-content-wrap {
    max-width: 960px; /* Max width for content readability */
    margin: 0 auto; /* Center the content */
    padding: 0 20px; /* Horizontal padding */
}

/* Common styling for custom content blocks (from SCF) */
.custom-content-block {
    background-color: #34495e; /* A block color from top page */
    padding: 40px;
    margin-bottom: 2em; /* Space between blocks */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow for depth */
    line-height: 1.8; /* Improve readability */
    color: #ecf0f1; /* Ensure text color is light */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Default paragraph styling within custom blocks */
.custom-content-block p {
    margin-bottom: 1em; /* Space between paragraphs in blocks */
}

/* Specific styling for image-text blocks */
.image-text-block {
    text-align: center; /* Center content within the block */
}

.image-text-block-image {
    margin: 0 auto 1.5em; /* Center image and add space below */
    max-width: 700px; /* Max width for images */
}

.image-text-block-image img {
    width: 100%; /* Make image responsive */
    height: auto;
    display: block; /* Remove extra space below image */
    border-radius: 5px; /* Rounded corners for images */
}

.image-text-block-text {
    width: 85%; /* Text width within the block */
    max-width: 960px;
    margin: 0 auto; /* Center text */
    text-align: left; /* Align text to left */
}

/* Byline and Category sections */
.byline-section,
.category-section {
    text-align: right; /* Align to right as in original code */
}

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px; /* Padding for the nav block */
    max-width: 960px; /* Align with content */
    margin: 3em auto; /* Center and add top margin */
    background-color: #34495e; /* Match content block background */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    box-sizing: border-box; /* Include padding in width calculation */
}

.post-navigation .nav-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.post-navigation a {
    color: #81a8d4; /* Link color */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.post-navigation a:hover {
    color: #a8d481; /* Hover color */
}

/* Related Posts Section */
.related-posts {
    max-width: 960px;
    margin: 60px auto; /* More space above this section */
    text-align: center; /* Center the title */
    background-color: #34495e;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    box-sizing: border-box; /* Include padding in width calculation */
}

.related-posts-title {
    color: #fff;
    font-size: 2em;
    margin-bottom: 30px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between items */
}

.related-post-item {
    background-color: #2c3e50; /* Darker background for items */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: left;
}

.related-post-item .related-post-thumbnail {
    display: block; /* Ensure the link wraps the image block */
    margin-bottom: 15px;
}

.related-post-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

.related-post-item h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}

.related-post-item h3 a {
    color: #ecf0f1; /* Light text color for titles */
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-post-item h3 a:hover {
    color: #a8d481; /* Hover color for titles */
}

/* ==========================================================================
   Responsive Design Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .single-post-main-header .entry-title {
        font-size: 2em;
    }

    .single-post-main-header {
        padding: 30px 15px;
    }

    .main-featured-image-wrapper {
        padding: 15px;
    }

    .single-post-content-wrap {
        padding: 0 15px; /* Adjust padding for smaller screens */
    }

    .custom-content-block {
        padding: 30px;
    }

    .image-text-block-text {
        width: 100%; /* Full width for text on small screens */
    }

    .post-navigation {
        padding: 20px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr; /* Single column layout on small screens */
    }
}

@media (max-width: 480px) {
    .single-post-main-header .entry-title {
        font-size: 1.6em;
    }

    .single-post-main-header {
        padding: 20px 10px;
    }

    .custom-content-block {
        padding: 20px;
    }

    .post-navigation {
        flex-direction: column; /* Stack nav links vertically */
        align-items: center;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }

    .nav-previous,
    .nav-next {
        margin-bottom: 15px; /* Space between stacked nav links */
        text-align: center;
        width: 100%; /* Take full width */
    }

    .related-posts-title {
        font-size: 1.8em;
    }
}

/* ==========================================================================
   製品一覧・自社製品一覧の2カラムレイアウトと文字色調整
   ========================================================================== */

/* 製品カードリスト全体のFlexbox設定 */
.product-card-list {
    display: flex; /* Flexboxを有効にする */
    flex-wrap: wrap; /* カードが折り返すようにする */
    gap: 30px; /* カード間の間隔を広くする */
    justify-content: center; /* カードを中央寄せにする */
    margin-top: 20px;
    padding: 0 15px; /* 左右にパディングを追加し、コンテンツの端を避ける */
    max-width: 1200px; /* 最大幅を設定し、コンテンツの広がりすぎを防ぐ */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
}

/* 各製品カードの幅設定 */
.product-card {
    flex: 0 1 calc(50% - 15px); /* 2カラム表示 (gapの半分を考慮) */
    background: #212A37; /* 製品紹介ページの背景色と合わせる */
    border: 1px solid #34495e; /* 枠線の色を調整 */
    padding: 25px; /* パディングを増やす */
    box-sizing: border-box;
    border-radius: 8px; /* 角丸を大きくする */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 影を強調 */
    color: #ecf0f1; /* デフォルトの文字色を白っぽい色に */
    text-align: center; /* カード内のテキストを中央寄せ */
}

/* 画像の下のリンク（製品タイトル）の文字色を白に */
.product-card .product-title a {
    color: #fff; /* タイトルリンクを白にする */
    text-decoration: none; /* 下線なし */
    font-size: 1.3em; /* フォントサイズを少し大きく */
    transition: color 0.3s ease; /* ホバー時のアニメーション */
}

.product-card .product-title a:hover {
    color: #f30505; /* ホバー時に別の色にする（例: 赤） */
}

/* 抜粋の文字色調整 */
.product-card .product-excerpt {
    color: #eee; /* 抜粋の文字色を白っぽい色に */
    font-size: 0.95em;
    line-height: 1.6; /* 行の高さを調整して読みやすく */
}

/* 製品画像のスタイル調整 */
.product-card img {
    width: 100%;
    height: auto;
    max-width: 400px; /* 画像の最大幅を制限して大きくなりすぎないように */
    display: block; /* ブロック要素にして中央寄せ可能に */
    margin: 0 auto 20px; /* 中央寄せと下部マージン */
    border-radius: 4px;
    object-fit: cover; /* 画像がはみ出さないように */
}


/* モバイル対応：1カラムにする */
@media (max-width: 768px) {
    .product-card {
        flex: 0 1 100%; /* 小さい画面では1カラムにする */
    }
    .product-card-list {
        padding: 0 10px; /* モバイルではパディングを狭く */
    }
}

/* ニュースリストのスタイル調整（既存のfunctions.phpに[latest_news]ショートコードがあるので追加） */
.news-list {
    list-style: none; /* リストの点線を消す */
    padding: 0;
    margin: 20px 0;
}

.news-list li {
    background-color: #34495e; /* 背景色 */
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex; /* 日付とリンクを横並びにする */
    align-items: baseline;
}

.news-list li span {
    color: #888; /* 日付の色 */
    font-size: 0.9em;
    margin-right: 15px; /* 日付とリンクの間隔 */
    flex-shrink: 0; /* 日付の幅を固定 */
}

.news-list li a {
    color: #ecf0f1; /* リンクの色を白っぽい色に */
    text-decoration: none;
    font-weight: bold;
    flex-grow: 1; /* リンクが残りのスペースを埋める */
}

.news-list li a:hover {
    color: #a8d481; /* ホバー時の色 */
}

/* トップページのメインビジュアル（スクリーンショットから推測） */
/* このCSSは、あなたのテーマやElementorの設定によっては、すでに同様のものが存在するか、
   Elementorによって上書きされる可能性があります。必要に応じて調整してください。 */
.elementor-section.elementor-section-full_width.elementor-section-height-full {
    min-height: 500px; /* メインビジュアルの最小高さを確保 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    position: relative;
    color: #fff;
    text-align: center;
}

.elementor-section.elementor-section-full_width.elementor-section-height-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* オーバーレイ */
    z-index: 1;
}

.elementor-section .elementor-heading-title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* ==========================================================================
   TOPページのお知らせ (技術者募集中) のスタイル
   ========================================================================== */

/* 個々のお知らせアイテムのスタイル */
.top-notice-item {
    background-color: transparent !important; /* 背景を透明にする */
    border: none !important; /* 枠線をなくす */
    box-shadow: none !important; /* 影をなくす */
    padding: 0 !important; /* パディングをなくす */
    margin-bottom: 0 !important; /* 下部マージンをなくす */
    display: block !important; /* ブロック要素に設定 */
    text-align: center; /* 中央寄せ */
}

/* 日付の文字色 */
.top-notice-item .top-notice-date {
    color: #fff !important; /* 日付を白にする */
    font-size: 1.1em !important; /* フォントサイズを調整（必要に応じて） */
    margin-right: 15px; /* 日付とリンクの間隔 */
    display: inline-block; /* 日付とリンクを横並びにする */
}

/* リンクの文字色 */
.top-notice-item .top-notice-link {
    color: #e74c3c !important; /* 「技術者募集中！」の文字を赤にする */
    text-decoration: none !important; /* 下線をなくす */
    font-size: 1.3em !important; /* フォントサイズを調整（必要に応じて） */
    font-weight: bold !important; /* 太字にする */
}

.top-notice-item .top-notice-link:hover {
    color: #ff0000 !important; /* ホバー時に明るい赤にする */
}

/* 親要素の.news-listにも影響が出ないよう、必要であれば調整 */
/* (上記で !important を使用しているため、通常は不要ですが、念のため) */
.news-list.for-top-page { /* もし特定のショートコードでこのクラスを付与するなら */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* 既存の .product-card img の最後の閉じ括弧が余分なので修正しました */
/* 製品画像のスタイル調整 */
.product-card img {
    width: 100% !important; /* 親要素の幅いっぱいに広げる */
    height: auto !important;
    max-width: none !important; /* 最大幅の制限をなくす */
    display: block !important;
    margin: 0 auto 20px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
}


/* ==========================================================================
   最新ブログ表示ショートコード [latest_blog] のスタイル (3カラム)
   ========================================================================== */

.latest-blog-cards {
    display: flex; /* Flexboxを有効にする */
    flex-wrap: wrap; /* カードが折り返すようにする */
    gap: 30px; /* カード間の間隔を広くする */
    justify-content: center; /* カードを中央寄せにする */
    margin-top: 40px; /* 上部のマージン */
    padding: 0 15px; /* 左右にパディングを追加し、コンテンツの端を避ける */
    max-width: 1200px; /* 最大幅を設定し、コンテンツの広がりすぎを防ぐ */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
}

.blog-card {
    flex: 0 1 calc(33.333% - 20px); /* 3カラム表示 (gapの半分を考慮) */
    /* 計算式: (100% - (gap * 2)) / 3 - (gap * 2 / 3) または calc(100% / 3 - (gap * 2 / 3)) */
    /* ここでは単純化して `gap` の半分を引いています。 */
    /* 実際には`gap`の値を合わせて調整が必要です。`gap: 30px;`なので、`20px`でOK */

    background: #212A37; /* 背景色を設定 */
    border: 1px solid #34495e; /* 枠線の色を調整 */
    padding: 25px; /* パディング */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    border-radius: 8px; /* 角丸を大きくする */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 影を強調 */
    color: #ecf0f1; /* デフォルトの文字色を白っぽい色に */
    text-align: left; /* カード内のテキストを左寄せ */
    min-width: 280px; /* カードが小さくなりすぎないように最小幅を設定 */
    display: flex; /* カード内の要素をFlexboxで配置 */
    flex-direction: column; /* 要素を縦方向に並べる */
}

.blog-card .blog-thumb {
    margin-bottom: 15px; /* サムネイルの下に余白 */
    text-align: center; /* サムネイルを中央寄せ */
}

.blog-card .blog-thumb img {
    width: 100%;
    height: auto;
    max-width: 100%; /* 親要素の幅に合わせる */
    display: block;
    margin: 0 auto; /* 中央寄せ */
    border-radius: 4px;
    object-fit: cover;
}

.blog-card .blog-date {
    color: #888; /* 日付の色 */
    font-size: 0.85em;
    margin-bottom: 10px;
}

.blog-card .blog-title {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}

.blog-card .blog-title a {
    color: #fff; /* タイトルリンクの色を白に */
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card .blog-title a:hover {
    color: #f30505; /* ホバー時の色 */
}

.blog-card .blog-excerpt {
    color: #eee; /* 抜粋の文字色 */
    font-size: 0.95em;
    line-height: 1.6;
    flex-grow: 1; /* 抜粋が残りのスペースを埋めるようにする */
}

/* レスポンシブ対応 */
@media (max-width: 992px) { /* PCとタブレットの間 */
    .latest-blog-cards {
        gap: 20px;
    }
    .blog-card {
        flex: 0 1 calc(50% - 10px); /* 2カラム表示 (gapの半分を考慮) */
    }
}

@media (max-width: 768px) { /* タブレット */
    .latest-blog-cards {
        padding: 0 10px;
        gap: 20px;
    }
    .blog-card {
        flex: 0 1 calc(50% - 10px); /* 2カラム表示 (gapの半分を考慮) */
    }
}

@media (max-width: 576px) { /* モバイル */
    .latest-blog-cards {
        padding: 0 10px;
        gap: 15px;
    }
    .blog-card {
        flex: 0 1 100%; /* 1カラム表示 */
        padding: 20px;
    }
}