/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

/* =========================================
   A11y toolbar（常駐 + アクセシビリティ + トグル）
   ========================================= */

/* 位置：PCは右上固定 */
.header-a11y-wrap{
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  z-index: 99999;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);

  font-size: 12px;
  line-height: 1;

  box-sizing: border-box;
  max-width: calc(100vw - 24px);
}

.header-a11y-wrap:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.14);
}

/* スクロール中は控えめ（a11y-scroll.js が html に a11y-scrolling を付与） */
html.a11y-scrolling .header-a11y-wrap{ opacity: .55; }
html.a11y-scrolling .header-a11y-wrap:hover{ opacity: 1; }

/* ツールバー内部（PCは1行） */
.a11y-toolbar{
  display: flex;
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}
.a11y-toolbar__group{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.a11y-toolbar__label{
  font-size: 12px;
  opacity: .85;
  margin-right: 2px;
}

/* ボタン（選択肢：小/標準/大・通常/高コントラスト） */
.a11y-btn{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.72);

  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;

  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;

  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.a11y-btn:hover{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.28);
}
.a11y-btn:active{ transform: translateY(1px); }

/* 選択中：色＋チェックで判別（色だけに依存しない） */
.a11y-btn[aria-pressed="true"]{
  background: rgba(0,0,0,.86);
  color: #fff;
  border-color: rgba(0,0,0,.86);
  box-shadow: 0 8px 16px rgba(0,0,0,.18);

  font-weight: 700;
  position: relative;
  padding-left: 32px;
}
.a11y-btn[aria-pressed="true"]::before{
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
}

/* フォーカス可視化（キーボード操作向け） */
a:focus-visible,
button:focus-visible{
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* トグル（閉じる/ひらく）：他より少し小さく、役割が違う見た目 */
.a11y-toggle{
  background: rgba(0,0,0,.10);
  border: 2px solid rgba(0,0,0,.45);
  color: #111;

  min-height: 38px;
  min-width: 38px;
  padding: 6px 10px;

  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;
  white-space: nowrap;
}
.a11y-toggle::before{
  content: "×";
  font-size: 14px;
  line-height: 1;
}
.a11y-toggle:hover{
  background: rgba(0,0,0,.16);
  border-color: rgba(0,0,0,.60);
}
.a11y-toggle:active{ transform: translateY(1px); }

/* 畳んだ状態：グループは隠して「ひらく」だけ残す */
html.a11y-collapsed .a11y-toolbar__group{ display: none; }
html.a11y-collapsed .a11y-toolbar{ gap: 0; }



/* =========================================
   フォントサイズ（JSが html に a11y-font-* を付ける）
   ========================================= */
/* =========================
   文字サイズ調整（強制的に効かせる版）
   ========================= */
/* 標準 */
html.a11y-font-medium body{
  font-size: 100%;
}

/* 小 */
html.a11y-font-small body{
  font-size: 95%;
}

/* 大（しっかり分かるレベル） */
html.a11y-font-large body{
  font-size: 120%;
}
/* PC：ヘッダーに被らない位置で固定 */
@media (min-width: 768px){
  .header-a11y-wrap{
    top: 50px !important;   /* ← ここがポイント */
    margin-top: 0 !important;
  }
}


/* =========================================
   カード（一覧）だけ：文字サイズを確実に切替
   ========================================= */

/* 標準 */
body.a11y-font-medium .shop-archive-title,
html.a11y-font-medium .shop-archive-title{
  font-size: 16px !important;
  line-height: 1.35 !important;
}
body.a11y-font-medium .shop-archive-msg,
html.a11y-font-medium .shop-archive-msg{
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* 小 */
body.a11y-font-small .shop-archive-title,
html.a11y-font-small .shop-archive-title{
  font-size: 15px !important;
}
body.a11y-font-small .shop-archive-msg,
html.a11y-font-small .shop-archive-msg{
  font-size: 13px !important;
}

/* 大（体感できる） */
body.a11y-font-large .shop-archive-title,
html.a11y-font-large .shop-archive-title{
  font-size: 19px !important;
  line-height: 1.2 !important;
}
body.a11y-font-large .shop-archive-msg,
html.a11y-font-large .shop-archive-msg{
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* 矢印が小さく見える場合 */
body.a11y-font-large .shop-archive-arrow,
html.a11y-font-large .shop-archive-arrow{
  font-size: 22px !important;
}




/* =========================================
   高コントラスト（JSが body に a11y-contrast-high を付ける）
   ========================================= */
body.a11y-contrast-high{
  background: #0a0a0a;
  color: #fff;
}
body.a11y-contrast-high a{
  color: #ff0!important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
body.a11y-contrast-high .header-a11y-wrap{
  background: rgba(0,0,0,.85);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
body.a11y-contrast-high .a11y-btn{
  border-color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.25);
  color: #fff;
}
body.a11y-contrast-high .a11y-btn[aria-pressed="true"]{
  background:#fff;
  color:#000;
  border-color:#fff;
}
body.a11y-contrast-high .a11y-toggle{
  background: #fff;
  color: #000;
  border-color: #fff;
}
body.a11y-contrast-high .a11y-toggle::before{ color:#000; }
/* 高コントラスト：カード全体を黒ベースに統一 */
body.a11y-contrast-high .shop-archive-item,
body.a11y-contrast-high .shop-archive-link,
body.a11y-contrast-high .shop-archive-meta{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.75) !important;
}

/* タイトル・本文など（aタグ内のテキストが色を持っていても白に寄せる） */
body.a11y-contrast-high .shop-archive-title,
body.a11y-contrast-high .shop-archive-msg{
  color: #fff !important;
}

/* リンクは黄色＋下線（白背景問題を根本から消すため背景も黒化済み） */
body.a11y-contrast-high .shop-archive-link,
body.a11y-contrast-high .shop-archive-link:visited{
  color: #ff0 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 矢印（›）も見えるように */
body.a11y-contrast-high .shop-archive-arrow{
  color: #ff0 !important;
}

/* バッジは背景を暗く、文字を白に（色バッジが見づらいのを回避） */
body.a11y-contrast-high .shop-archive-badge{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}

/* 画像枠の境界が必要なら */
body.a11y-contrast-high .shop-archive-thumb{
  background: #000 !important;
}
body.a11y-contrast-high .shop-archive-thumb img{
  display:block;
}
/* 高コントラスト時：タイトル（リンク）だけ黄色に */
body.a11y-contrast-high .shop-archive-link .shop-archive-title{
  color: #ff0 !important;
}

/* 下線はそのままでもOK。より明確にしたければ太く */
body.a11y-contrast-high .shop-archive-link .shop-archive-title{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* =========================================
   高コントラスト：ヘッダー／グロナビ／サブメニュー
   ========================================= */

/* ナビの「白背景」を黒に寄せる（Lightningでよくある要素をまとめて指定） */
body.a11y-contrast-high .site-header,
body.a11y-contrast-high .siteHeader,
body.a11y-contrast-high #site-header,
body.a11y-contrast-high .siteHeaderWrap,
body.a11y-contrast-high .siteHeader__inner,
body.a11y-contrast-high .gMenu,
body.a11y-contrast-high .gMenu_outer,
body.a11y-contrast-high .global-nav,
body.a11y-contrast-high nav{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* メニューリンク：黄色＋下線（見分けやすい） */
body.a11y-contrast-high .gMenu a,
body.a11y-contrast-high .global-nav a,
body.a11y-contrast-high nav a{
  color: #ff0 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 現在地/hover：背景は濃色、文字は黄色（白背景を作らない） */
body.a11y-contrast-high .gMenu a:hover,
body.a11y-contrast-high .gMenu .current-menu-item > a,
body.a11y-contrast-high .gMenu .current_page_item > a,
body.a11y-contrast-high .gMenu .current-menu-ancestor > a,
body.a11y-contrast-high .global-nav a:hover,
body.a11y-contrast-high nav a:hover{
  background: rgba(255,255,255,.12) !important;
  color: #ff0 !important;
}

/* サブメニュー（オレンジ背景対策）：黒背景＋境界線 */
body.a11y-contrast-high .gMenu .sub-menu,
body.a11y-contrast-high .gMenu .sub-menu a,
body.a11y-contrast-high .gMenu .sub-menu li,
body.a11y-contrast-high .global-nav .sub-menu,
body.a11y-contrast-high nav .sub-menu{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* サブメニューのリンクも黄色 */
body.a11y-contrast-high .gMenu .sub-menu a,
body.a11y-contrast-high .global-nav .sub-menu a,
body.a11y-contrast-high nav .sub-menu a{
  color: #ff0 !important;
}

/* 罫線が薄い場合の視認性（必要なら） */
body.a11y-contrast-high .gMenu li,
body.a11y-contrast-high nav li{
  border-color: rgba(255,255,255,.35) !important;
}


/* =========================================
   スマホ最適化（フッター固定メニューの上）
   ========================================= */
@media (max-width: 767px){

  /* ツールバー本体はフッターメニューの上に */
  .header-a11y-wrap{
    top: auto;
    right: 12px;
    left: auto;
    bottom: calc(64px + 12px + env(safe-area-inset-bottom)); /* 64pxはフッターメニュー想定 */
    border-radius: 16px;
  }

  /* 2段折り返しで切れ防止（横スクロールしない） */
  .a11y-toolbar{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    white-space: normal;
    overflow: visible;
    padding-right: 72px; /* 右上にトグルを置く分の余白 */
  }
  .a11y-toolbar__group{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* トグル（閉じる/ひらく）を右上に固定配置 */
  .a11y-toggle{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
  }

  /* 畳んだ状態：白い枠を消して「ひらく」だけ浮かせる */
  html.a11y-collapsed .header-a11y-wrap{
    bottom: calc(64px + 32px + env(safe-area-inset-bottom)); /* 少し上へ */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-right: 56px; /* 右端の「上に戻る」ボタン回避（必要なら増減） */
  }
  html.a11y-collapsed .a11y-toggle{
    background: #fff;
    border: 2px solid rgba(0,0,0,.4);
  }
}