/* ================================================================
   SP 用の画面固定 UI（フッターナビ／先頭へ戻る／ページ内アンカー）

   要素は site-ui.js が組み立てる。ここは見た目だけを持つ。
   テーマ本体（wp_root/.../web_parts/style.css）より後に読み込むこと。
   テーマは * { outline: none !important } を敷いており、
   フォーカス枠を出すには !important で上書きする必要がある。

   SP（765px 以下）専用。PC では .daUI ごと display: none で消す。
   ================================================================ */

/* ---- 土台

   .daUI 自体は箱を持たない。中の2ブロック（左下のナビ、右下のボタン列）が
   それぞれ position: fixed で画面に貼り付く。
   PC ではこの親を display: none にするだけで中身ごと消える。 */
.daUI {
    display: none;
}

.daUI *,
.daUI *:before,
.daUI *:after {
    box-sizing: border-box;
}

@media screen and (max-width: 765px) {

    .daUI {
        display: block;
        font-family: inherit;
        letter-spacing: 0.06em;
        line-height: 1;
    }

    /* ハンバーガー（#spNav）を開いている間は全部引っ込める。
       #spNav は全画面の半透明オーバーレイなので、下に残すと薄く透けて汚い。 */
    #spNav.cr ~ .daUI {
        display: none;
    }

    /* ================================================================
       左下 サイト内ナビ（Top / Works / News / Contact）
       ================================================================ */

    .daUI_nav {
        position: fixed;
        left: 10px;
        /* 右下のボタン列（44px + 余白）を避ける。
           left / right の両指定なので、幅がはみ出して横スクロールを生むことがない。 */
        right: 64px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 9990;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(0, 0, 0, 0.18);
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
        overflow: hidden;
    }

    .daUI_navList {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .daUI_navList > li {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .daUI_navList > li + li {
        border-left: 1px solid rgba(0, 0, 0, 0.12);
    }

    .daUI_navLink {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 2px;
        color: #000;
        font-size: 11px;
        letter-spacing: 0.04em;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
    }

    .daUI_navLink:active {
        background: rgba(0, 0, 0, 0.06);
    }

    /* 現在いるページ。下に細い線を引くだけの静かな表現にする */
    .daUI_navLink[aria-current="page"] {
        box-shadow: inset 0 -2px 0 #000;
    }

    /* ================================================================
       右下 ボタン列（下から「先頭へ戻る」、その1つ上に「目次」）
       ================================================================ */

    .daUI_side {
        position: fixed;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 9990;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    .daUI_anchorWrap {
        position: relative;
    }

    /* 半透明は依頼者の明示要望。opacity で全体を透かしつつ、
       背景も白の半透明にして下の写真がうっすら見えるようにする。 */
    .daUI_btn {
        -webkit-appearance: none;
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        border: 1px solid rgba(0, 0, 0, 0.32);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.72);
        color: #000;
        font-family: inherit;
        line-height: 1;
        opacity: 0.8;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
    }

    .daUI_btn:hover,
    .daUI_btn:active,
    .daUI_btn:focus-visible,
    .daUI_btn[aria-expanded="true"] {
        opacity: 1;
        background: rgba(255, 255, 255, 0.92);
    }

    /* テーマが * { outline: none !important } を敷いているため !important で戻す */
    .daUI a:focus-visible,
    .daUI button:focus-visible {
        outline: 2px solid #000 !important;
        outline-offset: 2px;
    }

    /* 目次ボタン（小さめ） */
    .daUI_anchorBtn {
        height: 34px;
        padding: 0 10px;
        gap: 6px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .daUI_anchorBtn .daUI_icon {
        width: 12px;
        height: 12px;
        flex: none;
    }

    /* 先頭へ戻るボタン */
    .daUI_topBtn {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .daUI_topBtn .daUI_icon {
        width: 16px;
        height: 16px;
    }

    /* ---- 目次パネル */
    .daUI_panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        width: 272px;
        max-width: calc(100vw - 24px);
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 14px 16px 6px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    }

    .daUI_panel[hidden] {
        display: none;
    }

    .daUI_panelTitle {
        margin: 0 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
        font-size: 11px;
        letter-spacing: 0.1em;
        line-height: 1.4;
        color: #555;
    }

    .daUI_panelList {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .daUI_panelList > li {
        margin: 0;
        padding: 0;
    }

    .daUI_panelLink {
        display: block;
        padding: 10px 2px;
        color: #000;
        font-size: 13px;
        letter-spacing: 0.04em;
        line-height: 1.6;
        text-decoration: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .daUI_panelList > li:last-child .daUI_panelLink {
        border-bottom: 0;
    }

    .daUI_panelLink:active {
        background: rgba(0, 0, 0, 0.05);
    }

    /* h3 まで拾ったときの下位項目 */
    .daUI_panelLink[data-level="3"] {
        padding-left: 14px;
        font-size: 12px;
        color: #444;
    }

    /* ---- ページ末尾が固定ナビに隠れないようにする

       body に padding を足す手は使えない。テーマが body { height: 100% } を
       敷いているため、長いページでは padding が本文の末尾に来ない。
       最後のブロックである #footer の下に余白を作る。 */
    html.daUI-ready #footer {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }

    /* 記事ページ（blog / news の詳細＝body.single-blog）だけは、
       右下の列に記事内目次のボタン（#tocFloatBtn / bottom 62px・高さ 34px）が
       もう1段載る。66px のままだと footer の最後の要素に重なる。 */
    html.daUI-ready body.single-blog #footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    }

    /* テーマの #scrollTopBtn は SP では引っ込める。
       同じ役割のボタンを .daUI_topBtn として作り直しているため。
       JS が動かなかったときはテーマ側が残るよう .daUI-ready で条件を付ける。 */
    html.daUI-ready #scrollTopBtn {
        display: none !important;
    }

    /* アンカーで飛んだ先が固定ヘッダーに潜らないようにする（ネイティブ移動用の保険） */
    html.daUI-ready {
        scroll-padding-top: 60px;
    }
}

/* 動きを減らす設定を尊重する。スクロールの補間は JS 側でも切っている */
@media (prefers-reduced-motion: reduce) {

    .daUI_btn,
    .daUI_navLink,
    .daUI_panelLink {
        transition: none !important;
    }
}