/* ===========================
   右侧 sidebar 总体布局
   =========================== */
   .sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 模块之间间距 */
}

/* ===========================
   通用卡片模块样式
   =========================== */
.block {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px 15px; /* 内边距适中 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 模块悬浮效果 */
.block:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

/* 模块标题 */
.block h2 {
    font-size: 18px;
    margin: 8px 0 10px 0; /* 顶部和底部都留一些空白 */
    padding-left: 10px;
    border-left: 4px solid #ff5722;
    color: #222;
}


/* ===========================
   Social Profiles 模块
   =========================== */

   .social-profiles {
    padding: 8px 10px; /* 整体略小一点 */
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;               /* 缩小间距 */
    justify-content: flex-start;  /* 最后一行靠左 */
}

.social-icons a {
    flex: 1 1 calc(25% - 6px);  /* 每行4个 */
    aspect-ratio: 1 / 1;        /* 保持宽高相等 */
    max-width: 45px;            /* 略小一点 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;            /* 略小字体 */
    color: #fff;                /* 默认白色图标 */
    border-radius: 50%;
    background-color: #333;
    text-align: center;
    transition: all 0.3s ease;
}

/* 悬停效果 */
.social-icons a:hover {
    transform: translateY(-3px);
    background-color: #ff5722;
}

/* 平台颜色 */
.social-icons a.facebook      { background-color: #1877f2; }
.social-icons a.twitter       { background-color: #1da1f2; }
.social-icons a.instagram     { background-color: #e1306c; }
.social-icons a.youtube       { background-color: #ff0000; }
.social-icons a.linkedin      { background-color: #0077b5; }
.social-icons a.myspace       { background-color: #00acee; }
.social-icons a.pinterest     { background-color: #bd081c; }
.social-icons a.soundcloud    { background-color: #ff5500; }
.social-icons a.tumblr        { background-color: #36465d; }
.social-icons a.wikipedia     { background-color: #000000; }
.social-icons a.bilibili      { background-color: #00a1d6; }
.social-icons a.zhihu         { background-color: #0084ff; }
.social-icons a.douyin        { background-color: #69c9d0; }
.social-icons a.xiaohongshu   { background-color: #e04646; }
.social-icons a.telegram      { background-color: #0088cc; }
.social-icons a.tiktok        { background-color: #000000; }
.social-icons a.weibo         { background-color: #e6162d; }
.social-icons a.wechat        { background-color: #07c160; }
.social-icons a.github        { background-color: #333333; }
.social-icons a.gitee         { background-color: #f44336; }
.social-icons a.reddit        { background-color: #ff4500; }


/* ===========================
   搜索框模块
   =========================== */
.search-bar {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.search-bar form {
    display: flex;
    margin: 0;
}

.search-bar input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
    font-size: 14px;
}

.search-bar button {
    padding: 10px 18px;
    border: none;
    background: #ff5722;
    color: #fff;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.search-bar button:hover {
    background: #e64a19;
    transform: translateY(-2px);
}

/* ===========================
   列表模块（教程资源 & 热门分类）
   =========================== */
.block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 分类项 */
.block ul li.cat-item {
    margin-bottom: 15px;
    display: block; /* 保证换行显示 */
}

/* 分类标题 */
.block ul li.cat-item .cat-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
}

/* 分类标题链接 */
.block ul li.cat-item .cat-title a {
    color: #333;
    text-decoration: none;
    word-break: break-word; /* 长标题自动换行 */
}

.block ul li.cat-item .cat-title a:hover {
    color: #ff5722;
}

/* 分类下文章列表 */
.block ul li.cat-item ul.cat-posts {
    list-style: none;
    margin: 0;
    padding-left: 15px; /* 缩进 */
}

/* 文章列表项 */
.block ul li.cat-item ul.cat-posts li {
    margin-bottom: 4px;
    display: block; /* 换行显示 */
}

/* 文章链接 */
.block ul li.cat-item ul.cat-posts li a {
    text-decoration: none;
    color: #555;
    word-break: break-word; /* 自动换行 */
}

.block ul li.cat-item ul.cat-posts li a:hover {
    color: #0073aa;
}

/* 保留 block 卡片样式 */
.block {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.block:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}







/* 紧凑型订阅按钮样式 */
.newsletter-subscribe button {
    background-color: #E64A19;   /* 按钮主色 */
    color: #fff;                  /* 字体白色 */
    border: none;                 /* 去掉默认边框 */
    border-radius: 6px;           /* 圆角 */
    padding: 6px 14px;            /* 缩小上下左右内边距 */
    font-size: 0.9rem;            /* 字体稍小 */
    cursor: pointer;              /* 鼠标指针 */
    transition: background-color 0.3s ease; /* 悬停过渡 */
}

.newsletter-subscribe button:hover {
    background-color: #bf3b15;   /* 悬停变暗 */
}


/* 订阅模块容器 */
/* 保持容器和间距 */
.newsletter-subscribe .tnp-subscription {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    gap: 10px;
}

/* 隐藏 label 避免破坏布局 */
.newsletter-subscribe .tnp-field-email label {
    display: none;
}

/* Email 输入框样式 */
.newsletter-subscribe .tnp-field-email input.tnp-email {
    width: 100%;                 /* 占满父元素宽度 */
    padding: 6px 12px;           /* 内边距紧凑 */
    font-size: 0.9rem;           /* 字体大小 */
    border: 1px solid #ccc;      /* 边框颜色 */
    border-radius: 6px;          /* 圆角 */
    box-sizing: border-box;      /* 防止 padding 导致宽度超出 */
}

/* 输入框获取焦点时边框高亮 */
.newsletter-subscribe .tnp-field-email input.tnp-email:focus {
    outline: none;
    border-color: #E64A19;
    box-shadow: 0 0 4px rgba(230, 74, 25, 0.5);
}

/* 隐私政策 checkbox 字体和间距 */
.newsletter-subscribe .tnp-field-privacy-field {
    font-size: 0.9rem;
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
}

/* 提交按钮 */
.newsletter-subscribe .tnp-submit {
    background-color: #E64A19;
    color: #fff !important;  /* 强制覆盖插件默认颜色 */
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;             /* 和输入框同宽 */
    transition: background-color 0.3s ease;
}

/* 鼠标悬停 */
.newsletter-subscribe .tnp-submit:hover {
    background-color: #bf3b15;
}


/*云标签css*/


.tag-cloud-wrapper {
    position: relative;
}

.tag-cloud {
    max-height: 400px; /* 折叠高度，可自行调整 */
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 每行一个标签 */
    gap: 6px;
    transition: max-height 0.3s ease;
}

.tag-cloud.open {
    max-height: 2000px; /* 展开显示全部 */
}

.tag-cloud a {
    display: block;
    padding: 4px 6px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #333;
}

.tag-cloud a:hover {
    background: #ddd;
}

.tag-toggle-btn {
    margin-top: 5px;
    font-size: 12px;
    cursor: pointer;
    background: #eee;
    border: none;
    border-radius: 3px;
    padding: 3px 6px;
}




/* ===== Sidebar 响应式 ===== */
@media (max-width: 1024px) {
    .sidebar {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
    }
}

/* ===== Newsletter 响应式 ===== */
@media (max-width: 768px) {
    .newsletter-subscribe .tnp-subscription {
        flex-direction: column;
        align-items: stretch;  /* 输入框和按钮占满全宽 */
        gap: 10px;
    }

    .newsletter-subscribe .tnp-field-email input.tnp-email,
    .newsletter-subscribe .tnp-submit {
        width: 100%;
    }

    .newsletter-subscribe .tnp-field-privacy-field {
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.85rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .newsletter-subscribe .tnp-subscription {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .newsletter-subscribe .tnp-field-email input.tnp-email,
    .newsletter-subscribe .tnp-submit {
        flex: 1 1 250px;
        min-width: 250px;
    }
}

/* 大屏保持横向排列 */
@media (min-width: 1025px) {
    .newsletter-subscribe .tnp-subscription {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        align-items: center;
    }

    .newsletter-subscribe .tnp-field-email input.tnp-email {
        flex: 1 1 auto;
        min-width: 250px;
    }

    .newsletter-subscribe .tnp-submit {
        flex: 0 0 auto;
        width: auto;
    }
}

/* ===== Tag Cloud 响应式 ===== */
@media (max-width: 768px) {
    .tag-cloud-wrapper {
        padding: 0 10px;
    }

    .tag-cloud a {
        font-size: 11px;
        padding: 3px 5px;
    }

    .tag-toggle-btn {
        font-size: 11px;
        padding: 2px 5px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tag-cloud a {
        font-size: 12px;
        padding: 4px 6px;
    }

    .tag-toggle-btn {
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* ===== 搜索框响应式 ===== */
@media (max-width: 768px) {
    .search-bar form {
        flex-direction: column;
        gap: 8px;
    }

    .search-bar input,
    .search-bar button {
        width: 100%;
    }
}

/* ===== Social Icons 响应式 ===== */
@media (max-width: 768px) {
    .social-icons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}