/*
 Theme Name:   七星環境綠化基金會-Macchiato瑪奇朵佈景主題 Child
 Theme URI:    https://yourwebsite.com/macchiato
 Description:  Macchiato 是一個現代、靈活且易於客製化的 WordPress 佈景主題，整合了 Bootstrap 5，支援 Elementor 頁面編輯器，同時保持程式碼簡潔和高效能。適合用於各種網站專案的快速開發。
 Author:       瑪奇朵
 Author URI:   https://yourwebsite.com
 Template:     usagimori-theme-macchiato
 Version:      0.3.0
 License:      MIT
 License URI:  https://mit-license.org/
 Text Domain:  macchiato
*/

/*
 自訂 CSS
*/
/* ============================= */
/* 基礎變數與全域設定 */
/* ============================= */
:root {
  --primary: #acd496;
  --secondary: #a2d2ff;
  --accent: #bce4a3;
  --text-primary: #acd496;
  --dark: #4a4e69;
  --light: #f8f9fa;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bs-primary-rgb: 172, 212, 150;
  --bs-info-rgb: 51, 136, 204;
  --bs-link-color: #acd496;
  --bs-body-font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體",
    sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", "Noto Sans TC", "Microsoft JhengHei",
    "微軟正黑體", monospace;
}

body {
  overflow-x: hidden;
  color: var(--gray-700);
  line-height: 1.7;
  background-color: #ffffff;
}

/* ---------- 首頁全螢幕背景圖 ---------- */
.homepage-hero {
  width: 100%;
  /* 最小高度佔滿視窗，高度自動延伸，允許下面有內容或空白可以滾動 */
  min-height: 100vh;
  background: url("homepage-desktop.jpg") no-repeat center center;
  background-size: cover;
}

/* 手機版換圖 */
@media (max-width: 768px) {
  .homepage-hero {
    background-image: url("homepage-mobile.jpg");
  }
}

#page-header {
  /* 放射狀漸層背景 */
  background-color: #a8d8b9; /* 備用底色 */
  background-image: radial-gradient(
    /* 形狀和位置：在左上角的一個圓形 */
    circle at top left, 
    /* 顏色1: 溫暖的奶油黃，作為光暈的核心 */
    #fffbe6, 
    /* 顏色2: 柔和的薄荷綠，作為環境色 */
    #a8d8b9
  );

  /* 陽光區域顏色淺，建議用深色文字 */
  color: #1a4d2e; /* 沉穩的深綠色 */

}


.page-title {
	font-size: 1.5rem;
}

.card-title {
	font-size: 16px;
}

.page-content-container, .single-post-container, .chi-garden-page-container, .page-events-container {
	background: white; 
}

.pagination .page-item.active .page-link {
	color: white; 
}

.d-block img.wp-post-image {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.single .entry-title {
	font-size: 1.8rem; 
	margin-bottom: 1rem; 
}

.intro .area_body.content > .mission .number_circle {
	margin-right: 20px; 
}