/* brand-accents.css — 全新獨立檔（2026-07-24），不動既有 CSS 檔。
   三項輕量品牌質感：1) 標題柔霧光暈圓 2) services/courses 卡片 hover 覆蓋 3) 首頁捲動引導。
   選擇器刻意窄範圍（id 前綴 / 明確 class），避免撞到 typography.css 的全站選擇器地雷。 */

/* ========================================================================
   1. 標題柔霧光暈圓 — 首頁 hero 主標 + about 主標背後，極淡暖金/淡紫光暈
   ======================================================================== */
.hero-title,
h1.section-title {
  position: relative;
  z-index: 0; /* 建立自己的 stacking context，讓 ::before 的 z-index:-1 只在此範圍內墊底，不影響外部疊層 */
}

.hero-title::before,
h1.section-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 40vw, 460px);
  height: clamp(220px, 40vw, 460px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(216, 179, 106, .24) 0%, rgba(198, 183, 218, .16) 45%, transparent 72%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* ========================================================================
   2. 卡片 hover 覆蓋 — services.html #services-grid .service-card
                        courses.html  #courses-grid  .course-card
      兩者皆已 position:relative + overflow:hidden（既有 CSS），只加 ::after 覆蓋層。
      觸控裝置（無 hover）整段停用，避免點一下卡住 hover 態。
   ======================================================================== */
@media (hover: hover) and (pointer: fine) {
  #services-grid .service-card::after,
  #courses-grid .course-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17.5' fill='none' stroke='%23D8B36A' stroke-width='1.4'/%3E%3Cpath d='M13 20h13M20 13.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23D8B36A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat bottom 14px right 14px / 34px 34px,
      linear-gradient(135deg, rgba(216, 166, 174, .24), rgba(198, 183, 218, .24));
    transition: opacity .45s ease;
  }

  #services-grid .service-card:hover::after,
  #courses-grid .course-card:hover::after {
    opacity: 1;
  }

  #services-grid .service-card-body,
  #courses-grid .course-card-body {
    position: relative;
    z-index: 2; /* 蓋在覆蓋層之上，文字維持可讀 */
    transition: transform .45s ease;
  }

  #services-grid .service-card:hover .service-card-body,
  #courses-grid .course-card:hover .course-card-body {
    transform: translateY(-4px);
  }
}

/* ========================================================================
   3. 首頁捲動引導 — hero 底部圓鈕 + 垂直細線（線高隨捲動進度增長，JS: js/brand-accents.js）
   ======================================================================== */
.lf-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.lf-scroll-cue-track {
  position: relative;
  width: 1px;
  height: 46px;
  background: rgba(216, 179, 106, .28);
}

.lf-scroll-cue-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--lf-champagne-gold, #D8B36A);
  transition: height .2s linear;
}

.lf-scroll-cue-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(216, 179, 106, .55);
  color: #D8B36A;
  font-size: .85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, transform .3s ease;
}

.lf-scroll-cue:hover .lf-scroll-cue-circle {
  background: rgba(216, 179, 106, .12);
  transform: translateY(2px);
}

@media (max-width: 480px) {
  .lf-scroll-cue {
    bottom: 16px;
  }

  .lf-scroll-cue-track {
    height: 30px;
  }
}

/* ========================================================================
   4. courses 徽章隱形 bug 修復 — courses.html markup 用 BS4 命名
      (badge-primary/badge-secondary)，custom.css 只寫了 BS5 的
      .bg-primary/.bg-secondary，兩邊對不上，白字疊透明底看不見。
      scope 限定 #courses-grid，不影響其他頁面同名 class。
   ======================================================================== */
#courses-grid .badge.badge-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
}
#courses-grid .badge.badge-secondary {
  background-color: var(--secondary-color);
  color: #fff;
}

/* ========================================================================
   5. 全站導覽 1280px 截斷既有 bug 修復 — navbar-responsive-fix.css 的斷點
      在 992-1399/1200-1366/1024-1199 三段分別設定，1280px 實測仍溢出（10 項連
      REIKI靈氣課程/魔法商品撐爆容器，document scrollWidth 1367 > 1280 viewport，
      最後一項「魔法商品」被截斷、首項「關於我」貼近 logo）。此檔載入順序在
      navbar-responsive-fix.css 之後，同選擇器 + !important 即可覆蓋其斷點值，
      不改動該檔本身。
      上限刻意訂 1919.98（原委託只寫 1440，但實測 1441-1919px 這段沒被任何既有
      斷點覆蓋、同樣溢出——1441px scrollWidth 1493、1500px scrollWidth 1514，
      MacBook Pro 預設邏輯解析度 1512px 也落在這段，是同一個「導覽截斷」bug、
      不是另一題。上限對齊既有 1920px+ 斷點的下緣，避免銜接處再開缺口。
      992/1280/1440/1500 四寬度實測皆單行完整顯示、無水平溢出（1920+ 沿用既有
      規則，未在本次重新驗證）。

      2026-07-25 二次打磨：字級從 0.9rem 調回 0.98rem（user 反饋原字級太小），
      靠縮 margin(9→6px)/padding(4→3px) 補回空間爭取行寬，非靠犧牲字級。992/1280/
      1440/1500 四寬度重新實測，皆仍單行、scrollWidth == innerWidth（無溢出）。
      下拉「免費體驗」子選單字級同步由 .9rem 微調到 .92rem，與新 nav-link 字級協調
      （見本檔第 6 節 .lf-nav-dropdown-menu a）。
   ======================================================================== */
@media (min-width: 992px) and (max-width: 1919.98px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 0.98rem !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    letter-spacing: 0 !important;
  }
}

/* ========================================================================
   6. 導覽收攏下拉「免費體驗」— 全站 5 頁共用（index/about/services/courses/oracle；
      chakra.html 是獨立沉浸頁、沒有這條 navbar，不動）。
      刻意不用 Bootstrap 的 .dropdown/.dropdown-menu/.dropdown-item/.dropdown-toggle
      class 名——custom.css:2214 已把 .dropdown-menu 強制 display:block（給站上其他
      地方用的舊規則），沿用同名 class 會讓選單變成「永遠展開」，見 memory
      css-cascade-traps.md 的核彈選擇器教訓同型雷。改用 lf-nav-dropdown* 全新命名空間。

      展開機制：桌機(≥992px) hover 展開 + :focus-within 鍵盤可達（toggle 本身可被
      focus，一 focus 即觸發 focus-within，不必等 Tab 進子選單）；純 CSS，不依賴
      Bootstrap JS 是否載入。手機(<992px)：navbar-collapse 全螢幕選單內，子選單改
      position:static 常駐展開＝縮排子項，不需要 hover 概念。
      toggle 本身是可點的真連結（href="/oracle"，即下拉展開前「流光牌卡」原本佔的
      位置），desktop 使用者多半先 hover 看到選單再點想要的項目；直接點 toggle 也會
      落在有效頁面，不是死連結。 */
.lf-nav-dropdown { position: relative; }
/* 下拉指示：實心小三角（clip-path），不用「旋轉 45° 的兩條邊框」——後者在部分字級/
   縮放下兩邊粗細不均、讀起來像一根歪斜的線（user 反饋 2026-07-27）。三角對稱、
   展開時上下翻轉（scaleY），沒有旋轉造成的視覺歪斜。 */
/* 下拉指示：用真實 <span class="lf-caret"> 而非 pseudo-element——lumina-polish.css 的
   `.navbar-nav .nav-link::after`（hover 金色底線）與 `::before`（掃光）已經把兩個 pseudo
   都佔滿了；我們的三角一旦搶用 ::after 就會與底線規則混血（繼承它的 width/gradient/
   絕對定位），渲染成一根歪斜的線漂在「免費體驗」與「部落格」之間——user 兩次反饋的
   「斜斜一根」根因就是這個 pseudo 衝突（2026-07-27 查證 css/lumina-polish.css:464,477）。 */
.lf-nav-dropdown-toggle .lf-caret {
  display: inline-block;
  width: 8px;
  height: 5px;
  margin-left: .4em;
  vertical-align: 0.12em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: .7;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}
.lf-nav-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
}

@media (min-width: 992px) {
  .lf-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 168px;
    background: var(--lf-warm-ivory, #F4EBDD);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(74, 58, 99, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 30;
  }
  .lf-nav-dropdown:hover .lf-nav-dropdown-menu,
  .lf-nav-dropdown:focus-within .lf-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .lf-nav-dropdown:hover .lf-caret,
  .lf-nav-dropdown:focus-within .lf-caret {
    transform: scaleY(-1); /* 三角上下翻＝已展開 */
    opacity: 1;
  }
  .lf-nav-dropdown-menu a {
    display: block;
    padding: .55rem 1.25rem;
    white-space: nowrap;
    font-size: .92rem; /* 與 nav-link 0.98rem 同步協調（2026-07 nav 字級調大時一併微調） */
    color: var(--lf-deep-lavender, #4A3A63);
    text-decoration: none;
  }
  .lf-nav-dropdown-menu a:hover,
  .lf-nav-dropdown-menu a:focus-visible {
    background: rgba(216, 179, 106, .14);
  }
  /* SPEC-2a 游標跟隨光暈(lumina-polish.css:522)在桌機+滑鼠+non-reduced-motion 給
     .navbar 蓋 overflow:hidden，絕對定位的下拉選單會被裁在 navbar 自己的框高內、
     hover 也「看得到 :hover 生效但看不到選單」——只在下拉真的展開時用 :has() 局部
     解除，不影響光暈效果本身（光暈用 inset:0 的 ::after，不受 overflow 影響范围）。 */
  .navbar:has(.lf-nav-dropdown:hover),
  .navbar:has(.lf-nav-dropdown:focus-within) {
    overflow: visible !important;
  }
}

@media (max-width: 991.98px) {
  .lf-nav-dropdown-menu {
    padding-left: 0;
  }
  /* 子項在手機版是常駐展開（沒有 hover 可用，且「免費體驗」本身是連結、
     做成點一下展開會與導航衝突）。視覺上要讀作「子項」而不是「已停用」——
     原本 opacity .85 + 較小字在一片粗體項目中間看起來像灰掉的按鈕（user 反饋
     2026-07-28）。改成：不降透明度、用一個 · 前綴與稍小字級表示層級，
     並補足 44px 觸控高度（原 42px 差一點）。 */
  .lf-nav-dropdown-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
    opacity: 1;
  }
  .lf-nav-dropdown-menu a::before {
    content: "·";
    margin-right: .45em;
    opacity: .55;
  }
  .lf-nav-dropdown-toggle .lf-caret {
    display: none; /* 手機版子項常駐展開，不需要展開指示箭頭 */
  }
}

/* reduced-motion：光暈維持靜態(本來就無動畫)；捲動線不追蹤進度、直接顯示滿格 */
@media (prefers-reduced-motion: reduce) {
  .lf-scroll-cue-fill {
    transition: none;
    height: 100% !important;
  }

  .lf-nav-dropdown-menu,
  .lf-nav-dropdown-toggle .lf-caret {
    transition: none;
  }

  #services-grid .service-card::after,
  #courses-grid .course-card::after,
  #services-grid .service-card-body,
  #courses-grid .course-card-body {
    transition-duration: .01ms;
  }
}

/* ---------------------------------------------------------------------------
   修站上既有 bug：tooplate-wedding-lite.css 的 @media (max-width:767px) 給
   `.custom-btn` 寫了 `margin-left: 80%; margin-bottom: 60px;`——手機上所有主按鈕
   會被推到容器右緣（80% of 335px ≈ 268px）、被擠成細條、中文字折三行，實測
   「儲存流光圖卡」只剩 67px 寬（2026-07-28 user 截圖發現、DOM 量測確認來源）。
   不改第三方樣板檔（避免連帶風險），在後載入的本檔覆蓋掉那兩個值。
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .custom-btn {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }
}