/* ==========================================================================
   Xuan Cuong Handicraft – design.css (BẢN ĐỀ XUẤT)
   Ba chỉnh sửa thiết kế đi kèm motion:
     1. Thang chữ hero: tiêu đề mở đầu trang lớn hẳn so với tiêu đề section
     2. Nhịp khoảng cách section thống nhất
     3. Nút nổi (chat / lên đầu trang) không che chân trang
   Thêm vào cuối style.css hoặc enqueue SAU tất cả module CSS (kể cả responsive/mobile/desktop.css).
   Selector có tiền tố "body" để thắng các rule cùng cấp trong module cũ mà không cần !important.
   ========================================================================== */

:root {
    /* Thang chữ (Alegreya). clamp(min, ưu tiên theo màn hình, max) */
    --xc-fs-display: clamp(2.25rem, 1.35rem + 2.6vw, 4rem);      /* hero:      36px mobile → 64px desktop */
    --xc-fs-display-sm: clamp(2rem, 1.45rem + 1.6vw, 3rem);       /* hero trang nội dung: 32 → 48px (đạt 48px từ màn ~1650px; 1440px ≈ 46px) */
    --xc-fs-section: clamp(1.625rem, 1.3rem + 0.95vw, 2.25rem);   /* tiêu đề section:    26 → 36px */

    /* Nhịp khoảng cách section: 56px mobile → 96px desktop */
    --xc-section-space: clamp(3.5rem, 2.4rem + 3.2vw, 6rem);
    --xc-section-space-lg: clamp(4.5rem, 3rem + 4.4vw, 8rem);     /* khối nhấn (banner nền tối) */
}

/* ---- 1. Thang chữ hero ----------------------------------------------------- */

/* Hero có ảnh lớn: tiêu đề hiển thị cỡ "display" */
body .hero-headline,
body .about-hero-title,
body .partners-hero-text-col .section-title,
body .journal-hero-title,
body .contact-brand-title,
body .shop-hero-title {
    font-size: var(--xc-fs-display);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Hero của trang nội dung (FAQ, chính sách, chất liệu, bài viết): nhỏ hơn một bậc.
   Đặt hàng quà tặng cũng dùng bậc này vì cột chữ chỉ rộng 620px và tiêu đề có 2 dòng cố định (<br>) */
body .order-hero-heading,
body .faq-main-heading,
body .legal-title,
body .material-detail-title,
body .article-main-title {
    font-size: var(--xc-fs-display-sm);
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

/* Tiêu đề section: tăng nhẹ để có 3 bậc rõ ràng (hero 64 · section 36 · tên thẻ 22) */
body .section-title:not(.partners-hero-text-col .section-title) {
    font-size: var(--xc-fs-section);
    line-height: 1.2;
    text-wrap: balance;
}

/* Mobile: mobile.css ép mọi tiêu đề về 24px bằng "body:not(#_) :is(...) {... !important}".
   Giữ nguyên hệ 3 bậc đó cho tiêu đề section, chỉ thêm một bậc riêng cho tiêu đề hero.
   "html body:not(#_)" có độ ưu tiên cao hơn đúng một bậc để thắng rule kia. */
@media (max-width: 768px) {
    html body:not(#_) :is(.hero-headline, .about-hero-title, .partners-hero-text-col .section-title,
        .journal-hero-title, .contact-brand-title, .shop-hero-title) {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    /* Bỏ ngắt dòng cố định (<br>) để text-wrap: balance tự chia dòng đều, tránh 1 chữ mồ côi */
    :is(.hero-headline, .about-hero-title, .journal-hero-title, .order-hero-heading) br {
        display: none;
    }

    html body:not(#_) :is(.order-hero-heading, .faq-main-heading, .legal-title, .material-detail-title, .article-main-title) {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
}

/* Mô tả dưới tiêu đề hero: rộng tối đa ~60 ký tự để dễ đọc */
body .hero-subtext,
body .about-hero-desc,
body .order-hero-lead,
body .partners-hero-desc,
body .journal-hero-desc,
body .contact-intro-sub {
    max-width: 36rem;
    text-wrap: pretty;
}

/* ---- 2. Nhịp khoảng cách section ------------------------------------------------ */

body .section-workshop-vtv,
body .section-materials,
body .section-favorite-products,
body .section-sale-products,
body .section-journal-preview,
body .section-partners,
body .section-artisan-heritage,
body .section-achievements,
body .section-custom-logo-bulk,
body .section-ready-order,
body .section-custom-process,
body .section-order-faq,
body .section-journal-articles,
body .contact-space-slider-section,
body .page-faq,
body .material-detail-products {
    padding-top: var(--xc-section-space);
    padding-bottom: var(--xc-section-space);
}

/* Khối nhấn nền tối / nền hoạ tiết: rộng hơn một bậc */
body .section-corporate-home-banner,
body .section-custom-rfq-full,
body .section-partner-invitation,
body .section-faq-support {
    padding-top: var(--xc-section-space-lg);
    padding-bottom: var(--xc-section-space-lg);
}

/* ---- 3. Nút nổi không che chân trang -------------------------------------------- */
/* Cụm nút nổi (#siteFloatingContacts) nằm sát mép phải, rộng ~54px.
   Khi container chạm mép màn hình, chừa lề phải cho hàng cuối của footer. */
@media (max-width: 1359px) {
    body .footer-bottom-row {
        padding-right: 72px;
    }
}

@media (max-width: 768px) {
    /* Mobile: thêm khoảng trống dưới cùng để cuộn hết trang vẫn đọc được link pháp lý */
    body .site-footer {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}