/* ========================================
   年齢確認オーバーレイ
   ======================================== */

/* JS が動作してクラスを付与したときのみ非表示
   デフォルト表示にすることで JS 無効時は常に表示される */
.age-verification--hidden {
  display: none !important;
}

/* 確認済み（wp_head のインラインスクリプトが body 描画前に付与）は即座に非表示
   → フッターJSの実行を待たないため、確認済みユーザーにモーダルがちらつかない */
html.age-verified #age-verification-overlay {
  display: none !important;
}

/* 背景画像の読み込みが完了するまでコンテンツが透けないよう不透明の下地色を敷く */
#age-verification-overlay {
  background-color: #fcf8ec;
}

/* オーバーレイ表示中は背景スクロールを無効化（JS 読み込み前から有効） */
html:not(.age-verified):has(
    #age-verification-overlay:not(.age-verification--hidden)
  ),
html:not(.age-verified):has(
    #age-verification-overlay:not(.age-verification--hidden)
  )
  body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* noscript 警告（JS 無効時のみ表示） */
.age-verification__noscript {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 1rem;
}

/* チェックボックス カスタムカラー */
.age-verification__checkbox {
  accent-color: #46581a; /* brew-main */
}