/**
 * izebuy site-wide foundations (globals).
 *
 * The single home for rules that intentionally affect the ENTIRE front end:
 * the typographic scale (set on the HTML tags themselves) and a few element
 * resets. Everything else — components, page styles — builds on top of these
 * and overrides them locally where needed.
 *
 * Guiding rule: size text by choosing the RIGHT TAG (h1…h6 for headings, p for
 * body copy), never by inflating a <p> to look like a heading. That keeps markup
 * semantic, helps SEO, and means a wrong-looking size is almost always a wrong
 * tag — easy to spot and fix. These sizes live in code on purpose and are NOT
 * exposed in Theme Options, so they stay consistent and correct.
 *
 * Need a context-specific size (say, a larger body size for blog articles)? Add
 * a small dedicated class (e.g. .ize-prose) and set it there — don't re-size a
 * base tag globally.
 *
 * Selectors are wrapped in :where() so they carry ZERO specificity: they are
 * pure defaults that any component class overrides without a fight.
 *
 * Depends on: tokens.css
 */

/* ── Links ───────────────────────────────────────────────────────────────────
 * No underline on links, site-wide. Deliberately NO !important: this is the
 * site-wide default, and anything that legitimately needs an underline should
 * win by being more specific (e.g. a `.ize-prose a` rule for article bodies).
 * If an underline shows up where it shouldn't, the culprit is a more-specific or
 * later rule fighting this one — find and fix that, don't escalate here. */
body.ize a { text-decoration: none; }

/* ── Base copy ────────────────────────────────────────────────────────────── */
:where(body.ize) {
	font-size: var(--ize-fs-base);   /* 16px — accessible reading baseline */
	line-height: 1.6;
}

/* ── Headings: sized by tag (see scale in tokens.css) ─────────────────────── */
:where(body.ize) h1,
:where(body.ize) h2,
:where(body.ize) h3,
:where(body.ize) h4,
:where(body.ize) h5,
:where(body.ize) h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;   /* tidy multi-line headings where supported */
}
:where(body.ize) h1 { font-size: var(--ize-fs-4xl); }   /* 40px */
:where(body.ize) h2 { font-size: var(--ize-fs-3xl); }   /* 32px */
:where(body.ize) h3 { font-size: var(--ize-fs-2xl); }   /* 28px */
:where(body.ize) h4 { font-size: var(--ize-fs-xl); }    /* 24px */
:where(body.ize) h5 { font-size: var(--ize-fs-lg); }    /* 20px */
:where(body.ize) h6 { font-size: var(--ize-fs-base); }  /* 16px */

/* Step the largest headings down on phones so titles don't wrap badly — the
 * same thing Bootstrap (and the major marketplaces) do on small screens.
 * Tablet and desktop keep the full sizes above. */
@media (max-width: 767.98px) {
	:where(body.ize) h1 { font-size: var(--ize-fs-3xl); }   /* 32px */
	:where(body.ize) h2 { font-size: var(--ize-fs-2xl); }   /* 28px */
	:where(body.ize) h3 { font-size: var(--ize-fs-xl); }    /* 24px */
	:where(body.ize) h4 { font-size: var(--ize-fs-lg); }    /* one step down */
}

/* ── Paragraphs ───────────────────────────────────────────────────────────── */
:where(body.ize) p { margin: 0 0 1em; }
:where(body.ize) p:last-child { margin-bottom: 0; }