/*
Theme Name:   TSSCLC Child
Theme URI:    https://tssclc.org.tw
Template:     astra
Description:  臺灣中文學會 — Astra Child Theme
Author:       TSSCLC
Version:      1.0.0
Text Domain:  tssclc-child
*/

/* =====================================================
   TSSCLC 品牌色彩系統（CSS Custom Properties）
   ===================================================== */
:root {
  /* 主品牌色 */
  --tssclc-primary:        #1A3A5C;  /* 深靛藍：導覽列、標題 */
  --tssclc-primary-light:  #2A5080;  /* 較淺靛藍：hover 狀態 */
  --tssclc-primary-dark:   #0F2340;  /* 較深靛藍：強調文字 */

  /* 強調色 */
  --tssclc-accent:         #C9A84C;  /* 金色：按鈕、連結 */
  --tssclc-accent-hover:   #B8913A;  /* 深金：hover 狀態 */

  /* 輔助色 */
  --tssclc-bg-light:       #EAF0F6;  /* 淺灰藍：區塊背景 */
  --tssclc-bg-white:       #FAFAFA;  /* 近白：頁面背景 */
  --tssclc-border:         #D0DCE8;  /* 邊框色 */

  /* 文字色 */
  --tssclc-text-dark:      #2D2D2D;  /* 主文字 */
  --tssclc-text-mid:       #555555;  /* 次要文字 */
  --tssclc-text-light:     #888888;  /* 輔助文字（日期、標籤）*/

  /* 字型 */
  --tssclc-font-zh:        'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei', serif;
  --tssclc-font-en:        'Lora', 'Georgia', serif;
  --tssclc-font-ui:        'Inter', 'Noto Sans TC', sans-serif;

  /* 間距 */
  --tssclc-radius:         6px;
  --tssclc-radius-lg:      12px;
  --tssclc-shadow:         0 2px 12px rgba(26, 58, 92, 0.10);
  --tssclc-shadow-hover:   0 6px 24px rgba(26, 58, 92, 0.18);

  /* 動畫 */
  --tssclc-transition:     all 0.25s ease;
}

/* =====================================================
   Google Fonts 載入
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&family=Noto+Sans+TC:wght@400;500;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

/* =====================================================
   全域基礎樣式
   ===================================================== */
body {
  font-family: var(--tssclc-font-zh);
  color: var(--tssclc-text-dark);
  background-color: var(--tssclc-bg-white);
  -webkit-font-smoothing: antialiased;
}

/* 英文語系切換後的字型 */
:lang(en) body,
.lang-en body {
  font-family: var(--tssclc-font-en);
}

/* =====================================================
   導覽列樣式
   ===================================================== */

/* 主導覽列 */
.site-header,
.ast-primary-header-bar {
  background-color: var(--tssclc-primary) !important;
}

/* 導覽連結 */
.main-header-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > a {
  color: #ffffff !important;
  font-family: var(--tssclc-font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: var(--tssclc-transition);
}

.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a {
  color: var(--tssclc-accent) !important;
}

/* 下拉選單 */
.main-header-menu .sub-menu {
  background-color: #ffffff;
  border-top: 3px solid var(--tssclc-accent);
  box-shadow: var(--tssclc-shadow-hover);
  border-radius: 0 0 var(--tssclc-radius) var(--tssclc-radius);
}

.main-header-menu .sub-menu .menu-item > a {
  color: var(--tssclc-primary) !important;
  font-size: 13px;
  padding: 10px 20px;
  transition: var(--tssclc-transition);
}

.main-header-menu .sub-menu .menu-item > a:hover {
  color: var(--tssclc-accent) !important;
  background-color: var(--tssclc-bg-light);
}

/* 頂端工具列 */
.ast-above-header-bar {
  background-color: var(--tssclc-primary-dark) !important;
}

.ast-above-header .ast-builder-menu .menu-item > a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px;
}

/* =====================================================
   按鈕樣式
   ===================================================== */
.ast-button,
.button,
input[type="submit"],
button[type="submit"],
.wp-element-button {
  background-color: var(--tssclc-accent) !important;
  color: #ffffff !important;
  border: none;
  border-radius: var(--tssclc-radius);
  font-family: var(--tssclc-font-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  transition: var(--tssclc-transition);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.30);
}

.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--tssclc-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.45);
}

/* 次要按鈕（外框型）*/
.btn-outline {
  background-color: transparent !important;
  border: 2px solid var(--tssclc-accent) !important;
  color: var(--tssclc-accent) !important;
}

.btn-outline:hover {
  background-color: var(--tssclc-accent) !important;
  color: #ffffff !important;
}

/* =====================================================
   文章卡片（最新消息列表）
   ===================================================== */
.post-card {
  background: #ffffff;
  border-radius: var(--tssclc-radius-lg);
  box-shadow: var(--tssclc-shadow);
  overflow: hidden;
  transition: var(--tssclc-transition);
  border: 1px solid var(--tssclc-border);
}

.post-card:hover {
  box-shadow: var(--tssclc-shadow-hover);
  transform: translateY(-3px);
}

.post-card__category {
  display: inline-block;
  background-color: var(--tssclc-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.post-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tssclc-primary-dark);
  line-height: 1.5;
  margin-bottom: 8px;
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
  transition: var(--tssclc-transition);
}

.post-card__title a:hover {
  color: var(--tssclc-accent);
}

.post-card__date {
  font-size: 12px;
  color: var(--tssclc-text-light);
  font-family: var(--tssclc-font-ui);
}

/* =====================================================
   頁面標題區（Page Hero）
   ===================================================== */
.ast-breadcrumbs-wrapper,
.ast-page-title-wrap {
  background: linear-gradient(135deg, var(--tssclc-primary) 0%, var(--tssclc-primary-light) 100%);
  padding: 48px 0;
}

.ast-page-title-wrap .entry-title,
.ast-breadcrumbs-wrapper .ast-page-title {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
}

/* =====================================================
   統計數字帶
   ===================================================== */
.tssclc-stats-band {
  background: linear-gradient(135deg, var(--tssclc-primary-dark) 0%, var(--tssclc-primary) 100%);
  padding: 60px 0;
  text-align: center;
}

.tssclc-stats-band .stat-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--tssclc-accent);
  font-family: var(--tssclc-font-en);
  line-height: 1;
}

.tssclc-stats-band .stat-label {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
  letter-spacing: 0.05em;
}

/* =====================================================
   頁尾（Footer）
   ===================================================== */
.site-footer,
.ast-small-footer {
  background-color: var(--tssclc-primary-dark) !important;
  color: rgba(255,255,255,0.75);
}

.site-footer a {
  color: var(--tssclc-accent) !important;
  transition: var(--tssclc-transition);
}

.site-footer a:hover {
  color: #ffffff !important;
}

.footer-widget-area {
  background-color: var(--tssclc-primary);
  padding: 48px 0 32px;
}

.footer-widget-area .widget-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--tssclc-accent);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* =====================================================
   響應式調整
   ===================================================== */
@media (max-width: 768px) {
  .tssclc-stats-band .stat-number {
    font-size: 36px;
  }

  .ast-page-title-wrap .entry-title {
    font-size: 24px;
  }
}

/* =====================================================
   WPForms 樣式調整
   ===================================================== */
.wpforms-form .wpforms-field-label {
  font-weight: 600;
  color: var(--tssclc-text-dark);
  font-family: var(--tssclc-font-ui);
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea,
.wpforms-form select {
  border: 1px solid var(--tssclc-border);
  border-radius: var(--tssclc-radius);
  transition: var(--tssclc-transition);
}

.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form textarea:focus {
  border-color: var(--tssclc-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.10);
  outline: none;
}