/*
Typography Unification CSS - Thống nhất Typography và Buttons cho Website
Sửa các vấn đề xung đột CSS giữa blog posts và website
*/

/* ==========================================================================
   1. THỐNG NHẤT FONT SIZES CHO TOÀN WEBSITE
   ========================================================================== */

/* Thiết lập font-size chuẩn cho website theo SEO best practices */
html {
    font-size: 16px; /* Base font size */
}

body {
    font-family: inherit;
    font-size: 16px !important; /* Chuẩn cho body text */
    line-height: 1.6 !important;
    color: #212529 !important;
}

/* ==========================================================================
   2. THỐNG NHẤT HEADING HIERARCHY (H1-H6) - CHUẨN SEO
   ========================================================================== */

/* H1 - Title chính của trang/bài viết - Quan trọng nhất */
h1,
.h1,
.entry-title,
.post-title,
.page-title,
.blog-main-title,
.hero-title,
.single-post .post-title,
.single-post .entry-title {
    font-size: 32px !important; /* Tăng từ 28px lên 32px để cân bằng */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    color: #212529 !important;
}

/* H2 - Tiêu đề section chính */
h2,
.h2,
.section-title,
.category-title,
.widget-title,
.single-post .post-content h2,
.single-post .entry-content h2 {
    font-size: 26px !important; /* Tăng từ 24px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    color: #212529 !important;
}

/* H3 - Tiêu đề sub-section */
h3,
.h3,
.featured-post-content h3,
.single-post .related-posts h3,
.single-post .post-content h3,
.single-post .entry-content h3,
.secondary-post-card .post-title,
.main-post-card .post-title {
    font-size: 22px !important; /* Tăng từ 20px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
    color: #212529 !important;
}

/* H4 - Tiêu đề phụ */
h4,
.h4,
.category-post-card .post-title,
.recent-post-card .post-title,
.popular-post-content h4,
.single-post .post-content h4,
.single-post .entry-content h4 {
    font-size: 20px !important; /* Tăng từ 18px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    color: #212529 !important;
}

/* H5 - Tiêu đề nhỏ */
h5,
.h5,
.single-post .post-content h5,
.single-post .entry-content h5 {
    font-size: 18px !important; /* Tăng từ 16px */
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    color: #212529 !important;
}

/* H6 - Tiêu đề nhỏ nhất */
h6,
.h6,
.single-post .post-content h6,
.single-post .entry-content h6 {
    font-size: 16px !important; /* Tăng từ 14px */
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #212529 !important;
}

/* ==========================================================================
   3. THỐNG NHẤT BODY TEXT - BLOG POSTS VÀ WEBSITE
   ========================================================================== */

/* Content chính của blog posts */
.single-post .post-content,
.single-post .entry-content,
.post-content,
.entry-content,
.content-area .post-excerpt,
.blog-post-content {
    font-size: 18px !important; /* Tăng từ 16px để dễ đọc hơn */
    line-height: 1.7 !important; /* Tăng line-height để dễ đọc */
    color: #495057 !important;
}

/* Paragraph styling */
.single-post .post-content p,
.single-post .entry-content p,
.post-content p,
.entry-content p {
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
    color: #495057 !important;
}

/* Excerpt trong blog listing */
.hero-excerpt,
.post-excerpt,
.entry-summary {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #6c757d !important;
    margin-bottom: 20px !important;
}

/* ==========================================================================
   4. THỐNG NHẤT BORDER-RADIUS CHO TOÀN WEBSITE
   ========================================================================== */

/* CSS Variables cho border-radius thống nhất */
:root {
    --border-radius-small: 6px;   /* Cho buttons nhỏ, inputs */
    --border-radius-medium: 8px;  /* Cho cards, containers chính */
    --border-radius-large: 12px;  /* Cho sections lớn */
    --border-radius-round: 50%;   /* Cho avatar, icons tròn */
}

/* ==========================================================================
   5. BUTTONS THỐNG NHẤT
   ========================================================================== */

/* Tất cả buttons sử dụng border-radius thống nhất */
button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wc-forward,
.added_to_cart,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-Button,
.hero-read-more-btn,
.view-all-btn,
.newsletter-form button,
.woocommerce .button,
.woocommerce button.button,
a.button,
.elementor-button {
    border-radius: var(--border-radius-small) !important; /* 6px thống nhất */
    transition: all 0.3s ease !important;
}

/* Buttons lớn đặc biệt */
.hero-read-more-btn,
.newsletter-form button,
.single_add_to_cart_button,
.checkout-button {
    border-radius: var(--border-radius-medium) !important; /* 8px cho buttons lớn */
}

/* ==========================================================================
   6. CARDS VÀ CONTAINERS
   ========================================================================== */

/* Cards và containers sử dụng border-radius medium */
.post-card,
.main-post-card,
.secondary-post-card,
.content-area,
.single-post .content-area,
.related-posts,
.newsletter-cta-section,
.blog-hero,
.author-box,
.widget {
    border-radius: var(--border-radius-medium) !important; /* 8px */
}

/* Containers lớn sử dụng border-radius large */
.blog-redesigned .content-area,
.checkout-container,
.cart-container {
    border-radius: var(--border-radius-large) !important; /* 12px */
}

/* ==========================================================================
   7. FORM ELEMENTS
   ========================================================================== */

/* Input fields thống nhất */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
.form-control,
.woocommerce input,
.woocommerce select,
.woocommerce textarea {
    border-radius: var(--border-radius-small) !important; /* 6px */
}

/* ==========================================================================
   8. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    /* Giảm font size cho mobile */
    h1, .h1, .entry-title, .post-title {
        font-size: 26px !important;
    }

    h2, .h2, .section-title {
        font-size: 22px !important;
    }

    h3, .h3 {
        font-size: 20px !important;
    }

    h4, .h4 {
        font-size: 18px !important;
    }

    h5, .h5 {
        font-size: 16px !important;
    }

    h6, .h6 {
        font-size: 15px !important;
    }

    /* Body text trên mobile */
    .single-post .post-content,
    .single-post .entry-content,
    .post-content,
    .entry-content {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    /* Điều chỉnh thêm cho màn hình rất nhỏ */
    h1, .h1, .entry-title, .post-title {
        font-size: 24px !important;
    }

    h2, .h2 {
        font-size: 20px !important;
    }

    h3, .h3 {
        font-size: 18px !important;
    }

    .single-post .post-content,
    .single-post .entry-content {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   9. OVERRIDE CONFLICTING STYLES
   ========================================================================== */

/* Override hero title trong blog-layout.css */
.hero-title {
    font-size: 32px !important; /* Thay vì 42px */
}

/* Override post title trong cards */
.secondary-post-card .post-title,
.main-post-card .post-title {
    font-size: 22px !important; /* Thay vì 20px và 18px */
}

/* Override specific blog overrides */
.blog-main-title,
.single-post .post-title,
.single-post .entry-title {
    font-size: 32px !important; /* Thống nhất H1 */
}

/* ==========================================================================
   10. PAGINATION VÀ NAVIGATION
   ========================================================================== */

.pagination .page-numbers,
.nav-links .page-numbers {
    border-radius: var(--border-radius-small) !important; /* 6px */
}

/* ==========================================================================
   11. BREADCRUMBS VÀ META
   ========================================================================== */

.breadcrumb,
.post-meta,
.entry-meta {
    font-size: 14px !important;
    color: #6c757d !important;
}

/* Category và tag badges */
.post-categories a,
.post-category-badge span,
.tag-link {
    border-radius: 20px !important; /* Giữ tròn cho badges */
    font-size: 12px !important;
}

/* End of Typography Unification CSS */