/* theme.css – ダーク／ライトモード切り替え＋時計ボタン＆メニュー＋バックメニューボタン完全版 */

/*────────────────────────────────────────
 1) 変数定義（ライト＝デフォルト）
────────────────────────────────────────*/
:root {
  --t-bg-light:               linear-gradient(158deg, #D9EDF8, #9BF6FF);
  --t-bg-dark:                linear-gradient(90deg, rgba(85, 85, 85, 1), rgba(0, 0, 0, 1));

  --t-text-light:             #2f4f4f;
  --t-text-dark:              #ffffff;

  --t-header-bg-light:        linear-gradient(135deg, #57c7f4, #a0e9fd);
  --t-header-bg-dark:         linear-gradient(135deg, #333333, #555555);

  --t-btn-bg-light:           #ffffff;
  --t-btn-bg-dark:            #111111;

  --t-btn-text-light:         #2f4f4f;
  --t-btn-text-dark:          #ffffff;

  --t-description-text-light: #333333;
  --t-description-text-dark: #ffffff;

  --t-btn-shadow-light:       rgba(0, 0, 0, 0.2);
  --t-btn-shadow-dark:        rgba(0, 0, 0, 0.5);

  --t-btn-hover-bg-light:     rgba(255, 255, 255, 0.9);
  --t-btn-hover-bg-dark:      rgba(34, 34, 34, 0.9);

  --t-btn-hover-shadow-light: rgba(0, 0, 0, 0.25);
  --t-btn-hover-shadow-dark:  rgba(0, 0, 0, 0.7);

  --t-menu-bg-light:          rgba(255, 255, 255, 0.75);
  --t-menu-bg-dark:           rgba(0, 0, 0, 0.75);
  --t-menu-backdrop-filter:   blur(8px);

  --t-switch-bg-off:          #cccccc;
  --t-switch-bg-on:           #57c7f4;
  --t-switch-knob:            #ffffff;

  --t-trans-dur:              0.3s;
}

/*────────────────────────────────────────
 2) ダークモード時の変数上書き
────────────────────────────────────────*/
html[data-theme="dark"] {
  --t-bg-current:             var(--t-bg-dark);
  --t-text-current:           var(--t-text-dark);
  --t-header-bg-current:      var(--t-header-bg-dark);

  --t-btn-bg-current:         var(--t-btn-bg-dark);
  --t-btn-text-current:       var(--t-btn-text-dark);
  --t-btn-shadow-current:     var(--t-btn-shadow-dark);
  --t-btn-hover-bg-current:   var(--t-btn-hover-bg-dark);
  --t-btn-hover-shadow-current: var(--t-btn-hover-shadow-dark);
  --t-description-text-current: var(--t-description-text-dark);
  --t-menu-bg-current:        var(--t-menu-bg-dark);
}

/*────────────────────────────────────────
 3) ライトモード時の変数マッピング
────────────────────────────────────────*/
html:not([data-theme="dark"]) {
  --t-bg-current:             var(--t-bg-light);
  --t-text-current:           var(--t-text-light);
  --t-header-bg-current:      var(--t-header-bg-light);

  --t-btn-bg-current:         var(--t-btn-bg-light);
  --t-btn-text-current:       var(--t-btn-text-light);
  --t-btn-shadow-current:     var(--t-btn-shadow-light);
  --t-btn-hover-bg-current:   var(--t-btn-hover-bg-light);
  --t-btn-hover-shadow-current: var(--t-btn-hover-shadow-light);
  --t-description-text-current: var(--t-description-text-light);
  --t-menu-bg-current:        var(--t-menu-bg-light);
}

/*────────────────────────────────────────
 4) 背景・文字色・ヘッダー背景に変数を適用
────────────────────────────────────────*/
html, body {
  margin:     0;
  padding:    0;
  background: var(--t-bg-current);
  color:      var(--t-text-current);
  transition:
    background var(--t-trans-dur),
    color      var(--t-trans-dur);
}

header.site-header {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  padding:         0 2rem;
  height:          80px;
  background:      var(--t-header-bg-current);
  transition:      background var(--t-trans-dur);
  box-shadow:      0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius:   2rem;
}

/*────────────────────────────────────────
 5) トグルスイッチ
────────────────────────────────────────*/
/* 5) トグルスイッチ */
.theme-toggle {
  margin-left:  auto;
  padding-left: 1rem;
}

.switch {
  position: relative;
  display:  inline-block;
  width:    50px;
  height:   24px;
}

.switch input {
  opacity: 0;
  width:   0;
  height:  0;
}

.slider {
  position:         absolute;
  inset:            0;
  background-color: var(--t-switch-bg-off);
  border-radius:    24px;
  transition:       background-color var(--t-trans-dur);
}

.slider::before {
  content:          "";
  position:         absolute;
  top:              2px;
  left:             2px;
  width:            20px;
  height:           20px;
  background-color: var(--t-switch-knob);
  border-radius:    50%;
  transition:       transform var(--t-trans-dur);
}

.switch input:checked + .slider {
  background-color: var(--t-switch-bg-on);
}

.switch input:checked + .slider::before {
  transform: translateX(26px);
}
/*────────────────────────────────────────
 6) 時計用ボタン
────────────────────────────────────────*/
.Clockbutton {
  position:          relative;
  display:           flex;
  align-items:       center;
  gap:               0.5rem;
  padding:           0.5rem 1rem;
  background-color:  var(--t-btn-bg-current);
  color:             var(--t-btn-text-current);
  font-size:         1rem;
  font-weight:       500;
  text-decoration:   none;
  border-radius:     0.5rem;
  box-shadow:        0 5px 15px -8px var(--t-btn-shadow-current);
  transition:
    background-color var(--t-trans-dur),
    transform        var(--t-trans-dur),
    box-shadow       var(--t-trans-dur);
}

/* リンク文字も常時白 */
.Clockbutton a {
  color: var(--t-btn-text-current) !important;
}

.Clockbutton:hover {
  background-color: var(--t-btn-hover-bg-current);
  transform:        translateY(-2px);
  box-shadow:       0 8px 20px -10px var(--t-btn-hover-shadow-current);
}

html[data-theme="dark"] .Clockbutton,
html[data-theme="dark"] .Clockbutton a {
  /* ボタン本体とリンク文字を真っ白に */
  color: var(--t-btn-text-dark) !important;
}

/*────────────────────────────────────────
 7) メニュー全体
────────────────────────────────────────*/
.menu {
  display:         flex;
  justify-content: center;
  align-items:     center;
  height:          100%;
}

/*────────────────────────────────────────
 8) メニューリストをレスポンシブグリッド化
────────────────────────────────────────*/
.menu ul {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   8px;
  background-color:      var(--t-menu-bg-current);
  backdrop-filter:       var(--t-menu-backdrop-filter);
  padding:               1rem;
  width:                 90%;
  max-width:             1200px;
  margin:                0 auto;
  list-style:            none;
}

/*────────────────────────────────────────
 9) バックメニューボタン
────────────────────────────────────────*/
/* 変数追加（:root にも追記可） */
:root {
  --t-back-btn-bg-light:       #ffffff;
  --t-back-btn-border-light:   #2f4f4f;
  --t-back-btn-text-light:     #2f4f4f;
  --t-back-btn-hover-bg-light: #b0e0e6;

  --t-back-btn-bg-dark:        #3c3c3c;
  --t-back-btn-border-dark:    #555555;
  --t-back-btn-text-dark:      #ffffff;
  --t-back-btn-hover-bg-dark:  #5a5a5a;
}

/* バックメニュー ボタンのマッピング */
html[data-theme="dark"] {
  --t-back-btn-bg-current:      var(--t-back-btn-bg-dark);
  --t-back-btn-border-current:  var(--t-back-btn-border-dark);
  --t-back-btn-text-current:    var(--t-back-btn-text-dark);
  --t-back-btn-hover-bg-current: var(--t-back-btn-hover-bg-dark);
}

html:not([data-theme="dark"]) {
  --t-back-btn-bg-current:      var(--t-back-btn-bg-light);
  --t-back-btn-border-current:  var(--t-back-btn-border-light);
  --t-back-btn-text-current:    var(--t-back-btn-text-light);
  --t-back-btn-hover-bg-current: var(--t-back-btn-hover-bg-light);
}

.backmenu-button {
  padding:           0.5rem 1rem;
  border:            2px solid var(--t-back-btn-border-current);
  border-radius:     4px;
  text-decoration:   none;
  color:             var(--t-back-btn-text-current);
  background-color:  var(--t-back-btn-bg-current);
  transition:        background-color var(--t-trans-dur);
}

.backmenu-button:hover {
  background-color: var(--t-back-btn-hover-bg-current);
}

.menu ul li{
  background-color: var(--t-btn-bg-current);
}

.menu li .description{
  color: var(--t-description-text-current);
}

.category-section h2{
  color: var(--t-description-text-current);
}