/* =========================================================
   全站共用訂閱電子報與快捷導覽模組 (newsletter-section.css)
   包含：訂閱電子報、公務員認證、學生專區
   支援三種主題配色：草木綠 (預設) / 米黃色 / 原版配色
   ========================================================= */

:root, [data-theme="green"] {
    --stv-nl-bg: #F3E3C1;
    --stv-nl-footer-bg: #282829;
    --stv-nl-dark: #2B2B2B;
    --stv-nl-btn-bg: #F0A22E;
    --stv-nl-btn-hover: #D98F1F;
    --stv-nl-btn-color: #3A2F00;
}

[data-theme="cream"] {
    --stv-nl-bg: #F3ECD6;
    --stv-nl-footer-bg: #282829;
    --stv-nl-dark: #2B2B2B;
    --stv-nl-btn-bg: #F0A22E;
    --stv-nl-btn-hover: #D98F1F;
    --stv-nl-btn-color: #3A2F00;
}

[data-theme="original"] {
    --stv-nl-bg: #FFEBB2;
    --stv-nl-footer-bg: #282829;
    --stv-nl-dark: #2B2B2B;
    --stv-nl-btn-bg: #ffbc00;
    --stv-nl-btn-hover: #e0a600;
    --stv-nl-btn-color: #000000;
}

.newsletter-wrap {
    background: var(--stv-nl-footer-bg, #282829);
    padding: 60px 0;
    margin-top: 0;
}

.newsletter {
    background-color: var(--stv-nl-bg, #F3E3C1) !important;
    background-image: none !important;
    border-radius: 18px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin-inline: 0;
    box-sizing: border-box;
}

.newsletter-body {
    flex: 1 1 auto;
    min-width: 0;
    z-index: 1;
}

.newsletter-head {
    margin-bottom: 0;
    padding-left: 0;
    border-left: none !important;
}

.newsletter-tit {
    font-size: 24px;
    font-weight: 800;
    color: var(--stv-nl-dark, #2B2B2B);
    margin-bottom: 0;
    line-height: 1.3;
}

.newsletter-desc {
    font-size: 15px;
    color: #6b6b6b;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    padding: 6px 6px 6px 16px;
}

.newsletter-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    padding: 8px 0;
    font-size: 15px;
    outline: none !important;
    box-shadow: none !important;
    color: #2B2B2B;
}

.newsletter-form .btn {
    flex: 0 0 auto;
    background: var(--stv-nl-btn-bg, #F0A22E) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    color: var(--stv-nl-btn-color, #3A2F00) !important;
    font-weight: 700 !important;
    transition: background 0.2s ease-in-out;
    white-space: nowrap;
}

.newsletter-form .btn:hover,
.newsletter-form .btn:focus {
    background: var(--stv-nl-btn-hover, #D98F1F) !important;
    color: var(--stv-nl-btn-color, #3A2F00) !important;
}

/* Q 博士插圖 (右下角貼邊) */
.newsletter-mascot {
    flex: 0 0 210px;
    align-self: flex-end;
    margin-right: -40px;
    margin-bottom: -36px;
}

.newsletter-mascot img {
    display: block;
    width: 100%;
    height: auto;
}

/* 右側快捷區：公務員認證、學生專區 */
.newsletter-wrap .links-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
}

.newsletter-wrap .links-list li {
    flex: 1 1 50%;
    display: flex;
    margin: 0;
    padding: 0;
}

.newsletter-wrap .links-list li + li {
    margin-top: 0;
}

.newsletter-wrap .links-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 100px;
    padding: 0 24px;
    color: var(--stv-nl-dark, #2B2B2B);
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.newsletter-wrap .links-list li:first-child .links-item {
    border-radius: 18px 18px 0 0;
}

.newsletter-wrap .links-list li:last-child .links-item {
    border-radius: 0 0 18px 18px;
}

/* 設計稿配色: 公務員認證=淡藍灰、學生專區=淡米黃 */
.newsletter-wrap .links-item-01 {
    background: #E7EDF5;
}

.newsletter-wrap .links-item-02 {
    background: #F2E8D0;
}

.newsletter-wrap .links-item-01:hover {
    background: #DAE4F0;
    color: var(--stv-nl-dark, #2B2B2B) !important;
    text-decoration: none !important;
}

.newsletter-wrap .links-item-02:hover {
    background: #EBDDBB;
    color: var(--stv-nl-dark, #2B2B2B) !important;
    text-decoration: none !important;
}

.newsletter-wrap .links-item img {
    width: 44px;
    height: 44px;
    margin: 0;
    flex-shrink: 0;
}

.newsletter-wrap .links-item-content {
    flex: 1;
}

.newsletter-wrap .links-item-tit {
    font-size: 17px;
    font-weight: 700;
    color: var(--stv-nl-dark, #2B2B2B);
    margin-bottom: 2px;
}

.newsletter-wrap .links-item-desc {
    font-size: 13px;
    color: #6b6b6b;
}

/* RWD 響應式斷點 (與首頁完全一致) */
@media (max-width: 991.98px) {
    .newsletter {
        flex-direction: column;
        align-items: stretch;
        padding: 32px 28px;
    }
    .newsletter-mascot {
        align-self: center;
        flex: 0 0 auto;
        max-width: 170px;
        margin: 16px 0 -36px 0;
    }
}

@media (max-width: 767.98px) {
    .newsletter {
        padding: 28px 22px;
    }
    .newsletter-tit {
        font-size: 20px;
    }
    .newsletter-mascot {
        align-self: flex-end;
        margin: 12px -24px -28px 0;
    }
}