/*
Theme Name: Lightning Child (SAO)
Template: lightning
Description: 大分県スキー・スノーボード連盟サイト用 Lightning子テーマ
Version: 1.0.0
*/

/* ============================================
   モバイルヘッダー: ハンバーガーメニューとサイト名の重なりを解消(2026-08-14)
   このファイルはサイト全体(全ページ)に読み込まれる(handle: lightning-theme-style)。

   原因調査: 下層ページ共通骨格レビュー時、モバイル幅で「サイト名がはみ出している」
   指摘を受けたが、実際に調べたところ document.body.scrollWidth はビューポート幅と
   完全に一致しており、ページ全体が横スクロールする状態(要素の右端がビューポートを
   超えている状態)ではなかった(320/375/414pxいずれも横スクロールなしを確認)。
   実際の原因は、Lightning標準のハンバーガーメニューボタン
   (#vk-mobile-nav-menu-btn、position:fixed; left:5px; width:34px; z-index:2100)が、
   サイト名(.site-header-logo)の左端(実測 x=30px 開始)と重なっていたこと。
   ボタンの右端(x=39px)がロゴの開始位置(x=30px)より右にあるため、「大」の文字が
   ボタンの下に隠れ、パッと見「サイト名が切れている」ように見えていた。
   固定ヘッダー幅そのものが原因ではないため、下層ページ限定ではなくサイト全体
   (TOPページ含む)に影響する問題と判断し、全ページ共通のこのファイルで対応する。
   ============================================ */
@media (max-width: 991px) {
  .site-header-logo { padding-left: 46px; }
}

/* ============================================
   モバイルヘッダー: サイト名の折り返しで「盟」1文字だけが孤立する問題を解消
   (2026-08-14)。
   「大分県スキー・スノーボード連盟」(15文字)が、ハンバーガーボタン分の余白を
   確保した後の横幅(実測294px、font-size21px)に対して2行に折り返す際、
   1行目に14文字・2行目に最後の「盟」1文字だけが残っていた。
   text-wrap:balanceで行の文字数ができるだけ均等になるよう折り返し位置を
   ブラウザに計算させる(対応ブラウザ: Chrome114+/Safari17.5+/Firefox121+、
   2026年時点で主要ブラウザは対応済み)。非対応ブラウザ向けに、フォントサイズを
   気持ち小さくして1文字だけの孤立が起きにくい比率に調整するフォールバックも
   あわせて指定する。 */
@media (max-width: 480px) {
  .site-header-logo span {
    font-size: 19px;
    text-wrap: balance;
  }
}
@media (min-width: 481px) and (max-width: 991px) {
  .site-header-logo span {
    text-wrap: balance;
  }
}

/* ============================================
   フォーカススタイル(指摘34、2026-08-20)。このファイルはサイト全体
   (TOP・全下層ページ)に読み込まれるため、ここに置く。

   方針: 「ホバーで蛍光色に見える」の正体が、独自のフォーカススタイルが
   一切無くブラウザ既定のフォーカスリングが素通しになっていたことだった
   (指摘31の診断、reports/20260820-instr31-implementation.md参照)。
   輪郭を完全に消す(outline: none)のではなく、サイトの配色に合った
   控えめなスタイルに差し替える。

   実装: サイト内のフォーカス可能な要素を洗い出した結果(ボタン4系統・
   絞り込みチップ・タブ・ドロップダウン・検索欄・本文中のテキストリンク・
   315のフリップカード〈tabindex使用〉)、いずれも標準的なHTML要素
   (a/button/input/select/textarea/summary)か、tabindexを明示指定した
   要素のみで、特殊なカスタムウィジェットは無かった。そのため要素の
   種類ごとに1つずつスタイルを書くのではなく、これらのタグ全体に対する
   共通ルールとした。

   色: 通常は紺(--sao-sub-navy相当の#0A2E4D)の細い輪郭。ただし紺色の
   ヘッダー(#site-header)・TOPページのフッター(.sao-top-footer)・
   ライブラリーのアコーディオン見出し(.sao-sub-library-subhead、背景が
   青系)の3箇所は、要素の背景自体が紺〜青系のため紺色の輪郭では見えなく
   なる。この3箇所だけ白色の輪郭に上書きする(WCAG 1.4.11の非テキスト
   コントラスト3:1を、それぞれの背景色に対して満たす組み合わせを選定、
   詳細はreports/20260820-instr34-implementation.mdの計算結果を参照)。

   :focus-visible: キーボード操作時だけ表示され、マウスクリック時には
   表示されない(ブラウザの標準挙動をそのまま使う)。対応していない
   古いブラウザ向けに:focusをフォールバックとして残し、:focus-visible
   に対応しているブラウザでは@supportsで:focus単体の効果を打ち消す
   (JSのポリフィルを使わない、CSSだけで完結する形)。
   ============================================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus {
  outline: 2px solid #0A2E4D;
  outline-offset: 2px;
}
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible),
  summary:focus:not(:focus-visible),
  [tabindex]:focus:not(:focus-visible) {
    outline: none;
  }
}

/* 紺〜青系の背景に乗る要素だけ、白色の輪郭に差し替える */
#site-header a:focus,
#site-header button:focus,
.sao-top-footer a:focus,
.sao-top-footer button:focus {
  outline-color: #fff;
}

/* .sao-sub-library-subhead(<summary>、青地見出し)は、親要素
   (.sao-sub-library-subgroup)にoverflow:hiddenが付いており、既定の
   outline-offset:2px(要素の外側にはみ出す描画)がそのまま切り取られて
   見えなくなることを確認した。この要素だけ内側(offset マイナス)に描画する
   ことで、overflow:hiddenの影響を受けずに輪郭を表示させる。 */
.sao-sub-library-subhead:focus {
  outline: 3px solid #fff;
  outline-offset: -5px;
}