/* ==========================================================================
   主题绿覆盖层 — WorkBuddy 绿 (#28b894 系)
   必须放在所有样式表之后加载，用于覆盖 Bootstrap 内置的蓝色语义色
   ========================================================================== */

:root {
    /* 品牌色阶 */
    --wb-green:        #22b18c;
    --wb-green-light:  #4ccfa8;
    --wb-green-mint:   #7ee0c4;
    --wb-green-dark:   #17876a;
    --wb-green-tint:   #eef8f5;

    /* Bootstrap 全局语义色重映射 */
    --bs-primary:              #22b18c;
    --bs-primary-rgb:          34, 177, 140;
    --bs-link-color:           #17876a;
    --bs-link-color-rgb:       23, 135, 106;
    --bs-link-hover-color:     #0f6b54;
    --bs-link-hover-color-rgb: 15, 107, 84;
    --bs-info-rgb:             46, 196, 160;
    --bs-success-rgb:          31, 168, 133;
    --bs-secondary-rgb:        76, 207, 168;
    --bs-warning-rgb:          87, 200, 168;
}

/* ---- 按钮 ---- */
.btn-primary {
    --bs-btn-bg: #22b18c;
    --bs-btn-border-color: #22b18c;
    --bs-btn-hover-bg: #1a9d7c;
    --bs-btn-hover-border-color: #17876a;
    --bs-btn-active-bg: #17876a;
    --bs-btn-active-border-color: #0f6b54;
    --bs-btn-disabled-bg: #22b18c;
    --bs-btn-disabled-border-color: #22b18c;
    --bs-btn-focus-shadow-rgb: 34, 177, 140;
}

.btn-outline-primary {
    --bs-btn-color: #17876a;
    --bs-btn-border-color: #22b18c;
    --bs-btn-hover-bg: #22b18c;
    --bs-btn-hover-border-color: #22b18c;
    --bs-btn-active-bg: #17876a;
    --bs-btn-active-border-color: #17876a;
    --bs-btn-disabled-color: #17876a;
    --bs-btn-disabled-border-color: #22b18c;
    --bs-btn-focus-shadow-rgb: 34, 177, 140;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: #17876a;
    border-color: #17876a;
}

/* ---- 文本 / 背景语义色 ---- */
.text-primary { --bs-text-opacity: 1; color: #17876a !important; }
.bg-primary   { --bs-bg-opacity: 1; background-color: #22b18c !important; }
.bg-secondary { --bs-bg-opacity: 1; background-color: #38bd97 !important; }
.bg-info      { --bs-bg-opacity: 1; background-color: #2ab894 !important; }
.bg-success   { --bs-bg-opacity: 1; background-color: #1fa885 !important; }
.bg-warning   { --bs-bg-opacity: 1; background-color: #4bc4a2 !important; }
.border-primary { --bs-border-opacity: 1; border-color: #22b18c !important; }

/* ---- 链接 ---- */
a { color: #17876a; }
a:hover { color: #0f6b54; }

/* ---- 链接 / 分页 / 进度条 / 导航胶囊 ---- */
.pagination {
    --bs-pagination-color: #17876a;
    --bs-pagination-hover-color: #0f6b54;
    --bs-pagination-hover-bg: #eef8f5;
    --bs-pagination-focus-color: #0f6b54;
    --bs-pagination-focus-bg: #eef8f5;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(34, 177, 140, 0.2);
    --bs-pagination-active-bg: #22b18c;
    --bs-pagination-active-border-color: #22b18c;
}
.progress { --bs-progress-bar-bg: #22b18c; }
.nav-pills { --bs-nav-pills-link-active-bg: #22b18c; }

/* ---- 表单控件聚焦态 ---- */
.form-control:focus,
.form-select:focus {
    border-color: #4ccfa8;
    box-shadow: 0 0 0 0.25rem rgba(34, 177, 140, 0.2);
}
.form-check-input:checked {
    background-color: #22b18c;
    border-color: #22b18c;
}
.form-check-input:focus {
    border-color: #4ccfa8;
    box-shadow: 0 0 0 0.25rem rgba(34, 177, 140, 0.2);
}
.form-range::-webkit-slider-thumb { background-color: #22b18c; }
.form-range::-moz-range-thumb { background-color: #22b18c; }

/* ---- 折叠面板 / 手风琴 ---- */
.accordion {
    --bs-accordion-active-color: #17876a;
    --bs-accordion-active-bg: #eef8f5;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(34, 177, 140, 0.2);
}

/* ---- 选中文字 / 焦点环 ---- */
::selection { background: #bdece0; color: #0f2e26; }
:focus-visible { outline-color: #22b18c; }

/* ---- 导航下拉菜单：桌面端鼠标悬停自动展开（移动端保持点击展开） ---- */
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        margin-top: 0; /* 消除触发元素与子菜单间的缝隙，避免移入时菜单消失 */
    }
    .navbar .dropdown:hover .dropdown-menu,
    .navbar .dropdown:focus-within .dropdown-menu {
        display: block;
    }
}

/* ---- 导航：当前页与展开态使用主题绿（覆盖 Bootstrap 默认深蓝/灰色） ---- */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show {
    color: #17876a;
}

/* ---- 下拉菜单：浅绿悬停、绿色选中（反白），覆盖 Bootstrap 默认浅灰/蓝色 ---- */
.navbar .dropdown-menu {
    --bs-dropdown-link-hover-bg: #eef8f5;
    --bs-dropdown-link-hover-color: #17876a;
    --bs-dropdown-link-active-bg: #22b18c;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-disabled-color: #9aa5b1;
    border-color: rgba(34, 177, 140, 0.25);
    --bs-dropdown-min-width: 11rem;
}

.navbar .dropdown-item:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(34, 177, 140, 0.25);
}

/* ---- 子页小 banner：整体高度压缩约一半（顶部需为固定导航栏留位，上宽下窄） ---- */
.page-header {
    padding: 105px 0 30px;
}

@media (max-width: 768px) {
    .page-header {
        padding: 85px 0 25px;
    }
}

/* ---- FAQ：展开后答案与问题之间留出间距 ---- */
.faq-answer {
    padding-top: 20px;
}

/* ---- 联系页：底部温馨提示样式 ---- */
.contact-notice {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(34, 177, 140, 0.2);
}

/* ---- 工具页：卡通插画区（代替图片）+ 建设中角标 ---- */
.tool-illustration {
    width: 100%;
    height: 100%;
    min-height: 250px;
    background: var(--tool-bg, linear-gradient(135deg, #a8e6cf, #7ee0c4));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.tool-illustration i {
    font-size: 4.5rem;
    color: var(--wb-green-dark, #17876a);
    opacity: 0.7;
}

.portfolio-card:hover .tool-illustration {
    transform: scale(1.08);
}

.tool-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(34, 177, 140, 0.9);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

/* ---- 工具页：卡片标题/正文链接样式 ---- */
.portfolio-info a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.portfolio-info h5 a {
    color: #1a2b26; /* 近似黑色 */
}

.portfolio-info h5 a:visited {
    color: #4a5550;
}

.portfolio-info h5 a:hover {
    color: #17876a; /* 主题绿 */
}

.portfolio-info p a {
    color: #6c757d; /* 与原 .text-muted 一致 */
}

.portfolio-info p a:visited {
    color: #8a9298;
}

.portfolio-info p a:hover {
    color: #17876a; /* 主题绿 */
}

/* ==========================================================================
   语言切换器（导航最右侧）
   ========================================================================== */

/* 触发按钮：白底绿描边胶囊 */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(34, 177, 140, 0.4);
    border-radius: 999px;
    background: #fff;
    color: #17876a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover,
.lang-toggle:focus,
.lang-toggle:focus-visible {
    background: #eef8f5;
    border-color: #22b18c;
    color: #17876a;
    box-shadow: 0 4px 14px rgba(34, 177, 140, 0.18);
    outline: none;
}

.lang-toggle:active {
    transform: translateY(1px);
}

.lang-toggle .lang-caret {
    font-size: 0.72rem;
    transition: transform 0.22s ease;
}

/* 悬停/展开时小箭头翻转 */
.lang-switcher:hover .lang-caret,
.lang-toggle[aria-expanded="true"] .lang-caret {
    transform: rotate(180deg);
}

/* 下拉面板 */
.lang-menu {
    --bs-dropdown-min-width: 12rem;
    padding: 7px;
    border: 1px solid rgba(34, 177, 140, 0.18);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(20, 48, 42, 0.14);
    overflow: hidden;
}

.lang-menu-caption {
    padding: 4px 10px 7px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #84938d;
    letter-spacing: 0.03em;
}

/* 语言条目（链接 / 禁用项共用） */
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    margin: 0;
    border-radius: 9px;
    font-size: 0.92rem;
    color: #334842;
    line-height: 1.3;
}

/* 对勾固定占位，保证两种语言文字左对齐 */
.lang-option .lang-checked {
    flex: 0 0 auto;
    width: 1.05em;
    font-size: 1.1rem;
    font-weight: 700;
    color: #22b18c;
    visibility: hidden;
}

.lang-option-name {
    flex: 1 1 auto;
}

/* 当前语言：浅绿底 + 绿色文字 + 对勾可见 */
a.lang-option.is-current {
    background: #eef8f5;
    color: #17876a;
    font-weight: 600;
    cursor: default;
}

a.lang-option.is-current:hover,
a.lang-option.is-current:focus {
    background: #eef8f5;
    color: #17876a;
}

a.lang-option.is-current .lang-checked {
    visibility: visible;
}

/* 未上线语言 */
.lang-option.is-disabled {
    color: #9aa5b1;
    cursor: not-allowed;
}

.lang-soon {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 600;
    color: #17876a;
    background: #eef8f5;
    border: 1px solid rgba(34, 177, 140, 0.3);
    padding: 2px 8px;
    border-radius: 99px;
    line-height: 1.4;
}

.lang-option.is-disabled .lang-soon {
    color: #8a9b95;
    background: #f3f5f4;
    border-color: #e3e8e6;
}

/* 移动端折叠菜单内：按钮与上下菜单项留间距，并与其他项左对齐 */
@media (max-width: 991.98px) {
    .lang-switcher {
        margin-top: 10px;
        margin-left: 0 !important;
    }

    .lang-menu {
        --bs-dropdown-min-width: 14rem;
    }
}

/* ==========================================================================
   回到顶部按钮（back-to-top）
   默认隐藏，页面下滑后由 include.js 添加 .show 淡入上移；
   多端适配：桌面 46px，移动端略小并贴近安全区，兼容 iPhone 底部手势条。
   ========================================================================== */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1030;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #22b18c;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(23, 135, 106, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.9);
    transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease, box-shadow 0.2s ease, visibility 0.28s;
    /* iPhone 等全面屏底部安全区 */
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    background: #17876a;
    box-shadow: 0 10px 26px rgba(23, 135, 106, 0.45);
    transform: translateY(-3px) scale(1);
}

.back-to-top:active {
    transform: translateY(0) scale(0.94);
}

.back-to-top:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(34, 177, 140, 0.35);
}

/* 移动端：略小、贴近边缘，避免遮挡正文与手势条 */
@media (max-width: 576px) {
    .back-to-top {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* 用户偏好减少动效时，显隐与回顶不做动画 */
@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
    }
}