/* ============================================================
   順天聖母臨水夫人文化園地 — 全站共用樣式
   Tailwind 負責版面與大部分視覺；本檔只放
   （1）Tailwind 不易表達的紋樣與裝飾
   （2）第三方套件（Leaflet）的樣式覆寫
   ============================================================ */

:root {
  --palace: #8c1c13;
  --palace-deep: #4a0a06;
  --gold: #c9a227;
  --gold-light: #e3c96a;
  --wood: #3b2a20;
  --paper: #fbf7f0;
}

html {
  scroll-behavior: smooth;
}

body {
  /* 極淡的宣紙纖維質感 */
  background-color: var(--paper);
  background-image: radial-gradient(rgba(59, 42, 32, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- 捲軸 ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f2eadf;
}
::-webkit-scrollbar-thumb {
  background: #b99a6b;
  border-radius: 999px;
  border: 2px solid #f2eadf;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ---------- 選取顏色 ---------- */
::selection {
  background: var(--palace);
  color: #f6ebc6;
}

/* ---------- 首頁 Banner 背景 ---------- */
/* 未放置攝影圖前，以漸層＋祥雲/迴紋線條營造宮廟氛圍。
   日後可在 .hero 上加 background-image 換成實景照。 */
.hero-bg {
  background-color: #4a0a06;
  background-image:
    radial-gradient(ellipse at 50% 120%, rgba(201, 162, 39, 0.35), transparent 60%),
    radial-gradient(ellipse at 15% -10%, rgba(166, 52, 42, 0.75), transparent 55%),
    linear-gradient(160deg, #701009 0%, #4a0a06 55%, #241812 100%);
}

/* 迴紋（雷紋）飾帶：常用於匾額與神龕邊框 */
.meander-border {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Cpath d='M2 14V2h12v8H6v2h12V0h12v14' fill='none' stroke='%23C9A227' stroke-width='1.6' opacity='.75'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  height: 16px;
}

/* 金色細線分隔 */
.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* 標題兩側的菱形飾點 */
.title-ornament {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.title-ornament::before,
.title-ornament::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.title-ornament::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ---------- 直書標題（點綴用） ---------- */
.vertical-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.35em;
}

/* ---------- 卡片 ---------- */
.card-shrine {
  background: #fff;
  border: 1px solid #e5d9c7;
  border-top: 3px solid var(--palace);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-shrine:hover {
  transform: translateY(-6px);
  border-top-color: var(--gold);
  box-shadow: 0 22px 40px -24px rgba(74, 10, 6, 0.55);
}

/* ---------- 出版品封面外框：宣紙底＋金色細內框，圖片以 object-contain 完整呈現 ---------- */
.cover-frame {
  background: var(--paper);
  position: relative;
  padding: 10px;
}
.cover-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 162, 39, 0.5);
  pointer-events: none;
}

/* ---------- 導覽列連結底線動效 ---------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

/* ---------- 捲動進場動畫 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 手機選單 ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
#mobile-menu.is-open {
  max-height: 32rem;
}

/* 漢堡圖示三條線 → 叉 */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.hamburger span + span {
  margin-top: 6px;
}
.hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   Leaflet 覆寫（宮廟地圖頁）
   ============================================================ */
#map {
  background: #ede4d6;
  z-index: 0; /* 避免蓋住 sticky 導覽列 */
}

.leaflet-container {
  font-family: 'Noto Sans TC', system-ui, sans-serif;
}

.leaflet-popup-content-wrapper {
  border-radius: 6px;
  border: 1px solid var(--gold);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.6);
}
.leaflet-popup-content {
  margin: 14px 16px;
  line-height: 1.7;
}
.leaflet-popup-tip {
  border-top-color: #fff;
}

/* ============================================================
   宮廟完整文化檔案燈箱（temples.html）
   ============================================================ */
.detail-tab-btn.is-active {
  color: var(--palace-deep);
  border-color: var(--gold);
  font-weight: 700;
}

/* 沿革背景的極簡 Markdown 渲染結果 */
.md-content p {
  margin-bottom: 0.75em;
}
.md-content p:last-child {
  margin-bottom: 0;
}
.md-content ul {
  list-style: disc;
  margin: 0.5em 0 0.9em;
}
.md-content h4,
.md-content h5 {
  margin: 0.9em 0 0.4em;
}
.md-content h4:first-child,
.md-content h5:first-child {
  margin-top: 0;
}

/* 自訂地圖標記（香爐意象的圓形徽章） */
.temple-marker {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--palace);
  border: 2px solid var(--gold);
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.5);
}
.temple-marker span {
  display: block;
  transform: rotate(45deg);
  text-align: center;
  line-height: 26px;
  color: var(--gold-light);
  font-size: 13px;
}