/*
Theme Name: 比比工房官方主题子主题
Theme URI: https://beebee.work
Author: 小鱼哥
Author URI: https://beebee.work
Description: 比比工房官方主题
Template: beebeework
Version: 2.2.0
Requires at least: 6.8
Tested up to: 6.9.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 比比工房官方主题
Tags: block-patterns, block-styles, full-site-editing
*/

/* 禁用所有页面过渡动画 */
[style*="transition: height .6s"] {
    transition: none !important;
}

.transition-beebee {
    transition: none !important;
}

.custom-home-container {
    position: absolute;
    isolation: isolate;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

}

.custom-home-container video {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
    position: relative;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
    width: 100%;
    z-index: -10;
}

/* 定制服务页面光晕背景效果 */
.custom-service-container {
    position: absolute;
    isolation: isolate;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 添加光晕效果 */
.custom-service-container::before,
.custom-service-container::after {
    content: "";
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.5;
    z-index: -1;
    /* animation: float 10s ease-in-out infinite alternate; */
}

/* 第一个光晕 - 蓝色 */
.custom-service-container::before {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

/* 第二个光晕 - 粉色 */
.custom-service-container::after {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
}

/* 添加额外的光晕元素 */
.glow-orb-1,
.glow-orb-2 {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    z-index: -1;
}

.glow-orb-1 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    bottom: 0%;
    left: 5%;
    /* animation: float 15s ease-in-out infinite; */
}

.glow-orb-2 {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    top: 0%;
    right: 5%;
    /* animation: float 12s ease-in-out infinite reverse; */
}

/* 漂浮动画 */
@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-20px) translateX(15px);
    }

    100% {
        transform: translateY(10px) translateX(-15px);
    }
}

/* 确保内容在光晕上方 */
.service-content {
    position: relative;
    z-index: 1;
}

/* 适应深色模式 */
@media (prefers-color-scheme: dark) {
    .custom-service-container::before {
        opacity: 0.3;
    }

    .custom-service-container::after,
    .glow-orb-1,
    .glow-orb-2 {
        opacity: 0.25;
    }
}

/* OAuth快捷登录按钮样式 */
.beebeework-oauth-container {
    width: 100%;
    max-width: 100%;
}

.beebeework-oauth-buttons {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0;
}

.beebeework-oauth-divider {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.beebeework-oauth-divider::before,
.beebeework-oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color, #e5e7eb), transparent);
}

.beebeework-oauth-divider span {
    padding: 0 0.75rem;
    color: var(--text-muted, #6b7280);
    font-size: 0.75rem;
}

.beebeework-oauth-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.beebeework-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #fff);
    color: var(--text-color, #374151);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.beebeework-oauth-btn:hover {
    border-color: var(--primary-color, #3b82f6);
    background: var(--hover-bg, #f9fafb);
}

.beebeework-oauth-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.beebeework-oauth-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.beebeework-oauth-qq {
    border-color: #12B7F5;
    color: #12B7F5;
}

.beebeework-oauth-qq:hover {
    background: rgba(18, 183, 245, 0.1);
    border-color: #12B7F5;
}

.beebeework-oauth-wx {
    border-color: #07C160;
    color: #07C160;
}

.beebeework-oauth-wx:hover {
    background: rgba(7, 193, 96, 0.1);
    border-color: #07C160;
}

.beebeework-oauth-alipay {
    border-color: #1677FF;
    color: #1677FF;
}

.beebeework-oauth-alipay:hover {
    background: rgba(22, 119, 255, 0.1);
    border-color: #1677FF;
}

.beebeework-oauth-sina {
    border-color: #E6162D;
    color: #E6162D;
}

.beebeework-oauth-sina:hover {
    background: rgba(230, 22, 45, 0.1);
    border-color: #E6162D;
}

.beebeework-oauth-github {
    border-color: #24292F;
    color: #24292F;
}

.beebeework-oauth-github:hover {
    background: rgba(36, 41, 47, 0.1);
    border-color: #24292F;
}

.beebeework-oauth-google {
    border-color: #4285F4;
    color: #4285F4;
}

.beebeework-oauth-google:hover {
    background: rgba(66, 133, 244, 0.1);
    border-color: #4285F4;
}

@media (prefers-color-scheme: dark) {
    .beebeework-oauth-divider::before,
    .beebeework-oauth-divider::after {
        background: linear-gradient(to right, transparent, var(--border-color, #374151), transparent);
    }

    .beebeework-oauth-divider span {
        color: var(--text-muted, #9ca3af);
    }

    .beebeework-oauth-btn {
        background: var(--card-bg, #1f2937);
        border-color: var(--border-color, #374151);
        color: var(--text-color, #e5e7eb);
    }

    .beebeework-oauth-btn:hover {
        background: var(--hover-bg, #374151);
    }

    .beebeework-oauth-github {
        border-color: #f0f6fc;
        color: #f0f6fc;
    }

    .beebeework-oauth-github:hover {
        background: rgba(240, 246, 252, 0.1);
    }
}

/* 代码块样式 */
.wp-block-code, .code-block-wrapper, .code-block-processed {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5rem 0;
    background: #f0f0f0 !important;
    color: #333333 !important;
}

.dark .wp-block-code, 
.dark .code-block-wrapper, 
.dark .code-block-processed {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

.code-block-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5rem 0;
    background: #f0f0f0 !important;
    color: #333333 !important;
}

.dark .code-block-wrapper {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #f0f0f0;
    border-bottom: 1px solid #dddddd;
    color: #333333;
}

.dark .code-block-header {
    background: #1e1e1e;
    border-bottom: 1px solid #3e3e42;
    color: #d4d4d4;
}

.code-language {
    font-size: 12px;
    font-weight: 600;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dark .code-language {
    color: #d4d4d4;
}

.copy-code-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #e0e0e0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #333333;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark .copy-code-btn {
    background: #252526;
    border: 1px solid #3e3e42;
    color: #cccccc;
}

.copy-code-btn:hover {
    background: #d0d0d0;
    border-color: #999999;
    color: #000000;
}

.dark .copy-code-btn:hover {
    background: #2d2d30;
    border-color: #6a6a6a;
    color: #ffffff;
}

.copy-code-btn.copied {
    background: #d0d0d0;
    border-color: #999999;
    color: #000000;
}

.dark .copy-code-btn.copied {
    background: #2d2d30;
    border-color: #6a6a6a;
    color: #ffffff;
}

.copy-code-btn svg {
    width: 14px;
    height: 14px;
    color: inherit;
}

.code-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.code-stats {
    font-size: 11px;
    color: #666666;
}

.dark .code-stats {
    color: #858585;
}

.code-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-code-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #e0e0e0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #333333;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark .preview-code-btn {
    background: #252526;
    border: 1px solid #3e3e42;
    color: #cccccc;
}

.preview-code-btn:hover {
    background: #d0d0d0;
    border-color: #999999;
    color: #000000;
}

.dark .preview-code-btn:hover {
    background: #2d2d30;
    border-color: #6a6a6a;
    color: #ffffff;
}

.code-block-wrapper pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background: #f0f0f0 !important;
    color: #333333 !important;
}

.dark .code-block-wrapper pre {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

.code-block-wrapper code {
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #333333 !important;
    display: block;
}

.dark .code-block-wrapper code {
    color: #d4d4d4 !important;
}

/* 行号样式 */
.line-number {
    display: inline-block;
    width: 40px;
    margin-right: 16px;
    text-align: right;
    color: #999999;
    user-select: none;
    font-size: 13px;
}

.dark .line-number {
    color: #858585;
}

/* 确保所有代码块相关元素都是灰色背景 */
.wp-block-code pre,
.code-block-wrapper pre,
.code-block-processed pre,
.wp-block-code code,
.code-block-wrapper code,
.code-block-processed code {
    background: #f0f0f0 !important;
    color: #333333 !important;
}

.dark .wp-block-code pre,
.dark .code-block-wrapper pre,
.dark .code-block-processed pre,
.dark .wp-block-code code,
.dark .code-block-wrapper code,
.dark .code-block-processed code {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

/* 确保所有文本元素在灰色背景下清晰可见 */
.wp-block-code,
.code-block-wrapper,
.code-block-processed,
.code-block-header,
.code-language,
.code-stats,
.preview-code-btn,
.copy-code-btn,
.preview-code-btn span,
.copy-code-btn span,
.preview-code-btn svg,
.copy-code-btn svg {
    color: #333333 !important;
}

.dark .wp-block-code,
.dark .code-block-wrapper,
.dark .code-block-processed,
.dark .code-block-header,
.dark .code-language,
.dark .code-stats,
.dark .preview-code-btn,
.dark .copy-code-btn,
.dark .preview-code-btn span,
.dark .copy-code-btn span,
.dark .preview-code-btn svg,
.dark .copy-code-btn svg {
    color: #d4d4d4 !important;
}

/* VSCode 主题颜色 */
.wp-block-code .hljs-keyword, 
.wp-block-code .hljs-selector-tag, 
.wp-block-code .hljs-built_in, 
.wp-block-code .hljs-name, 
.wp-block-code .hljs-tag,
.code-block-wrapper .hljs-keyword, 
.code-block-wrapper .hljs-selector-tag, 
.code-block-wrapper .hljs-built_in, 
.code-block-wrapper .hljs-name, 
.code-block-wrapper .hljs-tag, 
.code-block-processed .hljs-keyword, 
.code-block-processed .hljs-selector-tag, 
.code-block-processed .hljs-built_in, 
.code-block-processed .hljs-name, 
.code-block-processed .hljs-tag {
    color: #569cd6;
}

.wp-block-code .hljs-string, 
.wp-block-code .hljs-title, 
.wp-block-code .hljs-section, 
.wp-block-code .hljs-attribute, 
.wp-block-code .hljs-literal, 
.wp-block-code .hljs-template-tag, 
.wp-block-code .hljs-template-variable, 
.wp-block-code .hljs-type, 
.wp-block-code .hljs-addition,
.code-block-wrapper .hljs-string, 
.code-block-wrapper .hljs-title, 
.code-block-wrapper .hljs-section, 
.code-block-wrapper .hljs-attribute, 
.code-block-wrapper .hljs-literal, 
.code-block-wrapper .hljs-template-tag, 
.code-block-wrapper .hljs-template-variable, 
.code-block-wrapper .hljs-type, 
.code-block-wrapper .hljs-addition, 
.code-block-processed .hljs-string, 
.code-block-processed .hljs-title, 
.code-block-processed .hljs-section, 
.code-block-processed .hljs-attribute, 
.code-block-processed .hljs-literal, 
.code-block-processed .hljs-template-tag, 
.code-block-processed .hljs-template-variable, 
.code-block-processed .hljs-type, 
.code-block-processed .hljs-addition {
    color: #ce9178;
}

.wp-block-code .hljs-comment, 
.wp-block-code .hljs-quote, 
.wp-block-code .hljs-deletion, 
.wp-block-code .hljs-meta,
.code-block-wrapper .hljs-comment, 
.code-block-wrapper .hljs-quote, 
.code-block-wrapper .hljs-deletion, 
.code-block-wrapper .hljs-meta, 
.code-block-processed .hljs-comment, 
.code-block-processed .hljs-quote, 
.code-block-processed .hljs-deletion, 
.code-block-processed .hljs-meta {
    color: #6a9955;
}

.wp-block-code .hljs-number, 
.wp-block-code .hljs-regexp, 
.wp-block-code .hljs-variable, 
.wp-block-code .hljs-template-variable, 
.wp-block-code .hljs-link, 
.wp-block-code .hljs-selector-attr, 
.wp-block-code .hljs-selector-pseudo,
.code-block-wrapper .hljs-number, 
.code-block-wrapper .hljs-regexp, 
.code-block-wrapper .hljs-variable, 
.code-block-wrapper .hljs-template-variable, 
.code-block-wrapper .hljs-link, 
.code-block-wrapper .hljs-selector-attr, 
.code-block-wrapper .hljs-selector-pseudo, 
.code-block-processed .hljs-number, 
.code-block-processed .hljs-regexp, 
.code-block-processed .hljs-variable, 
.code-block-processed .hljs-template-variable, 
.code-block-processed .hljs-link, 
.code-block-processed .hljs-selector-attr, 
.code-block-processed .hljs-selector-pseudo {
    color: #b5cea8;
}

.wp-block-code .hljs-function, 
.wp-block-code .hljs-title, 
.wp-block-code .hljs-class .hljs-title,
.code-block-wrapper .hljs-function, 
.code-block-wrapper .hljs-title, 
.code-block-wrapper .hljs-class .hljs-title, 
.code-block-processed .hljs-function, 
.code-block-processed .hljs-title, 
.code-block-processed .hljs-class .hljs-title {
    color: #dcdcaa;
}

.wp-block-code .hljs-keyword, 
.wp-block-code .hljs-selector-tag, 
.wp-block-code .hljs-built_in, 
.wp-block-code .hljs-name, 
.wp-block-code .hljs-tag,
.code-block-wrapper .hljs-keyword, 
.code-block-wrapper .hljs-selector-tag, 
.code-block-wrapper .hljs-built_in, 
.code-block-wrapper .hljs-name, 
.code-block-wrapper .hljs-tag, 
.code-block-processed .hljs-keyword, 
.code-block-processed .hljs-selector-tag, 
.code-block-processed .hljs-built_in, 
.code-block-processed .hljs-name, 
.code-block-processed .hljs-tag {
    color: #569cd6;
}

.wp-block-code .hljs-attr,
.code-block-wrapper .hljs-attr, 
.code-block-processed .hljs-attr {
    color: #9cdcfe;
}

.wp-block-code .hljs-symbol, 
.wp-block-code .hljs-bullet,
.code-block-wrapper .hljs-symbol, 
.code-block-wrapper .hljs-bullet, 
.code-block-processed .hljs-symbol, 
.code-block-processed .hljs-bullet {
    color: #d16969;
}

.wp-block-code .hljs-emphasis,
.code-block-wrapper .hljs-emphasis, 
.code-block-processed .hljs-emphasis {
    font-style: italic;
}

.wp-block-code .hljs-strong,
.code-block-wrapper .hljs-strong, 
.code-block-processed .hljs-strong {
    font-weight: bold;
}

@media (max-width: 768px) {
    .code-block-header {
        padding: 6px 12px;
    }
    
    .code-language {
        font-size: 11px;
    }
    
    .copy-code-btn {
        padding: 3px 10px;
        font-size: 11px;
    }
    
    .code-block-wrapper pre {
        padding: 12px;
    }
    
    .code-block-wrapper code {
        font-size: 13px;
    }
}