/*!
Theme Name: Blocksy
Theme URI: https://creativethemes.com/blocksy/
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a blazing fast and lightweight WordPress theme built with the latest web technologies. It was built with the Gutenberg editor in mind and has a lot of options that makes it extendable and customizable. You can easily create any type of website, such as business agency, shop, corporate, education, restaurant, blog, portfolio, landing page and so on. It works like a charm with popular WordPress page builders, including Elementor, Beaver Builder, Visual Composer and Brizy. Since it is responsive and adaptive, translation ready, SEO optimized and has WooCommerce built-in, you will experience an easy build and even an increase in conversions.
Version: 2.0.73
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2019 CreativeThemes.
Requires at least: 5.2
Requires PHP: 7.0
Tested up to: 6.6
Text Domain: blocksy
Tags: blog, e-commerce, wide-blocks, block-styles, grid-layout, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, buddypress, rtl-language-support, news
*/

/* subscribe-and-donate.css */
.subscribe-and-donate-container {
    max-width: 500px;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

.subscribe-and-donate-container .subscribe-button-container {
    text-align: center;
    margin-bottom: 20px;
}

.subscribe-and-donate-container .subscribe-button {
    background-color: #333;
    color: white;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s;
    justify-content: center;
}

.subscribe-and-donate-container .subscribe-button:hover {
    background-color: #555;
}

.subscribe-and-donate-container .donation-section {
    background-color: #f9f9f9;
    border: 1px solid #4A4A4A;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.subscribe-and-donate-container .donation-content {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.subscribe-and-donate-container .donation-button {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex: 1;
    text-align: center;
}

.subscribe-and-donate-container .donation-button:hover {
    background-color: #555;
}

.subscribe-and-donate-container .donation-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* 社交媒体关注样式 */
.social-media-follow-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 25px;
}

.social-icon img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.social-name {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.social-name a:hover {
    text-decoration: underline;
    color: #0066cc;
}

.social-button {
    margin-left: auto;
}

.follow-button {
    background-color: #333;
    color: white;
    border: none;
    padding: 2px 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.follow-button:hover {
    background-color: #555;
}

.social-title {
    font-size: 24px;
    font-weight: 600;
}

/*文章滾動欄*/

.swiper-container {
    width: 99%;
    height: 100%;
    padding: 20px 0 30px 0;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    height: 280px; /* 设置固定高度，贴近设计图比例 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: none;
}

.post-slide-card {
    position: relative;
    width: 100%;
    height: 100%; /* 使用父元素高度 */
    transform-style: preserve-3d;
    transition: all 0.2s ease;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.post-slide-card:hover {
    box-shadow: none;
}

.image-wrapper {
    position: relative;
    height: 175px; /* 设置固定高度 */
    box-sizing: border-box;
    overflow: hidden;
}

.post-thumbnail img {
    width: 99%;
    height: 99%;
    object-fit: cover;
    border: 1px solid #000;
    border-radius: 10px;
}

.post-date {
    font-size: 12px;
    color: #666666;
}


.post-info {
    padding: 10px 12px;
    background: transparent;
    flex: 1; /* 使用剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-title {
    font-size: 15px;
    color: #333;
    text-align: start;
    padding-top: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 分页圆点样式，贴近设计图 */
.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #cfcfcf;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #6b6b6b;
}

/* tree-menu.css */
.tree-menu {
    list-style: none;
    padding-left: 0;
}

.tree-menu li {
    position: relative;
    margin: 5px 0;
    transition: all 0.3s;
}

.tree-menu a {
    text-decoration: none;
    color: #333;
    padding: 5px;
    display: inline-block;
    transition: color 0.3s;
}

.tree-menu a:hover {
    color: #8ea2de;
}

.tree-menu .sub-menu {
    display: none;
    padding-left: 20px;
}
.tags-list{
    padding-top: 10px;
    display: flex;
    column-gap: 10px;
}
.tag-item-1{
    padding:0 5px;
    border: black 1px solid;
    border-radius: 5px;
}
.menu-arrow {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s;
    vertical-align: middle;
}

.menu-arrow i {
    font-size: 22px;
    color: #666;
    transition: color 0.3s;
}

.tree-menu li.active > .sub-menu {
    display: block;
}

.tree-menu li.active > .menu-arrow {
    transform: rotate(90deg);
}

.tree-menu li.active > .menu-arrow i {
    color: #8ea2de;
}

.tools-title-text {
    font-size: 32px;
    font-weight: 700;
    border-bottom: solid 1px #4A4A4A;
    margin-bottom: 5px;
}
/* 最新文章短代码样式 */
.popular-posts-container .popular-post {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.popular-posts-container .post-thumbnail {
    flex: 0 0 200px;
    margin-right: 15px;
    height: 110px;
    overflow: hidden;
}

.popular-posts-container .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-posts-container .post-content {
    flex: 1;
}

.popular-posts-container .post-title {
    margin: 0;
    font-size: 16px;
}

.popular-posts-container .post-title a {
    text-decoration: none;
    color: inherit;
}

.popular-posts-container .post-title a:hover {
    color: #000;
    text-decoration: underline;
}
/*首页链接悬停样式*/
.uagb-ifb-title a:hover {
    color: #000 !important;
    text-decoration-line: underline !important;
}

@media (max-width: 768px) {
    .follow-button {
        padding: 2px 22px;
    }
}