/* =====================================================================
   匯蝶公益 — v6 iplsa 風格首頁（v20261022）
   掛載於 style2.css → v5.css 之後，僅覆寫需要改動的部分。
   設計基調：參考 iplsa.net（國際公益法律服務協會，同體系）首頁——
             白底 Logo 頁頭／純文字橫排導覽／彩色扇形主視覺卡／淺灰頁腳
   結構：頂部工具列（無語言切換）→ 白底 Logo 標頭（聯繫方式＋捐款）
         → 純文字橫排導覽 8 項（兩組次選單）→ 扇形主視覺卡 5 張（僅首頁）
         → 淺灰頁腳
   首頁只保留五張扇形卡（關於我們／免費法律諮詢／一人一故事／社區活動／
   最新消息），其餘區塊（傳單／社區活動列表／記者招待會）已從首頁移除，
   站內頁面仍可經選單或頂部工具列進入。
   扇形卡圖片：display/images/cards/11.jpg–55.jpg（由使用者自製的
   11.png–55.png 母版轉出，700×1400；載入失敗自動回退彩色漸層色塊，不破圖）
   ===================================================================== */

:root{
	--bf-blue:        #226891;   /* 主藍（網站原主色） */
	--bf-blue-dark:   #1A5470;   /* 深一階（hover） */
	--bf-blue-soft:   #E7F1F7;   /* 淺藍底 */
	--bf-blue-softer: #F4F9FC;   /* 更淺藍底 */
	--bf-ink:         #23313B;   /* 正文深灰藍 */
	--bf-muted:       #5E7285;   /* 次要文字 */
	--bf-line:        #DCE6EE;   /* 分隔線 */
}

/* ---------- 0. 基底：白底（iplsa 極簡） ---------- */
body{
	background: #FFFFFF !important;
	background-image: none !important;
}

/* ---------- 1. 語言切換已移除（v6，使用者要求） ---------- */
#lang{ display: none !important; }

/* ---------- 2. 純文字橫排導覽（iplsa 風格，置於 Logo 標頭下方） ---------- */
.bf-nav{
	background: #FFFFFF;
	border-top: 1px solid #F0F0F0;
	border-bottom: 1px solid #E6E6E6;
	position: relative;
}
.bf-nav-list{
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
}
.bf-nav-list > li{ position: relative; }
.bf-nav-list > li > a{
	display: block;
	font-size: 14px;
	color: #333333;
	padding: 13px 14px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	text-decoration: none !important;
	transition: color .15s;
}
.bf-nav-list > li > a:hover{ color: var(--bf-blue); }
.bf-nav-list > li > a.active{
	color: var(--bf-blue);
	font-weight: 700;
	border-bottom-color: var(--bf-blue);
}
/* 原版以 style='font-weight:bold' 標注重點計劃，這裡保留加粗 */
.bf-nav-list > li > a[style*="bold"]{ font-weight: 700; }
.bf-nav-list > li.bf-has-sub > a::after{ content: " ▾"; font-size: 10px; color: #999999; }

/* 次選單（寬屏 hover 展開） */
.bf-sub{
	list-style: none;
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 210px;
	margin: 0;
	padding: 4px 0;
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	border-top: 2px solid var(--bf-blue);
	box-shadow: 0 8px 20px rgba(0,0,0,.10);
	z-index: 60;
}
.bf-nav-list > li:hover .bf-sub{ display: block; }
.bf-sub li a{
	display: block;
	font-size: 13px;
	color: #444444;
	padding: 9px 18px;
	white-space: nowrap;
	text-decoration: none !important;
}
.bf-sub li a:hover{ background: #F2F8FB; color: var(--bf-blue); }
.bf-sub li a.active{ color: var(--bf-blue); font-weight: 700; }

/* 手機版選單按鈕（原生的，不依賴 jQuery/CDN） */
.bf-nav-toggle{
	display: none;
	background: none;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	font-size: 14px;
	color: #333333;
	padding: 8px 14px;
	margin: 8px 0;
	cursor: pointer;
	font-family: inherit;
}

/* ---------- 3. 扇形主視覺（iplsa 首頁標誌性元素，僅首頁） ---------- */
.bf-hero{
	margin: 0 -28px;                 /* 抵消 .bf-wrap 左右 padding，背景全寬 */
	padding: 56px 28px 64px;
	background:
		radial-gradient(1200px 420px at 50% -140px, #F4F9FC 0%, rgba(244,249,252,0) 70%),
		#FFFFFF;
}
.art-content-layout-row > .bf-hero{ flex: 1 1 100%; min-width: 0; }
.bf-fan{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 540px;
	position: relative;
}
.bf-fan-card{
	position: relative;
	display: block;
	width: 236px;
	height: 470px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(20,50,70,.22);
	transition: transform .25s ease, box-shadow .25s ease;
	background: #FFFFFF;
}
.bf-fan-card:hover{
	transform: rotate(0deg) translateY(-10px) !important;
	box-shadow: 0 22px 44px rgba(20,50,70,.28);
	z-index: 20;
}
.bf-fan-card.fc-1{
	transform: rotate(-8deg) translateY(14px);
	z-index: 2;
	margin-right: -12px;
	background: linear-gradient(158deg,#8EC95C 0%,#4DA34D 55%,#2F8F4E 100%);
}
.bf-fan-card.fc-2{
	transform: rotate(-4deg);
	z-index: 3;
	margin-right: -12px;
	background: linear-gradient(158deg,#4B9EDE 0%,#2F7CB8 55%,#226891 100%);
}
.bf-fan-card.fc-3{
	transform: translateY(-26px);
	z-index: 6;
	width: 250px;
	height: 500px;
	box-shadow: 0 20px 46px rgba(20,50,70,.30);
}
.bf-fan-card.fc-4{
	transform: rotate(4deg);
	z-index: 3;
	margin-left: -12px;
	background: linear-gradient(158deg,#F2599B 0%,#E0357F 55%,#B7245F 100%);
}
.bf-fan-card.fc-5{
	transform: rotate(8deg) translateY(14px);
	z-index: 2;
	margin-left: -12px;
	background: linear-gradient(158deg,#8E6CD4 0%,#6A45B0 55%,#4B2F86 100%);
}
/* 卡片圖片（填滿裁切；載入失敗時 img 隱藏 → 顯示上面的彩色漸層色塊） */
.bf-fan-img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- 4. 頁腳（淺灰，iplsa 風格；覆寫 v5 的深藍底） ---------- */
.art-footer{
	background: #EEF1F4 !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	margin-top: 10px !important;
	box-shadow: none !important;
}
.art-footer:before, .art-footer:after{ display: none !important; }
.art-footer-body{ padding: 26px 0 30px; }
.art-footer-text{
	padding: 0;
	text-align: center;
	min-height: 0;
}
.art-footer .art-footer-text p{
	color: #667788 !important;
	font-size: 12.5px;
	line-height: 1.8;
	margin: 0;
}
.art-footer-body a, .art-footer-body a:link, .art-footer-body a:visited{
	color: #556677 !important;
	text-decoration: none;
}
.art-footer-body a:hover{
	color: var(--bf-blue) !important;
	text-decoration: underline;
}
.bf-foot-contact{ margin-top: 4px; }
.bf-foot-contact a{ color: var(--bf-blue) !important; }

/* ---------- 5. 響應式 ---------- */
@media (max-width: 1080px){
	.bf-nav-list > li > a{ padding: 13px 10px; font-size: 13px; }
	.bf-fan-card{ width: 200px; height: 400px; }
	.bf-fan-card.fc-3{ width: 212px; height: 424px; }
}
@media (max-width: 960px){
	/* 選單收為漢堡（原生 JS 開合，見 header.php） */
	.bf-nav-toggle{ display: block; }
	.bf-nav-list{ display: none; flex-direction: column; padding-bottom: 10px; }
	.bf-nav-list.open{ display: flex; }
	.bf-nav-list > li > a{
		border-bottom: none;
		padding: 12px 4px;
		border-top: 1px solid #F0F0F0;
	}
	.bf-nav-list > li > a.active{ border-bottom: none; }
	.bf-sub{
		position: static;
		display: block;
		border: none;
		border-top: 1px solid #F0F0F0;
		box-shadow: none;
		padding: 0 0 6px 18px;
		min-width: 0;
	}
	/* 扇形卡改直向堆疊 */
	.bf-hero{ padding: 40px 18px 48px; margin: 0 -18px; }
	.bf-fan{ flex-direction: column; align-items: center; height: auto; gap: 20px; }
	.bf-fan-card,
	.bf-fan-card.fc-1, .bf-fan-card.fc-2, .bf-fan-card.fc-4, .bf-fan-card.fc-5{
		transform: none;
		margin: 0;
		width: min(340px, 86vw);
		aspect-ratio: 1 / 2;
		height: auto;
	}
	.bf-fan-card.fc-3{
		transform: none;
		width: min(340px, 86vw);
		aspect-ratio: 1 / 2;
		height: auto;
	}
}
@media (max-width: 640px){
	.bf-topbar-inner{ justify-content: center; text-align: center; }
	.bf-top-actions{ justify-content: center; }
	.bf-contact{ gap: 10px; }
	.bf-contact-item .bf-addr{ display: none; }
}