/* yunfei.world 搬遷：對齊原站配色（紅色頁首、金色點綴、米色頁尾）— 2026-09-16 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
body{font-family:"Noto Sans TC","Noto Sans",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif!important;color:#011b2f!important}
/* 頁首：紅色帶、白字選單 */
nav.navbar,nav.navbar .navi-item,.content.nav-logo,.content.nav-text{background:#d92922!important;border-color:#d92922!important}
nav.navbar{padding-top:10px!important;padding-bottom:6px!important}
.content.nav-logo>*:not(nav){background:#fff}
nav.navbar .naviMain a span,nav.navbar .naviMain a,nav.navbar .nav-search-toggle a,nav.navbar .navi-item a{color:#fff!important}
nav.navbar .naviMain a:hover span{color:#ffe08a!important}
nav.navbar .naviMain ul ul a span,nav.navbar .naviMain ul ul a,nav.navbar .dropdown-menu a,nav.navbar .dropdown-menu a.dropdown-item{color:#222!important}
nav.navbar .dropdown-menu a:hover,nav.navbar .dropdown-menu a.dropdown-item:hover{color:#d92922!important;background:#fdf1f0!important}
nav.navbar .navbar-brand img{max-height:88px!important;width:auto!important}
.mobile-menu,.mobile-menu .mobile-btn a{background:#d92922!important;color:#fff!important}
.mobile-menu .hamburger span{background:#fff!important}
/* 連結與標題 */
a{color:#be1a1a}
a:hover{color:#d92922}
h1,h2,h3{color:#222!important}
.btn-primary,.btn-primary:hover,.btn-primary:focus{background:#d92922!important;border-color:#d92922!important;color:#fff!important}
/* 頁尾：米色底、深字 */
footer{background:#e9dfcf!important;color:#011b2f!important}
footer a,footer h4,footer .small-title,footer li{color:#011b2f!important}
footer .copyright{background:#dccdb4!important;color:#3f3f3f!important}
footer .copyright h5,footer .copyright a{color:#3f3f3f!important}

/* Elementor 殘留：形狀分隔線在這裡沒有原本的 CSS 會變黑塊，直接不顯示；背景遮罩也拿掉 */
.elementor-shape,.elementor-background-overlay{display:none!important}
.elementor-section{position:static!important}
.elementor img{max-width:100%;height:auto}

/* 表單送出鈕：照舊站寄信式表單的紅底按鈕（2026-10-05） */
.cp-form .cp-form-submit{margin-top:8px;background:#d92922;color:#fff!important;border:0;padding:10px 24px;border-radius:6px;font-weight:600}
.cp-form .cp-form-submit:hover{background:#b8211b;color:#fff!important}

/* 選單：Find Your Mandarin Class 照原站做成頁首獨立按鈕（2026-10-06）
   對應後台選單 idx 93（手動連結 /mandarin-course-board）
   桌機：獨佔選單第一排、靠右；手機／平板：固定頁首正下方一整排按鈕（2026-10-06 改成跟桌機同樣的半透明白底白字，原本照原站用卡其色）（選單抽屜裡仍保留一般項目） */
nav.navbar .naviMain a[href$="/mandarin-course-board"]::before{display:none!important}
/* 佈景的選單 hover 特效會把 span 往上移走並淡出、改顯示 ::before 的 data-title；按鈕不用這個特效，文字留在原位 */
nav.navbar .naviMain a[href$="/mandarin-course-board"]:hover>span{transform:none!important;opacity:1!important}
nav.navbar .naviMain a[href$="/mandarin-course-board"] span::before{content:"\f0a4";font-family:"Font Awesome 6 Free";font-weight:900;margin-right:8px}
@media (min-width:993px){
nav.navbar .naviMain li:has(> a[href$="/mandarin-course-board"]){order:-1;flex:0 0 100%;display:flex;justify-content:flex-end;padding:4px 0 10px}
nav.navbar .naviMain a[href$="/mandarin-course-board"]{display:inline-flex;align-items:center;margin:0 0 0 auto!important;background:rgba(255,255,255,.28);border-radius:16px;padding:10px 26px!important;transition:background .15s}
nav.navbar .naviMain a[href$="/mandarin-course-board"] span{color:#fff!important;font-weight:700;font-family:"Noto Sans",sans-serif;font-size:17px}
nav.navbar .naviMain a[href$="/mandarin-course-board"]:hover{background:rgba(255,255,255,.4)}
nav.navbar .naviMain a[href$="/mandarin-course-board"]:hover span{color:#fff!important}
}
@media (max-width:992px){
nav.navbar{display:block!important;background:#d92922!important;padding:14px 16px 16px!important;height:auto!important;max-width:none!important;width:auto!important;margin-left:0!important;margin-right:0!important}
nav.navbar>.navi-item:not(.naviMain){display:none!important}
nav.navbar .naviMain,nav.navbar .naviMain .container{display:block!important;width:auto!important;max-width:none!important;padding:0!important;margin:0!important;height:auto!important}
nav.navbar .naviMain ul{display:block!important;margin:0!important;padding:0!important}
nav.navbar .naviMain ul>li:not(:has(> a[href$="/mandarin-course-board"])){display:none!important}
nav.navbar .naviMain li:has(> a[href$="/mandarin-course-board"]){display:block!important;padding:0!important}
nav.navbar .naviMain a[href$="/mandarin-course-board"]{display:flex!important;justify-content:center;align-items:center;width:100%;height:auto!important;line-height:1.4!important;margin:0!important;padding:12px 16px!important;background:rgba(255,255,255,.28);border-radius:16px;transition:background .15s}
nav.navbar .naviMain a[href$="/mandarin-course-board"] span{color:#fff!important;font-weight:700;font-family:"Noto Sans",sans-serif;font-size:17px;letter-spacing:.5px}
nav.navbar .naviMain a[href$="/mandarin-course-board"]:hover{background:rgba(255,255,255,.4)}
}
/* 佈景在 769–992px 沒有幫固定頁首讓位（body padding-top 只到 768px），這裡補上；
   部落格分類列 .catbar 在這個寬度自己讓了 67px，改由按鈕列讓位後要歸零，不然會多一段空白 */
@media (min-width:769px) and (max-width:992px){nav.navbar{margin-top:67px!important}.catbar{margin-top:0!important}}
/* 桌機選單字級：客戶選單項目多，佈景預設 1rem（16px）改 15px（原站 14px）；下拉選單項目一起改。Mandarin 按鈕有自己的 17px，選擇器較具體不受影響 */
@media (min-width:993px){nav.navbar .naviMain ul>li>a>span,nav.navbar .naviMain ul>li>a::before{font-size:15px}}
/* 桌機選單間距：拿掉佈景的 1px 字距；項目之間至少 14px（佈景只靠 space-between 分剩下的空間，窄的時候會黏在一起）；
   993–1199px 內容框只有 960px 一定排不下一排，改靠右排，換到第二排也整齊 */
@media (min-width:993px){nav.navbar .naviMain ul>li>a>span,nav.navbar .naviMain ul>li>a::before{letter-spacing:0}nav.navbar .naviMain>.container>ul{column-gap:14px}}
@media (min-width:993px) and (max-width:1199px){nav.navbar .naviMain>.container>ul{justify-content:flex-end}}

/* 置頂跑馬燈手機版讓位（2026-10-06）
   平台把手機固定選單往下推跑馬燈的高度（--abar-off），前提是跑馬燈在頁面最頂端；
   但佈景在 768px 以下 body 有 padding-top:67px，跑馬燈被推到 67px，剛好被固定選單蓋住。
   這裡把跑馬燈拉回最頂端、底下補回 67px 給固定選單。訪客按 × 關掉後跑馬燈整個移除，這條自然不作用。
   平台若之後自己修好，把這筆設回草稿即可。 */
@media (max-width:768px){body>#site-abar{margin-top:-67px;margin-bottom:67px}}
/* 桌機：選單第一個 .navi-item 是空的，佈景設成 position:absolute;top:0（nav 本身是 static，所以貼在整頁最頂端、高 20px），
   原站配色（idx 1）又把 .navi-item 塗紅——以前跟紅色選單疊在一起看不出來，有跑馬燈後就蓋在跑馬燈上。沒有內容時就不顯示。 */
nav.navbar>.navi-item:first-child:not(.naviMain):not(:has(*)){display:none!important}
/* 桌機：開了購物／會員功能後，第一個 .navi-item 會出現「註冊／登入／購物車」，同樣會蓋住跑馬燈，而且會壓到 Find Your Mandarin Class 按鈕。
   讓它改以紅色頁首（nav）為基準放在右上角、只佔內容寬度、透明底；有內容時頁首上緣多留 34px 給它，按鈕往下排，兩者不重疊。 */
@media (min-width:993px){
nav.navbar{position:relative}
nav.navbar>.navi-item:first-child:not(.naviMain){width:auto!important;left:auto!important;right:0;top:0;padding:4px 10px!important;background:transparent!important;z-index:2}
nav.navbar:has(>.navi-item:first-child:not(.naviMain) *){padding-top:34px!important}
}
/* 跑馬燈連結底線：平台有設 underline，但佈景 main.css 的 a{text-decoration:none!important} 把它蓋掉（後台預覽沒載佈景 CSS 才看得到底線） */
.site-abar a.site-abar__link,.site-abar a.site-abar__cta{text-decoration:underline!important;text-underline-offset:3px}

/* 頁尾照原站樣式（2026-10-06）
   頁尾內容是後台「頁尾設定」的自訂 HTML（.yf-footer），這裡只改樣式、不動內容。
   原站：卡其底 rgba(185,164,129,.6) 疊在 #F1F3EF 上 ≈ #CFC4AD、上下一體；大標白色細字 30px；
   欄標題白色粗體 14px＋下方 80px 白線；文字連結黑色 15px、行距 28px；聯絡資訊圖示白色；
   社群是 40px 品牌色方塊；欄寬約 33／22／22／23%；手機版全部單欄往下排。 */
footer{background:#CFC4AD!important}
footer .copyright{background:#CFC4AD!important;color:#000!important;font-size:14px}
footer .copyright *{color:#000!important}
.yf-footer h4{color:#fff!important;font-size:30px;font-weight:400;letter-spacing:0;line-height:1.15;margin-bottom:12px}
.yf-footer p{color:#000!important;font-size:15px}
.yf-footer h5{color:#fff!important;font-size:14px;font-weight:700;margin:0 0 24px;position:relative;padding-bottom:14px}
.yf-footer h5::after{content:"";position:absolute;left:0;bottom:0;width:80px;border-top:2px solid #fff}
.yf-footer ul.list-unstyled+h5{margin-top:22px}
.yf-footer li{color:#000!important;font-size:15px;line-height:1.45;margin-bottom:8px}
.yf-footer li a{color:#000!important}
.yf-footer li a:hover{text-decoration:underline}
.yf-footer .yf-social{display:flex;flex-wrap:wrap;gap:10px;font-size:20px!important;margin-top:24px}
.yf-footer .yf-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:4px;color:#fff!important;text-decoration:none}
.yf-footer .yf-social a:hover{opacity:.85}
.yf-footer .yf-social a[href*="facebook"]{background:#3B5998}
.yf-footer .yf-social a[href*="youtube"]{background:#CD201F}
.yf-footer .yf-social a[href*="instagram.com/spanish"]{background:#DF3C7E}
.yf-footer .yf-social a[href*="spotify"]{background:#2EBD59}
.yf-footer .yf-social a[href*="instagram.com/conquer"]{background:#8C106D}
.yf-footer .yf-social a[href*="linkedin"]{background:#0077B5}
@media (min-width:768px){
.yf-footer .row>div:nth-child(1){flex:0 0 33%;max-width:33%}
.yf-footer .row>div:nth-child(2),.yf-footer .row>div:nth-child(3){flex:0 0 22%;max-width:22%}
.yf-footer .row>div:nth-child(4){flex:0 0 23%;max-width:23%}
}
@media (max-width:767px){
.yf-footer .row>div{flex:0 0 100%;max-width:100%}
.yf-footer .row>div+div{margin-top:12px}
}
/* 圖示改由 CSS 畫（2026-10-06）：後台頁尾編輯器（CKEditor 4.11）存檔會刪掉空的 <i> 圖示標籤（連帶只放圖示的社群連結也被刪），
   客戶一改就全掉。HTML 只放文字＋class（聯絡資訊 li 的 yf-ic-*、社群連結依網址），圖示用 Font Awesome 6 的 ::before 加上去 */
.yf-footer .yf-contact li{position:relative;padding-left:1.6em}
.yf-footer .yf-contact li::before{position:absolute;left:0;top:0;line-height:1.526;width:1.2em;text-align:center;color:#fff;font-family:"Font Awesome 6 Free";font-weight:900;font-size:.95em} /* line-height 換算成跟文字同一行高（15px×1.45），圖示才會跟第一行置中 */
.yf-footer .yf-ic-mail::before{content:"\f0e0"}
.yf-footer .yf-ic-line::before{content:"\f3c0";font-family:"Font Awesome 6 Brands"!important;font-weight:400!important}
.yf-footer .yf-ic-clock::before{content:"\f017";font-weight:400!important}
.yf-footer .yf-ic-calendar::before{content:"\f274";font-weight:400!important}
.yf-footer .yf-ic-map::before{content:"\f3c5"}
.yf-footer .yf-social a{position:relative;overflow:hidden;font-size:0!important;line-height:0;letter-spacing:0!important} /* 佈景連結有 1px 字距，藏起來的文字還會佔寬度把圖示往左推 */
.yf-footer .yf-social a::before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Font Awesome 6 Brands";font-weight:400;font-size:20px;line-height:1} /* 圖示蓋滿方塊置中，不受文字影響 */
.yf-footer .yf-social a[href*="facebook"]::before{content:"\f09a"}
.yf-footer .yf-social a[href*="youtube"]::before{content:"\f167"}
.yf-footer .yf-social a[href*="instagram"]::before{content:"\f16d"}
.yf-footer .yf-social a[href*="spotify"]::before{content:"\f1bc"}
.yf-footer .yf-social a[href*="linkedin"]::before{content:"\f08c"}
/* 社群方塊在窄的桌機／平板寬度放不下一排（左欄只有 33%），最後一個會掉到第二行：992–1199 縮間距，768–991 方塊改 30px */
@media (min-width:992px) and (max-width:1199px){.yf-footer .yf-social{gap:8px}}
@media (min-width:768px) and (max-width:991px){.yf-footer .yf-social{gap:5px}.yf-footer .yf-social a{width:30px;height:30px}.yf-footer .yf-social a::before{font-size:16px}}