/* ============================================================
   編輯器「樣式選擇」（at_special_style）的樣式：.at-ed-*
   移植自 aus-center/at-module/at-add-mce-function/style.css（各站統一的規則），
   後台編輯器與前台共用；清單在 js/custom-buttons.js。
   806 的差異：
   - 字級：806 的 1rem = 16px（aus-center 是 10px），下面的 rem 都已換算，括號是實際 px
   - 顏色：吃 806 的 --at-main／--at-main-dark（藍），沒有時用後面的備用值
   - 圖示：Font Awesome 5（"Font Awesome 5 Free"）
   - 深色主題另外處理，對比都在 4.5 以上
   ============================================================ */

/* 文字類樣式（焦點、章節內重點、金句、備註）字型、粗細、顏色都跟內文一樣，只差字級；
   要上色用工具列的 A 文字顏色、要粗用 B。行高縮到 1.5 是因為內文的 2 倍行高在大字上會空得太開 */

/* 焦點大字：全篇最醒目（手機 26px／桌機 34px） */
.at-ed-focus {
    font-size: 1.625rem;
    line-height: 1.5;
}

/* 章節內重點：章節標題內的重點（手機 16px／桌機 21px） */
.at-ed-point {
    font-size: 1rem;
    line-height: 1.6;
}

/* 金句大字：章節內凸顯的大字（手機 20px／桌機 26px） */
.at-ed-quote {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* 備註：補充小字（13px） */
.at-ed-note {
    font-size: .8125rem;
    line-height: 1.8;
}

/* 打勾清單：class 加在 <ul> 上，圓點換成打勾（Font Awesome 的 check）。
   class 寫三次是要蓋過佈景畫小圓點的規則 */
.at-ed-check.at-ed-check {
    margin: 10px 0;
    padding-left: 0;
    list-style: none;
}

.at-ed-check.at-ed-check.at-ed-check > li {
    position: relative;
    padding-left: 24px;
    list-style: none;
}

.at-ed-check.at-ed-check.at-ed-check > li + li {
    margin-top: 5px;
}

.at-ed-check.at-ed-check.at-ed-check > li::before {
    content: "\f00c";
    position: absolute;
    top: .55em;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--at-main, #136BA5);
    font-family: "Font Awesome 5 Free";
    font-size: .9em;
    font-weight: 900;
    line-height: 1;
}

/* 圖示標題：淺藍底橫帶＋左側圖示。圖示用工具列的圖示按鈕插在文字最前面（.fa-icon-wrapper）。
   橫帶底色畫在 ::before；class 寫兩次是要蓋過內文 h3／h4 的裝飾與段落外距 */
.at-ed-icon-title.at-ed-icon-title {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    min-height: 66px;
    margin: 1em 0 22px;
    padding: 0 20px;
    border: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.72;
}

/* 套在 h3（章節標題）上時維持章節標題的 18px，不要被上面的 inherit 縮成內文大小 */
.at-page-main-content h3.at-ed-icon-title,
.mce-content-body h3.at-ed-icon-title {
    font-size: 1.125rem;
}

.at-ed-icon-title.at-ed-icon-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    margin: 0;
    background: var(--at-ed-tint, #EBF6FA);
    clip-path: none;
    transform: none;
}

.at-ed-icon-title .fa-icon-wrapper {
    flex: none;
    width: 27px;
    margin-right: 10px;
    color: var(--at-main, #136BA5);
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
}

/* 重點底色：帶底色的區塊（淺藍底） */
.at-ed-bg.at-ed-bg {
    margin: 40px 0;
    padding: 25px;
    background: var(--at-ed-tint, #EBF6FA);
}

/* 重點邊框：用外框框住的區塊（白底、主色細框、12px 圓角） */
.at-ed-border.at-ed-border {
    margin: 40px 0;
    padding: 25px;
    border: 1px solid var(--at-main, #136BA5);
    border-radius: 12px;
    background: #fff;
}

/* 框是 <div> 容器，裡面的段落／清單照內文規則走；第一個與最後一個的外距歸零，免得跟框的內距疊在一起 */
.at-ed-bg.at-ed-bg > :first-child,
.at-ed-border.at-ed-border > :first-child {
    margin-top: 0;
}

.at-ed-bg.at-ed-bg > :last-child,
.at-ed-border.at-ed-border > :last-child {
    margin-bottom: 0;
}

/* 實心按鈕 / 空心按鈕：段落裡放一個連結，套用後整段置中、連結變成按鈕
   白字配主色 #136BA5 對比 5.72；連結 class 寫兩次是要蓋過內文連結的顏色與底線 */
.at-ed-btn,
.at-ed-btn-outline {
    padding: 10px 0;
    text-align: center;
}

.at-ed-btn.at-ed-btn > a,
.at-ed-btn-outline.at-ed-btn-outline > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 240px;
    min-height: 56px;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1em;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}

.at-ed-btn.at-ed-btn > a {
    background: var(--at-main, #136BA5);
    color: #fff;
}

.at-ed-btn.at-ed-btn > a:hover,
.at-ed-btn.at-ed-btn > a:focus {
    background: var(--at-main-dark, #0F5684);
    color: #fff;
    text-decoration: none;
}

.at-ed-btn-outline.at-ed-btn-outline > a {
    border: 1px solid var(--at-main, #136BA5);
    background: #fff;
    color: var(--at-main, #136BA5);
}

.at-ed-btn-outline.at-ed-btn-outline > a:hover,
.at-ed-btn-outline.at-ed-btn-outline > a:focus {
    background: var(--at-main, #136BA5);
    color: #fff;
    text-decoration: none;
}

/* 閱讀更多：段落裡放一個連結，套用後變成靠右的文字連結加箭頭 */
.at-ed-more {
    text-align: right;
}

.at-ed-more.at-ed-more > a {
    position: relative;
    display: inline-block;
    padding: 0 26px 6px 0;
    border-bottom: 1px solid #D9D9D9;
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.at-ed-more.at-ed-more > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-top: 1px solid var(--at-main, #136BA5);
    border-right: 1px solid var(--at-main, #136BA5);
    transform: rotate(45deg);
}

.at-ed-more.at-ed-more > a:hover,
.at-ed-more.at-ed-more > a:focus {
    color: var(--at-main, #136BA5);
    text-decoration: underline;
}

@media (min-width: 768px) {
    .at-ed-icon-title.at-ed-icon-title {
        min-height: 70px;
        margin-bottom: 27px;
        padding: 0 25px;
        line-height: 1.68;
    }

    .at-ed-icon-title .fa-icon-wrapper {
        width: 30px;
        margin-right: 16px;
        font-size: 1.75rem;
    }

    .at-ed-focus {
        font-size: 2.125rem;
    }

    .at-ed-point {
        font-size: 1.3125rem;
    }

    .at-ed-quote {
        font-size: 1.625rem;
    }

    .at-ed-bg.at-ed-bg,
    .at-ed-border.at-ed-border {
        margin: 60px 0;
    }

    .at-ed-bg.at-ed-bg {
        padding: 40px 50px;
    }

    .at-ed-border.at-ed-border {
        padding: 32px 36px;
    }
}

/* ============================================================
   段落格式的「小標題」h4（16px 粗體＋下方主色短線）
   806 原本沒有 h4 樣式（會吃 bootstrap 的 24px），這裡補上
   ============================================================ */
.at-page-main-content h4,
.mce-content-body h4 {
    position: relative;
    margin: 1.8em 0 .8em;
    padding-bottom: 8px;
    color: #1A1A1A;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.at-page-main-content h4::after,
.mce-content-body h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--at-main, #136BA5);
}

.at-page-main-content h4.at-ed-icon-title::after,
.mce-content-body h4.at-ed-icon-title::after {
    content: none;
}

/* ============================================================
   螢光筆（at_mark）：前台捲到畫面時由左往右畫出底色
   ============================================================ */
.at-mark {
    padding: 0 2px;
    background-image: linear-gradient(to right, var(--at-mark-color, #D6ECFA) 0%, var(--at-mark-color, #D6ECFA) 100%);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.at-mark.is-visible {
    background-size: 100% 100%;
}

/* 後台編輯器、不想看動畫的使用者：直接顯示 */
.mce-content-body .at-mark,
body.wp-admin .at-mark {
    background-size: 100% 100% !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .at-mark {
        background-size: 100% 100%;
        transition: none;
    }
}

/* ============================================================
   深色主題（前台 html[data-theme="dark"]）
   淺色底的區塊改成半透明白，文字維持白色；主色字改亮藍 #8FC9EC（對深底 ≥ 8）
   ============================================================ */
html[data-theme="dark"] .at-ed-bg.at-ed-bg,
html[data-theme="dark"] .at-ed-icon-title.at-ed-icon-title::before {
    background: rgba(255, 255, 255, .08);
}

/* style.css 深色主題把內文所有元素的 border-color 改成 --dm-border（幾乎看不見），選擇器又很重，這裡要 !important */
html[data-theme="dark"] .at-ed-border.at-ed-border {
    border-color: #8FC9EC !important;
    background: transparent;
}

html[data-theme="dark"] .at-ed-check.at-ed-check.at-ed-check > li::before,
html[data-theme="dark"] .at-ed-icon-title .fa-icon-wrapper {
    color: #8FC9EC;
}

html[data-theme="dark"] .at-ed-btn-outline.at-ed-btn-outline > a {
    border-color: #8FC9EC;
    background: transparent;
    color: #8FC9EC !important;
}

html[data-theme="dark"] .at-ed-btn-outline.at-ed-btn-outline > a:hover,
html[data-theme="dark"] .at-ed-btn-outline.at-ed-btn-outline > a:focus {
    background: #8FC9EC;
    color: #0F172A !important;
}

html[data-theme="dark"] .at-ed-btn.at-ed-btn > a {
    color: #fff !important;
}

html[data-theme="dark"] .at-ed-more.at-ed-more > a::after,
html[data-theme="dark"] .at-page-main-content h4::after {
    border-color: #8FC9EC;
    background: #8FC9EC;
}

html[data-theme="dark"] .at-ed-more.at-ed-more > a::after {
    background: none;
}

html[data-theme="dark"] .at-page-main-content h4 {
    color: #FFF;
}

html[data-theme="dark"] .at-mark {
    --at-mark-color: rgba(143, 201, 236, .3);
}