/**
 * Base typographic conventions shared by every template.
 * Editorial serif for display/headline text, Archivo for interface text,
 * uppercase micro-tracked labels for eyebrows/nav — per design reference.
 */

body {
	font-family: var(--k-font-sans);
	font-weight: 400;
	font-size: 15px;
}

.k-serif {
	font-family: var(--k-font-serif);
	font-weight: 400;
}

.k-wordmark {
	font-family: var(--k-font-serif);
	letter-spacing: var(--k-tracking-logo);
	text-indent: var(--k-tracking-logo);
	white-space: nowrap;
	font-size: clamp(17px, 1.7vw, 23px);
}

.k-eyebrow {
	font-size: var(--k-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--k-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--k-color-muted-2);
}

.k-label {
	font-size: var(--k-text-label);
	letter-spacing: var(--k-tracking-label);
	text-transform: uppercase;
	color: var(--k-color-muted-3);
}

/**
 * .k-header__nav-link (primary nav, includes mega-menu triggers) and
 * .k-header__utility's direct <a> children (Account/Saved/Bag) reuse this
 * same rule rather than duplicating its values — approved reference applies
 * this treatment at the utility-bar/nav container level (inline style on
 * <nav>/<div>), but doing that here would also cascade into the mega menu
 * (a sibling of .k-header__nav-link inside the same <li>, so it's excluded
 * by targeting the link itself) and into .k-search's nested input/results
 * list (a descendant of .k-header__utility, excluded by the `>` combinator
 * only matching its direct <a> children) — both must keep their own
 * typography untouched. .k-theme-toggle isn't listed here because it's a
 * <button>, not an <a>; it gets the same result via the k-nav-link class
 * added directly in its markup (see header.css).
 *
 * Visual Polish 3: WooCommerce's own real .woocommerce-MyAccount-navigation-
 * link <a> (My Account's left-hand tab list) reuses it too — it's the same
 * "short uppercase nav label" role as the header links above, just laid out
 * vertically; account.css previously duplicated an .24em label tracking
 * value here instead (too wide for a word-per-line list, more suited to a
 * short standalone eyebrow), color/padding/active-state stay in account.css.
 */
.k-nav-link,
.k-header__nav-link,
.k-header__utility > a,
body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
}

/* Saved/Cart both hold a real text label plus a separate
   .k-header__cart-count span ("Cart" + "(0)") in the same <a> — QA at
   1440px/EN found the 11px+tracked label alone can measure just past the
   flex item's available width where the pre-fix 15px untracked text used
   to fit, wrapping the count onto its own line. These two are the only
   utility links with that two-part content, so scope the fix to them
   rather than blanket nowrap on every .k-header__utility > a. */
[data-wishlist-count],
[data-cart-drawer-trigger] {
	white-space: nowrap;
}

h1, h2, h3 {
	font-family: var(--k-font-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.05;
}