/*
 * Network Theme base styles.
 *
 * Brand colours arrive as CSS custom properties emitted per site by
 * inc/settings-bridge.php. The fallbacks below match its PHP defaults.
 *
 * TODO(jesper): real design system. This is a deliberately small skeleton.
 */

:root {
	--brand-primary: #0f4c81;
	--brand-accent: #e8590c;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6;
	color: #1c1c1c;
	background: #fff;
}

a {
	color: var(--brand-primary);
}

a:hover,
a:focus {
	color: var(--brand-accent);
}

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 4px solid var(--brand-primary);
}

.site-header__link {
	text-decoration: none;
}

.site-header__name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--brand-primary);
}

.site-header__logo {
	max-height: 3rem;
	width: auto;
}

.site-header__tagline {
	margin: 0;
	font-size: 0.875rem;
	color: #555;
}

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

.site-main {
	max-width: 60rem;
	margin: 0 auto;
	padding: 1.5rem;
}

.affiliate-disclosure {
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	background: #f6f6f6;
	border-left: 4px solid var(--brand-accent);
}

.affiliate-link {
	display: inline-block;
	padding: 0.5rem 1rem;
	color: #fff;
	background: var(--brand-accent);
	border-radius: 0.25rem;
	text-decoration: none;
}

.affiliate-link:hover,
.affiliate-link:focus {
	color: #fff;
	background: var(--brand-primary);
}

.post-list__item {
	padding: 1rem 0;
	border-bottom: 1px solid #e5e5e5;
}

.post-list__title a {
	text-decoration: none;
}

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

.site-footer {
	margin-top: 3rem;
	padding: 1.5rem;
	color: #fff;
	background: var(--brand-primary);
}

.site-footer a {
	color: #fff;
}

.site-footer__copyright {
	margin-bottom: 0;
	font-size: 0.875rem;
}