/*
 * SliTaz Website 2026 - Modern Design
 * Lightweight, fast, semantic CSS for SliTaz GNU/Linux
 */

/* ==========================================================================
   CSS VARIABLES - Color System
   ========================================================================== */

:root {
	/* Primary colors */
	--primary:        #e74c3c;      /* SliTaz red */
	--primary-dark:   #c0392b;
	--primary-light:  #ff6b61;
	
	/* Secondary colors */
	--secondary:      #3498db;      /* Action blue */
	--secondary-dark: #2980b9;
	
	/* Accent colors */
	--accent:         #2ecc71;      /* Success green */
	--accent-dark:    #27ae60;
	
	/* Neutrals */
	--dark:           #2c3e50;      /* Main text */
	--text:           #34495e;      /* Body text */
	--text-light:     #7f8c8d;      /* Muted text */
	--light:          #dde3e8;      /* Light backgrounds */
	--white:          #ffffff;
	--border:         #b8c4ca;
	
	/* Functional */
	--success:        #27ae60;
	--warning:        #f39c12;
	--error:          #e74c3c;
	--info:           #3498db;
	
	/* Spacing */
	--space-xs:       0.25rem;      /* 4px */
	--space-sm:       0.5rem;       /* 8px */
	--space-md:       1rem;         /* 16px */
	--space-lg:       1.5rem;       /* 24px */
	--space-xl:       2rem;         /* 32px */
	--space-2xl:      3rem;         /* 48px */
	
	/* Typography */
	--font-family:    system-ui, -apple-system, BlinkMacSystemFont,
	                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-size-sm:   0.875rem;     /* 14px */
	--font-size-base: 1rem;         /* 16px */
	--font-size-lg:   1.125rem;     /* 18px */
	--font-size-xl:   1.25rem;      /* 20px */
	--font-size-2xl:  1.5rem;       /* 24px */
	--font-size-3xl:  2rem;         /* 32px */
	--font-size-4xl:  2.5rem;       /* 40px */
	
	/* Borders */
	--radius-sm:      4px;
	--radius-md:      8px;
	--radius-lg:      12px;
	--radius-xl:      16px;
	--radius-full:    9999px;
	
	/* Shadows */
	--shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
	--shadow-md:      0 4px 6px rgba(0,0,0,0.1);
	--shadow-lg:      0 10px 15px rgba(0,0,0,0.1);
	--shadow-xl:      0 20px 25px rgba(0,0,0,0.15);
	
	/* Transitions */
	--transition:     0.2s ease-in-out;
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

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

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

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--text);
	background-color: var(--white);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--dark);
	line-height: 1.3;
	margin-bottom: var(--space-md);
	font-weight: 600;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

p {
	margin-bottom: var(--space-md);
}

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

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

/* ==========================================================================
   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;
}

/* Network Navigation (top right) */
#network ul {
	display: flex;
	list-style: none;
	gap: var(--space-lg);
}

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

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

/* Language switcher (footer only) */
#footer-lang .flag {
	margin-right: var(--space-sm);
}

/* ==========================================================================
   NAVIGATION (Main Menu)
   ========================================================================== */

#nav {
	background: #f5f7f8;
	border-bottom: 1px solid var(--border);
	padding: var(--space-sm) var(--space-xl);
	position: relative;
}

#nav ul {
	display: flex;
	list-style: none;
	gap: var(--space-xs);
	flex-wrap: wrap;
	justify-content: center;
}

#nav a {
	display: inline-block;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	font-weight: 500;
	font-size: var(--font-size-sm);
	color: var(--text);
	text-decoration: none;
	transition: all var(--transition);
}

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

/* Nav colors - subtle */
.nav1:hover { background: rgba(52, 152, 219, 0.1); }
.nav2:hover { background: rgba(231, 76, 60, 0.1); }
.navpi:hover { background: rgba(233, 30, 99, 0.1); }

/* Hamburger — lives in header, controls nav via :has() */
#nav-toggle {
	display: none;
}

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

/* Burger and theme toggle on dark header */
#header #nav-burger,
#header #theme-toggle {
	color: #f0f2f4;
	border-color: rgba(255,255,255,0.25);
}

#theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	border: 1px solid var(--border);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	line-height: 1;
	width: 34px;
	height: 34px;
}

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

/* Mobile-only nav items (network links duplicated for hamburger) */
.nav-mobile-only {
	display: none;
}

.nav-mobile-divider {
	display: none;
}

/* Mobile nav */
@media (max-width: 768px) {
	#nav-burger {
		display: block;
	}

	#header #network {
		display: none;
	}

	#header #theme-toggle {
		margin-left: auto;
	}

	#nav {
		padding: 0;
		border-bottom: none;
	}

	#nav ul {
		display: none;
		flex-direction: column;
		border-bottom: 1px solid var(--border);
		padding: var(--space-sm) 0;
	}

	body:has(#nav-toggle:checked) #nav {
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		z-index: 999;
		box-shadow: var(--shadow-md);
	}

	body:has(#nav-toggle:checked) #nav ul {
		display: flex;
	}

	#nav a {
		width: 100%;
		text-align: center;
	}

	.nav-mobile-only {
		display: list-item;
	}

	.nav-mobile-divider {
		display: block;
		border-top: 1px solid var(--border);
		margin: var(--space-xs) var(--space-xl);
	}
}

/* ==========================================================================
   HERO SECTION (optional)
   ========================================================================== */

.hero {
	background: var(--light);
	padding: var(--space-xl) var(--space-xl);
	text-align: center;
	border-bottom: 1px solid var(--border);
}

.hero h2 {
	color: var(--dark);
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-xs);
}

.hero .tagline {
	font-size: var(--font-size-lg);
	color: var(--text-light);
	margin-bottom: var(--space-md);
}

.hero-buttons {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-xl);
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: var(--font-size-base);
	text-decoration: none;
	transition: all var(--transition);
	border: none;
	cursor: pointer;
}

.btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.btn-primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	color: var(--white);
	box-shadow: var(--shadow-md);
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--primary-dark), var(--primary));
	box-shadow: var(--shadow-lg);
	color: var(--white);
}

.btn-secondary {
	background: var(--white);
	color: var(--dark);
	border: 2px solid var(--border);
}

.btn-secondary:hover {
	background: var(--light);
	border-color: var(--secondary);
	color: var(--dark);
}

.btn-large {
	padding: var(--space-lg) var(--space-2xl);
	font-size: var(--font-size-lg);
}

/* ==========================================================================
   DOWNLOAD SECTION
   ========================================================================== */

.download-section {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
	padding-left: var(--space-xl);
	padding-right: var(--space-xl);
	max-width: 1100px;
	margin: 0 auto;
}

.download-section h2 {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.download-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.download-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	text-align: center;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.download-card:hover {
	border-color: var(--secondary);
	box-shadow: var(--shadow-md);
}

.download-card.featured {
	border-color: var(--primary);
	background: rgba(231, 76, 60, 0.02);
}

.download-card h3 {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-xs);
}

.download-card .version {
	color: var(--text-light);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-sm);
}

.download-card .size {
	display: inline-block;
	background: var(--light);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	color: var(--text-light);
	margin-bottom: var(--space-md);
}

.download-card .btn {
	width: 100%;
	justify-content: center;
	margin-bottom: var(--space-sm);
}

.download-links {
	margin-top: var(--space-md);
	font-size: var(--font-size-xs);
}

.download-links a {
	color: var(--text-light);
	margin: 0 var(--space-xs);
	text-decoration: underline;
}

.download-links a:hover {
	color: var(--secondary);
}

/* ==========================================================================
   FEATURES SECTION
   ========================================================================== */

.features {
	padding: var(--space-2xl) var(--space-xl);
	max-width: 1100px;
	margin: 0 auto;
}

.features h2 {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
}

.feature-card {
	text-align: center;
	padding: var(--space-lg);
	border-radius: var(--radius-md);
	background: var(--white);
	border: 1px solid var(--border);
}

.feature-card:hover {
	border-color: var(--primary);
}

.feature-icon {
	margin-bottom: var(--space-md);
	color: var(--primary);
	display: flex;
	justify-content: center;
}

.feature-icon svg {
	width: 44px;
	height: 44px;
}

.feature-card-links {
	margin-top: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.feature-card-links a {
	font-size: var(--font-size-sm);
	color: var(--secondary);
	text-align: center;
}

.feature-card h3 {
	font-size: var(--font-size-base);
	margin-bottom: var(--space-sm);
}

.feature-card p {
	color: var(--text-light);
	font-size: var(--font-size-sm);
	margin: 0;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

.about {
	padding: var(--space-2xl) var(--space-xl);
	max-width: 900px;
	margin: 0 auto;
}

.about h2 {
	margin-bottom: var(--space-md);
}

.about p {
	line-height: 1.8;
}

.about ul {
	list-style: none;
	margin-top: var(--space-md);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-sm);
}

.about li {
	padding: var(--space-sm);
	padding-left: var(--space-lg);
	position: relative;
}

.about li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: bold;
}

/* ==========================================================================
   NEWS SECTION
   ========================================================================== */

.news-section {
	background: var(--light);
	padding: var(--space-2xl) var(--space-xl);
}

.news-section h2 {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.news-list {
	max-width: 800px;
	margin: 0 auto;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.news-item {
	padding: var(--space-lg);
	border-bottom: 1px solid var(--border);
}

.news-item:last-child {
	border-bottom: none;
}

.news-item h3 {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-xs);
}

.news-item h3 a {
	color: var(--dark);
}

.news-item h3 a:hover {
	color: var(--primary);
	text-decoration: none;
}

.news-item .date {
	font-size: var(--font-size-sm);
	color: var(--text-light);
	margin-bottom: var(--space-sm);
}

.news-item p {
	color: var(--text);
	font-size: var(--font-size-sm);
	margin: 0;
}

/* ==========================================================================
   ACTIVITY SECTION
   ========================================================================== */

.activity-section {
	padding: var(--space-2xl) var(--space-xl);
	max-width: 900px;
	margin: 0 auto;
}

.activity-section h2 {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.activity-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
}

.activity-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.activity-card h3 {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	font-size: var(--font-size-base);
}

.activity-card h3 svg {
	flex-shrink: 0;
	color: var(--primary);
}

.activity-list {
	list-style: none;
}

.activity-list li {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--border);
	font-size: var(--font-size-sm);
}

.activity-list li:last-child {
	border-bottom: none;
}

.activity-list a {
	color: var(--text);
}

.activity-list a:hover {
	color: var(--secondary);
}

.activity-list span {
	color: var(--text-light);
	font-size: var(--font-size-xs);
	display: block;
	margin-top: var(--space-xs);
}

/* ==========================================================================
   COMMUNITY SECTION
   ========================================================================== */

.community {
	background: var(--light);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: var(--space-2xl) var(--space-xl);
	text-align: center;
}

.community h2 {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-lg);
}

.community-links {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-bottom: var(--space-xl);
}

.community-links a {
	color: var(--text);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	transition: all var(--transition);
}

.community-links a:hover {
	background: var(--dark);
	color: var(--white);
	border-color: var(--dark);
	text-decoration: none;
}

.community .box {
	background: var(--white);
	margin: var(--space-xl) auto 0;
}

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

#footer {
	background: var(--white);
	border-top: 1px solid var(--border);
	padding: var(--space-xl) var(--space-xl) var(--space-lg);
	text-align: center;
	color: var(--text-light);
	font-size: var(--font-size-sm);
	margin-top: auto;
	line-height: 1.8;
}

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

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

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

#footer-lang {
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
}

#footer-lang a, #footer-lang strong, #footer-lang span {
	margin: 0 var(--space-xs);
}

#footer-lang strong {
	color: var(--dark);
	font-weight: 600;
}

#footer-lang a {
	color: var(--text-light);
}

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

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-xl);
}

/* Inner page content wrapper */
.content {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-xl);
}

.content h2 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
}

.content h2:first-child {
	margin-top: 0;
}

.content ul, .content ol {
	margin-left: var(--space-xl);
	margin-bottom: var(--space-md);
}

.content li {
	margin-bottom: var(--space-xs);
}

.content pre {
	background: var(--light);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	overflow-x: auto;
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-md);
}

.content code {
	background: var(--light);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--space-md); }
.mt-2 { margin-top: var(--space-lg); }
.mt-3 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-lg); }
.mb-3 { margin-bottom: var(--space-xl); }

.mobile { display: none !important; }

/* Box styles */
.box {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	margin: var(--space-2xl) 0;
}

.box h3 {
	margin-bottom: var(--space-md);
}

.box > *:last-child {
	margin-bottom: 0;
}

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

@media (max-width: 768px) {
	:root {
		--font-size-4xl: 2rem;
		--font-size-3xl: 1.5rem;
		--font-size-2xl: 1.25rem;
	}

	#header {
		flex-wrap: wrap;
		padding: var(--space-md);
	}

	#network {
		display: none;
	}

	.hero {
		padding: var(--space-xl) var(--space-md);
	}

	.download-cards,
	.features-grid {
		grid-template-columns: 1fr;
	}

	.activity-grid {
		grid-template-columns: 1fr;
	}

	.about ul {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   SCREENSHOTS GALLERY
   ========================================================================== */

#gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}

#gallery div {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--text-light);
}

#gallery div:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

#gallery a {
	display: block;
}

#gallery img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

#gallery br { display: none; }

#gallery div > :last-child {
	padding: var(--space-sm);
	display: block;
}

@media (max-width: 768px) {
	#gallery {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

/* Print styles */
@media print {
	#header, #nav, .hero, .download-section, .community, #footer {
		display: none;
	}
	
	body {
		background: white;
		color: black;
	}
}

/* ==========================================================================
   DARK MODE — must be at end to override all preceding rules
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--dark:           #f0f0f0;
		--text:           #b8b8b8;
		--text-light:     #787878;
		--light:          #1e1e1e;
		--white:          #141414;
		--border:         #2a2a2a;
		--shadow-sm:      0 1px 2px rgba(0,0,0,0.4);
		--shadow-md:      0 4px 6px rgba(0,0,0,0.5);
		--shadow-lg:      0 10px 15px rgba(0,0,0,0.6);
	}

	: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"]) #nav a:hover      { color: var(--primary); }
	:root:not([data-theme="light"]) #network a         { color: var(--text-light); }
	:root:not([data-theme="light"]) #network a:hover   { color: var(--primary); }
	:root:not([data-theme="light"]) #nav               { background: var(--light); }
}

html[data-theme="dark"] {
	--dark:           #f0f0f0;
	--text:           #b8b8b8;
	--text-light:     #787878;
	--light:          #1e1e1e;
	--white:          #141414;
	--border:         #2a2a2a;
	--shadow-sm:      0 1px 2px rgba(0,0,0,0.4);
	--shadow-md:      0 4px 6px rgba(0,0,0,0.5);
	--shadow-lg:      0 10px 15px rgba(0,0,0,0.6);
}

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"] #nav a:hover      { color: var(--primary); }
html[data-theme="dark"] #network a         { color: var(--text-light); }
html[data-theme="dark"] #network a:hover   { color: var(--primary); }
html[data-theme="dark"] #nav               { background: var(--light); }