/*
 * Brand tokens from HQ Brand Guidelines_page-0001.pdf (verbatim hex values,
 * not re-guessed from the live hqtanzania.co.tz site, which drifts from the
 * guideline in places). Nexa is the specified brand typeface, but its
 * license status is unresolved (see hq/CLAUDE.md's 2026-07-31 font entry) —
 * this is now a public commercial site, not an internal prototype, so a
 * safely-licensed system stack is used until that's confirmed. Swap
 * --font-family once resolved; nothing else should need to change.
 */
:root {
	--green: #04502B;
	--white: #FFFFFF;
	--blue: #2AAFDC;
	--grey: #BDBCC0;
	--black: #000000;
	--font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--font-family);
	color: var(--black);
	background: var(--white);
}

/* Bilingual toggle: server renders both languages, this just picks one. */
html[data-lang="en"] [data-hq-lang="sw"] { display: none; }
html[data-lang="sw"] [data-hq-lang="en"] { display: none; }

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--grey);
}
.brand { display: flex; align-items: center; }
.logo { height: 40px; width: auto; }
.nav { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.nav a { color: var(--black); text-decoration: none; }
#langToggle {
	border: 1px solid var(--green);
	background: var(--white);
	color: var(--green);
	border-radius: 6px;
	padding: 6px 12px;
	cursor: pointer;
}

.hero {
	background: var(--green);
	color: var(--white);
	padding: 64px 24px;
	text-align: center;
}
.hero h1 { margin: 0; font-size: 2rem; }

.sec { padding: 48px 24px; }
.sec h2 { color: var(--green); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.card { border: 1px solid var(--grey); border-radius: 8px; padding: 16px; }
.card img { width: 100%; height: auto; border-radius: 4px; }
.price { color: var(--blue); font-weight: 700; margin-top: 8px; }
.muted { color: var(--grey); }

.site-footer {
	background: var(--black);
	color: var(--white);
	text-align: center;
	padding: 24px;
}