/*
 * Site-level overrides of the shared codex-vitepress-theme.
 *
 * Loaded after the theme's bundled CSS via a <link> in .vitepress/config.ts so
 * these :root declarations take precedence over the Codex design tokens defined
 * in @wikimedia/codex-design-tokens/theme-wikimedia-ui.css.
 *
 * Typography stack follows the Wikimedia Brand Typography guide:
 *   https://meta.wikimedia.org/wiki/Brand/Typography
 *
 * @font-face rules for these families live in /fonts/fonts.css (auto-generated
 * by scripts/download-fonts.mjs).
 */
:root {
	--font-family-system-sans:
		"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	/*
	 * Inter occupies the Codex "serif" slot — semantically a misnomer (Inter is
	 * sans), but we use this token as "the body / reading font" and Inter reads
	 * better on screen than the available serif options.
	 */
	--font-family-serif:
		"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Brand guide: Montserrat looks good set big and bold — use it for headlines. */
	--font-family-heading-main: var( --font-family-system-sans );
}

/*
 * Long-form Markdown prose (.vp-doc) reads in Inter; headings stay on
 * Montserrat for the punchy headline look. Navigation, sidebar, cards,
 * tables, and other component chrome keep the Montserrat sans default.
 */
.vp-doc {
	font-family: var( --font-family-serif );
}

.vp-doc :is( h1, h2, h3, h4, h5, h6 ) {
	font-family: var( --font-family-system-sans );
}

/*
 * .ref-link inline buttons read better as upright Montserrat than as italic
 * Inter — match the theme's own selector specificity so we win on both
 * font-family and font-style (theme sets italic in components.less:51).
 */
main > .vp-doc a.ref-link {
	font-family: var( --font-family-system-sans );
	font-style: normal;
}

/* Foreword / executive-summary signatures (<p class="byline">…</p>). */
.vp-doc p.byline {
	font-family: var( --font-family-system-sans );
}

/*
 * Hide the mobile nav hamburger. VitePress renders .VPNavBarHamburger
 * unconditionally (VPNavBar.vue) and only hides it ≥768px via CSS, so on
 * mobile it always shows even though the VPNavScreen drawer it opens is empty
 * on this site: no top-nav (nav: []), no per-path nav (cdxPathOverrides set no
 * `nav`), appearance is `false` (handled by the in-bar menu), and social links
 * are footer-only (cdxSocialLinksInNav: false). The sidebar is still reachable
 * via the separate "Menu" button in .VPLocalNav.
 */
.VPNavBar .VPNavBarHamburger {
	display: none;
}