/*
 * =============================================
 * NUKY TEA — FONT CHANGE INSTRUCTIONS
 * =============================================
 * To change the website font (frontend + admin):
 *
 * STEP 1: Edit public/css/nuky-theme.css
 *   - Body / UI: --font-primary + @import Be Vietnam Pro (hoặc font khác)
 *   - Tiêu đề cấp 1 (h1): @import Playwrite+US+Trad + block h1/.h1 bên dưới
 *
 * STEP 2: Edit resources/css/filament/admin/theme.css
 *   - Replace @import URL with same Google Font URL
 *   - Update font-family in the admin block at the bottom
 *
 * STEP 3: Run:
 *   npm run build:filament-theme
 *   php artisan view:clear
 *
 * STEP 4: Hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R)
 *
 * POPULAR VIETNAMESE-FRIENDLY FONTS:
 *   Be Vietnam Pro  — current, modern, clean
 *   Nunito          — rounded, friendly
 *   Inter           — neutral, professional
 *   Lexend          — readable, accessible
 *   Mulish          — elegant, light
 *
 * Google Fonts URL pattern:
 * https://fonts.googleapis.com/css2?family=FONT+NAME:wght@300;400;500;600;700;800&display=swap
 * =============================================
 */

/* ============================================
   NUKY TEA — TYPOGRAPHY SYSTEM
   Edit font here → applies to ALL pages (load LAST in app.blade.php)
   ============================================ */

/* --- FONT IMPORT --- */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap");
/* Chữ ký thương hiệu / mọi h1 & hero: CHỈ dùng biến thể này — đổi font tiêu đề → sửa URL + --font-h1-display bên dưới */
@import url("https://fonts.googleapis.com/css2?family=Playwrite+US+Trad&display=swap");

/* --- FONT VARIABLES --- */
:root {
    --font-primary: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
    /* h2–h6 / heading chung (không gồm h1) */
    --font-heading: var(--font-primary);
    /* Chỉ cho h1 / .h1 — Playwrite USA Traditional */
    --font-h1-display: "Playwrite US Trad", cursive;
    --font-mono: ui-monospace, "Courier New", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-loose: 1.8;

    --color-primary: #16a34a;
    --color-primary-light: #dcfce7;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-bg: #ffffff;
    --color-bg-light: #f9fafb;
}

/* Theme palette variables (Donal) — align body text when useful */
:root {
    --body-text: var(--color-text-muted);
    --Text-2: var(--color-text);
}

/*
 * Chỉ áp font chữ cho phần tử thật — KHÔNG set *::before / *::after ở đây.
 * Nếu ép font lên mọi ::before, glyph icon (icomoon / FA đặt nội dung ở :before)
 * sẽ dùng Be Vietnam Pro thay vì font icon → ô trống / ký tự lạ.
 */
* {
    font-family: var(--font-primary) !important;
}

/* Icon fonts — giữ icomoon cho phần tử và pseudo (phòng rule khác can thiệp) */
[class^="icon-"],
[class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]::before,
[class^="icon-"]::after,
[class*=" icon-"]::before,
[class*=" icon-"]::after {
    font-family: "icomoon" !important;
}

.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
    font-weight: 900 !important;
    font-variant: normal;
}

.fa-regular,
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
}

.fa-brands,
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
}

.fa-solid::before,
.fas::before,
.fa-regular::before,
.far::before,
.fa-brands::before,
.fab::before {
    font-family: inherit !important;
}

/* h1 riêng — thắng rule * { font-family … !important } (độ ưu tiên phần tử h1 > *) */
h1,
.h1 {
    font-family: var(--font-h1-display) !important;
    font-style: normal;
    /* Playwrite có descender cao — 1.25 vẫn hay bị cắt khi khối có line-height cố định từ theme */
    line-height: 1.28;
    padding-bottom: 0.06em;
    color: var(--color-text);
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h2,
h3,
h4,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    font-weight: 700;
    color: var(--color-text);
}

body,
input,
textarea,
select,
button {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
}

/* Blog / CMS prose (wrap HTML in .nuky-content) */
.nuky-content {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.nuky-content h2 {
    font-size: var(--text-3xl);
    margin: 2rem 0 1rem;
}

.nuky-content h3 {
    font-size: var(--text-2xl);
    margin: 1.5rem 0 0.75rem;
}

.nuky-content p {
    margin-bottom: 1.25rem;
}

.nuky-content ul,
.nuky-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.nuky-content li {
    margin-bottom: 0.5rem;
}

.nuky-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.nuky-content img {
    max-width: 100%;
    border-radius: 0.5rem;
}

.nuky-content table {
    width: 100%;
    border-collapse: collapse;
}

.nuky-content th,
.nuky-content td {
    border: 1px solid var(--color-border);
    padding: 0.75rem;
}

/* ============================================
   HOW TO CHANGE FONT:
   1. Body: @import + --font-primary  |  h1: @import Playwrite + --font-h1-display
   2. Admin: chỉ Be Vietnam — resources/css/filament/admin/theme.css
   3. npm run build:filament-theme && php artisan view:clear
   ============================================ */

/* ============================================
   ICON FONTS — đổi / thêm icon
   - Icomoon (theme): export từ https://icomoon.io → thay thư mục public/icons/icomoon/
     (fonts + style.css), giữ class dạng icon-ten-icon trong HTML hoặc cập nhật blade.
   - Font Awesome: public/icons/fontawesome/ (đã gắn trong layouts.app) — đổi bản tại
     fontawesome.com → thay css + webfonts tương ứng.
   - Không thêm lại rule dạng *::before { font-family: ... !important } toàn cục.
   ============================================ */

/* Hero + trích dẫn break — cùng Playwrite US Trad (xem @import trên), không uppercase */
.page-title .content .title,
.page-title .content h1.title,
.page-title-home-1 .slide-home-1 .content-wrap .content h1.title,
.s-break-page.style-2 .content h1.title {
    font-family: var(--font-h1-display) !important;
    text-transform: none !important;
    line-height: 1.26;
    padding-bottom: 0.06em;
    overflow: visible;
}

/* ============================================
   PLAYWRITE US TRAD — Full coverage
   All display headings that should use brand font
   ============================================ */

/* Section headings throughout the site */
.heading-section .title,
.heading-section h2.title,
.heading-section h3.title,

/* Hero block CMS — chỉ trong section.tf-slideshow (không đụng div.page-title trang trong) */
section.tf-slideshow .title,
section.tf-slideshow h1,
.tf-banner .title,
.tf-banner h1,
.tf-banner h2,

/* Shop / product headings */
.tf-shop-control-total,
.product-info h1,
.product-detail-title,

/* Blog headings */
.blog-article-title,
.post-detail h1,

/* About / static page headings */
.flat-title .title,
.flat-title h1,
.flat-title h2,

/* CTA / banner sections */
.s-break-page .title,
.s-break-page h2,
.tf-marquee .title,

/* Card headings (product name excluded — too small for display font) */
.our-team .title,
.our-mission .title,
.our-history .title {
    font-family: var(--font-h1-display) !important;
    text-transform: none !important;
    font-style: normal !important;
    line-height: 1.22;
    padding-bottom: 0.08em;
    overflow: visible;
}

/* Explicitly EXCLUDE small UI text from Playwrite */
/* Product card names, nav, buttons, badges stay Be Vietnam Pro */
.card-product .name,
.tf-product-card .name,
nav a,
.nav-ul a,
button,
.btn,
.tf-btn,
.badge,
.price,
table,
input,
textarea,
select,
label,
.text-secondary,
.blog-meta,
.footer-link,
footer a {
    font-family: var(--font-primary) !important;
}

/* ============================================
   NUKY TEA — SPACING SYSTEM
   Single source of truth for ALL spacing
   Section gaps, content rhythm, component padding
   ============================================ */

:root {

    /* ---- SPACING SCALE (base 8px) ---- */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* Subtitle / supporting text line-height (spacing block; theme có --leading-tight/normal/loose) */
    --leading-relaxed: 1.65;

    /* ---- SECTION SPACING ---- */
    /* Top/bottom padding for every full-width section */
    --section-padding-y:      var(--space-20);   /* 80px desktop */
    --section-padding-y-md:   var(--space-16);   /* 64px tablet */
    --section-padding-y-sm:   var(--space-12);   /* 48px mobile */

    /* Gap between section heading and section content */
    --section-header-gap:     var(--space-12);   /* 48px */
    --section-header-gap-sm:  var(--space-8);    /* 32px mobile */

    /* ---- COMPONENT SPACING ---- */
    /* Card internal padding */
    --card-padding:       var(--space-6);    /* 24px */
    --card-padding-sm:    var(--space-4);    /* 16px mobile */

    /* Card gap in grid */
    --card-gap:           var(--space-6);    /* 24px */
    --card-gap-sm:        var(--space-4);    /* 16px mobile */

    /* ---- TEXT BLOCK SPACING ---- */
    /* Space between heading and paragraph inside a section */
    --text-block-gap:     var(--space-4);    /* 16px */

    /* Space between two paragraphs */
    --paragraph-gap:      var(--space-5);    /* 20px */

    /* Space between icon/image and text in feature blocks */
    --feature-gap:        var(--space-4);    /* 16px */

    /* ---- HEADING GROUP SPACING ---- */
    /* .heading-section: the title+subtitle block above a section's content */
    --heading-section-mb: var(--space-12);   /* 48px below heading block */
    --heading-section-mb-sm: var(--space-8); /* 32px mobile */

    /* Space between .title and .sub-title inside heading-section */
    --heading-subtitle-mt: var(--space-3);   /* 12px */

    /* Cỡ dòng phụ section (đồng nhất toàn site, không gồm hero/slideshow — xem nuky-custom) */
    --heading-subtitle-fs: 1.4375rem;       /* ~23px, khớp .heading-section .sub-title theme Donal */
}

/* =============================================
   SECTION RHYTHM
   Every section on every page gets consistent
   top/bottom breathing room
   ============================================= */

/* Universal section padding */
section,
.section,
.flat-spacing,
.flat-spacing-1,
.flat-spacing-2,
.tf-section,
.s-break-page,
.our-mission,
.our-history,
.our-team,
.our-services,
.our-commitments,
.our-events,
.s-testimonial,
.s-blog,
.s-product,
.s-why-us,
.s-faq,
.s-gallery,
.s-contact,
.s-about,
.s-farm,
.s-happy,
.s-video,
.s-project,
.s-orther {
    padding-top:    var(--section-padding-y) !important;
    padding-bottom: var(--section-padding-y) !important;
}

/*
 * Hero / slideshow — CHỈ section.tf-slideshow (block hero CMS: section + .flat-spacing).
 * Không dùng .page-title chung: trang trong dùng div.page-title → bị xóa padding cả khối (ảnh + lớp).
 * div.page-title-home-1 (swiper trang chủ) không nằm trong rule section → giữ padding theme.
 */
section.tf-slideshow {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

/* Sau hero dạng section slideshow — tránh double gap */
section.tf-slideshow + section,
section.tf-slideshow + .section,
section.tf-slideshow + .flat-spacing,

/* Sau banner trang trong (div.page-title) */
.page-title + section,
.page-title + .section,
.page-title + .flat-spacing {
    padding-top: var(--section-padding-y-md) !important;
}

/* =============================================
   HEADING SECTION RHYTHM
   .heading-section is the title block inside a section
   ============================================= */

.heading-section {
    margin-bottom: var(--heading-section-mb);
    text-align: center;
}

.heading-section .title {
    margin-bottom: 0;
    line-height:   var(--leading-tight);
}

.heading-section .sub-title,
.heading-section p.sub-title {
    margin-top:  var(--heading-subtitle-mt);
    margin-bottom: 0;
    font-size:   var(--heading-subtitle-fs);
    color:       var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

/* =============================================
   CARD GRID RHYTHM
   Product cards, blog cards, feature cards
   ============================================= */

/* Product grid */
.tf-grid-layout,
.grid-product,
.list-product,
.row-product {
    gap: var(--card-gap);
}

/* Blog grid */
.list-blog,
.grid-blog,
.row-blog {
    gap: var(--card-gap);
}

/* Feature / why-us blocks */
.list-feature,
.row-feature,
.why-us-list,
.list-why-us {
    gap: var(--card-gap);
}

/* =============================================
   CARD INTERNAL SPACING
   ============================================= */

/* Product card */
.card-product,
.tf-product-card {
    padding: var(--card-padding);
}

.card-product .card-product-info,
.tf-product-card .card-product-info {
    padding-top: var(--space-4);
    gap:         var(--space-2);
    display:     flex;
    flex-direction: column;
}

.card-product .name,
.tf-product-card .name {
    margin-bottom: var(--space-2);
}

.card-product .price-box,
.tf-product-card .price-box {
    margin-top: var(--space-1);
}

/* Blog card */
.card-blog .card-blog-info,
.blog-card .info {
    padding:    var(--card-padding);
    gap:        var(--space-3);
    display:    flex;
    flex-direction: column;
}

.card-blog .title,
.blog-card .title {
    margin-top:    var(--space-2);
    margin-bottom: var(--space-2);
}

.card-blog .meta,
.blog-card .meta {
    margin-bottom: var(--space-3);
}

/* Feature / icon block */
.item-why-us,
.feature-item,
.item-feature {
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--feature-gap);
}

.item-why-us .icon,
.feature-item .icon {
    margin-bottom: var(--feature-gap);
}

.item-why-us .title,
.feature-item .title {
    margin-bottom: var(--space-3);
}

/* =============================================
   TEXT BLOCK RHYTHM inside sections
   p, ul, ol spacing inside any content area
   ============================================= */

.section-content p,
.flat-content p,
.tf-content p {
    margin-bottom: var(--paragraph-gap);
}

.section-content p:last-child,
.flat-content p:last-child {
    margin-bottom: 0;
}

.section-content h2 + p,
.section-content h3 + p,
.flat-content h2 + p {
    margin-top: var(--text-block-gap);
}

/* =============================================
   RESPONSIVE SPACING
   Scale down proportionally on smaller screens
   ============================================= */

@media (max-width: 1199px) {
    :root {
        --section-padding-y:    var(--space-16);   /* 64px */
        --heading-section-mb:   var(--space-10);   /* 40px */
    }
}

@media (max-width: 767px) {
    :root {
        --section-padding-y:    var(--space-12);   /* 48px */
        --section-header-gap:   var(--space-6);    /* 24px */
        --heading-section-mb:   var(--space-8);    /* 32px */
        --card-padding:         var(--space-4);    /* 16px */
        --card-gap:             var(--space-4);    /* 16px */
    }
}

@media (max-width: 575px) {
    :root {
        --section-padding-y:    var(--space-10);   /* 40px */
        --heading-section-mb:   var(--space-6);    /* 24px */
        --card-gap:             var(--space-3);    /* 12px */
    }
}

/* =============================================
   UTILITY CLASSES
   Use in Blade when you need manual override
   ============================================= */

/* Section with less padding (e.g. between two related sections) */
.section-tight {
    padding-top:    var(--space-12) !important;
    padding-bottom: var(--space-12) !important;
}

/* Section with more padding (e.g. hero CTA) */
.section-loose {
    padding-top:    var(--space-32) !important;
    padding-bottom: var(--space-32) !important;
}

/* Remove top padding (when section follows directly after another) */
.no-padding-top    { padding-top:    0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }

/* Heading section align variants */
.heading-section.text-left  { text-align: left; }
.heading-section.text-right { text-align: right; }