/*
  OKUClinic Off-canvas Sticky Fix + Close UI (refined)
  要望対応：
  - ドロワーオープン時：上の余白（tab-bar分）を無くす（JS側で top を adminbar 基準に）
  - 「メニュー」文字なし
  - オープン時は tab-bar を非表示（UI二重防止）
  - ×ボタンは目立ちすぎない「×だけ」表示
  - ヘッダー背景を #F8F7F0 に統一
  - 下線（border-bottom）を削除
*/

:root {
  --oku-adminbar-h: 0px;
  --oku-tabbar-h: 0px;
  --oku-top-offset: 0px; /* = adminbar + tabbar（通常時の本文押し下げ用） */
}

body.admin-bar { --oku-adminbar-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --oku-adminbar-h: 46px; }
}

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

  /* 1) tab-bar は通常時のみ固定表示 */
  .show-for-small-only .tab-bar {
    position: fixed !important;
    top: var(--oku-adminbar-h);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10050;
  }

  /* オープン中は tab-bar を消す（UI二重防止） */
  body.oku-offcanvas-open .show-for-small-only .tab-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* tab-bar 分だけ本文が潜らないように（通常時） */
  body {
    padding-top: var(--oku-top-offset);
  }

  /* 2) 左ドロワー：absolute（JSが top/height を入れる） */
  .left-off-canvas-menu.show-for-small-only,
  .left-off-canvas-menu {
    position: absolute !important;
    top: 0;       /* JSが上書き */
    left: 0;
    z-index: 10040;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none !important; /* 閉じている時にクリックを奪わない */
  }
  body.oku-offcanvas-open .left-off-canvas-menu {
    pointer-events: auto !important;
  }

  /* 3) 黒い膜：閉じている時は無効化、開いている時だけ表示（位置はJSが入れる） */
  .exit-off-canvas {
    display: none !important;
    pointer-events: none !important;
  }
  body.oku-offcanvas-open .exit-off-canvas {
    display: block !important;
    position: absolute !important;
    top: 0;       /* JSが上書き */
    left: 0;
    width: 100%;
    height: 100vh; /* JSが上書き */
    z-index: 10030;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.35);
  }

  /* ===== ドロワー内「×」ボタン（タイトルなし / 背景統一 / 下線なし） ===== */
  .left-off-canvas-menu .oku-offcanvas-header {
    position: sticky;
    top: 0;
    z-index: 2;

    /* 背景をドロワーに統一 */
    background: #F8F7F0;

    /* 下線は不要 */
    border-bottom: none;

    /* 右上に寄せて余白も控えめに */
    padding: 6px 8px;

    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* タイトル要素は使わない（念のため非表示） */
  .left-off-canvas-menu .oku-offcanvas-title {
    display: none !important;
  }

  /* “×だけ”見せる：背景/丸/塗りを廃止。タップ領域は確保 */
  .left-off-canvas-menu .oku-offcanvas-close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;

    /* タップ領域（視認性は×だけ） */
    width: 44px;
    height: 44px;
    padding: 0;

    border-radius: 0;
    color: #78b400;       /* サイトのグリーンに寄せる（必要なら変更OK） */
    font-size: 32px;
    line-height: 44px;
    font-weight: 700;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* フォーカス可視化（必要最低限） */
  .left-off-canvas-menu .oku-offcanvas-close:focus-visible {
    outline: 3px solid rgba(120, 180, 0, 0.35);
    outline-offset: 2px;
  }
}