/*
 * Bon Market Base — main.css
 * -------------------------------------------------------------------
 * Deliberately minimal. This provides only the structural plumbing
 * (box-sizing, a centred container, accessible skip link, a working
 * mobile nav toggle). There is intentionally NO visual design here —
 * colours, type, spacing scale and component styling get layered on
 * when the theme is skinned. Treat everything below as replaceable.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* Centered content container. Adjust or remove when skinning. */
.site-header__inner,
.site-content,
.site-footer__inner {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* --- Accessibility: skip link + screen-reader text --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

.skip-link:focus {
	left: 0;
}

/* --- Header + primary nav (bare structure) --- */
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Mobile nav toggle: hidden on wider screens, shown when JS marks it. */
.menu-toggle {
	display: none;
}

@media (max-width: 768px) {
	.menu-toggle {
		display: inline-block;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.main-navigation.toggled ul {
		display: flex;
	}
}

/* --- Footer nav --- */
.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}