/**
 * mobile-nav.css — スマホ固定ボトムナビ（〜1024px）
 *
 * 画面下固定の5項目（等幅・中央強調なし）。PC/タブレット横では非表示。
 * 色は --c-* トークン経由でライト/ダーク反転。!important 不使用。
 *
 * @package ListingHiveChild
 */

.wn-mnav { display: none; }

@media (max-width: 1024px) {
    .wn-mnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        align-items: stretch;
        justify-content: space-around;
        min-height: 58px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* バー背景＝ブランド基幹ネイビー（白ページと明確に分離）。
           クールホワイト案にする場合はこの2行を #F6F9FE / var(--c-mist,#F6F9FE) に差し替え、
           下の .wn-mnav__item / FAB リングの淡色指定も明色系へ戻す。 */
        background-color: #1B2547;               /* 不透明の確実なベース */
        background-color: var(--c-ink, #1B2547); /* 変数が有効なら上書き（テーマ対応） */
        border-top: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 0 -4px 18px rgba(27, 37, 71, .22);
    }
    .wn-mnav__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px 7px;
        text-decoration: none;
        color: #AEB6CE;                /* ネイビーバー上の非アクティブ淡色 */
        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;
        position: relative;
        transition: color .15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .wn-mnav__item.is-active { color: var(--c-accent, #F26B22); }
    .wn-mnav__item:active { opacity: .7; }

    .wn-mnav__icon { width: 23px; height: 23px; display: block; }
    .wn-mnav__icon svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .wn-mnav__label {
        max-width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 通知バッジ（Step2/3 で data-count を入れて表示） */
    .wn-mnav__badge {
        position: absolute;
        top: 2px;
        left: calc(50% + 5px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        box-sizing: border-box;
        border-radius: 999px;
        background: var(--c-emergency, #DC2626);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }
    .wn-mnav__badge[hidden] { display: none; }

    /* 本文・フッターがバーに隠れないよう下余白を確保 */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

    /* ダークモード */
    html[data-theme="dark"] .wn-mnav {
        background: #0F1626;
        border-top-color: #2A3550;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .35);
    }
    html[data-theme="dark"] .wn-mnav__item { color: #aab1bf; }
    html[data-theme="dark"] .wn-mnav__item.is-active { color: var(--c-accent, #FF8A65); }
}

/* 狭幅での微調整 */
@media (max-width: 360px) {
    .wn-mnav__item { font-size: 9px; }
    .wn-mnav__icon { width: 21px; height: 21px; }
}

/* ============================================================
   Step3b: バッジのマイクロインタラクション（控えめなパルス）
   ============================================================ */
@media (max-width: 1024px) {
	.wn-mnav__badge:not([hidden]) { animation: wn-badge-pulse 2.2s ease-in-out infinite; }
}
@keyframes wn-badge-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
	50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.wn-mnav__badge { animation: none; }
}

/* ============================================================
   FAB: 中央「無料相談」を一段上げた橙の円ボタンに（公式/ブログの配色に統一）
   ブランドトークン: --c-accent #FF6F3D / --c-paper（ダーク反転）
   ============================================================ */
@media (max-width: 1024px) {
	.wn-mnav__item--fab { color: var(--c-accent, #FF6F3D); }
	.wn-mnav__item--fab .wn-mnav__icon {
		width: 48px;
		height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--c-accent, #FF6F3D);
		border-radius: 50%;
		transform: translateY(-16px);
		box-shadow: 0 6px 14px rgba(255, 111, 61, .45), 0 0 0 4px var(--c-ink, #1B2547);
		transition: transform .15s ease, box-shadow .15s ease;
	}
	.wn-mnav__item--fab .wn-mnav__icon svg { width: 24px; height: 24px; stroke: #fff; }
	.wn-mnav__item--fab .wn-mnav__label { margin-top: -10px; font-weight: 700; }
	.wn-mnav__item--fab:active .wn-mnav__icon { transform: translateY(-14px) scale(.96); }

	html[data-theme="dark"] .wn-mnav__item--fab .wn-mnav__icon {
		box-shadow: 0 6px 14px rgba(255, 111, 61, .5), 0 0 0 4px #0F1626;
	}
}