/*
Theme Name: 亚特兰大168
Theme URI: https://atlanta168.com
Author: Atlanta168
Author URI: https://atlanta168.com
Description: 亚特兰大华人生活信息网站主题 - 基于Tailwind CSS的现代化分类信息网站主题
Version: 1.0.16
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atlanta168
Tags: custom-menu, featured-images, translation-ready, blog, news
*/

@layer base, components, utilities;

@layer base {
    :root {
        font-synthesis: none;
        --banner-height: 48px;
        --banner-height-v2: 40px;
        --full-height-with-banner: calc(100dvh - var(--banner-height));
        --primary-color: #E87C2F;
        --primary-hover: #F7A754;
        --text-dark: #2F2F2F;
        --text-gray: #5C5C5C;
        --border-color: #EFEFEF;
        --bg-light: #FAFAFA;
    }

    body {
        background-color: var(--bg-light);
        color: var(--text-dark);
        font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* 容器样式（去除冗余属性，保持原有行为） */
    #container .css-myl2ny {
        position: relative;
        flex: 1 0 0;
        display: block;
    }

    #container .css-exq74d {
        min-width: 1px;
        min-height: 1px;
        width: 100%;
        height: 100dvh;
    }

    #container .css-j9f0op {
        width: 100%;
        height: 100%;
    }

    /* 链接样式（增加平滑过渡，提升交互体验） */
    a {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s ease;
    }

    a:hover {
        color: var(--primary-color);
    }

    /* 卡片悬停（增加过渡，提升流畅感） */
    .post-card {
        transition: box-shadow 0.3s ease;
    }

    .post-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* 轮播图 */
    .carousel-slide {
        transition: opacity 0.5s ease;
    }

    /* WordPress 基础块 */
    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }

    .aligncenter {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .alignleft {
        float: left;
        margin-right: 1rem;
    }

    .alignright {
        float: right;
        margin-left: 1rem;
    }
}

@layer components {
    /* 分页（略微减少顶部间距，更紧凑） */
    .pagination {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .pagination a,
    .pagination span {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        background: white;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .pagination .current {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    /* 评论列表（优化间距、增加轻微悬停反馈） */
    .comment-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .comment-list > li {
        margin-bottom: 1.5rem;
    }

    .comment-list > li:last-child {
        margin-bottom: 0;
    }

    .comment-list .children {
        list-style: none;
        padding: 0;
        margin: 1rem 0 0 2rem;
        border-left: 2px solid var(--border-color);
        padding-left: 1rem;
    }

    .comment-list .children .children {
        margin-left: 1rem;
    }

    .comment-body {
        padding: 0.75rem;
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        transition: box-shadow 0.2s ease;
    }

    .comment-body:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    /* 评论表单（优化间距、增加焦点状态） */
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        margin-bottom: 1rem;
        transition: border-color 0.2s ease;
    }

    .comment-form input[type="text"]:focus,
    .comment-form input[type="email"]:focus,
    .comment-form textarea:focus {
        border-color: var(--primary-color);
        outline: none;
    }

    .comment-form input[type="submit"] {
        background: var(--primary-color);
        color: white;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .comment-form input[type="submit"]:hover {
        background: var(--primary-hover);
    }

    /* Jetpack 相关推荐（整体更紧凑、简洁、现代卡片风格） */
    #jp-relatedposts {
        margin-top: 1.5rem;
        padding: 1rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    #jp-relatedposts .jp-relatedposts-headline {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1rem;
        border: none;
    }

    #jp-relatedposts .jp-relatedposts-headline em {
        font-style: normal;
        font-size: 0;
    }

    #jp-relatedposts .jp-relatedposts-headline em::before {
        content: "相关推荐";
        font-size: 1.25rem;
    }

    #jp-relatedposts .jp-relatedposts-items {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    #jp-relatedposts .jp-relatedposts-post {
        margin: 0 !important;
        padding: 0 !important;
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        overflow: hidden;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    #jp-relatedposts .jp-relatedposts-post:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
    }

    #jp-relatedposts .jp-relatedposts-post-img {
        width: 100% !important;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    #jp-relatedposts .jp-relatedposts-post-title {
        padding: 0.75rem 0.75rem 0.5rem;
    }

    #jp-relatedposts .jp-relatedposts-post-title a {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-dark);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s ease;
    }

    #jp-relatedposts .jp-relatedposts-post-title a:hover {
        color: var(--primary-color);
    }

    #jp-relatedposts .jp-relatedposts-post-date {
        padding: 0 0.75rem;
        font-size: 0.8rem;
        color: var(--text-gray);
    }

    #jp-relatedposts .jp-relatedposts-post-context {
        padding: 0.25rem 0.75rem 0.75rem;
        font-size: 0.8rem;
        color: var(--text-gray);
    }
}

@layer utilities {
    .wrapper-with-banner .min-h-screen {
        min-height: var(--full-height-with-banner);
    }

    .wrapper-with-banner .h-screen {
        height: var(--full-height-with-banner);
    }

    @media (max-width: 600px) {
        .banner-v2-container {
            left: 0 !important;
            right: 0 !important;
            margin: 0 auto !important;
        }
    }

    @media (max-width: 768px) {
        .hide-mobile {
            display: none !important;
        }

        #jp-relatedposts .jp-relatedposts-items {
            grid-template-columns: 1fr;
        }
    }

    @media (min-width: 769px) {
        .show-mobile {
            display: none !important;
        }
    }
}