/*
 * site.css — 前台樣式（搭配 Bootstrap 5.3.8）；2026-09-30 翼王智導 ewGuide 改版
 * 設計語彙取自「室內指標（wayfinding）」：深墨綠藍的指標面板、琥珀色的路線與停靠點。
 * 對比：內文 #14303b／白 ≈ 13:1；次要文字 #4f6069／白 ≈ 6.4:1；連結 #0b5a7a／白 ≈ 7.4:1。
 */
:root {
	--ew-ink: #14303b;
	--ew-teal: #0b5a7a;
	--ew-teal-dark: #073f56;
	--ew-amber: #f0a202;
	--ew-paper: #f5f7f8;
	--ew-muted: #4f6069;
	--ew-line: #d6dfe3;
	--bs-body-color: #14303b;
	--bs-body-bg: #f5f7f8;
	--bs-link-color: #0b5a7a;
	--bs-link-color-rgb: 11, 90, 122;
	--bs-link-hover-color: #073f56;
	--bs-link-hover-color-rgb: 7, 63, 86;
	--bs-primary: #0b5a7a;
	--bs-primary-rgb: 11, 90, 122;
}

body.ew-site {
	font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.75;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body.ew-site > main { flex: 1 0 auto; }

.ew-skip { position: absolute; left: .75rem; top: .75rem; z-index: 2000; background: #fff; color: #000;
	padding: .5rem 1rem; border-radius: .375rem; border: 3px solid var(--ew-amber); }

/* 焦點可見：琥珀色外框，深色與淺色底都清楚 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--ew-amber) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

/* ── 指標面板式頁首 ── */
.ew-masthead { background: var(--ew-ink); color: #fff; }
.ew-masthead a { color: #fff; }
.ew-masthead .ew-title { font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); font-weight: 700; letter-spacing: .04em; margin: 0; line-height: 1.3; }
.ew-masthead .ew-sub { color: #c9d7dc; font-size: .95rem; margin: .15rem 0 0; }
.ew-masthead .ew-logo { max-height: 56px; width: auto; }
.ew-member-link { font-size: .95rem; text-decoration: none; border: 1px solid rgba(255,255,255,.45); border-radius: 2rem; padding: .3rem .9rem; white-space: nowrap; }
.ew-member-link:hover { background: rgba(255,255,255,.12); color: #fff; }

/* 路線（整頁唯一的強調元素）：一條琥珀色路線，停靠點代表 beacon 位置 */
.ew-route { display: block; width: 100%; height: 22px; }
.ew-route line { stroke: var(--ew-amber); stroke-width: 3; }
.ew-route circle { fill: var(--ew-ink); stroke: var(--ew-amber); stroke-width: 3; }
.ew-route circle.is-here { fill: var(--ew-amber); }

/* 主選單 */
.ew-nav { background: #fff; border-bottom: 1px solid var(--ew-line); }
.ew-nav .nav-link { color: var(--ew-ink); font-weight: 500; padding: .85rem 1rem; }
.ew-nav .nav-link:hover { color: var(--ew-teal); }
.ew-nav .nav-link.active { color: var(--ew-teal); box-shadow: inset 0 -3px 0 var(--ew-teal); }
.ew-nav .dropdown-menu { border-radius: .25rem; border-color: var(--ew-line); }
.ew-nav .dropdown-item.active, .ew-nav .dropdown-item:active { background: var(--ew-teal); }

/* 內容區 */
.ew-main { max-width: 1100px; }
.ew-page-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 700; margin: 0 0 1.25rem; }
.breadcrumb { font-size: .9rem; }
.ew-prose { max-width: 42em; }
.ew-prose img { max-width: 100%; height: auto; }

/* 指標列：文章清單（一欄） */
.ew-sign { display: block; background: #fff; border: 1px solid var(--ew-line); border-left: 6px solid var(--ew-teal);
	padding: 1.1rem 1.25rem; margin-bottom: .9rem; color: inherit; text-decoration: none; }
a.ew-sign:hover { border-left-color: var(--ew-amber); background: #fbfcfd; }
.ew-sign h2, .ew-sign h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .35rem; color: var(--ew-ink); }
.ew-sign p { margin: 0; color: var(--ew-muted); }

/* 行事曆（indexCalendar.php）：固定七欄，手機上活動標題截斷，完整內容看下方「本月活動」清單 */
.ew-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.ew-cal-wrap { padding: 1px; }	/* 捲動容器會裁掉 border-collapse 溢出一半的外框，留 1px 讓外框完整 */
.ew-cal { table-layout: fixed; --bs-table-bg: #fff; margin-bottom: 0; --bs-border-color: #c9d5da; border: 1px solid #c9d5da; }
.ew-cal th { text-align: center; font-weight: 600; background: #e3ecf0; color: var(--ew-ink); }
.ew-cal td { height: 5.5rem; vertical-align: top; padding: .3rem; }
.ew-cal td.ew-cal-weekend { background: #eef4f6; }	/* 週末：淡藍灰，與頁面底色 --ew-paper 區隔 */
.ew-cal .ew-cal-out .ew-cal-day { color: var(--ew-muted); font-weight: 400; }
.ew-cal-day { display: inline-block; min-width: 1.8em; font-weight: 600; text-align: center; }
.ew-cal .ew-cal-today .ew-cal-day { background: var(--ew-amber); color: var(--ew-ink); border-radius: 50%; }
.ew-cal-ev { display: block; margin-top: .2rem; padding: .1rem .3rem; font-size: .85rem; line-height: 1.3;
	color: var(--ew-teal-dark); background: #e3eef3; border-left: 3px solid var(--ew-teal);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ew-cal-ev:hover { background: #d2e4ec; }
.ew-cal-list li { border-left: 4px solid var(--ew-teal); padding: .5rem .9rem; margin-bottom: .75rem; background: #fff; }
.ew-cal-list li:target { border-left-color: var(--ew-amber); }
.ew-cal-date { color: var(--ew-muted); font-size: .9rem; }
@media (max-width: 575.98px) {
	.ew-cal td { height: 4rem; padding: .15rem; }
	.ew-cal th { font-size: .8rem; padding: .3rem 0; }
	.ew-cal-ev { font-size: .7rem; padding: 0 .15rem; }
}
.ew-sign .ew-more { color: var(--ew-teal); font-weight: 500; white-space: nowrap; }

/* 多欄版型：指標卡（上方色帶） */
.ew-tile { background: #fff; border: 1px solid var(--ew-line); border-top: 5px solid var(--ew-teal); height: 100%; display: flex; flex-direction: column; }
.ew-tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ew-tile .ew-tile-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ew-tile h2, .ew-tile h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ew-tile p { color: var(--ew-muted); margin: 0; }
.ew-tile .mt-auto a { font-weight: 500; }
.ew-tile.is-featured { border-top-color: var(--ew-amber); }

/* 首頁導言 */
.ew-intro { background: #fff; border: 1px solid var(--ew-line); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.ew-intro p { margin: 0; color: var(--ew-muted); max-width: 46em; }

/* 橫幅 */
.ew-banner .carousel-item img { width: 100%; max-height: 420px; object-fit: cover; }
.ew-banner .carousel-caption { background: rgba(20, 48, 59, .78); left: 0; right: 0; bottom: 0; padding: .6rem 1rem; }

/* 表單卡 */
.ew-form-card { background: #fff; border: 1px solid var(--ew-line); padding: 1.5rem; max-width: 640px; }
.form-label { font-weight: 600; }

/* 頁尾 */
.ew-footer { background: var(--ew-ink); color: #dbe6ea; font-size: .95rem; }
.ew-footer a { color: #fff; }
.ew-footer .ew-foot-title { color: #fff; font-weight: 700; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
	.carousel-item { transition: none !important; }
}

/* 次要按鈕與次要文字：加深以達 WCAG AA 對比（淺灰底上 Bootstrap 預設值不足 4.5:1） */
.btn-outline-secondary {
	--bs-btn-color: #4a555c; --bs-btn-border-color: #6c7a82;
	--bs-btn-hover-bg: #4a555c; --bs-btn-hover-border-color: #4a555c; --bs-btn-hover-color: #fff;
}
.text-body-secondary { color: #4f6069 !important; }
/* 主要按鈕沿用站台主色（Bootstrap 預設 #0d6efd 外框按鈕在淺灰底對比不足） */
.btn-primary {
	--bs-btn-bg: #0b5a7a; --bs-btn-border-color: #0b5a7a;
	--bs-btn-hover-bg: #073f56; --bs-btn-hover-border-color: #073f56;
	--bs-btn-active-bg: #073f56; --bs-btn-active-border-color: #073f56;
}
.btn-outline-primary {
	--bs-btn-color: #0b5a7a; --bs-btn-border-color: #0b5a7a;
	--bs-btn-hover-bg: #0b5a7a; --bs-btn-hover-border-color: #0b5a7a; --bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #073f56; --bs-btn-active-border-color: #073f56;
}
/* 表格捲動容器要設定定位：表格內 visually-hidden 的 caption 是 position:absolute，
   否則會跳出 overflow 容器、把整頁撐寬造成手機版水平捲動 */
.table-responsive { position: relative; }
/* 輪播：說明文字列留出下方空間給指示點，兩者不重疊 */
.ew-banner .carousel-caption { padding: .55rem 1rem 1.9rem; }
.ew-banner .carousel-caption p { font-size: 1.05rem; }
.ew-banner .carousel-indicators { margin-bottom: .45rem; }

/* 焦點外框改雙色（2026-09-30 無障礙審查回饋）：琥珀色 #f0a202 對白底只有 2.1:1，未達 WCAG 1.4.11 的 3:1。
   改為「深色實線外框（對白底 ≥ 12:1）＋琥珀色外光暈（對深色頁首 ≥ 6:1）」，淺色與深色背景都清楚。 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, [tabindex]:focus-visible, .ql-editor:focus-visible {
	outline: 3px solid #14303b !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #f0a202 !important;
}