/* ★v1.0.11: サイト全体のLEGOブロック風配色（子供向けサイトと分かる見た目にしたいという
   ユーザー指示・2026-08-11）。プラグインの独自パーツ(.sh-*)に加え、Cocoonテーマ本体の
   ヘッダー/メニュー/フッター/ボタン類も上書きする。サイト内の全ページに出す必要があるため、
   is_singular()等の条件を付けず wp_enqueue_scripts に無条件で登録している
   （enqueue_site_theme()参照）。 */

:root {
    --lego-red: #d01012;
    --lego-red-dark: #a10d0f;
    --lego-yellow: #ffd500;
    --lego-blue: #0060b0;
    --lego-blue-dark: #00427a;
    --lego-green: #00a651;
    --lego-dark: #1b1b1b;
}

/* ===== ヘッダー ===== */
/* ★v1.0.13: ヘッドバナー写真を追加(ユーザー提供、2026-08-11。客室で添い寝する家族の写真を
   横長にトリミング済み)。白文字のサイト名を写真の上でも読めるように、青系の半透明
   グラデーションを写真に重ねている(単色グラデーションと画像を同時にbackgroundへ重ね書き)。 */
#header {
    background:
        linear-gradient(135deg, rgba(0, 96, 176, 0.78) 0%, rgba(0, 66, 122, 0.82) 100%),
        url('https://kidsfreehotel.com/wp-content/uploads/2026/08/kidsfreehotel-header-banner.jpg') center center / cover no-repeat;
    border-bottom: 6px solid var(--lego-yellow);
}
#header .logo,
#header .logo a,
#header .site-name,
#header .site-name a {
    color: #fff !important;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* ★v1.0.18: 実際のクラス名は .tagline（.caption/.site-descriptionは実在せず、
   キャッチコピーだけ配色が効いていなかった＝ユーザー報告の視認性不良の原因）。
   白文字+影に加え、背景に何が来ても読めるよう半透明の下地プレートも敷く。 */
#header .tagline {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    background: rgba(0, 34, 68, 0.35);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
}

/* メニュー：黄色いブロックが並んでいるイメージ */
#navi,
#navi-in {
    background: var(--lego-yellow);
}
#navi a {
    color: var(--lego-dark) !important;
    font-weight: 700;
}
#navi > .navi-in > ul > li {
    border-right: 3px solid rgba(0, 0, 0, 0.12);
}
#navi > .navi-in > ul > li:hover,
#navi > .navi-in > ul > li.current-menu-item {
    background: var(--lego-red);
}
#navi > .navi-in > ul > li:hover > a,
#navi > .navi-in > ul > li.current-menu-item > a {
    color: #fff !important;
}

/* ===== リンク・見出し ===== */
.article a,
.entry-content a,
.widget a {
    color: var(--lego-blue);
    font-weight: 700;
}
.article h1, .entry-content h1,
.article h2, .entry-content h2,
.widget h2 {
    color: var(--lego-dark);
    font-weight: 800;
    border-bottom: 4px solid var(--lego-yellow);
    padding-bottom: 6px;
    display: inline-block;
}

/* ===== フッター ===== */
#footer,
.footer {
    background: var(--lego-dark);
    color: #fff;
}
#footer a,
.footer a {
    color: var(--lego-yellow) !important;
}

/* ===== ボタン全般（LEGOブロック風：太い黒枠+くっきりした下方向の厚み） ===== */
.sh-button,
.wp-block-search__button,
#commentform #submit,
input[type="submit"] {
    background: var(--lego-red) !important;
    color: #fff !important;
    font-weight: 800 !important;
    border: 3px solid var(--lego-dark) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 0 var(--lego-dark);
    padding: 10px 18px !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.sh-button:hover,
.wp-block-search__button:hover,
#commentform #submit:hover,
input[type="submit"]:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--lego-dark);
}
.sh-button:not(.sh-button--primary) {
    background: var(--lego-blue) !important;
}

/* ===== ホテルカード（ブロックのように丸角+太枠+スタッド風の飾り） ===== */
.sh-hotel {
    border: 3px solid var(--lego-blue) !important;
    border-radius: 16px !important;
    position: relative;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease;
    overflow: visible !important;
}
.sh-hotel:hover {
    transform: translateY(-3px);
}
.sh-hotel::before {
    /* レゴブロックのスタッド（丸ポッチ）を天面に3つ並べる装飾 */
    content: "";
    position: absolute;
    top: -9px;
    left: 20px;
    width: 16px;
    height: 16px;
    background: var(--lego-blue);
    border: 2px solid var(--lego-dark);
    border-radius: 50%;
    box-shadow: 28px 0 0 -2px var(--lego-blue), 28px 0 0 0 var(--lego-blue), 56px 0 0 -2px var(--lego-blue), 56px 0 0 0 var(--lego-blue);
}

/* ===== 年齢区分バッジ ===== */
.sh-hotel__badge--age {
    background: var(--lego-yellow) !important;
    color: var(--lego-dark) !important;
    font-weight: 800;
    border: 2px solid var(--lego-dark);
    border-radius: 999px;
    padding: 3px 12px;
    display: inline-block;
}

/* ===== 星評価：レゴイエローに寄せる ===== */
/* ★v1.0.12: 「口コミ募集中」プレースホルダー(.sh-stars--empty)まで黄色文字になり、
   白背景でほぼ読めなくなっていた(ユーザー環境で実測・2026-08-11)。実際の星がある
   場合(.sh-stars--empty が付かない場合)だけ黄色にする。 */
.sh-stars:not(.sh-stars--empty),
.sh-review-rating {
    color: var(--lego-yellow) !important;
    -webkit-text-stroke: 0.5px var(--lego-dark);
}
.sh-stars--empty {
    color: #6b7280 !important;
    font-weight: 700;
}

/* ===== 都道府県一覧：ブロックのチップ風 ===== */
.sh-pref-index__item a {
    background: var(--lego-green);
    color: #fff !important;
    font-weight: 800;
    border: 2px solid var(--lego-dark);
    border-radius: 10px;
    display: block;
    padding: 8px 10px;
}
.sh-pref-index__item a:hover {
    background: var(--lego-blue);
}
.sh-pref-index__item--empty .sh-pref-index__none {
    background: #e3e3e3;
    color: #888;
    border: 2px dashed #bbb;
    border-radius: 10px;
    display: block;
    padding: 8px 10px;
}

/* ===== 価格・見出しアクセント ===== */
.sh-hotel__price strong,
.sh-hotel-detail__price-value {
    color: var(--lego-red);
    font-weight: 800;
}

/* ===== ホテル個別ページ: 「関連記事」はCocoon標準を非表示にし、独自ブロックに差し替え(v1.0.19) ===== */
/* Cocoon標準の#related-entriesはsh_hotel同士をランダムに拾うため、他県のホテルが並んでしまう */
.single-sh_hotel #related-entries {
    display: none !important;
}
/* Cocoon標準の目次(#toc)は、ホテル個別ページ内のh3見出し(無料条件・最安料金)を拾って
   自動生成されるが、記事ではなく商品情報ページなので不要（ユーザー指摘2026-08-12） */
.single-sh_hotel #toc {
    display: none !important;
}
.sh-related-columns {
    margin: 2em 0;
    padding: 16px;
    background: #fff;
    border: 2px solid var(--lego-dark);
    border-radius: 12px;
}
.sh-related-columns__heading {
    margin-top: 0;
}
.sh-related-columns__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sh-related-columns__item {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}
.sh-related-columns__item:last-child {
    border-bottom: none;
}
.sh-related-columns__item a {
    font-weight: 700;
    color: var(--lego-blue);
}