/**
 * POG.VN — TYPOGRAPHY SYSTEM
 * Master Brand Typography Rules: Logo (Impact) | Heading (Montserrat) | Body (Inter)
 */

/* ==========================================================================
   1. GLOBAL BASE TYPOGRAPHY
   ========================================================================== */
html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

/* ==========================================================================
   2. LOGO TYPOGRAPHY
   ========================================================================== */
.pog-logo,
.pog-logo-text,
.brand-logo-text,
.site-title a {
  font-family: var(--font-logo) !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pog-logo-icon {
  font-family: var(--font-logo) !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   3. HEADINGS (MONTSERRAT)
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  text-rendering: optimizeLegibility;
}

/* H1: ExtraBold 800 */
h1, .h1 {
  font-size: 56px;
  font-weight: var(--fw-extrabold); /* 800 */
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* H2: Bold 800 */
h2, .h2 {
  font-size: 38px;
  font-weight: var(--fw-extrabold); /* 800 */
  line-height: 1.2;
  letter-spacing: -0.3px;
}

/* H3: Bold 700 */
h3, .h3 {
  font-size: 28px;
  font-weight: var(--fw-bold); /* 700 */
  line-height: 1.25;
}

/* H4: SemiBold 600 */
h4, .h4 {
  font-size: 22px;
  font-weight: var(--fw-semibold); /* 600 */
  line-height: 1.35;
}

h5, .h5 {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

h6, .h6 {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

/* Responsive Heading Adjustments (< 768px Mobile) */
@media (max-width: 767.98px) {
  h1, .h1 {
    font-size: 34px;
    line-height: 1.2;
  }
  h2, .h2 {
    font-size: 26px;
    line-height: 1.25;
  }
  h3, .h3 {
    font-size: 22px;
    line-height: 1.3;
  }
  h4, .h4 {
    font-size: 18px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   4. BODY TEXT SYSTEM (INTER)
   ========================================================================== */
p {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
}

.body-large,
.lead {
  font-size: 18px;
  line-height: 1.6;
}

.body-regular {
  font-size: 16px;
  font-weight: var(--fw-regular); /* 400 */
}

.body-emphasis {
  font-weight: var(--fw-medium); /* 500 */
}

.body-strong, strong, b {
  font-weight: var(--fw-semibold); /* 600 */
}

.text-secondary,
.small-text,
small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (max-width: 767.98px) {
  p {
    font-size: 15px;
  }
  .body-large,
  .lead {
    font-size: 16px;
  }
  .small-text,
  small {
    font-size: 13px;
  }
}

/* ==========================================================================
   5. SPECIAL DTC COMPONENTS TYPOGRAPHY
   ========================================================================== */

/* Product Name / Title: Montserrat 700 */
.pog-card-title,
.woocommerce-loop-product__title,
.product-title,
.pog-product-title,
.woocommerce div.product .product_title {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold) !important; /* 700 */
  line-height: 1.35;
}

/* Product Price & Sale Price: Montserrat 800 */
.pog-card-price,
.woocommerce-Price-amount,
.price,
.pog-price-current,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-extrabold) !important; /* 800 */
}

/* Navigation: Montserrat 700 */
.pog-nav a,
.pog-mobile-nav a,
.primary-menu a,
.nav-link {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold) !important; /* 700 */
  font-size: 14.5px;
  letter-spacing: 0.1px;
}

/* CTA Buttons: Montserrat 700 */
.btn,
button,
input[type="submit"],
.button,
.btn-card-add,
.single_add_to_cart_button,
.pog-btn-primary,
.checkout-button {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold) !important; /* 700 */
  font-size: 15px;
  letter-spacing: 0.3px;
}

@media (max-width: 767.98px) {
  .btn,
  button,
  input[type="submit"],
  .button,
  .btn-card-add,
  .single_add_to_cart_button {
    font-size: 14px;
  }
}

/* Labels and Badges: Montserrat 600 */
.pog-badge-discount,
.pog-badge-tag,
.pog-badge,
.badge,
.onsale,
.pog-action-badge,
.tag-label {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-semibold) !important; /* 600 */
  letter-spacing: 0.2px;
}