/* shared/css/components.css (リファクタリング案) */

/* :root 変数や body の基本スタイルは bellwood-theme.css にある前提 */

/* 左端のメニュー */
.sidebar {
  background-color: var(--bws-green); /* テーマ変数を参照 */
  color: var(--bws-gold); /* テーマ変数を参照 */
  font-size: var(--text-sm); /* output.css のフォントサイズ変数を参照 (例: text-sm) */
  /* HTML側で Tailwindクラス (例: bg-[var(--bws-green)] text-[var(--bws-gold)] text-sm) を使用することも検討 */
}

/* 基本的なリンクスタイル */
.content-link {
  color: var(--brand-secondary-color); /* テーマ変数を参照 */
  text-decoration: none; /* HTML側で no-underline を使用可能 */
  font-weight: var(
    --font-weight-medium
  ); /* output.css のフォントウェイト変数を参照。HTML側で font-medium を使用可能 */
}
.content-link:hover {
  text-decoration: underline; /* HTML側で hover:underline を使用可能 */
  color: var(--brand-primary-color); /* テーマ変数を参照 */
}

/* セクションカードの基本スタイル */
/* HTML側でTailwindクラスを直接指定することを強く推奨します。
   例: <div class="bg-white rounded-xl p-6 mb-6 shadow-lg transition-transform transition-shadow duration-200 ease-in-out hover:-translate-y-px hover:shadow-xl">
   以下のCSS定義は、Tailwindへの移行が完了すれば削除可能です。 */
.section-card {
  background-color: var(--bg-white); /* HTML: bg-white */
  border-radius: var(--radius-xl); /* HTML: rounded-xl (12pxは0.75remなのでxlが近い) */
  padding: calc(var(--spacing) * 6); /* HTML: p-6 (24px) */
  margin-bottom: calc(var(--spacing) * 6); /* HTML: mb-6 (24px) */
  box-shadow: var(
    --tw-shadow-lg
  ); /* HTML: shadow-lg (影の具体的な値は output.css の --tw-shadow-lg を確認) */
  transition-property: transform, box-shadow;
  transition-duration: 200ms; /* Tailwind: duration-200 */
  transition-timing-function: ease-in-out; /* Tailwind: ease-in-out */
}
.section-card:hover {
  /* --tw-translate-y での指定も検討 */
  transform: translateY(
    -3px
  ); /* HTML: hover:-translate-y-px (より細かい制御が可能) または hover:-translate-y-1 */
  box-shadow: var(
    --tw-shadow-xl
  ); /* HTML: hover:shadow-xl (影の具体的な値は output.css の --tw-shadow-xl を確認) */
}

/* アコーディオン (用語集など) */
.term-accordion summary::-webkit-details-marker {
  display: none;
} /* ブラウザ固有スタイルリセット */
.term-accordion summary::marker {
  display: none;
} /* Firefox用 ブラウザ固有スタイルリセット */

/* HTML側でTailwindクラスを直接指定することを推奨します。
   例: <summary class="flex justify-between items-center cursor-pointer py-3 px-4 bg-[var(--custom-sky-50)] rounded-lg font-semibold text-[var(--brand-primary-color)] transition-colors hover:bg-[var(--custom-sky-100)]">
   以下のCSS定義は、Tailwindへの移行が完了すれば削除可能です。 */
.term-accordion summary {
  display: flex; /* HTML: flex */
  justify-content: space-between; /* HTML: justify-between */
  align-items: center; /* HTML: items-center */
  cursor: pointer; /* HTML: cursor-pointer */
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); /* HTML: py-3 px-4 (12px 16px) */
  background-color: var(--custom-sky-50); /* テーマ変数を参照 */
  border-radius: var(--radius-lg); /* HTML: rounded-lg (8px) */
  font-weight: var(--font-weight-semibold); /* HTML: font-semibold */
  color: var(--brand-primary-color); /* テーマ変数を参照 */
  transition-property: background-color; /* HTML: transition-colors */
  transition-duration: 200ms; /* Tailwindのデフォルトduration (150ms) や duration-200 など */
}
.term-accordion summary:hover {
  background-color: var(--custom-sky-100); /* テーマ変数を参照 */
}
/* アイコンスタイルはCSSで管理 (Font Awesome依存) */
.term-accordion summary .icon::before {
  content: '\f078'; /* Font Awesome Cheveron Down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; /* Solid icon */
  transition: transform 0.3s ease;
}
.term-accordion[open] summary .icon::before {
  transform: rotate(180deg);
}

/* HTML側でTailwindクラスを直接指定することを推奨します。
   例: <div class="accordion-content p-4 bg-[var(--brand-background-light)] border border-t-0 border-[var(--brand-border-color)] rounded-b-lg">
   以下のCSS定義は、Tailwindへの移行が完了すれば削除可能です。 */
.term-accordion div.accordion-content {
  padding: calc(var(--spacing) * 4); /* HTML: p-4 (16px) */
  background-color: var(--brand-background-light, #f8fafc); /* テーマ変数を参照 */
  border: 1px solid var(--brand-border-color, #e2e8f0); /* テーマ変数を参照 */
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* HTML: rounded-b-lg (下部のみ角丸) */
}

/* カスタムモーダル (汎用) */
/* HTML側でTailwindクラス (fixed inset-0 bg-black/30 z-[5000] flex items-center justify-center hidden など) を使用。
   トランジションのためのクラス操作はJavaScriptで行う想定。
   以下のクラスはJavaScriptから付与・削除されることを想定したトランジション定義です。 */
#custom-modal-backdrop {
  transition: opacity 0.3s ease-in-out;
}
#custom-modal {
  /* 基本的なスタイル (bg-white p-6 md:p-8 rounded-xl shadow-2xl w-11/12 max-w-md など) はHTML側でTailwindクラスを指定 */
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}
/* JavaScriptで制御する表示・非表示アニメーション用クラス */
.modal-entering {
  opacity: 0;
}
.modal-entering #custom-modal {
  transform: scale(0.95);
  opacity: 0;
}
.modal-entered {
  opacity: 1;
}
.modal-entered #custom-modal {
  transform: scale(1);
  opacity: 1;
}
.modal-exiting {
  opacity: 0;
}
.modal-exiting #custom-modal {
  transform: scale(0.95);
  opacity: 0;
}

/* ページローダー (全ページ共通) */
/* #page-loader はHTML側でTailwindでスタイリングされている想定 */
#loading-spinner {
  /* #pdf-loading-spinner div も同じスタイルを共有可能 */
  /* border-color の rgba(0,0,0,0.1) は color-mix(in oklab, var(--color-black) 10%, transparent) や
       Tailwindの border-black/10 のような表現を検討 */
  border: 4px solid color-mix(in srgb, var(--color-black, black) 10%, transparent);
  width: 36px; /* HTML側で w-9 h-9 (36px) を使用可能 */
  height: 36px;
  border-radius: var(--radius-full, 9999px); /* HTML側で rounded-full を使用可能 */
  border-left-color: var(--brand-secondary-color); /* テーマ変数を参照 */
  animation: spin 1s ease infinite; /* アニメーションはCSSで定義 */
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* PDFローダーオーバーレイ (もし共通で使うなら) */
/* HTML側でTailwindクラス (fixed inset-0 bg-white/80 flex flex-col justify-center items-center z-[10000] など) を使用。
   JavaScriptでの表示制御を想定。 */
#pdf-loader-overlay {
  position: fixed; /* HTML: fixed */
  inset: 0; /* HTML: inset-0 */
  /* background-color: rgba(255, 255, 255, 0.8); HTML: bg-white/80 */
  background-color: color-mix(in srgb, var(--color-white, white) 80%, transparent);
  display: flex; /* HTML: flex (JSで表示制御する場合、初期はhiddenの可能性も) */
  flex-direction: column; /* HTML: flex-col */
  justify-content: center; /* HTML: justify-center */
  align-items: center; /* HTML: items-center */
  z-index: 10000; /* HTML: z-[10000] */
}
/* #pdf-loading-spinner は #loading-spinner のスタイルを共有するため、ここでは定義不要 */

/* 基本アクションボタン (汎用的なもの) */
/* HTML側でTailwindクラスを基本とし、ここで共通のカスタムスタイルやテーマ色バリエーションを定義 */
.action-button {
  /* font-family は bellwood-theme.css の body や --font-sans から継承される想定。
       もし特定のフォントを指定したい場合はここで定義。
       'Press Start 2P' はクイズ特有なので quiz-assessment.css で上書き。 */
  font-family: 'Noto Sans JP', sans-serif; /* 例: Noto Sans JP を共通ボタンフォントとする場合 */

  /* padding, border-radius, font-size, font-weight はTailwindクラスで指定推奨
       例: HTML側で px-6 py-3 rounded-lg text-base font-semibold */
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6); /* 12px 24px */
  border: none; /* Tailwindの border-0 に相当 */
  border-radius: var(--radius-lg); /* 8px */
  cursor: pointer; /* HTML: cursor-pointer */
  font-size: var(--text-base); /* 1rem */
  font-weight: var(--font-weight-semibold); /* 600 */

  transition-property: background-color, box-shadow, transform; /* HTML: transition */
  transition-duration: 0.3s; /* Tailwind: duration-300 */
  transition-timing-function: ease; /* Tailwind: ease-linear, ease-in, ease-out, ease-in-out */

  /* box-shadow はTailwindの shadow-md などをベースに調整可能
       例: HTML側で shadow-md hover:shadow-lg */
  box-shadow: 0 4px 6px color-mix(in srgb, var(--color-black, black) 10%, transparent);

  display: inline-flex; /* HTML: inline-flex */
  align-items: center; /* HTML: items-center */
  justify-content: center; /* HTML: justify-center */
  text-decoration: none; /* HTML: no-underline */
  color: var(--color-white); /* デフォルトの文字色 (ボタン背景色による) */
}
.action-button:hover {
  /* box-shadow はTailwindの hover:shadow-lg などで調整可能 */
  box-shadow: 0 6px 10px color-mix(in srgb, var(--color-black, black) 15%, transparent);
  transform: translateY(-1px); /* HTML: hover:-translate-y-px */
}
.action-button i {
  /* Font Awesomeなどのアイコンを想定 */
  margin-right: var(--spacing); /* HTML: mr-1 (0.25rem) や mr-2 (0.5rem) */
}

/* ボタンの色バリエーション (テーマカラーを使用) */
.action-button.primary {
  background-color: var(--bws-green);
  color: var(--color-white); /* 緑背景に白文字 */
}
.action-button.primary:hover {
  background-color: var(--bws-green-dark);
}

.action-button.secondary {
  background-color: var(--brand-secondary-color);
  color: var(--color-white); /* 青背景に白文字 */
}
.action-button.secondary:hover {
  background-color: var(--brand-primary-color);
}

.action-button.danger {
  background-color: var(--color-red-600); /* output.css の赤系変数を参照 */
  color: var(--color-white); /* 赤背景に白文字 */
}
.action-button.danger:hover {
  background-color: var(--color-red-700); /* output.css の赤系変数を参照 */
}

/* フォーカススタイル (アクセシビリティ向上のため、汎用的な要素に適用) */
/* このスタイルは重要なので維持。値はテーマ変数やoutput.cssの変数を参照。 */
.action-button:focus-visible,
.term-accordion summary:focus-visible,
.chapter-card:focus-visible, /* portal-styles.css の .chapter-card にも適用される想定 */
.tab:focus-visible, /* portal-styles.css の .tab にも適用される想定 */
.option-button:focus-visible {
  /* quiz-assessment.css の .option-button にも適用される想定 */
  outline: 3px solid var(--bws-gold) !important; /* !important は他のアウトライン指定を確実に上書きするために残すか検討 */
  outline-offset: 2px;
  /* box-shadow はTailwindの ring クラス (例: ring-4 ring-offset-2 ring-[var(--bws-gold)]/50 ) で代替できるか検討 */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bws-gold, gold) 50%, transparent);
}

/* --- */
/* 以下のコメントブロックは quiz-assessment.css に記述されるべき内容のメモなので、
   components.css のリファクタリングとしては、このファイル内での重複や不適切な記述がないかを確認する。
   現状、このファイル内にクイズ特有のスタイルが直接記述されているわけではないため、
   このコメントブロック自体は components.css のリファクタリング対象外（情報として残す）。
*/
/*
クイズとアセスメントのUIは各章で共通のコンポーネントとして使用されるため、以下のスタイルを `quiz-assessment.css` に集約（または既存の定義を更新・確認）します。HTML側では、章番号を含まない汎用的なクラス名やIDを使用することを前提とします（例: `quiz-intro-screen`, `assessment-form` など）。
*/
/* (ここに quiz-assessment.css に移すべきスタイルの例がコメントアウトで記述されていたが、実際のCSSルールではないため省略) */

/* CSS Only Scroll to Top Button */
html {
  scroll-behavior: smooth;
}

.scroll-to-top {
  position: sticky;
  bottom: 2rem;
  float: right;
  margin-left: auto;
  margin-right: 2rem;
  margin-top: calc(100vh + 300px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;

  background: var(--brand-secondary-color);
  color: var(--color-white, white);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-secondary-color, #0066cc) 30%, transparent);

  transition: all 0.3s ease;
  z-index: 100;
}

.scroll-to-top:hover {
  background: var(--brand-primary-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-primary-color, #004a8d) 40%, transparent);
}

.scroll-to-top:focus {
  outline: 2px solid var(--bws-gold);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .scroll-to-top {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-right: 1rem;
    bottom: 1rem;
    margin-top: calc(100vh + 200px);
  }
}

/* ハンバーガーメニューを右上に配置するスタイル */
@media (max-width: 768px) {
  #mobile-menu-toggle {
    position: fixed;
    /* ホームボタンの下 + 2px下に移動 */
    top: calc(1rem + 48px + 0.5rem + 2px); 
    right: 1rem;
    left: auto;
    transform: none;
    z-index: 9999;

    /* ▼ ホームボタンとサイズ・見た目を合わせるためのスタイルを追加 ▼ */
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 1.25rem; /* アイコンサイズをホームボタンと合わせる */
    display: flex;
    align-items: center;
    justify-content: center;
    /* ▲ ここまで追加 ▲ */
  }
}

/* ===============================================
   固定ボタン スタイル (最終版: JS不要)
   =============================================== */

/* --- ホームボタン（サイドバー内）のスタイル --- */
#home-button {
    position: absolute;
    /* 親要素(sidebar)を基準に配置 */
    top: calc(1rem - 5px);
    left: 1rem;
    z-index: 10;

    /* 見た目: 円形・半透明 */
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.125rem;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

#home-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

#home-button i {
    margin: 0;
}


/* --- モバイル表示(幅768px以下)のハンバーガーメニュー --- */
@media (max-width: 768px) {
    #mobile-menu-toggle {
        display: flex;
        position: fixed;
        /* 位置を画面の右上に変更 */
        top: calc(1rem - 5px);
        right: 1rem;
        z-index: 9999;

        /* 見た目をホームボタンと統一 */
        width: 48px;
        height: 48px;
        padding: 0;
        font-size: 1.25rem;
        align-items: center;
        justify-content: center;
    }
}