/* ===========================================
   ABC Footer Bar - SP用スクロール連動フッターバー
   - 639.98px 以下のスマホ画面で表示
   - スクロール方向に応じて表示/非表示
   - z-index: 10050（パネル 10045 より上、ハンバーガー 10060 より下）
   =========================================== */

/* SP幅: ヘッダー固定解除 */
/* テーマ上書きのため !important 必須（既存 #masthead は position: fixed） */
@media (max-width: 639.98px) {
    #masthead {
        position: static !important;
    }

    /* フッターバー分の余白を body に確保（最終要素がフッターバーに隠れないため） */
    /* safe-area-inset で iOS ホームバー領域も加算 */
    body {
        padding-bottom: calc(135px + env(safe-area-inset-bottom, 0px));
    }
}

/* PC幅では非表示 */
@media (min-width: 640px) {
    .abc-footer-bar {
        display: none !important;
    }
}

/* フッターバー本体 */
.abc-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 135px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid rgba(26, 42, 74, 0.1);
    z-index: 10050;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
}

/* テーマ上書きのため !important 必要（リンク下線除去） */
.abc-footer-bar a {
    text-decoration: none !important;
}

/* 表示状態 */
.abc-footer-bar--visible {
    transform: translateY(0);
}

.abc-footer-bar__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 135px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.abc-footer-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.abc-footer-bar__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 4px 48px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    color: #1A2A4A;
    gap: 8px;
    text-decoration: none;
    /* ブラウザの button デフォルト青背景・タップハイライトを完全リセット */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* focus / active 時の背景色・アウトラインを完全リセット */
/* これがないと Android Chrome でパネル開放中に MENU セルが青背景になる */
.abc-footer-bar__cell:focus,
.abc-footer-bar__cell:active {
    background-color: transparent;
    outline: none;
}

/* キーボード操作時のみフォーカスリングを表示（アクセシビリティ確保） */
.abc-footer-bar__cell:focus-visible {
    outline: 2px solid rgba(26, 42, 74, 0.4);
    outline-offset: -2px;
}

.abc-footer-bar__icon {
    display: block;
    flex-shrink: 0;
}

/* 通常アイコン: 22x22 */
.abc-footer-bar__item--flow .abc-footer-bar__icon,
.abc-footer-bar__item--reserve .abc-footer-bar__icon,
.abc-footer-bar__item--access .abc-footer-bar__icon {
    width: 22px;
    height: 22px;
}

/* MENU ハンバーガー: 28x15（ハレクラニ準拠サイズ） */
.abc-footer-bar__icon--menu {
    width: 28px;
    height: 15px;
    overflow: visible;
}

.abc-footer-bar__hamburger-line {
    fill: #1A2A4A;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.abc-footer-bar__label {
    font-size: 11px;
    line-height: 1;
    color: #1A2A4A;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ホバー: ネイビー → ゴールド */
/* (hover: hover) と (pointer: fine) の両方を要求してマウスデバイス限定 */
/* 単独 (hover: hover) のみだと Android Chrome 一部端末で sticky hover が発火するため強化 */
@media (hover: hover) and (pointer: fine) {
    .abc-footer-bar__cell:hover .abc-footer-bar__icon [stroke="#1A2A4A"] {
        stroke: #C9A96E;
    }
    .abc-footer-bar__cell:hover .abc-footer-bar__icon [fill="#1A2A4A"] {
        fill: #C9A96E;
    }
    .abc-footer-bar__cell:hover .abc-footer-bar__label {
        color: #C9A96E;
    }
}

/* パネル開放中: 2本線 → X 変形 */
/* 既存ヘッダー3本線と同じ body.abc-nav-open で連動発火 */
body.abc-nav-open .abc-footer-bar__hamburger-line--1 {
    transform: translateY(3px) rotate(45deg);
}
body.abc-nav-open .abc-footer-bar__hamburger-line--2 {
    transform: translateY(-3px) rotate(-45deg);
}

/* メニュー開放時: MENU セルの線(X形) と ラベル文字を共にゴールドに */
/* 背景色は変えない（ハレクラニ参考サイトの挙動準拠） */
body.abc-nav-open .abc-footer-bar__cell--menu .abc-footer-bar__hamburger-line {
    fill: #C9A96E;
}
body.abc-nav-open .abc-footer-bar__cell--menu .abc-footer-bar__label {
    color: #C9A96E;
}

/* /flow/ ページ: 「初めての方」セル非表示 + 3等分グリッド */
/* 自分自身を指すリンクのため非表示。残り3セル（MENU / ご予約 / 診療時間）は表示維持 */
body.page-id-33972 .abc-footer-bar__item--flow {
    display: none;
}
body.page-id-33972 .abc-footer-bar__list {
    grid-template-columns: repeat(3, 1fr);
}