/* ==========================================================
   Yvette Growth NLP — 全站共用 UI 強化層
   ----------------------------------------------------------
   原則：不改品牌色系（橘金暖調），只做「一致性 + 體驗 + 精緻度」。
   這支檔案在各頁內嵌 CSS 之後載入，用來統一與覆寫。
   ========================================================== */

:root{
  --ui-radius-sm: 8px;
  --ui-radius:    14px;
  --ui-radius-lg: 22px;
  --ui-shadow-1: 0 1px 2px rgba(26,22,20,.04), 0 2px 8px rgba(26,22,20,.04);
  --ui-shadow-2: 0 2px 4px rgba(26,22,20,.04), 0 12px 28px -12px rgba(26,22,20,.14);
  --ui-shadow-3: 0 4px 8px rgba(26,22,20,.05), 0 28px 56px -24px rgba(26,22,20,.22);
  --ui-ease: cubic-bezier(.22,.61,.36,1);
  --ui-nav-h: 64px;
}

/* ---------- 全站基礎手感 ---------- */

/* 錨點捲動時不被固定選單擋住 */
html{ scroll-padding-top: calc(var(--ui-nav-h) + 16px); }

/* 鍵盤操作可見的焦點框（滑鼠點擊時不出現，不干擾視覺） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--orange, #E87722);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 手機上避免橫向溢出造成左右晃動 */
body{ overflow-x: hidden; }

/* 圖片載入前不要撐破版面 */
img{ max-width: 100%; height: auto; }

/* 尊重系統「減少動態效果」設定（前庭敏感者友善） */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 文字選取沿用品牌色 */
::selection{ background: #FCE3B8; color: #1A1614; }

/* 捲軸細一點、暖色調（桌面 Chrome/Edge） */
@media (min-width: 941px){
  ::-webkit-scrollbar{ width: 10px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{
    background: #E4D7C4; border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background: #D6C3A8; background-clip: content-box; }
}

/* ==========================================================
   導覽列
   ========================================================== */

nav#nav{
  transition: background .3s var(--ui-ease),
              box-shadow .3s var(--ui-ease),
              border-color .3s var(--ui-ease);
}

/* 捲動後選單更明確浮起，內容不會糊在一起 */
nav#nav.scrolled{
  background: rgba(255,251,244,.92);
  box-shadow: 0 1px 0 rgba(233,223,209,.9), 0 10px 30px -20px rgba(26,22,20,.28);
}

/* 目前所在頁面高亮 */
nav .links a.active{
  color: var(--orange-deep, #C85A15);
  font-weight: 500;
}
nav .links a.active::after{
  width: 100%;
  background: var(--orange, #E87722);
}

/* 下拉選單開合更順 */
.nav-dropdown-menu{
  transition: opacity .22s var(--ui-ease),
              transform .22s var(--ui-ease),
              visibility .22s;
}
.nav-dropdown-menu a{ transition: background .18s var(--ui-ease), color .18s var(--ui-ease); }

/* ---------- 手機版導覽列 ---------- */
@media (max-width: 940px){

  nav#nav{ padding: 12px 18px; }

  /* 選單面板：收合時完全不佔空間（含 padding），展開時才撐開 */
  nav .links{
    top: var(--ui-nav-h);
    background: var(--bg, #FFFBF4);
    box-shadow: none;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 18px;
    padding-right: 18px;
    overflow: hidden;
    border-bottom-width: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: max-height .35s var(--ui-ease),
                padding .35s var(--ui-ease),
                box-shadow .35s var(--ui-ease);
  }
  nav .links.open{
    max-height: calc(100vh - var(--ui-nav-h));
    max-height: calc(100dvh - var(--ui-nav-h));
    padding-top: 8px;
    padding-bottom: 20px;
    overflow-y: auto;
    border-bottom-width: 1px;
    box-shadow: 0 18px 40px -18px rgba(26,22,20,.35);
  }

  /* 觸控區加大到好按的高度，字也放大一級 */
  nav .links > a,
  nav .nav-dropdown > .nav-dropdown-toggle{
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 16px;
    letter-spacing: .05em;
  }
  nav .links > a{ padding: 14px 2px; }
  nav .nav-dropdown{ padding: 0; }
  nav .nav-dropdown > .nav-dropdown-toggle{ padding: 14px 2px; width: 100%; }

  /* 手指按下去有回饋 */
  nav .links > a:active,
  nav .nav-dropdown-toggle:active,
  nav .nav-dropdown-menu a:active{
    background: var(--bg-warm, #FCF4E6);
    border-radius: var(--ui-radius-sm);
  }

  /* 目前頁面：左側橘線標記，一眼知道自己在哪 */
  nav .links > a.active{
    color: var(--orange-deep, #C85A15);
    box-shadow: inset 3px 0 0 var(--orange, #E87722);
    padding-left: 12px;
    background: rgba(252,244,230,.6);
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
  }

  /* 課程子選單：縮排 + 分隔，層級關係清楚 */
  .nav-dropdown-menu{
    width: 100%;
    max-width: 100%;
    background: var(--bg-warm, #FCF4E6);
    border-radius: var(--ui-radius-sm);
    margin-top: 4px;
  }
  .nav-dropdown-menu a{ min-height: 52px; justify-content: center; padding: 12px 16px; }
  .nav-dropdown.open .nav-dropdown-menu{ max-height: 600px; margin-bottom: 12px; }

  /* 關鍵：手機版原本看不到「加入 LINE」，改成選單底部的主要按鈕 */
  nav .cta-nav{
    display: none;                 /* 收合狀態仍隱藏，避免擠壓標題 */
  }
  nav .links .cta-nav-mobile{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    min-height: 54px;
    padding: 15px 22px;
    border-radius: 999px;
    background: var(--ink, #1A1614);
    color: var(--bg, #FFFBF4);
    font-size: 15px;
    letter-spacing: .06em;
    text-decoration: none;
    border-bottom: none;
    box-shadow: var(--ui-shadow-2);
  }
  nav .links .cta-nav-mobile:active{
    background: var(--orange-deep, #C85A15);
    color: #fff;
  }
  nav .links .cta-nav-mobile::after{ display: none; }

  /* 漢堡按鈕觸控區加大（視覺大小不變） */
  .nav-toggle{
    width: 44px; height: 44px;
    margin-right: -6px;
  }
}

/* 桌面版不顯示手機專用的 LINE 按鈕 */
@media (min-width: 941px){
  nav .links .cta-nav-mobile{ display: none !important; }
}

/* 手機選單展開時的背景遮罩：聚焦選單、點一下即關閉 */
.nav-scrim{
  position: fixed;
  inset: 0;
  background: rgba(26,22,20,.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ui-ease), visibility .28s;
  z-index: 90;
}
.nav-scrim.show{ opacity: 1; visibility: visible; }
@media (min-width: 941px){ .nav-scrim{ display: none; } }

/* 選單開啟時鎖住背景捲動，手指不會滑到底層內容 */
body.nav-open{ overflow: hidden; }

/* ==========================================================
   卡片與按鈕的精緻度
   ========================================================== */

/* 常見卡片類元件統一陰影層次與抬升手感 */
.post-card, .term-card, .course-card, .service-card,
.testimonial-card, .t-card, .card{
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-1);
  transition: transform .3s var(--ui-ease),
              box-shadow .3s var(--ui-ease),
              border-color .3s var(--ui-ease);
}

@media (hover: hover) and (min-width: 941px){
  .post-card:hover, .term-card:hover, .course-card:hover,
  .service-card:hover, .testimonial-card:hover, .t-card:hover, .card:hover{
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-3);
  }
}

/* 觸控裝置：按下去縮一下，取代 hover 回饋 */
@media (hover: none){
  .post-card:active, .term-card:active, .course-card:active,
  .service-card:active, .testimonial-card:active, .t-card:active, .card:active{
    transform: scale(.985);
  }
}

/* 按鈕點擊回饋 */
.cta, .btn, .cta-nav, .cta-primary, .cta-secondary{
  transition: background .25s var(--ui-ease),
              color .25s var(--ui-ease),
              transform .15s var(--ui-ease),
              box-shadow .25s var(--ui-ease);
}
.cta:active, .btn:active, .cta-nav:active,
.cta-primary:active, .cta-secondary:active{ transform: scale(.97); }

/* 所有可點元素在觸控時不要有藍色高亮方塊 */
a, button{ -webkit-tap-highlight-color: rgba(232,119,34,.12); }

/* ==========================================================
   手機閱讀體驗
   ========================================================== */
@media (max-width: 720px){

  /* 內文行距與字級：長文在手機上更好讀 */
  body{ font-size: 16px; line-height: 1.85; }

  /* 標題在窄螢幕不要爆版 */
  h1, h2, h3{
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
  }

  /* 段落之間留呼吸 */
  .post-body p, article p{ margin-bottom: 1.15em; }

  /* 表格可以橫向捲，不撐破版面 */
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 觸控目標最小 44px（Apple HIG 建議值） */
  .links a, .footer a, .tag, .chip, .cat-pill{ min-height: 44px; }
}

/* 頁尾連結在手機上好按 */
@media (max-width: 720px){
  footer a{ display: inline-block; padding: 6px 0; }
}