/**
 * Cassiopeia HTSprout - 基礎變數與全域樣式
 *
 * 此檔案僅包含：
 * - §1 CSS 變數系統（:root）
 * - §2 全域基礎樣式（body, headings, links）
 * - §3 容器系統（container, grid-areas）
 * - §4 工具類別（sr-only, spacing utilities）
 *
 * 元件樣式已拆分至獨立檔案：
 *   components.css, a11y-enhancements.css, news.css, article.css,
 *   events.css, home.css, page.css, responsive.css
 *
 * 載入順序：
 * 1. accessibility.css → 2. font-sizes.css → 3. user.css (本檔案)
 * 4. components.css → 5. 頁面專屬 CSS（按需載入）
 *
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_htsprout
 * @copyright   Copyright (C) 2026 HTSprout. All rights reserved.
 * @license     GNU General Public License version 2 or later
 * @version     2.0.0
 * @date        2026-03-17
 */

/* ============================================
   1. HTSprout 專案 CSS 變數系統
   ============================================ */
:root {
  /* ── Primary Blue（主要品牌色） ── */
  --htsprout-blue-50: #F0F8FD;
  --htsprout-blue-65: #E2F5F8;
  --htsprout-blue-75: #C5EBF1;
  --htsprout-blue-100: #D3E5F2;
  --htsprout-blue-200: #B5D2E6;
  --htsprout-blue-300: #79ACCF;
  --htsprout-blue-400: #5B99C4;
  --htsprout-blue-500: #3D86B8;
  --htsprout-blue-600: #2E7DB3;
  --htsprout-blue-700: #1F73AD;
  --htsprout-blue-800: #0160A1;
  --htsprout-blue-900: #054B7B;
  --htsprout-blue-1000: #03375A;

  /* ── Primary Green（次要品牌色） ── */
  --htsprout-green-50: #E9FFFA;
  --htsprout-green-100: #DEF4EF;
  --htsprout-green-200: #BADAD5;
  --htsprout-green-300: #93BDC2;
  --htsprout-green-400: #6CA0AF;
  --htsprout-green-500: #437F95;
  --htsprout-green-600: #2E6F88;
  --htsprout-green-700: #195E7B;
  --htsprout-green-800: #135B71;
  --htsprout-green-900: #0D5866;
  --htsprout-green-1000: #005251;

  /* ── Text（文字／中性色） ── */
  --htsprout-text-50: #FFFFFF;
  --htsprout-text-100: #F3F4F4;
  --htsprout-text-200: #E2E7EE;
  --htsprout-text-300: #C5CFE2;
  --htsprout-text-400: #ADB8CD;
  --htsprout-text-500: #95A1B7;
  --htsprout-text-600: #707D93;
  --htsprout-text-700: #4B586F;
  --htsprout-text-800: #303949;
  --htsprout-text-900: #272727;
  --htsprout-text-1000: #1E1E1E;

  /* ── Secondary（強調色，黃色系） ── */
  --htsprout-secondary-50: #FFEF97;
  --htsprout-secondary-100: #FFE661;
  --htsprout-secondary-200: #FFDD2B;
  --htsprout-secondary-300: #FFC83A;
  --htsprout-secondary-400: #FFB858;
  --htsprout-secondary-500: #FFAF66;

  /* ── 無障礙焦點顏色 ── */
  --focus-color: #0d6efd;

  /* ── Typography: Font Size ── */
  --htsprout-fs-56: 3.5rem;    /* Heading XXL */
  --htsprout-fs-48: 3rem;      /* Heading XL */
  --htsprout-fs-40: 2.5rem;    /* Heading L */
  --htsprout-fs-32: 2rem;      /* Heading M */
  --htsprout-fs-28: 1.75rem;   /* Heading S */
  --htsprout-fs-24: 1.5rem;    /* Heading XS */
  --htsprout-fs-20: 1.25rem;   /* Heading XXS / Body XL */
  --htsprout-fs-18: 1.125rem;  /* Body L */
  --htsprout-fs-16: 1rem;      /* Body M (base) */
  --htsprout-fs-14: 0.875rem;  /* Body S */
  --htsprout-fs-13: 0.8125rem; /* Caption L */

  /* ── Typography: Font Weight ── */
  --htsprout-fw-regular: 400;
  --htsprout-fw-medium: 500;
  --htsprout-fw-semibold: 600;
  --htsprout-fw-bold: 700;

  /* ── Typography: Line Height ── */
  --htsprout-lh-150: 1.5;     /* 大多數樣式 */
  --htsprout-lh-160: 1.6;     /* Body M(R) */

  /* 字體系統 */
  --htsprout-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  --htsprout-font-family-heading: var(--htsprout-font-family);
  --htsprout-font-size-base: 16px;
  --htsprout-line-height-base: 1.6;

  /* 間距系統 */
  --htsprout-spacing-xs: 8px;
  --htsprout-spacing-sm: 16px;
  --htsprout-spacing-md: 24px;
  --htsprout-spacing-lg: 40px;
  --htsprout-spacing-xl: 80px;

  /* 圓角 */
  --htsprout-radius-sm: 4px;
  --htsprout-radius-md: 8px;
  --htsprout-radius-lg: 12px;
  --htsprout-radius-btn: 10px;
  --htsprout-radius-xl: 20px;

  /* 陰影 */
  --htsprout-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --htsprout-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --htsprout-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* 動畫時間 */
  --htsprout-transition-fast: 150ms;
  --htsprout-transition-base: 300ms;
  --htsprout-transition-slow: 500ms;

  /* 容器最大寬度 */
  --htsprout-container-max-width: 1280px;
}

/* ============================================
   2. 全域樣式微調
   ============================================ */

/* 字體系統 - 覆寫 Cassiopeia */
body {
  font-family: var(--htsprout-font-family);
  line-height: var(--htsprout-line-height-base);
  color: var(--htsprout-text);
  background-color: var(--htsprout-blue-50);
}

/* 標題顏色 */
h1, h2, h3, h4, h5, h6 {
  color: var(--htsprout-secondary);
  margin-bottom: var(--htsprout-spacing-md);
}

/* 連結樣式 */
a {
  color: var(--htsprout-primary);
  transition: color var(--htsprout-transition-base);
}

a:hover {
  color: #0097a7;
}

a:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* ============================================
   3. 容器系統調整
   ============================================ */

/* .container-main-area — subgrid 容器：
   繼承 .site-grid 的欄軌道，內部重新宣告 grid-template-areas
   讓 sidebar / component 子元素的 grid-area 正常運作 */
.container-main-area {
  grid-area: main-area;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas:
    ". comp comp comp comp ."
    ". side-r side-r side-r side-r ."
    ". side-l side-l side-l side-l .";
}

/* 補回父主題 .site-grid > [class^="container-"] 對嵌套容器的效果 */
.container-main-area > [class^="container-"],
.container-main-area > [class*=" container-"] {
  column-gap: 1em;
  width: 100%;
  max-width: none;
}

@media (min-width: 992px) {
  .container-main-area {
    grid-template-areas: ". side-l comp comp side-r .";
  }
}

.container,
.container-xxl {
  max-width: var(--htsprout-container-max-width);
  padding-left: var(--htsprout-spacing-md);
  padding-right: var(--htsprout-spacing-md);
}

/* 覆寫父主題 template.min.css 的容器子元素 margin-top: 1em */
.container-component > :first-child,
.container-sidebar-left > :first-child,
.container-sidebar-right > :first-child,
.container-component > * + *,
.container-sidebar-left > * + *,
.container-sidebar-right > * + * {
  margin-top: 0;
}

/* ============================================
   4. 工具類別
   ============================================ */

/* 螢幕閱讀器專用（如果 Cassiopeia 沒有） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* 間距工具類別 */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--htsprout-spacing-xs); }
.mb-2 { margin-bottom: var(--htsprout-spacing-sm); }
.mb-3 { margin-bottom: var(--htsprout-spacing-md); }
.mb-4 { margin-bottom: var(--htsprout-spacing-lg); }
.mb-5 { margin-bottom: var(--htsprout-spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--htsprout-spacing-xs); }
.mt-2 { margin-top: var(--htsprout-spacing-sm); }
.mt-3 { margin-top: var(--htsprout-spacing-md); }
.mt-4 { margin-top: var(--htsprout-spacing-lg); }
.mt-5 { margin-top: var(--htsprout-spacing-xl); }

/* 新增 top-c / bottom-c grid-area */
.container-top-c {
  grid-area: top-c;
  position: relative;
}
.container-bottom-c {
  grid-area: bot-c;
  position: relative;
}

/* 覆寫 Cassiopeia 的 grid-template-areas，加入 page-header / top-c / bottom-c */
@supports (display: grid) {
  .site-grid {
    overflow: hidden;
    grid-template-areas:
      ". banner banner banner banner ."
      ". page-header page-header page-header page-header ."
      ". top-a top-a top-a top-a ."
      ". top-b top-b top-b top-b ."
      ". top-c top-c top-c top-c ."
      "main-area main-area main-area main-area main-area main-area"
      ". bot-a bot-a bot-a bot-a ."
      ". bot-b bot-b bot-b bot-b ."
      ". bot-c bot-c bot-c bot-c .";
  }

  /* 桌面版（≥992px）：側邊欄與主內容同列（由 subgrid 處理） */
  @media (min-width: 992px) {
    .site-grid {
      grid-template-areas:
        ". banner banner banner banner ."
        ". page-header page-header page-header page-header ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". top-c top-c top-c top-c ."
        "main-area main-area main-area main-area main-area main-area"
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b ."
        ". bot-c bot-c bot-c bot-c .";
    }
  }
}

/* 全寬容器內層 grid-child 修正：
   父主題 .container-top-a > * { flex: 1; margin: .5em 0 } 會衝突，
   新結構下 > * 匹配的是內層 .grid-child，margin 會覆蓋水平 auto 置中 */
.container-top-a > .grid-child,
.container-top-b > .grid-child,
.container-top-c > .grid-child,
.container-bottom-a > .grid-child,
.container-bottom-b > .grid-child,
.container-bottom-c > .grid-child {
  flex: unset;
  margin: 0 auto;
  column-gap: 1em;
}

/* 模組卡片 flex 佈局（移至 grid-child 子層級） */
.container-top-a > .grid-child > *,
.container-top-b > .grid-child > *,
.container-top-c > .grid-child > *,
.container-bottom-a > .grid-child > *,
.container-bottom-b > .grid-child > *,
.container-bottom-c > .grid-child > * {
  flex: 1;
  margin: .5em 0;
}