/**
 * Location: /assets/css/typography-style/typography-style.css
 * Purpose:
 * - Frontend CSS for Design & Layout → Typography settings.
 * - Uses CSS variables injected by /inc/features/typography-style/typography-style.php.
 * - Keeps typography controlled without changing layout structure.
 *
 * @package SuntechMallVPro
 */

/* ==========================================================================
   Typography Variables - Fallbacks
   ========================================================================== */

:root {
	--stm-typo-body-font-size: 15px;
	--stm-typo-body-line-height: 1.6;
	--stm-typo-body-font-weight: 400;

	--stm-typo-h1-font-size: 36px;
	--stm-typo-h2-font-size: 28px;
	--stm-typo-h3-font-size: 22px;
	--stm-typo-heading-font-weight: 700;
	--stm-typo-heading-line-height: 1.25;

	--stm-typo-product-title-font-size: 15px;
	--stm-typo-product-title-font-weight: 600;
	--stm-typo-product-price-font-size: 16px;
	--stm-typo-product-price-font-weight: 700;

	--stm-typo-menu-font-size: 14px;
	--stm-typo-menu-font-weight: 600;
	--stm-typo-button-font-size: 14px;
	--stm-typo-button-font-weight: 700;

	--stm-typo-small-text-font-size: 12px;
	--stm-typo-mobile-scale: 92%;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
	font-size: var(--stm-typo-body-font-size);
	font-weight: var(--stm-typo-body-font-weight);
	line-height: var(--stm-typo-body-line-height);
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
.entry-title,
.page-title,
.woocommerce-products-header__title {
	font-size: var(--stm-typo-h1-font-size);
	font-weight: var(--stm-typo-heading-font-weight);
	line-height: var(--stm-typo-heading-line-height);
}

h2,
.stm-section-title,
.woocommerce-loop-category__title {
	font-size: var(--stm-typo-h2-font-size);
	font-weight: var(--stm-typo-heading-font-weight);
	line-height: var(--stm-typo-heading-line-height);
}

h3,
.widget-title,
.stm-card-title {
	font-size: var(--stm-typo-h3-font-size);
	font-weight: var(--stm-typo-heading-font-weight);
	line-height: var(--stm-typo-heading-line-height);
}

/* ==========================================================================
   Product Typography
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.stm-product-title,
.stm-product-title a {
	font-size: var(--stm-typo-product-title-font-size);
	font-weight: var(--stm-typo-product-title-font-weight);
	line-height: 1.35;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.stm-product-price {
	font-size: var(--stm-typo-product-price-font-size);
	font-weight: var(--stm-typo-product-price-font-weight);
	line-height: 1.3;
}

/* ==========================================================================
   Menu Typography
   ========================================================================== */

.stm-header nav a,
.stm-navbar a,
.stm-main-navigation a,
.main-navigation a,
.primary-navigation a,
.menu a {
	font-size: var(--stm-typo-menu-font-size);
	font-weight: var(--stm-typo-menu-font-weight);
}

/* ==========================================================================
   Button Typography
   ========================================================================== */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.stm-button,
.stm-btn {
	font-size: var(--stm-typo-button-font-size);
	font-weight: var(--stm-typo-button-font-weight);
}

/* ==========================================================================
   Small / Meta Text
   ========================================================================== */

small,
.description,
.stm-meta,
.stm-small-text,
.woocommerce ul.products li.product .star-rating,
.woocommerce-result-count,
.woocommerce-breadcrumb,
.posted_in,
.tagged_as,
.product_meta {
	font-size: var(--stm-typo-small-text-font-size);
}

/* ==========================================================================
   Responsive Typography Scale
   ========================================================================== */

@media (max-width: 782px) {
	body {
		font-size: calc(var(--stm-typo-body-font-size) * (var(--stm-typo-mobile-scale) / 100));
	}

	h1,
	.entry-title,
	.page-title,
	.woocommerce-products-header__title {
		font-size: calc(var(--stm-typo-h1-font-size) * (var(--stm-typo-mobile-scale) / 100));
	}

	h2,
	.stm-section-title,
	.woocommerce-loop-category__title {
		font-size: calc(var(--stm-typo-h2-font-size) * (var(--stm-typo-mobile-scale) / 100));
	}

	h3,
	.widget-title,
	.stm-card-title {
		font-size: calc(var(--stm-typo-h3-font-size) * (var(--stm-typo-mobile-scale) / 100));
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title a,
	.stm-product-title,
	.stm-product-title a {
		font-size: calc(var(--stm-typo-product-title-font-size) * (var(--stm-typo-mobile-scale) / 100));
	}
}