/*
 * 自訂區塊共用樣式。規則見 docs/web-design-rules.md。
 * 一律以 .lws-section 為範圍，不影響文章頁與其他頁面元素。
 * 若 Blocksy 的內容區樣式權重較高，重複 class 提高權重（例如 .lws-section.lws-section），不用 !important。
 */

/*
 * Blocksy 的 .site-main 用 flex: 1 1 auto 撐滿頁首、頁尾之間的剩餘空間（sticky footer 版面寫法）。
 * 含自訂區塊的頁面若內容比視窗矮，撐出來的空白會露出 Blocksy 預設的版面底色，在最後一個區段與
 * 頁尾之間形成一塊與內容留白帶觀感相同的色塊。.lws-page 只在頁面含 liwei-sia/* 區塊時才會加到
 * body（見 functions.php 的 body_class 篩選器），文章頁沒有這個 class，不受影響。
 */
.lws-page .site-main {
  background: var(--bg);
}

/*
 * 整頁不能左右滑：跑馬燈、抽走的卡牌會超出畫面右側。Blocksy 只在 body 設 overflow-x，
 * 這個值會被搬到視窗上，iOS Safari 仍然可以左右拖動。html 也設值，body 的 clip 才會作用在 body 本身；
 * 用 clip 不用 hidden：hidden 會讓 body 變成捲動容器，卡牌的 sticky 就黏不住。
 * 正式站另一個外掛用 !important 蓋掉 html 這條，卡牌頁面另由 assets/motion.js 用行內樣式補上。
 */
html:has(> body.lws-page),
body.lws-page {
  overflow-x: clip;
}

.lws-section {
  --s-bg: var(--bg);
  --s-fg: var(--fg);
  --s-muted: var(--fg-muted);
  /* 內文段落用：比 muted 深，讀起來不吃力；muted 留給堂數、原價這類次要資訊 */
  --s-soft: var(--fg-soft);
  --s-line: var(--line);
  --s-raised: var(--bg-raised);
  --s-strong: var(--fg);
  /* 強調色：淺底用 --accent、深底用 --accent-inverse，上面的字色各自配對（主題可分別指定） */
  --s-accent: var(--accent);
  --s-accent-fg: var(--accent-fg);
  margin-block: 0;
  padding-block: var(--layout-section-y);
  background: var(--s-bg);
  color: var(--s-fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.lws-section.is-dark {
  --s-bg: var(--bg-inverse);
  --s-fg: var(--fg-inverse);
  --s-muted: var(--fg-inverse-muted);
  --s-soft: var(--fg-inverse);
  --s-line: var(--line-inverse);
  --s-raised: var(--bg-inverse-raised);
  --s-strong: var(--fg-inverse);
  --s-accent: var(--accent-inverse);
  --s-accent-fg: var(--accent-inverse-fg);
}
/*
 * Blocksy 的 .entry-content 內容區樣式（:is(.is-layout-flow, .is-layout-constrained) >
 * :where(:not(h1..h6))）會給非標題的直接子元素套 margin-block-end: var(--theme-content-spacing)（24px），
 * 與這裡的 .lws-section { margin-block: 0 } 特異度相同，在該規則的來源順序較後時會覆蓋掉我們的設定，
 * 造成區塊樣品頁的兩個區段之間多出 24px 空隙。重複 class 提高特異度覆蓋回來，不用 !important。
 */
.lws-section.lws-section {
  margin-block-end: 0;
}
.lws-section *,
.lws-section *::before,
.lws-section *::after {
  box-sizing: border-box;
}
.lws-section.lws-section + .lws-section.lws-section {
  margin-block-start: 0;
}
/*
 * 相鄰兩個區段同為深底或同為淺底時，兩段各自的上下留白會疊在一起變成兩倍，
 * 在同一片背景色中間看起來像多出一段沒有內容的空白。歸零後段的上留白，接縫只剩單一份留白。
 * 沿用上面同一套「重複 class 提高特異度」寫法，蓋過 Blocksy 對內容區塊子元素設的間距。
 */
.lws-section.lws-section.is-dark + .lws-section.lws-section.is-dark,
.lws-section.lws-section.is-light + .lws-section.lws-section.is-light {
  padding-block-start: 0;
}

.lws-section .lws-container {
  width: 100%;
  max-width: var(--layout-content);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* 標題區 */
.lws-section .lws-section-header {
  margin: 0 auto var(--space-6);
  text-align: center;
}
.lws-section .lws-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-pill);
  color: var(--s-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
}
.lws-section .lws-heading {
  margin: 0;
  color: var(--s-fg);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.lws-section .lws-section-title {
  font-size: var(--text-2xl);
}
.lws-section .lws-section-subtitle {
  max-width: var(--layout-narrow);
  margin: var(--space-4) auto 0;
  color: var(--s-soft);
  font-size: var(--text-md);
}
/* 重點字：淺底用螢光筆底線，深底用強調色文字（基底是橘色；淺底上的橘字對比不足） */
.lws-section.is-light .lws-heading strong {
  font-weight: inherit;
  background: linear-gradient(transparent 62%, var(--accent-soft) 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.lws-section.is-dark .lws-heading strong {
  font-weight: inherit;
  color: var(--s-accent);
}
/*
 * 重點字整段不拆行：瀏覽器不懂中文詞界，會把「獨立」拆成「獨｜立」，螢光筆底線也跟著斷開。
 * 重點字是編輯者親手標的詞，整段視為一個單位；其餘斷點由編輯者用 Shift+Enter 控制。
 * 重點字太長時手機會溢出，由驗收腳本的水平捲動檢查擋住（規則：重點字不超過 8 個字）。
 */
.lws-section .lws-heading strong {
  white-space: nowrap;
}

/* 按鈕 */
.lws-section .lws-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.lws-section .lws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.lws-section .lws-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.lws-section .lws-btn:focus-visible {
  outline: 2px solid var(--s-fg);
  outline-offset: 2px;
}
.lws-section .lws-btn--accent {
  background: var(--s-accent);
  color: var(--s-accent-fg);
}
.lws-section .lws-btn--primary {
  background: var(--s-strong);
  color: var(--s-bg);
}
.lws-section .lws-btn--secondary {
  background: transparent;
  border-color: var(--s-muted);
  color: var(--s-fg);
}
.lws-section .lws-btn--block {
  display: flex;
  width: 100%;
}
/*
 * 編輯器內「未設定連結」提示：render.php 會省略掉網址空白的按鈕，但編輯畫面一律畫出按鈕，
 * 站主容易漏看就發表。這裡只在編輯器套用（.editor-styles-wrapper 只存在於編輯畫面的 iframe），
 * 不影響前台輸出。.lws-btn-wrap 這層包裝只在編輯器的 editor.js 裡存在，render.php 沒有這層。
 */
.editor-styles-wrapper .lws-btn-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}
.editor-styles-wrapper .lws-btn.is-unlinked {
  border-style: dashed;
  border-color: var(--s-muted);
  opacity: 0.6;
}
.editor-styles-wrapper .lws-unlinked-hint {
  display: block;
  margin-top: var(--space-2);
  color: var(--s-muted);
  font-size: var(--text-xs);
  text-align: center;
}
/*
 * 標題區與其餘內容都空時的提示：render.php 這種情況整個區塊不輸出，編輯畫面仍要讓站主
 * 知道「現在這樣前台看不到東西」，不然容易漏看就發表一個看起來有畫面、其實前台是空的區塊
 */
.editor-styles-wrapper .lws-empty-hint {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--s-muted);
  border-radius: var(--radius-sm);
  color: var(--s-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* 卡片與標籤 */
.lws-section .lws-card {
  padding: var(--space-6);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-md);
  background: var(--s-raised);
}
.lws-section .lws-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-normal);
}
.lws-section .lws-badge--accent {
  background: var(--s-accent);
  color: var(--s-accent-fg);
}
.lws-section .lws-badge--outline {
  border: 1px solid var(--s-line);
  color: var(--s-muted);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
}
/* 可點擊的卡片：懸停上移 2px 加淡陰影 */
.lws-section .lws-card.is-interactive {
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.lws-section .lws-card.is-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* 卡片格：欄數由 PHP 依項目數算好（liwei_sia_grid_cols），平板最多 2 欄、手機 1 欄 */
.lws-section .lws-grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-5);
}
.lws-section .lws-grid--1 {
  --cols: 1;
  max-width: var(--layout-card-single);
  margin-inline: auto;
}
.lws-section .lws-grid--2 {
  --cols: 2;
}
.lws-section .lws-grid--4 {
  --cols: 4;
}

/* 手風琴（課綱、常見問題）：原生 <details>，不需要 JS；可同時展開多個 */
.lws-section .lws-acc {
  display: grid;
  gap: var(--space-3);
  max-width: var(--layout-card-pair);
  margin-inline: auto;
}
.lws-section .lws-acc__item {
  border: 1px solid var(--s-line);
  border-radius: var(--radius-md);
  background: var(--s-raised);
}
.lws-section .lws-acc__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--s-fg);
  cursor: pointer;
  list-style: none;
}
.lws-section .lws-acc__summary::-webkit-details-marker {
  display: none;
}
.lws-section .lws-acc__summary:focus-visible {
  outline: 2px solid var(--s-fg);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.lws-section .lws-acc__icon {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  margin-left: auto;
  color: var(--s-fg);
  transition: transform var(--duration-base) var(--ease-standard);
}
.lws-section .lws-acc__item[open] .lws-acc__icon {
  transform: rotate(180deg);
}
.lws-section .lws-acc--plus .lws-acc__item[open] .lws-acc__icon {
  transform: rotate(45deg);
}
.lws-section .lws-acc__panel {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--s-fg);
  font-size: var(--text-base);
}

/* 只給螢幕閱讀器的標籤（例如行動按鈕區 Email 表單的欄位標籤） */
.lws-section .lws-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 勾選清單 */
.lws-section .lws-checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-base);
}
.lws-section .lws-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.lws-section .lws-checklist svg {
  flex: none;
  width: var(--text-base);
  height: var(--text-base);
  margin-top: calc(var(--space-1) / 2);
  color: var(--s-fg);
}
/* 叉號清單（列問題點）：圖示用強調色 */
.lws-section .lws-checklist.is-cross svg {
  color: var(--s-accent);
}

/* 編輯器限定：列表項目的上移／下移／刪除與新增按鈕 */
.editor-styles-wrapper .lws-item-tools {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}
.editor-styles-wrapper .lws-add-item {
  margin-top: var(--space-4);
}

@media (max-width: 1023px) {
  .lws-section .lws-grid--3,
  .lws-section .lws-grid--4 {
    --cols: 2;
  }
}

@media (max-width: 767px) {
  .lws-section {
    padding-block: var(--layout-section-y-sm);
  }
  .lws-section .lws-section-title {
    font-size: var(--text-xl);
  }
  /* 手機上副標降一級，和內文同大，標題才有層次 */
  .lws-section .lws-section-subtitle {
    font-size: var(--text-base);
  }
  .lws-section .lws-card {
    padding: var(--space-5);
  }
  .lws-section .lws-grid {
    --cols: 1;
  }
}

/*
 * 進場動畫（assets/motion.js）：只在 html.lws-motion 底下生效。
 * 這個 class 只在使用者沒開「減少動態效果」、瀏覽器支援時才會加上；沒有它時內容一律直接顯示。
 * 外層再包一層 no-preference，雙重保險。
 * 卡片淡入用 animation 而不是 transition：fill-mode 只用 backwards，播完就不再影響元素，
 * 卡片原本的懸停位移與過場（--duration-fast）照常運作。
 */
@keyframes lws-rise {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }
}
@keyframes lws-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lws-motion .lws-section :is(.lws-grid > *, .lws-acc__item, .lws-stat, .lws-term):not(.is-inview) {
    opacity: 0;
  }
  .lws-motion .lws-section :is(.lws-grid > *, .lws-acc__item, .lws-stat, .lws-term).is-inview {
    animation: lws-rise var(--duration-slow) var(--ease-standard) backwards;
    animation-delay: calc(var(--lws-i, 0) * var(--duration-stagger));
  }
  /* 重點字：淺底螢光筆由左往右刷出，深底由一般字色轉成橘色；等標題先站穩再開始 */
  .lws-motion .lws-section.is-light .lws-heading strong {
    transition: background-size var(--duration-slow) var(--ease-standard) var(--duration-base);
  }
  .lws-motion .lws-section.is-light .lws-heading strong:not(.is-inview) {
    background-size: 0 100%;
  }
  .lws-motion .lws-section.is-dark .lws-heading strong {
    transition: color var(--duration-slow) var(--ease-standard) var(--duration-base);
  }
  .lws-motion .lws-section.is-dark .lws-heading strong:not(.is-inview) {
    color: var(--s-fg);
  }
  /* 方案價格揭示：原價先出現、劃線淡入，優惠價晚一拍跳出來 */
  .lws-motion .lws-pricing .lws-plan__price .lws-plan__was {
    transition: text-decoration-color var(--duration-slow) var(--ease-standard) var(--duration-base);
  }
  .lws-motion .lws-pricing .lws-plan__price:not(.is-inview) .lws-plan__was {
    text-decoration-color: transparent;
  }
  .lws-motion .lws-pricing .lws-plan__price:not(.is-inview) .lws-plan__amount.lws-sale__live {
    opacity: 0;
  }
  .lws-motion .lws-pricing .lws-plan__price.is-inview .lws-plan__amount.lws-sale__live {
    transform-origin: left center;
    animation: lws-pop var(--duration-slow) var(--ease-standard) var(--duration-slow) backwards;
  }
  /* 步驟排法：進度線還沒走到的卡片，標籤先維持空心，走到才變實心 */
  .lws-motion .lws-features .lws-grid--steps .lws-badge {
    transition:
      background-color var(--duration-slow) var(--ease-standard),
      border-color var(--duration-slow) var(--ease-standard),
      color var(--duration-slow) var(--ease-standard);
  }
  .lws-motion .lws-features .lws-grid--steps > :not(.is-reached) .lws-badge {
    border-color: var(--s-line);
    background: transparent;
    color: var(--s-muted);
  }
  /* 複製成功：小標籤彈一下 */
  .lws-copy.is-copied .lws-copy__label {
    animation: lws-pop var(--duration-base) var(--ease-standard);
  }
}

/* 列印時沒有捲動，還沒進場的內容直接顯示 */
@media print {
  .lws-motion .lws-section :is(.lws-grid > *, .lws-acc__item, .lws-stat, .lws-term):not(.is-inview) {
    opacity: 1;
  }
  .lws-motion .lws-pricing .lws-plan__price:not(.is-inview) .lws-plan__amount.lws-sale__live {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lws-section .lws-btn {
    transition: none;
  }
  .lws-section .lws-btn:hover {
    transform: none;
  }
  .lws-section .lws-card.is-interactive {
    transition: none;
  }
  .lws-section .lws-card.is-interactive:hover {
    transform: none;
  }
  .lws-section .lws-acc__icon {
    transition: none;
  }
}
/*
 * 折扣碼複製鈕（sale.js 把優惠文字裡的粗體折扣碼包成按鈕）：折扣碼照原樣顯示，後面跟一個小標籤「複製」，
 * 點了變「已複製」。不在 .lws-section 範圍內也要能用（報名列），所以不加區段前綴。
 */
.lws-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* 上下各多 4px 可點範圍、用負邊界抵銷，行高不變（手指好按） */
  margin: calc(var(--space-1) * -1) 0;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
  cursor: pointer;
}
.lws-copy .lws-copy__label {
  padding: 0 var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--leading-snug);
  white-space: nowrap;
}
/* 複製成功：小標籤反白並打勾（方案卡用區段字色，深底的報名列用強調色） */
.lws-copy.is-copied .lws-copy__label::before {
  content: "✓ ";
}
.lws-section .lws-copy.is-copied .lws-copy__label {
  border-color: var(--s-fg);
  background: var(--s-fg);
  color: var(--s-bg);
}
.lws-mobile-bar .lws-copy.is-copied .lws-copy__label {
  border-color: var(--accent-inverse);
  background: var(--accent-inverse);
  color: var(--accent-inverse-fg);
}
.lws-copy:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}