/* Shop Holiday Calendar - front-end styles
   クラス名はすべて shc- 接頭辞で統一し、他のテーマ/旧スクリプトの
   .calendar / .cal-grid / .day のような汎用クラスと衝突しないようにしている。
   色は --shc-* という CSSカスタムプロパティで管理し、
   管理画面で指定した色がここに反映される。
*/

/* wpautop等の仕様で、ショートコードの直前に空の<p></p>が自動生成され、
   不要な余白として見えてしまうことがあるための保険。
   (:has() 未対応の古いブラウザでは効かないが、JS側でも同じ対応を行っている) */
p:empty:has( + .shc-calendar ){
  display: none;
  margin: 0;
}

.shc-calendar{
  --shc-closed: #6E1E2B;
  --shc-irregular: #6E1E2B;
  --shc-text-default: #221B17;
  --shc-text-dow: #221B17;
  --shc-text-closed: #FFFFFF;
  --shc-text-irregular: #221B17;
  --shc-title-size: 14px;
  --shc-title-align: left;
  --shc-text-ym: #221B17;
  --shc-ym-size: 16px;
  --shc-ym-align: left;
  --shc-nav-text: #FFFFFF;
  --shc-nav-bg: #6E1E2B;
  --shc-title-color: #221B17;
  font-family: inherit;
  box-sizing: border-box;
}
.shc-calendar .shc-title{
  font-size: var(--shc-title-size);
  text-align: var(--shc-title-align);
  color: var(--shc-title-color);
  letter-spacing: .14em;
  margin: 0 0 20px;
  font-weight: 500;
}
.shc-calendar .shc-head{
  display: flex;
  margin-bottom: 14px;
}
.shc-calendar .shc-head{
  justify-content: flex-start;
}
.shc-calendar .shc-ym{
  width: 100%;
  font-size: var(--shc-ym-size);
  text-align: var(--shc-ym-align);
  color: var(--shc-text-ym);
}
.shc-calendar .shc-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 12px;
}
.shc-calendar .shc-dow{
  font-size: 10.5px;
  padding-bottom: 6px;
  color: var(--shc-text-dow);
  opacity: .85;
}
.shc-calendar .shc-day{
  position: relative;
  padding: 7px 0;
  border-radius: 3px;
  color: var(--shc-text-default);
}
.shc-calendar .shc-day.is-blank{ visibility: hidden; }

.shc-calendar .shc-day.is-closed{
  background: var(--shc-closed);
  color: var(--shc-text-closed);
  font-weight: 500;
}
.shc-calendar .shc-day.is-irregular{
  background: transparent;
  border: 1.5px solid var(--shc-irregular);
  color: var(--shc-text-irregular);
  font-weight: 500;
}
.shc-calendar .shc-day.is-today{
  font-weight: 700;
  font-size: calc(12px + 2px); /* 通常のグリッド文字サイズ(12px)より2px大きく */
}

.shc-calendar .shc-bottom{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}
.shc-calendar .shc-note{
  font-size: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  color: var(--shc-text-default);
}
.shc-calendar .shc-row{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.shc-calendar .shc-sw{
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.shc-calendar .shc-sw-closed{ background: var(--shc-closed); }
.shc-calendar .shc-sw-irregular{ background: transparent; border: 1.5px solid var(--shc-irregular); }

.shc-calendar .shc-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.shc-calendar .shc-nav-btn{
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  color: var(--shc-nav-text);
  background: var(--shc-nav-bg);
  transition: opacity .2s ease;
  white-space: nowrap;
}
.shc-calendar .shc-nav-btn:hover{ opacity: .85; }