/* ============================================================
   TYPOGRAPHY.CSS – Semantic Typography Classes
   Máy Trường Phát – Quản lý typography theo vai trò nội dung
   ============================================================ */

/* ============================================================
   HEADINGS (H1–H6)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-heading);
}

h1 {
    font-size: clamp(1.75rem, 2.5vw, var(--fs-4xl));
    line-height: 1.15;
    margin-bottom: 0.5em;
}

h2 {
    font-size: clamp(1.375rem, 2vw, var(--fs-3xl));
    line-height: 1.2;
    margin-bottom: 0.45em;
}

h3 {
    font-size: clamp(1.125rem, 1.6vw, var(--fs-2xl));
    line-height: 1.25;
    margin-bottom: 0.4em;
}

h4 {
    font-size: clamp(1rem, 1.3vw, var(--fs-xl));
    line-height: 1.3;
    margin-bottom: 0.35em;
}

h5 {
    font-size: var(--fs-lg);
    line-height: 1.35;
    margin-bottom: 0.3em;
}

h6 {
    font-size: var(--fs-base);
    line-height: 1.4;
    margin-bottom: 0.25em;
}

/* ============================================================
   PARAGRAPH & BODY TEXT
   ============================================================ */
p {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

.body-text {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.text-small {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.text-xs {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
}

/* ============================================================
   PAGE TITLE & SECTION TITLE
   ============================================================ */
.page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, var(--fs-4xl));
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-heading);
    margin-bottom: 0.4em;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.8vw, var(--fs-2xl));
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.5em;
}

.section-subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   PRODUCT TYPOGRAPHY
   ============================================================ */
.product-name {
    font-family: var(--font-heading);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--color-heading);
}

.product-price {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-link);
}

.product-old-price {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    text-decoration: line-through;
    line-height: 1.3;
}

.product-discount {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: #dc2626;
}

.product-meta {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
}

.product-sku {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.product-description {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.product-badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-transform: none;
}

/* ============================================================
   NAVIGATION TYPOGRAPHY
   ============================================================ */
.header-menu {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.breadcrumb {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

.breadcrumb a {
    color: inherit;
    transition: color var(--trans);
}

.breadcrumb a:hover {
    color: var(--color-link);
}

.breadcrumb strong,
.breadcrumb .current {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.footer-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

/* ============================================================
   BUTTONS & INTERACTIVE
   ============================================================ */
button,
.button,
.btn {
    font-family: var(--font-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.text-muted {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
}

.text-soft {
    color: var(--color-text-soft);
}

.text-link {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--trans);
}

.text-link:hover {
    color: var(--color-link-hover);
}

/* ============================================================
   CONTENT EDITOR (Nội dung từ database / CKEditor)
   ============================================================ */
.content-editor {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-loose);
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.content-editor h2 {
    font-size: clamp(1.25rem, 1.6vw, var(--fs-2xl));
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--color-heading);
    margin: 1.5em 0 0.6em;
}

.content-editor h3 {
    font-size: clamp(1.1rem, 1.3vw, var(--fs-xl));
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--color-heading);
    margin: 1.3em 0 0.5em;
}

.content-editor h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: var(--color-heading);
    margin: 1.2em 0 0.4em;
}

.content-editor p {
    margin-bottom: 1em;
    font-size: inherit;
    line-height: inherit;
}

.content-editor ul,
.content-editor ol {
    margin: 0.8em 0 1.2em;
    padding-left: 1.5em;
    font-size: inherit;
    line-height: inherit;
}

.content-editor ul {
    list-style: disc;
}

.content-editor ol {
    list-style: decimal;
}

.content-editor li {
    margin-bottom: 0.35em;
}

.content-editor table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin: 1.2em 0;
}

.content-editor table th,
.content-editor table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.content-editor table th {
    background: #f5f5f5;
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
}

.content-editor blockquote {
    margin: 1.2em 0;
    padding: 12px 20px;
    border-left: 4px solid var(--color-link);
    background: #f8f9fa;
    font-style: italic;
    color: var(--color-text-soft);
    line-height: var(--lh-relaxed);
}

.content-editor img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
}

.content-editor a {
    color: var(--color-link);
    text-decoration: underline;
    transition: color var(--trans);
}

.content-editor a:hover {
    color: var(--color-link-hover);
}

.content-editor strong {
    font-weight: var(--fw-bold);
}

.content-editor em {
    font-style: italic;
}

/* Reset inline style từ CKEditor có thể ghi đè typography */
.content-editor [style*="font-family"],
.content-editor [style*="font-size"] {
    font-family: inherit !important;
    font-size: inherit !important;
}

/* ============================================================
   RESPONSIVE TYPOGRAPHY
   ============================================================ */
@media (max-width: 992px) {
    html {
        font-size: 15.5px;
    }

    .section-title {
        font-size: clamp(1.15rem, 2vw, var(--fs-xl));
    }

    .product-price {
        font-size: var(--fs-lg);
    }
}

@media (max-width: 767px) {
    html {
        font-size: 15px;
    }

    body {
        font-size: var(--fs-base);
        line-height: 1.6;
    }

    .page-title {
        font-size: clamp(1.35rem, 5vw, var(--fs-2xl));
    }

    .section-title {
        font-size: clamp(1.1rem, 4vw, var(--fs-xl));
    }

    .header-menu {
        font-size: var(--fs-sm);
    }

    .product-name {
        font-size: var(--fs-sm);
    }

    .product-price {
        font-size: var(--fs-lg);
    }

    .content-editor {
        font-size: var(--fs-sm);
        line-height: 1.7;
    }

    .content-editor h2 {
        font-size: clamp(1.15rem, 3.5vw, var(--fs-xl));
    }

    .content-editor h3 {
        font-size: clamp(1rem, 3vw, var(--fs-lg));
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14.5px;
    }

    .product-name {
        font-size: var(--fs-sm);
    }

    .product-price {
        font-size: var(--fs-base);
    }
}