/* CSS style for doc.slitaz.org - 2026
 *
 * Colors from slitaz.org 2026 (website/slitaz-2026.css). Plain CSS, no
 * variables and no JavaScript so light browsers render it too. Dark mode
 * follows the system setting (prefers-color-scheme).
 *
 * Also styles the release notes (#header h1, #lang, #content, #footer).
 */

* { box-sizing: border-box; }

html { scroll-padding-top: 1rem; }

body {
	font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", "DejaVu Sans",
		"Liberation Sans", sans-serif;
	margin: 0;
	color: #34495e;
	background: #fff;
}

a { color: #2980b9; text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; max-width: 100%; vertical-align: middle; }

h1, h2, h3, h4 { color: #2c3e50; font-weight: 600; line-height: 1.3; }
h2 {
	font-size: 1.6rem;
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid #e74c3c;
}
h3 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
h4 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
p { margin: 0.5rem 0 0.9rem; }
ul, ol { margin: 0.5rem 0 1rem; padding-left: 1.6rem; }
li { margin: 0.2rem 0; }

pre, code, kbd {
	font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
	font-size: 0.875rem;
}
pre {
	background: #f5f7f8;
	border: 1px solid #dde3e8;
	border-left: 3px solid #e74c3c;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	margin: 0.5rem 0 1rem;
	overflow-x: auto;
}
code { background: #f0f2f4; padding: 1px 4px; border-radius: 3px; }
pre code { background: none; padding: 0; }
kbd {
	border: 1px solid #b8c4ca;
	border-bottom-width: 2px;
	border-radius: 3px;
	padding: 0 4px;
	background: #f5f7f8;
}

table { border-collapse: collapse; margin: 0.5rem 0 1rem; width: 100%; }
th, td {
	border: 1px solid #dde3e8;
	padding: 0.35rem 0.6rem;
	text-align: left;
	vertical-align: top;
}
th { background: #f5f7f8; color: #2c3e50; }

/* Header: logo and site name, dark like slitaz.org */

#header {
	background: #2c3e50;
	border-bottom: 3px solid #e74c3c;
	padding: 0.75rem 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}
#header h1 {
	color: #f0f2f4;
	font-size: 1.15rem;
	margin: 0;
	padding: 0;
	border: 0;
}
#header h1 a { color: #f0f2f4; }
#header h1 a:hover { color: #ff6b61; text-decoration: none; }
#header h1 img { height: 28px; width: 28px; margin-right: 0.4rem; }

#network { margin-left: auto; }
#network a {
	color: #b0bec5;
	font-size: 0.875rem;
	font-weight: 500;
	margin-left: 1.1rem;
}
#network a:hover, #network a.active { color: #ff6b61; text-decoration: none; }

/* Release notes language bar */

#lang {
	background: #f5f7f8;
	border-bottom: 1px solid #dde3e8;
	padding: 0.4rem 2rem;
	font-size: 0.875rem;
}
#lang a, #lang strong { padding: 0 0.25rem; }

/* Content */

#content {
	max-width: 54rem;
	margin: 0 auto;
	padding: 1rem 2rem 2rem;
}

.lead { font-size: 1.1rem; color: #5d6d7e; }
.muted, .updated { color: #7f8c8d; font-size: 0.875rem; }

.note, .warning {
	border-left: 4px solid #3498db;
	background: #eef6fc;
	padding: 0.6rem 1rem;
	margin: 1rem 0;
	border-radius: 0 4px 4px 0;
}
.warning { border-left-color: #f39c12; background: #fef5e7; }
.note p, .warning p { margin: 0.3rem 0; }

/* Language banner (handbook indexes) */

.lang-banner {
	background: #7a4b2a;
	color: #fdf3e7;
	padding: 0.6rem 1rem;
	margin: 1rem 0;
	border-radius: 4px;
}
.lang-banner a { color: #ffd9a8; font-weight: 600; }
.lang-banner a:hover { color: #ffffff; }

/* Home and index cards */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.card {
	border: 1px solid #dde3e8;
	border-top: 3px solid #e74c3c;
	border-radius: 6px;
	padding: 0.9rem 1.1rem;
}
.card h3 { margin-top: 0; }
.card p { margin-bottom: 0.4rem; }

/* Handbook: chapter list and prev/next links */

ol.chapters { padding-left: 1.8rem; }
ol.chapters li { margin: 0.45rem 0; }
ol.chapters span { color: #7f8c8d; }

.toc {
	background: #f5f7f8;
	border: 1px solid #dde3e8;
	border-radius: 4px;
	padding: 0.5rem 1rem;
	margin: 1rem 0 1.5rem;
	font-size: 0.925rem;
}
.toc ul { margin: 0.2rem 0; }

.pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid #dde3e8;
	margin-top: 2.5rem;
	padding-top: 0.8rem;
	font-size: 0.925rem;
}

/* Footer */

#footer {
	text-align: center;
	color: #7f8c8d;
	font-size: 0.875rem;
	border-top: 1px solid #dde3e8;
	padding: 1.25rem 1rem;
	margin-top: 2rem;
}
#footer a { margin: 0 0.3rem; }

@media (max-width: 640px) {
	#header, #lang { padding: 0.6rem 1rem; }
	#network { margin-left: 0; }
	#network a { margin: 0 0.9rem 0 0; }
	#content { padding: 0.5rem 1rem 1.5rem; }
}

@media print {
	#header, #network, #lang, .pager, #footer { display: none; }
	pre { border-left-width: 1px; }
}

/* Dark mode: slitaz.org dark palette */

@media (prefers-color-scheme: dark) {
	body { background: #141414; color: #b8b8b8; }
	h1, h2, h3, h4, th { color: #f0f0f0; }
	a { color: #5dade2; }
	#header { background: #1e1e1e; }
	.lead { color: #a0a0a0; }
	pre, kbd, th, #lang, .toc { background: #1e1e1e; border-color: #2a2a2a; }
	pre { border-left-color: #e74c3c; }
	code { background: #232323; }
	pre code { background: none; }
	th, td, .card, .pager, #footer, #lang { border-color: #2a2a2a; }
	.note { background: #15232e; }
	.warning { background: #2b2213; }
	.lang-banner { background: #5c3a20; }
}