/*
	CSS style for SliTaz Mirror - (C) 2015-2026 SliTaz GNU/Linux
*/

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
	--primary:        #e74c3c;
	--primary-dark:   #c0392b;
	--primary-light:  #ff6b61;
	--secondary:      #3498db;
	--secondary-dark: #2980b9;
	--dark:           #2c3e50;
	--text:           #34495e;
	--text-light:     #7f8c8d;
	--light:          #f5f7f8;
	--white:          #ffffff;
	--border:         #b8c4ca;
	--shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
	--shadow-md:      0 4px 6px rgba(0,0,0,0.1);
	--radius-sm:      4px;
	--radius-md:      8px;
	--space-xs:       0.25rem;
	--space-sm:       0.5rem;
	--space-md:       1rem;
	--space-lg:       1.5rem;
	--space-xl:       2rem;
	--font-size-sm:   0.875rem;
	--font-size-base: 1rem;
	--font-size-lg:   1.125rem;
	--font-size-xl:   1.25rem;
	--transition:     0.2s ease-in-out;
}

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

html, body {
	scroll-padding-top: 100px;
}

body {
	background: var(--white);
	color: var(--text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--font-size-base, 1rem);
	line-height: 1.6;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--secondary);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--secondary-dark);
	text-decoration: underline;
}

img { border: 0; vertical-align: middle; }

h2 {
	color: var(--dark);
	font-size: 1.5rem;
	margin-bottom: var(--space-md);
}

h3 {
	color: var(--dark);
	font-size: 1.25rem;
}

pre {
	background-color: var(--light);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	overflow: auto;
	font-size: 0.875rem;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

#header {
	background: #2c3e50;
	border-bottom: 1px solid #1a252f;
	padding: var(--space-md) var(--space-xl);
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	box-shadow: var(--shadow-sm);
}

#header #network {
	margin-left: auto;
}

#header h1 {
	font-size: var(--font-size-lg);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-weight: 600;
}

#header h1 a {
	color: #f0f2f4;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

#header h1 a:hover {
	color: var(--primary-light);
	text-decoration: none;
}

#header img {
	height: 28px;
	width: auto;
}

#header #network ul {
	display: flex;
	list-style: none;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
}

#header #network a {
	color: #b0bec5;
	font-weight: 500;
	font-size: var(--font-size-sm);
	padding: var(--space-xs) 0;
	transition: color var(--transition);
	text-decoration: none;
}

#header #network a:hover {
	color: var(--primary);
	text-decoration: none;
}

#nav-toggle {
	display: none;
}

#nav-burger {
	display: none;
	cursor: pointer;
	font-size: var(--font-size-xl);
	background: none;
	color: #f0f2f4;
	border: 1px solid rgba(255,255,255,0.25);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	line-height: 1;
	user-select: none;
}

#theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	border: 1px solid rgba(255,255,255,0.25);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	line-height: 1;
	width: 34px;
	height: 34px;
	color: #f0f2f4;
	font-size: var(--font-size-xl);
}

#theme-toggle:hover {
	background: rgba(255,255,255,0.1);
}

/* ==========================================================================
   HERO BLOCK
   ========================================================================== */

#block {
	background: var(--light);
	border-bottom: 1px solid var(--border);
	padding: var(--space-xl);
}

#block .block-content {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

#block .block-info h2 {
	color: var(--dark);
	font-size: 1.5rem;
	margin: 0 0 var(--space-xs);
}

#block .block-info p {
	color: var(--text);
	line-height: 1.6;
	margin: 0 0 var(--space-md);
}

#block .block-info p a {
	color: var(--secondary);
}

#block .block-info form {
	margin-top: var(--space-md);
}

#block .block-info input[type="search"] {
	width: 100%;
	padding: 8px 12px;
	font-size: var(--font-size-base);
	font-family: system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--text);
}

#block .block-nav {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
}

#block .block-nav h3 {
	color: var(--dark);
	font-size: 1.125rem;
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--primary);
}

#block .block-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#block .block-nav li {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--border);
}

#block .block-nav li:last-child {
	border-bottom: none;
}

#block .block-nav a {
	color: var(--secondary);
	text-decoration: none;
	font-weight: 500;
}

#block .block-nav a:hover {
	color: var(--primary);
	text-decoration: none;
}

/* ==========================================================================
   MIRRORS STRIP
   ========================================================================== */

.mirrors {
	padding: 8px;
	text-align: center;
	background: #f1f1f1;
	border-bottom: 1px solid var(--border);
}

.mirrors a, .mirrors a::before {
	display: inline-block;
	padding: 0 3px;
}

.mirrors a::before {
	vertical-align: -4px;
}

/* Country flags */
.br::before { content: url(BR.png); }
.ch::before { content: url(CH.png); }
.cn::before { content: url(CN.png); }
.de::before { content: url(DE.png); }
.es::before { content: url(ES.png); }
.fr::before { content: url(FR.png); }
.ir::before { content: url(IR.png); }
.it::before { content: url(IT.png); }
.pl::before { content: url(PL.png); }
.ru::before { content: url(RU.png); }
.se::before { content: url(SE.png); }
.tw::before { content: url(TW.png); }
.ua::before { content: url(UA.png); }
.us::before { content: url(US.png); }

/* ==========================================================================
   CONTENT
   ========================================================================== */

#content {
	padding: var(--space-xl);
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
	flex: 1;
}

.section {
	margin-bottom: var(--space-2xl, 3rem);
}

/* ==========================================================================
   DIRECTORY LISTING
   ========================================================================== */

.list .lang {
	margin: 0;
	text-align: right;
	padding: 6px;
	font-size: 0.9rem;
	color: var(--text-light);
}

.list table {
	background-color: var(--light);
	border: 1px solid var(--border);
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
	border-spacing: 0;
	line-height: 1;
	border-radius: var(--radius-sm);
}

.list caption {
	caption-side: bottom;
	text-align: left;
	padding: 6px 0;
	color: var(--text-light);
	font-size: 0.875rem;
}

.list thead tr {
	background-color: #ddd;
}

.list thead th {
	border-bottom: 1px solid var(--border);
}

.list td {
	text-align: left;
}

.list td, .list th {
	padding: 6px 8px;
}

.list tbody tr:nth-child(odd) {
	background-color: var(--white);
}

.list tbody tr:nth-child(even) {
	background-color: #f0f2f4;
}

.list td:nth-child(1) {
	vertical-align: middle;
}

.list td:nth-child(1)::before {
	display: inline-block;
	vertical-align: middle;
	padding-right: 4px;
}

.list th:nth-child(3), .list td:nth-child(3) {
	text-align: right;
}

/* Mimetype icons */
.x-bzip::before       { content: url(application-x-bzip.png); }
.x-gzip::before       { content: url(application-x-gzip.png); }
.plain::before        { content: url(text-plain.png); }
.x-bittorrent::before { content: url(application-x-bittorrent.png); }
.octet-stream::before { content: url(application-octet-stream.png); }
.jpeg::before         { content: url(image-jpeg.png); }
.png::before          { content: url(image-png.png); }
.javascript::before   { content: url(text-x-javascript.png); }
.css::before          { content: url(text-css.png); }
.dir::before          { content: url(folder.png); }
.up::before           { content: url(go-up.png); }
.zip::before          { content: url(application-zip.png); }
.iso::before          { content: url(application-x-cd-image.png); }
.krn::before          { content: url(application-x-executable.png); }
.exe::before          { content: url(application-x-ms-dos-executable.png); }
.rme::before          { content: url(text-x-readme.png); }
.log::before          { content: url(text-x-changelog.png); }
.x-flavor::before     { content: url(slitaz-icon.png); }
.pkg::before          { content: url(package-x-generic.png); }
.server::before       { content: url(network-server.png); }
.locale::before       { content: url(preferences-desktop-locale.png); display: inline-block; vertical-align: middle; }
.locale2::before      { content: url(preferences-desktop-locale2.png); display: inline-block; vertical-align: middle; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer {
	background: var(--light);
	border-top: 1px solid var(--border);
	text-align: center;
	padding: var(--space-xl);
	color: var(--text-light);
	font-size: 0.875rem;
	margin-top: auto;
}

#footer p {
	margin: 0 0 var(--space-sm);
}

#footer a {
	color: var(--text-light);
	margin: 0 var(--space-sm);
}

#footer a:hover {
	color: var(--secondary);
}

#footer img {
	margin-top: var(--space-md);
	cursor: pointer;
}

.footer-nav {
	margin: var(--space-sm) 0;
}

.footer-social {
	margin-top: var(--space-md);
	font-size: 0.8rem;
}

.year:after { content: "2026"; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	#header {
		flex-wrap: wrap;
		padding: var(--space-sm) var(--space-md);
	}

	#header h1 {
		font-size: 1.25rem;
	}

	#header h1 a {
		font-size: 1.25rem;
	}

	#header #network ul {
		gap: var(--space-md);
		flex-wrap: wrap;
	}

	#header #network a {
		font-size: 0.8rem;
	}

	#block {
		padding: var(--space-md);
	}

	#block .block-content {
		grid-template-columns: 1fr;
	}

	#content {
		padding: var(--space-md);
	}

	#footer {
		padding: var(--space-md);
	}

	#footer a {
		display: inline-block;
		margin: var(--space-xs) var(--space-sm);
	}
}

/* Touch device spacing */
.touch td, .touch th {
	padding: 8px;
}

.touch #network a, .touch .block-nav a, .touch .mirrors a, .touch #footer a {
	display: inline-block;
	padding: 6px;
}

/* ==========================================================================
   UTILITY / LEGACY
   ========================================================================== */

.box {
	margin: 6px 0;
	padding: 6px;
	background: #f4f4f4;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.hard {
	white-space: pre;
	resize: both;
}

.scroll {
	max-height: 40ex;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--dark:           #f0f0f0;
		--text:           #b8b8b8;
		--text-light:     #787878;
		--light:          #1e1e1e;
		--white:          #141414;
		--border:         #2a2a2a;
	}

	:root:not([data-theme="light"]) #header {
		background: var(--white);
		border-bottom-color: var(--border);
	}
	:root:not([data-theme="light"]) #header h1 a       { color: var(--dark); }
	:root:not([data-theme="light"]) #header h1 a:hover { color: var(--primary); }
	:root:not([data-theme="light"]) #header #network a { color: var(--text-light); }
	:root:not([data-theme="light"]) #header #network a:hover { color: var(--primary); }
	:root:not([data-theme="light"]) #nav-burger        { color: var(--dark); border-color: var(--border); }
	:root:not([data-theme="light"]) #theme-toggle      { color: var(--dark); border-color: var(--border); }

	:root:not([data-theme="light"]) #block {
		background: var(--light);
	}
	:root:not([data-theme="light"]) #block .block-nav {
		background: var(--white);
	}

	:root:not([data-theme="light"]) .mirrors {
		background: #1e1e1e;
	}

	:root:not([data-theme="light"]) .list thead tr {
		background-color: #2a2a2a;
	}

	:root:not([data-theme="light"]) .list tbody tr:nth-child(even) {
		background-color: #1c1c1c;
	}

	:root:not([data-theme="light"]) #footer {
		background: var(--light);
	}
}

html[data-theme="dark"] {
	--dark:           #f0f0f0;
	--text:           #b8b8b8;
	--text-light:     #787878;
	--light:          #1e1e1e;
	--white:          #141414;
	--border:         #2a2a2a;
}

html[data-theme="dark"] #header {
	background: var(--white);
	border-bottom-color: var(--border);
}
html[data-theme="dark"] #header h1 a       { color: var(--dark); }
html[data-theme="dark"] #header h1 a:hover { color: var(--primary); }
html[data-theme="dark"] #header #network a { color: var(--text-light); }
html[data-theme="dark"] #header #network a:hover { color: var(--primary); }
html[data-theme="dark"] #nav-burger        { color: var(--dark); border-color: var(--border); }
html[data-theme="dark"] #theme-toggle      { color: var(--dark); border-color: var(--border); }

html[data-theme="dark"] #block { background: var(--light); }
html[data-theme="dark"] #block .block-nav { background: var(--white); }

html[data-theme="dark"] .mirrors { background: #1e1e1e; }

html[data-theme="dark"] .list thead tr { background-color: #2a2a2a; }
html[data-theme="dark"] .list tbody tr:nth-child(even) { background-color: #1c1c1c; }

html[data-theme="dark"] #footer { background: var(--light); }