/*
 * lecture.css
 * 講義関連ページ専用の追加スタイル
 * style.css（デザイントークン定義済み）の後に読み込まれる
 */

/* ==========================================================================
   講義一覧: ヒーローセクション
   ========================================================================== */

.bal-course-hero {
    background: linear-gradient(135deg, var(--bal-color-primary) 0%, var(--bal-color-primary-dark) 100%);
    color: #fff;
    padding: var(--bal-space-2xl) var(--bal-space-md);
    text-align: center;
}

.bal-course-hero__label {
    font-size: var(--bal-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-bottom: var(--bal-space-sm);
}

.bal-course-hero__heading {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--bal-space-md);
}

.bal-course-hero__subheading {
    font-size: var(--bal-font-size-base);
    opacity: 0.85;
    line-height: 1.8;
    max-width: 640px;
    margin: 0 auto var(--bal-space-xl);
}

/* ==========================================================================
   講義個別紹介ページ: コース詳細
   ========================================================================== */

.bal-course-detail {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--bal-space-2xl) var(--bal-space-md);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--bal-space-xl);
    align-items: start;
}

@media (max-width: 900px) {
    .bal-course-detail {
        grid-template-columns: 1fr;
    }
}

.bal-course-detail__main {}

/* --------------------------------------------------------------------------
   bly 親テーマのグローバル装飾を講義詳細ページ内で打ち消す。
   ・common.css は全 h2 に「Flow」透かし(h2::before 180px)を付与 → 見出しに重なる
   ・style.css は body{text-align:center} → タイトル・本文・パンくずが中央寄せに崩れる
   ・common.css は全 section に padding:200px 0 → カリキュラム/FAQ が過大余白で崩れる
   WC ページ(.bal-shop)と同じ方針でスコープを限定して無効化する。
   -------------------------------------------------------------------------- */
.bal-course-detail h2::before,
.bal-course-detail h3::before {
    content: none !important;
}

/* bly style.css の body{text-align:center} を本文・パンくずで解除 */
.bal-course-detail__main,
.bal-breadcrumb {
    text-align: left;
}

/* bly common.css の h2{text-align:center} は直接指定で継承を上書きするため、
   見出しにも明示的に左寄せを当てる（カリキュラム/学べること/FAQ 見出し） */
.bal-course-detail h2,
.bal-course-detail h3 {
    text-align: left;
}

.bal-course-detail section {
    padding: 0;
}

/* header-bar.css の body:not(.home) main{margin-top:240px} の過大上余白を
   固定バー分(40px)へ圧縮（WC ページ/ダッシュボード/視聴ページと同方針）。
   視聴ページ(single-lesson)も自作テンプレ有効化で同じ過大余白が出るため併せて圧縮。 */
body.single-courses main,
body.single-lesson main {
    margin-top: var(--bal-bar-h, 40px) !important;
}

/* カリキュラム見出し（FAQ 見出しと同じブランド体裁の下線付き） */
.bal-course-detail__section-heading {
    font-size: var(--bal-font-size-xl);
    font-weight: 700;
    color: var(--bal-color-text);
    margin-bottom: var(--bal-space-lg);
    padding-bottom: var(--bal-space-sm);
    border-bottom: 2px solid var(--bal-color-primary);
    font-family: var(--bal-font-heading);
}

.bal-course-detail__curriculum {
    margin-bottom: var(--bal-space-2xl);
}

/* Tutor 標準テンプレートの「コース内容」見出し(h3)は独自「カリキュラム」見出しと
   重複するため隠す（アコーディオン本体はそのまま表示） */
.bal-course-detail__curriculum .tutor-course-content-title {
    display: none;
}

.bal-course-detail__sidebar {
    position: sticky;
    top: var(--bal-space-xl);
}

.bal-course-detail__sidebar-card {
    background: var(--bal-color-bg);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-lg);
    box-shadow: none;
    overflow: hidden;
}

.bal-course-detail__sidebar-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bal-color-bg-light);
}

.bal-course-detail__sidebar-body {
    padding: var(--bal-space-lg);
}

.bal-course-detail__sidebar-price {
    font-size: var(--bal-font-size-2xl);
    font-weight: 700;
    color: var(--bal-color-primary);
    margin-bottom: var(--bal-space-md);
}

.bal-course-detail__what-you-learn {
    background: var(--bal-color-bg-light);
    border: 1px solid var(--bal-color-border);
    border-radius: var(--bal-radius-md);
    padding: var(--bal-space-lg);
    margin-bottom: var(--bal-space-xl);
}

.bal-course-detail__what-you-learn h2 {
    font-size: var(--bal-font-size-lg);
    font-weight: 700;
    margin-bottom: var(--bal-space-md);
    color: var(--bal-color-text);
}

.bal-course-detail__learn-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--bal-space-sm);
}

.bal-course-detail__learn-item {
    display: flex;
    align-items: flex-start;
    gap: var(--bal-space-sm);
    font-size: var(--bal-font-size-sm);
    line-height: 1.6;
}

.bal-course-detail__learn-item::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-top: 2px;
    background: var(--bal-color-primary);
    border-radius: 50%;
    position: relative;
}

.bal-course-detail__learn-item::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-8px, -4px);
}

/* FAQ セクション（LLMO向け） */
.bal-course-faq {
    margin-top: var(--bal-space-2xl);
}

.bal-course-faq__heading {
    font-size: var(--bal-font-size-xl);
    font-weight: 700;
    color: var(--bal-color-text);
    margin-bottom: var(--bal-space-lg);
    padding-bottom: var(--bal-space-sm);
    border-bottom: 2px solid var(--bal-color-primary);
}

.bal-faq-item {
    border-bottom: 1px solid var(--bal-color-border);
}

.bal-faq-item__question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--bal-space-md) 0;
    font-size: var(--bal-font-size-base);
    font-weight: 600;
    color: var(--bal-color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bal-space-md);
    font-family: var(--bal-font-family);
}

.bal-faq-item__question:hover {
    color: var(--bal-color-primary);
}

.bal-faq-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    border: 2px solid var(--bal-color-border);
    border-radius: 50%;
    transition: border-color 0.2s, transform 0.2s;
}

.bal-faq-item__icon::before,
.bal-faq-item__icon::after {
    content: '';
    position: absolute;
    background: var(--bal-color-text);
    border-radius: 2px;
}

.bal-faq-item__icon::before {
    width: 10px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bal-faq-item__icon::after {
    width: 2px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s;
}

.bal-faq-item--open .bal-faq-item__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.bal-faq-item__answer {
    display: none;
    padding: 0 0 var(--bal-space-md);
    font-size: var(--bal-font-size-base);
    color: var(--bal-color-text-light);
    line-height: 1.8;
}

.bal-faq-item--open .bal-faq-item__answer {
    display: block;
}

/* ==========================================================================
   パンくずリスト
   ========================================================================== */

.bal-breadcrumb {
    font-size: var(--bal-font-size-sm);
    color: var(--bal-color-text-light);
    padding: var(--bal-space-md) var(--bal-space-md);
    max-width: 1120px;
    margin: 0 auto;
}

.bal-breadcrumb a {
    color: var(--bal-color-primary);
    text-decoration: none;
}

.bal-breadcrumb a:hover {
    text-decoration: underline;
}

.bal-breadcrumb__separator {
    margin: 0 var(--bal-space-xs);
}

/* ==========================================================================
   Tutor 受講生ダッシュボード: パンくずバーとヘッダーの間に余白
   --------------------------------------------------------------------------
   パンくずバー（.breadcrumb：「…ならbe a lawyer > 受講生ダッシュボード」）は
   padding:8px 0 ＋ 影のみで下マージンを持たず、直後の Tutor ダッシュボード本体
   （.tutor-frontend-dashboard：アバター＋「こんにちは, ◯◯」）も上マージンを持たない。
   そのためパンくずとヘッダーが詰まって見える。ダッシュボード本体に上余白を足して
   パンくずバーとヘッダーの間を少し開ける。
   .tutor-frontend-dashboard はダッシュボード専用クラスのため他ページに影響しない。
   （子テーマ woocommerce.css はダッシュボードでは未エンキューのため lecture.css に置く）
   ========================================================================== */
.tutor-frontend-dashboard {
    margin-top: 28px;
}

/* ==========================================================================
   Tutor 受講生ダッシュボード: プロフィール設定（写真＋表示名の簡素版）
   --------------------------------------------------------------------------
   子テーマ tutor/dashboard/settings/profile.php の簡素版に合わせ、
   標準のカバー写真前提レイアウト（#tutor_profile_area を絶対配置 top:145px 等）を
   打ち消して、アバター＋操作ボタンを横並びに整える。
   JS のバインド対象 ID/クラスは温存（#tutor_profile_cover_photo_editor 等）。
   ========================================================================== */
/* ダッシュボードコンテンツの中央寄せ(bly)継承を解除し、設定全体を左寄せに */
.bal-profile-settings {
    text-align: left;
}

.bal-profile-settings .bal-profile-field-label {
    font-size: var(--bal-font-size-sm, 14px);
    font-weight: 600;
    color: var(--bal-color-text, #1f2937);
    margin-bottom: var(--bal-space-sm, 8px);
    text-align: left;
}

/* 標準は height:344px・position:relative でカバー写真用の縦領域を確保している。
   簡素版ではカバーを出さないので flex 横並びに上書き。
   Tutor は #tutor_profile_cover_photo_editor(ID)で height を指定するため !important で勝たせる。 */
.bal-profile-settings .bal-pp-editor {
    height: auto !important;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

/* アバター: Tutor は
   `.tutor-dashboard .tutor-dashboard-content #tutor_profile_cover_photo_editor #tutor_profile_area`
   (ID2＋クラス2)で position:absolute; top:145px; width:142px 等を指定し詳細度が高い。
   簡素版では通常フローに戻すため、配置系プロパティを !important で確実に上書きする。 */
.bal-profile-settings .bal-pp-editor #tutor_profile_area {
    /* static ではなく relative。中の .tutor_overlay(absolute) の基準を
       アバター自身に保ちつつ、通常フロー（オフセット無し）に戻す。 */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    flex: 0 0 auto;
    border: 1px solid var(--bal-color-border, #e5e7eb) !important;
}

.bal-profile-settings .bal-pp-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    /* flex item が「内容(スペース無し日本語1行)の最小幅」で潰れず横はみ出すのを防ぎ、
       テキストを折り返し可能にする（モバイルで scrollWidth が overflow していた原因） */
    min-width: 0;
    max-width: 100%;
}

.bal-profile-settings .bal-pp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bal-profile-settings .bal-pp-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--bal-radius-md, 6px);
    background: var(--bal-color-primary, #162a70);
    color: #fff;
    font-size: var(--bal-font-size-sm, 14px);
    line-height: 1;
    white-space: nowrap;
}

.bal-profile-settings .bal-pp-btn:hover {
    background: var(--bal-color-primary-dark, #0f1f54);
}

.bal-profile-settings .bal-pp-btn--ghost {
    background: transparent;
    color: var(--bal-color-text-light, #6b7280);
    border: 1px solid var(--bal-color-border, #e5e7eb);
}

.bal-profile-settings .bal-pp-btn--ghost:hover {
    background: var(--bal-color-bg-light, #f3f4f6);
    color: var(--bal-color-text, #1f2937);
}

/* 標準の padding-left:190px（カバー前提・ID指定で詳細度高）を !important で解除 */
.bal-profile-settings .bal-pp-editor #tutor_photo_meta_area {
    padding-left: 0 !important;
    margin-top: 0 !important;
    text-align: left;
    max-width: 100%;
}

.bal-profile-settings .bal-pp-hint {
    display: block;
    color: var(--bal-color-text-light, #6b7280);
    font-size: 12px;
    line-height: 1.6;
    /* 長い注記が折り返さず横はみ出すのを防ぐ。
       Tutor の `#tutor_photo_meta_area>span{white-space:nowrap}` (ID2つで詳細度高) が
       当たり nowrap で横はみ出すため、white-space を !important で normal に戻す。 */
    white-space: normal !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bal-profile-settings .bal-pp-editor #tutor_photo_meta_area .loader-area {
    display: none;
    color: var(--bal-color-text-light, #6b7280);
    font-size: 12px;
}

/* 表示名フォームは左寄せ・横幅を抑える（ダッシュボードの中央寄せ継承を解除） */
.bal-profile-settings .bal-profile-form {
    text-align: left;
    max-width: 440px;
}

@media (max-width: 480px) {
    .bal-profile-settings .bal-pp-editor {
        flex-direction: column;
        align-items: flex-start;
    }
    /* 縦積み時はコントロール列を全幅にし、注記を確実に折り返す */
    .bal-profile-settings .bal-pp-controls {
        width: 100%;
    }
}

/* ==========================================================================
   Tutor 受講生ダッシュボード: モバイルナビ対応（≤767px）
   --------------------------------------------------------------------------
   Tutor 既定のモバイル固定フッターナビ #tutor-dashboard-footer-mobile は
   「ダッシュボード / 生徒のクイズ回答履歴 / メニュー」という当サイトでは不要な
   リンク（クイズ回答履歴等）を出し、かつサイト独自の下部CTAバーと二重の固定
   バーになって重なる。これを隠し、代わりに左ナビ（購入した講義 / プロフィール
   設定 / ログアウト）をモバイルでも常時表示（コンテンツ上部に縦積み）する。
   Tutor は ≤767px で `.tutor-dashboard:not(.is-sidebar-expanded)
   .tutor-dashboard-left-menu { display:none }` により左ナビを隠す（メニュー
   トグル前提）ため、!important で打ち消す。
   ========================================================================== */
@media (max-width: 767px) {
    #tutor-dashboard-footer-mobile {
        display: none !important;
    }

    .tutor-dashboard .tutor-dashboard-left-menu {
        display: block !important;
        margin-bottom: 8px;
    }

    /* 縦積み時: サイドバー用の右余白を解除し、下に余白を確保 */
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
        margin: 0 0 24px 0 !important;
        padding: 8px 0 !important;
    }

    /* サイドバー仕切りの縦罫線（permalinks::before の border-right）は
       縦積みでは不要なので消す */
    .tutor-frontend-dashboard-maincontent ul.tutor-dashboard-permalinks::before {
        display: none !important;
    }
}

/* ---- 未ログインで /dashboard/ に来た時のログイン画面の余白 ----
   ログインフォームがパンくず直下に詰まるため、上下に余白を足して中央に余裕を出す。
   :has(.tutor-login-wrap) でログイン画面のみに限定（ログイン済みダッシュボードは
   .tutor-login-wrap を持たないので非対象）。padding なので親との margin 相殺を受けない。
   ※ /dashboard/ では woocommerce.css は読み込まれないため lecture.css に置く。 */
body.page-id-710 .tutor-wrap:has(.tutor-login-wrap) {
    /* マイアカウントのログイン画面(見出し+カードのブロックがパンくず下/フッター上とも約168px)と
       上下余白を揃える。.tutor-login-wrap 自身の上下padding(40/32)と合算して約168pxにする。 */
    padding-top: calc(var(--bal-space-2xl) * 2);
    padding-bottom: calc(var(--bal-space-2xl) * 2);
}