/* ====================================================================================================
   TYPOGRAPHY SYSTEM
   ====================================================================================================
   Centralized typography styles using CSS variables from variables.css
   ==================================================================================================== */

/* ===== BASE TYPOGRAPHY ===== */
body {
    font-family: var(--font-primary, "Kanit", sans-serif);
    font-weight: var(--font-weight-regular, 400);
    font-size: var(--font-size-body-md, 1rem);
    color: var(--text-primary, #333);
    line-height: var(--line-height-normal, 1.5);
}

/* ===== HEADINGS ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--text-primary);
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

h5 {
    font-size: var(--font-size-h5);
}

h6 {
    font-size: var(--font-size-h6);
}

/* ===== PARAGRAPH ===== */
p {
    line-height: var(--line-height-relaxed);
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

p:last-child {
    margin-bottom: 0;
}

/* ===== LINKS ===== */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* ===== TEXT UTILITIES ===== */
.text-display-xl {
    font-size: var(--font-size-display-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.text-display-lg {
    font-size: var(--font-size-display-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.text-display-md {
    font-size: var(--font-size-display-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

/* Standard Headings Classes */
.text-h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--text-primary);
}

.text-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--text-primary);
}

.text-h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

.text-h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

.text-h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

.text-h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

/* Body Text Classes */
.text-body-xl {
    font-size: var(--font-size-body-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

.text-body-lg {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

.text-body-md {
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

.text-body-sm {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
}

.text-body-xs {
    font-size: var(--font-size-body-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-muted);
}

/* Special Text */
.text-caption {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-muted);
}

.text-label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.text-overline {
    font-size: var(--font-size-overline);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ===== TEXT TRUNCATION ===== */
.txt1line {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.txt2line {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.txt3line {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ===== FONT WEIGHTS ===== */
.font-light {
    font-weight: var(--font-weight-light) !important;
}

.font-regular {
    font-weight: var(--font-weight-regular) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* ===== TEXT ALIGNMENT ===== */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

/* ===== TEXT INDENT ===== */
.text-indent {
    text-indent: 30px;
}

.text-decoration-none {
    text-decoration: none !important;
}

/* ===== SECTION HEADERS (Global Component) ===== */
.svc-layout-content {
    background: var(--bg-secondary);
}

.section-header {
    margin-bottom: var(--space-8);
    text-align: center;
}

.section-header--center {
    text-align: center;
}

.section-header__label {
    display: block;
    font-size: var(--font-size-body-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    margin-bottom: var(--space-2, 0.5rem);
    font-family: var(--font-primary);
}

.section-header__title {
    font-size: var(--font-size-h2, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary, #333);
    line-height: 1.3;
}

.section-header__highlight {
    color: var(--color-primary);
    /* Uses main theme color */
    display: inline-block;
}

@media (max-width: 768px) {
    .section-header__title {
        font-size: var(--font-size-h3, 1.75rem);
    }
}