/* カフェ・モナミ — 「カフェ」テンプレート（templates/page-cafe.html）用の見た目

   本文のブロックは通常のテンプレートと同じまま、テンプレートの main に付く .cafe の中だけ
   色と文字を変える。テンプレートを「固定ページ」に戻せば元の見た目に戻る。
   色はお店のロゴ（assets/img/cafe-5.jpg）の緑と赤から取っている。 */

/* 色と文字の変数。日よけの縞とフッターは main の外にあるので、ヘッダーとフッターにも渡す */
.cafe,
.page-template-page-cafe .site-header,
.page-template-page-cafe .site-footer {
  --cafe-green:  #6fa36a; /* ロゴの文字の緑 */
  --cafe-forest: #3d6139; /* 緑の文字用。クリーム地で読める濃さ */
  --cafe-red:    #a60e10; /* ロゴのカップの赤 */
  --cafe-brown:  #4b3a2c;
  --cafe-cream:  #fbf7f0;
  --cafe-kraft:  #efe5d5;
  --cafe-board:  #2e3d33;
  --cafe-chalk:  #f3efe4;

  --cafe-round: "Zen Maru Gothic", var(--sans);
  --cafe-hand:  "Klee One", var(--serif);
  --cafe-script: "Caveat", "Klee One", cursive;
}

.cafe {
  position: relative;
  font-family: var(--cafe-round);
  color: var(--cafe-brown);
  background: var(--cafe-cream);
}

/* ---------- 日よけ（オーニング）の縞と波形の縁 ----------
   追従するヘッダー（site.css の .site-header は position: sticky）の下端に付けて、
   スクロールしても常に見えるようにする。body の page-template-page-cafe は
   WordPress がこのテンプレートのページに付けるクラス。 */

.page-template-page-cafe .site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  height: 30px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--cafe-green) 0 36px, var(--cafe-cream) 36px 72px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 12px no-repeat,
    radial-gradient(circle at 50% 0, #000 17.5px, transparent 18px) 0 12px / 36px 18px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 12px no-repeat,
    radial-gradient(circle at 50% 0, #000 17.5px, transparent 18px) 0 12px / 36px 18px repeat-x;
  filter: drop-shadow(0 3px 3px rgba(75, 58, 44, .25));
}

/* スマホでメニューを開いている間は、同じ位置に出るメニューと重なるので隠す */
.page-template-page-cafe .site-header:has(.nav-toggle:checked)::after { display: none; }

/* ---------- メニュー（parts/header-cafe.html） ---------- */

/* 「のぞみチャペル」へ戻るリンクは、お店の中のリンクと縦線で区切る */
.page-template-page-cafe .nav-home {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

/* ページ内リンクで飛んだ先が、追従するヘッダーと日よけ（高さ 30px）に隠れないようにする */
.cafe [id] { scroll-margin-top: calc(var(--header-h) + 30px + 16px); }

/* ---------- ヒーロー ---------- */

.cafe .hero-overlay {
  background: linear-gradient(90deg, rgba(58, 38, 22, .62) 0%, rgba(58, 38, 22, .22) 60%, rgba(58, 38, 22, 0) 100%);
}

.cafe .hero-overlay h1,
.cafe .hero-overlay h2 {
  font-family: var(--cafe-hand);
  font-weight: 600;
  letter-spacing: .06em;
  text-shadow: 0 2px 18px rgba(40, 24, 12, .5);
}

.cafe .hero-overlay p {
  font-family: var(--cafe-script);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  color: #f6e3bd;
  text-shadow: 0 1px 12px rgba(40, 24, 12, .55);
}

/* ---------- 紹介文 ---------- */

.cafe .section { background: var(--cafe-cream); }

.cafe .section-head::before {
  content: "";
  display: block;
  width: 56px;
  height: 44px;
  margin: 0 auto 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4c-3 3 3 5 0 9M30 4c-3 3 3 5 0 9' stroke='%236fa36a' stroke-width='2.4'/%3E%3Cpath d='M9 18h32v8a14 14 0 0 1-14 14h-4A14 14 0 0 1 9 26z' fill='%23a60e10'/%3E%3Cpath d='M41 21h3a5 5 0 0 1 0 10h-5' stroke='%23a60e10' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cafe .section-head p { color: var(--cafe-brown); }
.cafe .lede { font-size: 18px; font-weight: 500; color: var(--cafe-forest); }

/* ---------- 営業時間（黒板） ---------- */

.cafe .hours {
  max-width: 560px;
  padding: 44px 40px 40px;
  color: var(--cafe-chalk);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, .05), transparent 55%),
    var(--cafe-board);
  border: 12px solid #8a6443;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 14px 30px rgba(75, 58, 44, .25);
}

.cafe .hours h2 {
  font-family: var(--cafe-hand);
  font-weight: 600;
  font-size: 28px;
  color: #f4d99a;
  letter-spacing: .12em;
}

.cafe .hours h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 10px auto 0;
  background: repeating-linear-gradient(90deg, rgba(243, 239, 228, .6) 0 8px, transparent 8px 14px);
}

.cafe .hours__days { color: var(--cafe-chalk); font-size: 17px; letter-spacing: .08em; }

.cafe .hours__time {
  font-family: var(--cafe-hand);
  font-weight: 600;
  font-size: 30px;
  color: #fff;
}

.cafe .hours .note { color: rgba(243, 239, 228, .75); font-size: 14px; }

.cafe .hours div.wp-block-button.is-btn--solid > .wp-block-button__link {
  font-family: var(--cafe-round);
  font-weight: 700;
  color: #fff;
  background: var(--cafe-red);
  border-color: var(--cafe-red);
  border-radius: 999px;
  padding: 12px 34px;
}

.cafe .hours div.wp-block-button.is-btn--solid > .wp-block-button__link:hover {
  background: #7d0a0c;
  border-color: #7d0a0c;
}

/* ---------- 写真（ポラロイド風） ---------- */

.cafe .section--mist {
  background:
    radial-gradient(rgba(138, 100, 67, .12) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--cafe-kraft);
  padding: 64px 0 72px;
}

.cafe .gallery {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px 28px;
}

.cafe .gallery figure {
  position: relative;
  padding: 10px 10px 30px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(75, 58, 44, .18);
  transform: rotate(-2deg);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cafe .gallery figure:nth-child(2n) { transform: rotate(1.6deg); }
.cafe .gallery figure:nth-child(3n) { transform: rotate(-1deg); }
.cafe .gallery figure:nth-child(5n) { transform: rotate(2.2deg); }

.cafe .gallery figure:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 14px 26px rgba(75, 58, 44, .24);
}

/* マスキングテープ */
.cafe .gallery figure::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 1;
  width: 64px;
  height: 20px;
  background: rgba(111, 163, 106, .55);
  transform: translateX(-50%) rotate(-3deg);
}

.cafe .gallery figure:nth-child(2n)::before { background: rgba(166, 14, 16, .35); transform: translateX(-50%) rotate(4deg); }

.cafe .gallery img { border-radius: 0; }

/* ---------- アクセスと地図（アクセスのページと同じブロック） ---------- */

.cafe .section-head h2,
.cafe .media-row__body h3 {
  font-family: var(--cafe-hand);
  font-weight: 600;
  color: var(--cafe-forest);
}

.cafe .media-row__img img { border-radius: 6px; }

.cafe div.wp-block-button.is-btn--outline > .wp-block-button__link {
  font-family: var(--cafe-round);
  font-weight: 700;
  color: var(--cafe-red);
  border-color: var(--cafe-red);
  border-radius: 999px;
}

.cafe div.wp-block-button.is-btn--outline > .wp-block-button__link:hover {
  color: #fff;
  background: var(--cafe-red);
}

.cafe .map { border: 10px solid #fff; box-shadow: 0 8px 18px rgba(75, 58, 44, .18); }
.cafe .map-note a { color: var(--cafe-forest); }

/* ---------- フッター（parts/footer-cafe.html） ----------
   営業時間の黒板と同じ色。フッターは main の外なので body のクラスで絞る */

.page-template-page-cafe .site-footer {
  font-family: var(--cafe-round);
  color: rgba(243, 239, 228, .82);
  background: var(--cafe-board);
  border-top: 10px solid #8a6443;
}

.page-template-page-cafe .site-footer h2 {
  font-family: var(--cafe-hand);
  font-weight: 600;
  font-size: 22px;
  color: #f4d99a;
}

.page-template-page-cafe .site-footer h3 {
  font-family: var(--cafe-script);
  font-size: 24px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--cafe-green);
}

.page-template-page-cafe .site-footer a,
.page-template-page-cafe .social a { color: rgba(243, 239, 228, .82); }
.page-template-page-cafe .site-footer a:hover { color: #fff; }

.page-template-page-cafe .footer-grid { border-bottom-color: rgba(243, 239, 228, .16); }
.page-template-page-cafe .footer-bottom { color: rgba(243, 239, 228, .55); }

/* ---------- スマホ ---------- */

/* site.css と同じ幅でメニューが縦並びになるので、区切りを横線に変える */
@media (max-width: 900px) {
  .page-template-page-cafe .nav-home { padding-left: 0; border-left: none; }
}

@media (max-width: 600px) {
  .cafe .hours { padding: 36px 20px 32px; border-width: 9px; }
  .cafe .gallery { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .cafe .gallery figure { padding: 7px 7px 20px; }
  .cafe .hours__time { font-size: 23px; }

  /* 2 列で 1 枚だけ余ったときは中央に置く */
  .cafe .gallery figure:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cafe .gallery figure { transition: none; }
}