/* ==========================================================================
   WORLD CALENDAR — スタイル
   style.css のトークン（--surface, --border, --accent-signal など）と
   コンポーネント作法（.page-header, .btn-ghost, .cat-card 等）に合わせています。
   色をハードコードしていないので、data-theme="dark" でも自動的に切り替わります。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ全体
   固定ヘッダー（.site-header, --header-h）に文字が食い込まないよう、
   page-header と同じ計算式で上部にオフセットを入れています。
   -------------------------------------------------------------------------- */

.calendar-page{
  max-width:var(--max);
  margin:0 auto;
  padding:calc(var(--header-h) + 44px) 32px 100px;
}

@media (max-width:640px){
  .calendar-page{
    padding:calc(var(--header-h) + 34px) 20px 80px;
  }
}

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */

.calendar-page__header{
  text-align:center;
  padding-bottom:40px;
  margin-bottom:40px;
  border-bottom:1px solid var(--border);
}

.calendar-page__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.14em;

  color:var(--accent-signal);
  background:var(--surface-alt);

  padding:6px 14px;
  border-radius:999px;

  margin-bottom:20px;
}

.calendar-page__header h1{
  font-family:'Noto Serif JP', serif;
  font-weight:700;
  font-size:clamp(28px, 4vw, 40px);
  line-height:1.3;
}

.calendar-page__desc{
  color:var(--text-secondary);
  font-size:14.5px;
  margin-top:14px;
}

/* --------------------------------------------------------------------------
   月切り替え
   -------------------------------------------------------------------------- */

.calendar-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:24px;
}

.calendar-nav__btn{
  width:40px;
  height:40px;
  border-radius:50%;

  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-secondary);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  font-size:14px;

  transition:all .25s ease;
}

.calendar-nav__btn:hover{
  color:var(--accent-signal);
  border-color:var(--accent-signal);
  transform:translateY(-1px);
}

.calendar-nav__label{
  font-family:'Noto Serif JP', serif;
  font-size:19px;
  font-weight:700;

  color:var(--text-primary);
  min-width:180px;
  text-align:center;
}

/* --------------------------------------------------------------------------
   国別フィルター
   -------------------------------------------------------------------------- */

.calendar-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:36px;
}

.calendar-filter__btn{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-secondary);

  border-radius:999px;
  padding:7px 16px;
  font-size:13px;
  font-weight:500;

  cursor:pointer;
  transition:all .2s ease;
}

.calendar-filter__btn:hover{
  border-color:var(--accent-signal);
  color:var(--accent-signal);
}

.calendar-filter__btn.is-active{
  background:var(--navy-deep);
  border-color:var(--navy-deep);
  color:#fff;
}

html[data-theme="dark"] .calendar-filter__btn.is-active{
  background:var(--accent-signal);
  border-color:var(--accent-signal);
  color:var(--midnight);
}

/* --------------------------------------------------------------------------
   カレンダー本体
   年・曜日は表示しない。行事があるセルには行事名を直接表示する。
   -------------------------------------------------------------------------- */

.calendar-grid{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.calendar-cells{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
}

.calendar-cell{
  min-height:96px;

  border:none;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);

  background:var(--surface);
  color:inherit;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  padding:10px 8px;
  cursor:default;
  text-align:left;

  transition:background .2s ease;
}

.calendar-cell.has-event{
  cursor:pointer;
}

.calendar-cell.has-event:hover{
  background:var(--surface-alt);
}

.calendar-cell__day{
  font-size:13px;
  color:var(--text-tertiary);
  font-family:'JetBrains Mono', monospace;
  margin-bottom:6px;
}

.calendar-cell.has-event .calendar-cell__day{
  color:var(--text-primary);
}

.calendar-cell__events{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
}

.calendar-cell__event-name{
  font-size:11.5px;
  line-height:1.4;

  color:var(--accent-signal);

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.calendar-cell__more{
  font-size:10.5px;
  color:var(--text-tertiary);
  font-family:'JetBrains Mono', monospace;
}

@media (max-width:640px){
  .calendar-cell{
    min-height:64px;
    padding:6px 5px;
  }

  .calendar-cell__day{
    font-size:11px;
    margin-bottom:4px;
  }

  .calendar-cell__event-name{
    font-size:9.5px;
  }

  .calendar-cell__more{
    font-size:9px;
  }
}

/* --------------------------------------------------------------------------
   EVENTS一覧
   -------------------------------------------------------------------------- */

.calendar-events{
  margin-top:48px;
}

.calendar-events__title{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.16em;
  color:var(--accent-signal);
}

.calendar-events__month{
  font-family:'Noto Serif JP', serif;
  font-size:20px;
  font-weight:700;
  color:var(--text-primary);
  margin-top:6px;
  margin-bottom:20px;
}

.calendar-events__empty{
  color:var(--text-tertiary);
  font-size:14px;
  padding:24px 0;
}

.calendar-events__list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--border);
}

.calendar-event-row{
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:16px;

  width:100%;
  padding:16px 6px;

  border:none;
  border-bottom:1px solid var(--border);
  background:none;

  cursor:pointer;
  text-align:left;

  transition:background .2s ease;
}

.calendar-event-row:hover{
  background:var(--surface-alt);
}

.calendar-event-row__date{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--text-tertiary);
}

.calendar-event-row__name{
  font-size:15px;
  font-weight:500;
  color:var(--text-primary);
}

.calendar-event-row__meta{
  font-size:12px;
  color:var(--accent-signal);
  white-space:nowrap;
}

@media (max-width:640px){
  .calendar-event-row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .calendar-event-row__meta{
    color:var(--text-tertiary);
  }
}

/* --------------------------------------------------------------------------
   モーダル
   -------------------------------------------------------------------------- */

.calendar-modal[hidden]{
  display:none;
}

.calendar-modal{
  position:fixed;
  inset:0;
  z-index:300;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;
}

.calendar-modal__backdrop{
  position:absolute;
  inset:0;

  background:rgba(10,15,28,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.calendar-modal__card{
  position:relative;

  width:100%;
  max-width:480px;
  max-height:80vh;
  overflow-y:auto;

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);

  padding:32px 28px;
}

.calendar-modal__close{
  position:absolute;
  top:16px;
  right:16px;

  width:32px;
  height:32px;
  border-radius:50%;

  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-secondary);

  font-size:16px;
  line-height:1;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:all .2s ease;
}

.calendar-modal__close:hover{
  color:var(--accent-signal);
  border-color:var(--accent-signal);
}

.calendar-modal__name{
  font-family:'Noto Serif JP', serif;
  font-size:20px;
  font-weight:700;
  color:var(--text-primary);
  padding-right:32px;
}

.calendar-modal__date{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--text-tertiary);
  margin-top:8px;
}

.calendar-modal__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.calendar-modal__type{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;

  color:var(--accent-signal);
  background:var(--surface-alt);

  border-radius:999px;
  padding:4px 12px;
}

.calendar-modal__countries{
  font-size:12px;
  color:var(--text-tertiary);
  align-self:center;
}

.calendar-modal__desc{
  font-size:14px;
  line-height:1.9;
  color:var(--text-secondary);
  margin-top:18px;
}

.calendar-modal__established{
  font-size:12.5px;
  color:var(--text-tertiary);
  margin-top:12px;
  font-family:'JetBrains Mono', monospace;
}

.calendar-modal__history{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.calendar-modal__history-label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--text-tertiary);
  margin-bottom:6px;
}

.calendar-modal__history-name{
  font-size:14px;
  font-weight:500;
  color:var(--text-primary);
  margin-bottom:10px;
}

.calendar-modal__link{
  display:block;
  text-align:right;

  font-size:13.5px;
  font-weight:500;
  color:var(--accent-signal);

  transition:opacity .2s ease;
}

.calendar-modal__link:hover{
  opacity:.7;
  text-decoration:underline;
}

.calendar-modal__link--article{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);

  font-family:'Noto Serif JP', serif;
  font-size:14.5px;
}

/* 同日に複数行事があるときの一覧（モーダル内） */

.calendar-modal__day-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px;
}

.calendar-modal__day-item{
  display:flex;
  flex-direction:column;
  gap:4px;

  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);

  padding:12px 14px;
  cursor:pointer;
  text-align:left;

  transition:all .2s ease;
}

.calendar-modal__day-item:hover{
  border-color:var(--accent-signal);
  background:var(--surface-alt);
}

.calendar-modal__day-item-name{
  font-size:14.5px;
  font-weight:500;
  color:var(--text-primary);
}

.calendar-modal__day-item-meta{
  font-size:12px;
  color:var(--text-tertiary);
}