/*
 * Application-wide styles manifest.
 *
 * This project uses Tailwind CSS as the primary styling framework.
 * Tailwind classes are applied directly in the views.
 *
 * Layout primitives (page-wrap / page-with-sidebar / page-sidebar /
 * page-main / page-narrow-text) are defined as utility classes below.
 * Use them instead of writing max-w-[1240px] or width:280px ad-hoc
 * in each view. See "ペトログ レイアウト標準" comment.
 */

/* ============================================================
 * ペトログ レイアウト標準（2026-04-25 制定 / B案）
 * ------------------------------------------------------------
 * 全ページ共通の幅・余白ルール。
 * 個別ページのERBでは下記ユーティリティクラスを使うこと。
 * 直接 max-w-[1240px] や width:280px を書かない。
 *
 * 【ブレイクポイント】
 *   lg = 1024px 以上 = PC（2カラム化、左右padding 24px）
 *   lg未満           = SP/タブレット（1カラム、左右padding 15px）
 *
 * 【2カラムページ（PC ≥ 1024px）】
 *   wrap         1240px (max-width)        ← .page-wrap を使用
 *   PC左右padding  60px (wrap内側)
 *   sidebar       280px (固定幅、左右どちらも)
 *   gap            60px (sidebarとmainの間)
 *   main         約780px (= 1240 - padding60*2 - sidebar280 - gap60 を flex で自動算出)
 *
 * 【1カラムページ】
 *   wrap         1000px (max-width)        ← .page-wrap-narrow を使用
 *   PC左右padding  60px
 *   テキスト本文内側max  800px (利用規約/お知らせ等の可読性確保)
 *
 * 【使い方】
 *   2カラム:
 *     <div class="page-wrap">
 *       <div class="page-with-sidebar">
 *         <aside class="page-sidebar hidden lg:block">...</aside>
 *         <main class="page-main">...</main>
 *       </div>
 *     </div>
 *
 *   1カラム:
 *     <div class="page-wrap-narrow">
 *       <main>...</main>
 *     </div>
 *
 *   テキスト中身を狭めたい時:
 *     <div class="page-narrow-text">...本文...</div>
 * ============================================================ */

:root {
    --page-w: 1240px;          /* 2カラムページの最大幅 */
    --page-w-narrow: 1000px;   /* 1カラムページの最大幅 */
    --sidebar-w: 280px;
    --gap-pc: 60px;
    --page-padding-sp: 15px;
    --page-padding-pc: 60px;
    --text-narrow-w: 800px;
}

/* ページ全体のラッパ（2カラム用、最大1240px） */
.page-wrap {
    width: 100%;
    max-width: var(--page-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding-sp);
    padding-right: var(--page-padding-sp);
}
@media (min-width: 1024px) {
    .page-wrap {
        padding-left: var(--page-padding-pc);
        padding-right: var(--page-padding-pc);
    }
}

/* ページ全体のラッパ（1カラム用、最大1000px） */
.page-wrap-narrow {
    width: 100%;
    max-width: var(--page-w-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding-sp);
    padding-right: var(--page-padding-sp);
}
@media (min-width: 1024px) {
    .page-wrap-narrow {
        padding-left: var(--page-padding-pc);
        padding-right: var(--page-padding-pc);
    }
}

/* 2カラムレイアウト（SP: 縦積み / PC: 横並び） */
.page-with-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 1024px) {
    .page-with-sidebar {
        flex-direction: row;
        gap: var(--gap-pc);
        align-items: flex-start;
    }
}

/* サイドバー（SPで隠したい場合は親に hidden lg:block を付与） */
.page-sidebar {
    width: 100%;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .page-sidebar {
        width: var(--sidebar-w);
    }
}

/* メイン（残り幅を全部使う、min-width:0 で flex子要素の溢れ防止） */
.page-main {
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
}

/* 1カラムページや記事本文など、テキストの読みやすさのため幅を絞りたい時 */
.page-narrow-text {
    max-width: var(--text-narrow-w);
    margin-left: auto;
    margin-right: auto;
}

.is-admin-preview header {
    @apply bg-amber-100;
}

/* パンくずリスト */
nav.breadcrumb a {
    color: #3E84CF;
    text-decoration: none;
}
nav.breadcrumb a:hover {
    text-decoration: underline;
}
nav.breadcrumb span {
    color: #888888;
}

/* Editor.js heading styles */
.ce-block__content .ce-header {
    padding: 0.5em 0;
}

.ce-block__content h2.ce-header {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.3;
}

.ce-block__content h3.ce-header {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.4;
}

.ce-block__content h4.ce-header {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.5;
}