/* =========================================================
   sema-theme navigation.css（現在地表示＋スマホメニューのアクセシビリティ補助）
   共通ヘッダー/フッターの確定デザイン（base.css）は変更しない。ここでは
   「現在地の表示」「閉時スマホメニューのフォーカス除外」「背景スクロール固定」だけを足す。
   ヘッダー/フッターは全ページ共通のため、全ページで読み込む。全クラス sema- プレフィックス。
   ========================================================= */

/* =========================================================
   現在地（PCグローバルナビ）：確定のブロンズ下線を常時表示＋やや太字。
   色だけに依存せず、下線（形）と太さで示す。
   ========================================================= */
.sema-nav-link[aria-current="page"]{ font-weight:600; }
.sema-nav-link[aria-current="page"]::after{ transform:scaleX(1); }
/* コラム（ドロップダウン）親が現在地（コラム一覧・カテゴリー・記事閲覧時） */
.sema-nav-menu-btn[aria-current="page"]{ font-weight:600; }
.sema-nav-menu-btn[aria-current="page"]::after{ transform:scaleX(1); }
/* コラムはボタン要素のため既定 font-weight:400 で他リンク(500)より細く見える。他項目と太さを揃える。 */
.sema-nav-menu-btn{ font-weight:500; }

/* ドロップダウン内：現在のカテゴリー／コラム一覧 */
.sema-drop-link[aria-current="page"]{ color:var(--sema-sage-deep); font-weight:600; background:var(--sema-paper); }

/* =========================================================
   現在地（フッター）：暗色面のため控えめに。白＋ブロンズの細い下線（色だけに依存しない）。
   ========================================================= */
.sema-footer-col a[aria-current="page"]{
  color:#fff; text-decoration:underline; text-decoration-color:var(--sema-bronze-soft);
  text-underline-offset:3px; text-decoration-thickness:1px;
}

/* =========================================================
   「コラム」配下の情報階層（PCドロップダウン）
   第1階層＝コラム一覧（すべての記事の親入口）／第2階層＝5カテゴリー（テーマ別の子導線）。
   別物に分断せず、同じコラム配下の中で親子が自然に伝わる程度に差をつける。
   HTMLは変更せず、先頭 li（コラム一覧）と 2番目以降（カテゴリー）を構造で識別。
   ========================================================= */
@media (min-width:768px){
  /* 長い「こころ・恋愛・パートナーシップ」の不自然な折返しを防ぐ余裕（スマホは下で min-width:0 に戻す） */
  .sema-dropdown{ min-width:272px; }

  /* コラムは開閉式（プルダウン）。他項目と区別できるよう淡い面のタブ状にして目立たせる（スマホと同方針）。 */
  .sema-nav-menu-btn{ background:var(--sema-paper); padding-inline:.8em; border-radius:3px; }

  /* 第1階層：コラム一覧＝一段強い親入口（明朝・やや大・ごく淡い面＋短いブロンズ罫）。CTA化・強い塗り・大角丸はしない */
  .sema-dropdown > li:first-child{ margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--sema-line); }
  .sema-dropdown > li:first-child > .sema-drop-link{
    font-family:var(--sema-serif); font-weight:600; font-size:.98rem; color:var(--sema-ink);
    background:var(--sema-paper); border-left:2px solid var(--sema-bronze);
  }

  /* 第2階層：カテゴリー群＝一段控えめ（少し小さめ・補助色）＋左の細い罫で子階層を示す（1列のまま） */
  .sema-dropdown > li:not(:first-child){ position:relative; padding-left:.6em; }
  .sema-dropdown > li:not(:first-child) > .sema-drop-link{ font-size:.84rem; color:var(--sema-ink-soft); }
  .sema-dropdown > li:not(:first-child)::before{
    content:""; position:absolute; left:0; top:7px; bottom:7px; width:1px; background:var(--sema-line-2);
  }
  /* 子の現在地は淡い面＋深緑文字（親入口の現在地と強さを分ける） */
  .sema-dropdown > li:not(:first-child) > .sema-drop-link[aria-current="page"]{ color:var(--sema-sage-deep); }
}

/* =========================================================
   スマホ（≤767px）
   ========================================================= */
@media (max-width:767px){
  /* PCの下線はモバイルでは非表示（base.css）。モバイルは左のブロンズ罫＋淡い面＋太字で示す */
  .sema-nav-link[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--sema-bronze); background:var(--sema-paper); font-weight:600; }

  /* コラムは開閉式（プルダウン）。他項目と区別し「押すと下に一覧が開く」と分かるよう、淡い面で示す。
     開くとドロップダウン（同系の淡い面）が下に続き、コラムのまとまりとして自然に見える。 */
  .sema-nav-menu-btn{ background:var(--sema-paper); }

  /* 閉時のスマホメニューはフォーカス不可にする（画面外に残さない＝Tabで到達させない） */
  .sema-nav:not(.is-open){ visibility:hidden; transition:transform .26s var(--sema-ease), visibility 0s linear .26s; }
  .sema-nav.is-open{ visibility:visible; }

  /* メニュー展開中は背景（body）のスクロールを固定（解除はJSがクラスを外す） */
  body.sema-nav-open{ overflow:hidden; }

  /* 閉時のオフキャンバスナビ（.sema-nav は position:fixed＋transform で画面外退避）が
     レイアウト幅を実機幅より広げ、年齢確認済み状態でスマホが横方向に拡大（約725px）していた問題の対策。
     従来は age-gate.css の html:has(body.sema-age-open) がゲート表示中だけ overflow-x を抑えており、
     確認後（＝age-gate.css 非読込）は抑止が外れて横幅が拡張していた。ここで常時抑止する。
     実測の結果 html・body の片方だけでは抑止できず両方に指定が必要。かつ overflow-x:hidden は
     body がスクロールコンテナ化して sticky ヘッダー（.sema-header）を壊すため、スクロールコンテナを
     作らない overflow-x:clip を html・body 両方へ指定する（vw=実機幅・横スクロールなし・sticky維持）。
     clip 非対応の旧ブラウザは visible にフォールバック（横幅は元の挙動に戻るが表示は壊れない）。 */
  html, body{ overflow-x:clip; }

  /* -------------------------------------------------------------------------
     スマホの「コラム」カテゴリー一覧の崩れ修正。
     原因：PC用ドロップダウンの中央寄せ transform: translateX(-50%)（base.css の
     .sema-dropdown.is-open）が、スマホの開状態にも残り、子メニューが自幅の半分だけ
     左へずれて右側に空白が出ていた（base.css のスマホリセットは .sema-dropdown のみで、
     詳細度が上の .is-open を打ち消せていなかった）。
     → スマホでは開状態の transform／PC座標／固定幅を打ち消し、パネル全幅の縦一列にする。
     ------------------------------------------------------------------------- */
  .sema-dropdown,
  .sema-dropdown.is-open{
    transform:none; left:auto; right:auto;
    width:100%; min-width:0; max-width:none;
  }

  /* -------------------------------------------------------------------------
     スマホの「コラム」配下の情報階層：
     第1階層＝コラム一覧（最上部の親入口・全幅・明朝・淡い面＋下罫）
     第2階層＝5カテゴリー（一段下げてインデント・左の細い罫・控えめ・全幅タップ）
     ------------------------------------------------------------------------- */
  /* 第1階層：コラム一覧 */
  .sema-dropdown > li:first-child{ border-bottom:1px solid var(--sema-line-2); }
  .sema-dropdown > li:first-child > .sema-drop-link{
    font-family:var(--sema-serif); font-weight:600; font-size:1rem; color:var(--sema-ink);
    background:var(--sema-ivory);
  }
  /* 第2階層：カテゴリー群（親より一段深いインデント＋左の細い罫） */
  /* カテゴリー群全体をまとめて少し下げる（コラム一覧との間隔を広げる）。
     先頭カテゴリー（基礎知識）だけに上マージンを付けると、後続が押し下げられて群ごと下がり、
     左罫（各liの::before）も開始位置に合わせて下から始まる。カテゴリー同士の間隔は不変。 */
  .sema-dropdown > li:nth-child(2){ margin-top:12px; }
  .sema-dropdown > li:not(:first-child){ position:relative; }
  .sema-dropdown > li:not(:first-child) > .sema-drop-link{
    font-size:.92rem; color:var(--sema-ink-soft);
    padding-left:calc(var(--sema-pad) + 30px);
  }
  .sema-dropdown > li:not(:first-child)::before{
    content:""; position:absolute; left:calc(var(--sema-pad) + 12px); top:0; bottom:0; width:1px; background:var(--sema-line-2);
  }
}