/*
Theme Name: Shapely Child
Template: shapely
Description: Shapely 子テーマ（浦優介 公式サイト用）
Version: 1.3.1
Text Domain: shapely-child
*/

:root {
    --ura-bg-dark:   #0e1015;  /* 濃紺：ホームの暗いセクション背景 */
    --ura-bg-title:  #393f4c;  /* ページタイトル帯 */
    --ura-accent:    #8960ff;  /* 「Read more」ボタン */
    --ura-thumb:     150px;    /* 最新記事のサムネイル幅 */
}

/* ==========================================================
   1. （予備）下層ページの背景を暗くする
      元の追加CSSは白文字を前提にしている。親テーマの背景色などの
      カスタマイザー設定は functions.php が子テーマへ引き継ぐので、
      通常はこのブロックは不要。
      それでも下層ページ（News / History など）が白背景のままで
      文字が読めない場合だけ、下のブロックの前後のコメント記号を外して有効にする。
   ========================================================== */
/*
section.content-area {
    background-color: #000;
    color: #fff;
}
body:not(.home) .content-area :is(h1, h2, h3, h4, h5, h6),
#secondary .widget :is(h1, h2, h3, h4, h5, h6, .widget-title, .wp-block-heading) {
    color: #fff;
}
*/

/* ==========================================================
   2. ホーム：セクションの配色
      ※ #shapely_home_*-数字 はウィジェットのインスタンスID。
        ウィジェットを作り直すと番号が変わるので注意。
   ========================================================== */

#shapely_home_parallax-3,
#shapely_home_parallax-12 {
    background-color: var(--ura-bg-dark);
}

#shapely_home_parallax-4 .bg-secondary {
    background-color: #000;
}

#shapely_home_parallax-3 h3,
#shapely_home_parallax-4 h3,
#shapely_home_parallax-10 h3,
#shapely_home_parallax-12 h3 {
    color: #fff;
}

#shapely_home_clients-2 section {
    background-color: #fff;
}
#shapely_home_clients-2 section h3,
#shapely_home_clients-2 section a {
    color: #000;
}
#shapely_home_clients-2 section a:hover {
    color: #333;
}

/* ==========================================================
   3. 共通
   ========================================================== */

/* 本文段落を白に（元の追加CSSから引き継ぎ。#content 内の全段落に効く） */
#content p {
    color: #fff;
}

/* ページタイトル帯（News / History / Biography / Contact の上部の灰色の帯）
   背景色に加えて、高さを半分に（元：高さ225px・上下余白70px → 112px・40px） */
.page-title-section.bg-secondary {
    background-color: var(--ura-bg-title);
    height: 112px;
    padding: 40px 0;
}

/* 固定ページ：上の帯にタイトルがあるので、本文側の同じ見出し（h1.entry-title）は非表示にし、
   帯と本文の間の余白も 80px → 40px に詰める */
.header-callout + .content-area {
    padding-top: 40px;
}
.header-callout + .content-area article.page > .entry-header {
    display: none;
}

/* ==========================================================
   4. 最新の投稿ブロック（News / History）
      左：サムネイル（150px） / 右：タイトル → 日付 → 抜粋 → Read more の縦並び
   ========================================================== */

.wp-block-latest-posts__list li {
    display: grid;
    grid-template-columns: var(--ura-thumb) 1fr;
    column-gap: 24px;
    align-items: start;
    margin-bottom: 45px;
}

/* サムネイルがある記事：左列に置き、右の要素は2列目へ */
.wp-block-latest-posts__list .wp-block-latest-posts__featured-image {
    grid-column: 1;
    grid-row: 1 / span 4;
    margin: 0;
}
.wp-block-latest-posts__list .wp-block-latest-posts__featured-image img {
    display: block;
    width: var(--ura-thumb);
    height: var(--ura-thumb);
    object-fit: cover;
}
.wp-block-latest-posts__list li > :not(.wp-block-latest-posts__featured-image) {
    grid-column: 2;
}

/* サムネイルが無い記事：1列で表示 */
.wp-block-latest-posts__list li:not(:has(.wp-block-latest-posts__featured-image)) {
    grid-template-columns: 1fr;
}
.wp-block-latest-posts__list li:not(:has(.wp-block-latest-posts__featured-image)) > * {
    grid-column: 1;
}

/* タイトル */
.wp-block-latest-posts__list .wp-block-latest-posts__post-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}
.wp-block-latest-posts__list .wp-block-latest-posts__post-title:visited {
    color: #ccc;
}
.wp-block-latest-posts__list .wp-block-latest-posts__post-title:hover {
    color: #555;
    text-decoration: none;
}

/* 抜粋 */
.wp-block-latest-posts__list .wp-block-latest-posts__post-excerpt {
    margin: 0 0 8px;
    color: #fff;
}

/* 「Continue reading」→「Read more」ボタン
   ※ 「最新の投稿」ブロック内の .more-link だけに限定（ブログ一覧など他のページには影響しない）。
     元の文字列は font-size:0 で隠し、疑似要素で「Read more」を表示している。 */
.wp-block-latest-posts__list .wp-block-latest-posts__post-excerpt .more-link {
    display: block;          /* 抜粋の文章と同じ行に並ばず、3段目に置く */
    width: fit-content;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--ura-accent);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    font-size: 0;
    line-height: 1;
}
.wp-block-latest-posts__list .wp-block-latest-posts__post-excerpt .more-link::after {
    content: "Read more";
    display: inline-block;
    font-size: 14px;
    line-height: 1.2;
}

/* スマホ：縦並び */
@media (max-width: 768px) {
    .wp-block-latest-posts__list li,
    .wp-block-latest-posts__list li:not(:has(.wp-block-latest-posts__featured-image)) {
        grid-template-columns: 1fr;
    }
    /* PC用の指定と同じ詳細度にそろえて、確実に上書きする */
    .wp-block-latest-posts__list .wp-block-latest-posts__featured-image,
    .wp-block-latest-posts__list li > :not(.wp-block-latest-posts__featured-image) {
        grid-column: 1;
        grid-row: auto;
    }
    .wp-block-latest-posts__list .wp-block-latest-posts__featured-image {
        margin-bottom: 12px;
    }
}

/* ==========================================================
   5. ヘッダーのサイト名（スマホ：2行表示）
      PC：「指揮者 浦優介 Official Website」を1行
      スマホ：「指揮者 浦優介」／「Official Website」の2行
   ========================================================== */
.site-title .st-line {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .site-title .st-line {
        display: block;
    }
    .site-title {
        display: block;
        font-size: 20px;
        line-height: 1.35;
        padding: 8px 0;
    }
}

/* ==========================================================
   6. ホームの写真：スマホでは画面幅いっぱいに表示
      （列の左右パディング15pxの分だけ画像を外側へ広げる。文章の余白はそのまま）
   ========================================================== */
@media (max-width: 767px) {
    .shapely_home_parallax .row.align-children > [class*="col-"] > img.img-responsive {
        display: block;
        max-width: none;
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* ==========================================================
   7. ページ送り（News / History）
      functions.php の ura_paged_ 〜 が、一覧の下に出力する。
   ========================================================== */
.ura-paged-list {
    scroll-margin-top: 100px;   /* ページ番号を押したとき、一覧の先頭が固定ヘッダーに隠れないように */
}

.ura-pagination {
    margin-top: 48px;
    /* 親テーマの nav 共通スタイル（白背景・下線）を打ち消して、ページの背景になじませる */
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: none;
}

.ura-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ura-pagination .page-numbers li {
    margin: 0;
}

.ura-pagination a.page-numbers,
.ura-pagination span.page-numbers {
    display: inline-block;
    min-width: 42px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.ura-pagination a.page-numbers:hover,
.ura-pagination a.page-numbers:focus {
    border-color: var(--ura-accent);
    background-color: rgba(137, 96, 255, 0.25);
    color: #fff;
}

.ura-pagination span.page-numbers.current {
    border-color: var(--ura-accent);
    background-color: var(--ura-accent);
}

.ura-pagination span.page-numbers.dots {
    border-color: transparent;
}

.ura-pagination-back {
    margin-top: 32px;
    text-align: center;
}
.ura-pagination-back a {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================
   8. 記事内の画像の拡大表示（ライトボックス）
      投稿ページ（各公演の記事）の本文の画像が対象。一覧ページは対象外。
      assets/js/lightbox.js と functions.php の ura_lightbox_ 〜 が対になっている。
   ========================================================== */

/* 記事内の画像：クリックできることが分かるように */
.entry-content img.ura-lb-thumb {
    cursor: zoom-in;
    transition: opacity 0.2s;
}
.entry-content img.ura-lb-thumb:hover {
    opacity: 0.85;
}
.entry-content img.ura-lb-thumb:focus-visible {
    outline: 2px solid var(--ura-accent);
    outline-offset: 3px;
}

/* 開いている間は、後ろのページがスクロールしないように */
html.ura-lb-open,
html.ura-lb-open body {
    overflow: hidden;
}

.ura-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;              /* 固定ヘッダーより前面に */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 64px 16px;
    background: rgba(5, 6, 10, 0.94);
    animation: ura-lb-fade 0.2s ease-out;
}
.ura-lb[hidden] {
    display: none;
}

@keyframes ura-lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ura-lb__stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.ura-lb__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s;
}
.ura-lb.is-loading .ura-lb__img {
    opacity: 0;
}

/* 読み込み中のくるくる */
.ura-lb__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: ura-lb-spin 0.8s linear infinite;
    pointer-events: none;
}
.ura-lb.is-loading .ura-lb__spinner {
    opacity: 1;
}
@keyframes ura-lb-spin {
    to { transform: rotate(360deg); }
}

/* 下のタイトルと番号 */
.ura-lb__bar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 900px;
    padding-top: 12px;
    text-align: center;
}
.ura-lb .ura-lb__caption {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
}
.ura-lb .ura-lb__counter {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    letter-spacing: 0.1em;
}

/* ボタン（× ‹ ›） */
.ura-lb__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.ura-lb__btn:hover,
.ura-lb__btn:focus-visible {
    border-color: var(--ura-accent);
    background: var(--ura-accent);
    outline: none;
}
.ura-lb__close {
    top: 12px;
    right: 12px;
}
.ura-lb__prev,
.ura-lb__next {
    top: 50%;
    margin-top: -24px;
    font-size: 36px;
}
.ura-lb__prev { left: 10px; }
.ura-lb__next { right: 10px; }
.ura-lb.is-single .ura-lb__prev,
.ura-lb.is-single .ura-lb__next {
    display: none;
}

/* スマホ：画像を大きく、矢印は下寄せ（スワイプでも移動できる） */
@media (max-width: 767px) {
    .ura-lb {
        padding: 60px 8px 80px;
    }
    .ura-lb__prev,
    .ura-lb__next {
        top: auto;
        bottom: 16px;
        margin-top: 0;
        width: 44px;
        height: 44px;
    }
    .ura-lb__prev { left: 16px; }
    .ura-lb__next { right: 16px; }
    .ura-lb__bar {
        padding: 12px 56px 0;
    }
}