/*
Theme Name: Cygni Child
Theme URI: https://vermilion-dance-studio.com/
Description: Cygni の子テーマ。親テーマ更新でカスタマイズが消えないようにするために作成した。
             CSS の追加・修正はすべてこのファイルで行う。カスタマイザーの「追加CSS」は使わない
             （REST から扱いづらく、変更履歴が残らないため）。
Author: Vermilion Dance Studio
Template: cygni
Version: 1.1.0
Text Domain: cygni-child
*/

/* ==================================================================
   このファイルの構成
     1. Contact フォームの修正（移行前の「追加CSS」の内容そのまま）
     2. 以前から入っていたナビ等の調整（壊れた入れ子だけ直した）
     3. UI 点検で見つかった問題の修正（docs/09-ui-design-audit.md）
   ================================================================== */

/* ------------------------------------------------------------------
   1. Contact フォームの修正
   ------------------------------------------------------------------ */
/* ==================================================================
   Contact フォームの表示修正  2026-08-31

   【原因】
   CF7 の .wpcf7-form-control-wrap はインライン要素で position:relative が当たり、
   その中にテーマが display:block にした input が入る。
   この「インライン要素内のブロック要素」でインラインボックスが分割され、
   その扱いが WebKit(iOS) と Blink(Chrome) で異なるため、
   iOS でだけ入力欄が正しく描画されなかった。
   文字色は元から正しく、色の問題ではなかった。
   ================================================================== */

/* 1. 本命の修正。ラップをブロック化して分割自体を無くす */
.c-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 2. select 4つ（お問い合わせ項目/希望校舎/クラス/ダンス経験）は
      テーマの .c-form 色指定から漏れており #121212 のままだった。
      白背景の上なので読めてはいたが、黒いフォームの中で浮いていた。他の項目と揃える。 */
:root {
    color-scheme: dark;
}

.c-form select {
    color: #ededed !important;
    -webkit-text-fill-color: #ededed !important;
    background-color: #1c1c1c !important;
}

.c-form select option {
    color: #ededed;
    background-color: #1c1c1c;
}

/* 3. オートフィル。テーマに -webkit-autofill の指定が1件も無く、
      iOS/Chrome が独自の暗い文字色で上書きするため打ち消す */
.c-form input:-webkit-autofill,
.c-form input:-webkit-autofill:focus,
.c-form textarea:-webkit-autofill {
    -webkit-text-fill-color: #ededed !important;
    -webkit-box-shadow: 0 0 0 1000px #0b0b0b inset;
    caret-color: #ededed;
}

/* 4. プレースホルダ。既定 #535353 は背景 #0b0b0b に対して約2.5:1 で
      WCAG 基準(4.5:1)を下回る */
.c-form ::placeholder {
    color: #8a8a8a !important;
    opacity: 1;
}

/* 5. 入力欄の幅を下線にそろえる（2026-08-31）
      テーマは input を width:70%、select を inline-block（幅auto）にしており、
      .field-wrap の下線（100%）と幅が合っていなかった。
      さらに label が width:30% で float しているため、inline-block の select は
      その回り込みに押されて右へ 315px ずれていた。
      すべてブロック化して幅100%に統一する。 */
.c-form input[type="text"],
.c-form input[type="tel"],
.c-form input[type="email"],
.c-form input[type="number"],
.c-form select,
.c-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------------------
   2. 以前から入っていた調整
   ------------------------------------------------------------------ */

/* ==================================================================
   以下は 2026-08-31 以前から「追加CSS」に入っていたもの。
   最後のメディアクエリが閉じられておらず、その中に
   br { display:block } と .wp-block-column h2 が入れ子になっていた。
   その2つは 3. に出し、ここは ul.staff だけを残して閉じ直した。
   ================================================================== */

.site-navigation .menu > li > a{
    font-size: 30px;
    line-height: 30px;
	letter-spacing:2px;
}
.site-navigation .mww-3 {
    font-size:40%;
}
@media only screen and (max-width: 850px){
    .site-navigation .menu > li > a{
        font-size:40px;
        line-height:1.5;
    }
    .site-branding img{
        display:none;
    }
    .site-navigation .menu {
        top:10%;
    }
	.site-navigation .menu > li > .sub-menu.sub-menu-in {
    max-height: 350px;
}
}
@media screen and (max-width: 567px) {
    .site-branding img{
        display:none;
    }
    .site-navigation .menu {
        top: 10%;
    }
	.site-navigation .menu > li > a{
        font-size: 25px;
    }
	.site-navigation .menu-wrapper{
    top:45%
}
}
@media screen and (max-width: 567px) {
    ul.staff {
        margin: 0 0 1.5em -1em;
    }
}


/* ------------------------------------------------------------------
   3. UI 点検で見つかった問題の修正
   ------------------------------------------------------------------ */

/* ==================================================================
   UI 点検（docs/09-ui-design-audit.md）で見つかった問題の修正
   2026-08-31
   ================================================================== */

/* --- A. 幅 568〜850px で手動改行が全部消える -----------------------
   親テーマが 850px 以下で br { display:none } を当てている。
   これを打ち消す指定が「567px のメディアクエリの中に入れ子」で
   書かれていたため 567px 以下でしか効いていなかった。独立させる。 */
@media only screen and (max-width: 850px) {
    br { display: block; }
}

/* 同上。567px の入れ子に巻き込まれて全幅で効いていなかった */
.wp-block-column h2 {
    font-size: 1.3em;
    line-height: 1.3em;
}

/* --- B. 本文の左右余白が 0 で、スマホで文字が画面端に接する -------
   .project-content 直下の段落・見出しにだけ余白が無い。
   media-text ブロックの中と、投稿（お知らせ）は元から余白があるので触らない。 */
@media only screen and (max-width: 850px) {
    .project-content > p,
    .project-content > h1,
    .project-content > h2,
    .project-content > h3,
    .project-content > h4,
    .project-content > ul,
    .project-content > ol {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --- C. 記事一覧（News / Blog）が中央に来ていない -----------------
   1カラム(flex-basis:90%)が左寄せのまま + ul に margin-left:48px。
   画面が広いほど右の余白だけが増えて左に寄って見える。 */
.project-content .wp-block-query > .wp-block-columns {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.project-content .wp-block-query .wp-block-post-template {
    margin-left: 0;
}

/* 右側にだけ置かれている空の 10% カラムが、行を左に押し出していた */
.project-content .wp-block-query > .wp-block-columns > .wp-block-column[style*="flex-basis:10%"] {
    display: none;
}

/* --- D. フッターが右半分に寄っている -------------------------------
   テンプレートが左半分に空の .c-col-6 を置いているため。
   幅が広いときだけ 1/4 に縮めて、ウィジェット2列を中央に寄せる。 */
@media only screen and (min-width: 851px) {
    .site-footer .wrapper-full > .c-col-6.hide-mobile {
        width: 25%;
    }
}

/* --- E. フッターの SNS リンクが見出しと揃っていない ---------------
   ul の既定インデントと黒丸が付いたままで、左端が見出しとずれる。 */
.site-footer .widget .textwidget ul,
.site-footer .widget_text ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/* --- F. コントラスト --------------------------------------------- */

/* F1. グローバルメニュー #9f9f9f on #ededed = 2.26:1 */
.site-navigation.light .menu > li > a,
.site-navigation.light .sub-menu li a {
    color: #5f5f5f;
}

/* F2. フッターのナビ 11px / rgba(85,85,85,.4) on 黒 = 約1.3:1。
       hover の #121212 も黒地では消えるため合わせて直す */
.footer-menu li a {
    color: #8a8a8a;
}

.footer-menu li a:hover {
    color: #ededed;
}

/* F3. 表の見出しセル #464646 on #121212 = 1.98:1（Rental の料金表ほか） */
.project-content table th,
.project-content thead th {
    color: #ededed;
}

/* F4. 塗りつぶしボタンの白文字 2.58〜2.85:1。
       ブランドの色は変えず、文字を黒にして 4.6〜7:1 に上げる */
.wp-block-button__link.has-background {
    color: #000;
}

/* F4b. 見出し「– NEWS –」（白文字 on ビビッドオレンジ）= 2.89:1。
        ボタンと同じ考え方で、背景色は変えず文字を黒にする */
.project-content .has-luminous-vivid-orange-background-color.has-white-color {
    /* WordPress のプリセット色クラスは !important 付きなので、こちらも要る */
    color: #000 !important;
}

/* F5. トップのスライド番号 #404040 on 黒 = 2.03:1 */
.counter {
    color: #8a8a8a;
}

/* --- G. トップのスライド1枚目（ロゴ）がスマホで左右に切れる -------
   1320x1080 のロゴを 390x844 の縦長スロットに cover で入れているため。
   このスロットが縦長になる幅のときだけ contain にして全体を見せる。 */
@media only screen and (max-width: 850px) {
    .slide-bgimg img[src*="6D836BF2-9C31-4E6B-9276-37C58EF914FE"] {
        /* contain だけだとロゴが小さくなる。この画像は 1320x1080 のうち
           実際に絵があるのは中央 622x611 だけなので、拡大しても
           切れるのは透明の余白だけで済む */
        object-fit: contain;
        transform: scale(1.7);
    }
}