/*
Theme Name: WikiPress
Theme URI: https://administraktor.com/themes/wikipress
Description: A clean, modern WordPress theme inspired by Wikipedia's design philosophy. Features responsive layout, dark mode toggle, customizable homepage widgets, optimized article reading experience, and comprehensive accessibility support. Perfect for knowledge bases, documentation sites, wikis, and content-rich websites.
Author: Administraktor.com Network
Author URI: https://administraktor.com
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wikipress
Domain Path: /languages
Tags: blog, news, education, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, dark-mode, responsive-layout

WikiPress WordPress Theme, Copyright 2024 Administraktor.com Network
WikiPress is distributed under the terms of the GNU GPL v2 or later.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Dark Mode Variables */
:root {
  --bg-color: #fff;
  --text-color: #222;
  --border-color: #a2a9b1;
  --accent-color: #0645ad;
  --secondary-bg: #f8f9fa;
  --tertiary-bg: #eaecf0;
  --meta-color: #54595d;
  --hover-bg: #eaecf0;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --border-color: #404040;
  --accent-color: #4a9eff;
  --secondary-bg: #2d2d2d;
  --tertiary-bg: #404040;
  --meta-color: #b0b0b0;
  --hover-bg: #404040;
}

/* Apply dark mode variables */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", "Helvetica Neue", Arial,
    sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Header - Thinner Design */
.site-header {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  min-height: 45px;
}

/* Updated Header Styles - Compact */
.site-branding {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo img {
  max-height: 32px;
  width: auto;
}

.site-identity {
  display: flex;
  flex-direction: column;
}

.site-title {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: var(--text-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
  line-height: 1.1;
}

.site-title a {
  color: var(--text-color);
  text-decoration: none;
}

.site-description {
  font-size: 10px;
  color: var(--meta-color);
  margin: 1px 0 0 0;
  font-style: italic;
  line-height: 1.2;
}

.site-logo {
  width: 28px;
  height: 28px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><circle cx="17.5" cy="17.5" r="17.5" fill="%23f8f9fa" stroke="%23a2a9b1"/><path d="M8 10h19v2H8zm0 4h15v2H8zm0 4h21v2H8zm0 4h17v2H8z" fill="%23222"/></svg>')
    no-repeat center;
  background-size: contain;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-search {
  position: relative;
}

.header-search input {
  padding: 4px 25px 4px 8px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  width: 180px;
  background-color: var(--bg-color);
  color: var(--text-color);
  border-radius: 3px;
}

.header-search input:focus {
  outline: 1px solid var(--accent-color);
  border-color: var(--accent-color);
}

.header-search button {
  position: absolute;
  right: 2px;
  top: 2px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-color);
  border-radius: 2px;
}

.header-links {
  display: flex;
  gap: 8px;
  font-size: 16px;
}

.header-links a {
  color: var(--text-color);
  text-decoration: none;
  padding: 4px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.header-links a:hover {
  background-color: var(--hover-bg);
}

/* Dark Mode Toggle - Compact */
.dark-mode-toggle {
  background: none;
  border: 1px solid var(--border-color);
  padding: 4px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  width: 28px;
  height: 28px;
}

.dark-mode-toggle:hover {
  background-color: var(--hover-bg);
}

/* Default to light mode icons */
.dark-mode-toggle .dark-icon {
  display: none;
}

.dark-mode-toggle .light-icon {
  display: inline;
}

[data-theme="dark"] .dark-mode-toggle .light-icon {
  display: none;
}

[data-theme="dark"] .dark-mode-toggle .dark-icon {
  display: inline;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Navigation - Compact */
.main-navigation {
  background-color: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

.main-navigation .container {
  padding: 0 20px;
}

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

.main-navigation li {
  position: relative;
}

.main-navigation a {
  color: var(--accent-color);
  text-decoration: none;
  padding: 6px 10px;
  display: block;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background-color: var(--hover-bg);
  text-decoration: underline;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 8px 15px;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: left;
  color: var(--text-color);
}

/* Breadcrumb - Compact */
.breadcrumb-area {
  background-color: var(--secondary-bg);
  padding: 6px 20px;
  font-size: 11px;
  border-bottom: 1px solid var(--border-color);
}

.breadcrumb-area a {
  color: var(--accent-color);
  text-decoration: none;
}

.breadcrumb-area a:hover {
  text-decoration: underline;
}

/* Main Content Area - Improved Proportions */
.site-main {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 25px;
  padding: 20px;
  min-height: calc(100vh - 200px);
}

/* Homepage Layout */
.homepage-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

.homepage-content {
  max-width: 100%;
}

/* Welcome Section with Icons */
.welcome-section {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
  border: 1px solid var(--border-color);
  padding: 30px 20px;
  margin-bottom: 25px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.welcome-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="%23a2a9b1" opacity="0.1"/></svg>')
    repeat;
  animation: float 20s infinite linear;
  pointer-events: none;
}

@keyframes float {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.welcome-title {
  font-size: 32px;
  font-weight: normal;
  margin-bottom: 12px;
  font-family: "Linux Libertine", Georgia, Times, serif;
  color: var(--text-color);
  position: relative;
  z-index: 1;
}

.welcome-subtitle {
  font-size: 18px;
  color: var(--meta-color);
  margin-bottom: 20px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.welcome-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.welcome-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.stat-label {
  font-size: 12px;
  color: var(--meta-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Widget Areas */
.homepage-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.widget-box {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.widget-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.widget-box-header {
  background: linear-gradient(135deg, var(--tertiary-bg) 0%, var(--secondary-bg) 100%);
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.widget-box-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-color), #36c);
}

.widget-box-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.widget-box-content {
  padding: 20px;
}

/* Article Layout - Better Proportions */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 30px;
  padding: 25px;
  min-height: calc(100vh - 200px);
}

.article-content {
  max-width: none;
  background-color: var(--bg-color);
}

.main-article {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 0;
  margin-bottom: 30px;
}

.article-header {
  padding: 30px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
}

.article-title {
  font-size: 32px;
  font-weight: normal;
  margin: 0 0 20px 0;
  font-family: "Linux Libertine", Georgia, Times, serif;
  color: var(--text-color);
  line-height: 1.3;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--meta-color);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-icon {
  font-size: 14px;
}

.article-body {
  padding: 30px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-color);
}

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  font-family: "Linux Libertine", Georgia, Times, serif;
  color: var(--text-color);
  margin: 25px 0 15px 0;
  font-weight: normal;
}

.article-body h2 {
  font-size: 24px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 8px;
}

.article-body h3 {
  font-size: 20px;
}

.article-body h4 {
  font-size: 18px;
}

.article-body p {
  margin-bottom: 16px;
}

.article-body a {
  color: var(--accent-color);
  text-decoration: none;
}

.article-body a:hover {
  text-decoration: underline;
}

.article-footer {
  padding: 25px 30px;
  border-top: 1px solid var(--border-color);
  background-color: var(--secondary-bg);
}

.article-tags {
  margin-bottom: 25px;
}

.article-tags h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--text-color);
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-link {
  background: var(--tertiary-bg);
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.tag-link:hover {
  background-color: var(--hover-bg);
  transform: translateY(-1px);
}

.article-actions h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--text-color);
}

.share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share-link {
  background: var(--tertiary-bg);
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.share-link:hover {
  background-color: var(--hover-bg);
  transform: translateY(-1px);
}

/* Article Navigation */
.article-navigation {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 25px;
  margin-bottom: 30px;
}

.article-navigation h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
  color: var(--text-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.nav-previous,
.nav-next {
  padding: 15px;
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-previous:hover,
.nav-next:hover {
  background-color: var(--hover-bg);
  transform: translateY(-1px);
}

.nav-subtitle {
  font-size: 12px;
  color: var(--meta-color);
  display: block;
  margin-bottom: 5px;
}

.nav-title {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

.nav-title:hover {
  text-decoration: underline;
}

/* Related Articles */
.related-articles {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 25px;
  margin-bottom: 30px;
}

.related-articles h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
  color: var(--text-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.related-card {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.related-card:hover {
  background-color: var(--hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-card h4 {
  font-size: 16px;
  margin-bottom: 10px;
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.related-card h4 a {
  color: var(--accent-color);
  text-decoration: none;
}

.related-card h4 a:hover {
  text-decoration: underline;
}

.related-card p {
  font-size: 13px;
  color: var(--text-color);
  margin-bottom: 10px;
  line-height: 1.5;
}

.related-meta {
  font-size: 12px;
  color: var(--meta-color);
}

/* Comments Section */
.comments-section {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 25px;
}

.comments-section h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
  color: var(--text-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
}

/* Featured Content */
.featured-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.main-content-area {
  background-color: var(--bg-color);
}

.featured-article {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
}

.featured-article:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.featured-article-header {
  background: linear-gradient(135deg, var(--tertiary-bg) 0%, var(--secondary-bg) 100%);
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
}

.featured-article-header::before {
  content: "⭐";
  font-size: 16px;
}

.featured-article-content {
  padding: 20px;
}

.featured-article h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 12px;
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.featured-article h3 a {
  color: var(--accent-color);
  text-decoration: none;
}

.featured-article h3 a:hover {
  text-decoration: underline;
}

.featured-article p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.featured-article .read-more {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.featured-article .read-more:hover {
  text-decoration: underline;
}

/* Categories Section */
.categories-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 22px;
  font-weight: normal;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--border-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title::before {
  content: "📚";
  font-size: 24px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.category-box {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.category-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.category-header {
  background: linear-gradient(135deg, var(--tertiary-bg) 0%, var(--secondary-bg) 100%);
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.category-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-color), #36c);
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-title a {
  color: var(--accent-color);
  text-decoration: none;
}

.category-title a:hover {
  text-decoration: underline;
}

.category-content {
  padding: 20px;
}

.category-description {
  font-size: 13px;
  color: var(--meta-color);
  margin-bottom: 15px;
  line-height: 1.5;
}

.category-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-links li {
  margin-bottom: 8px;
  font-size: 13px;
  position: relative;
  padding-left: 15px;
}

.category-links li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: bold;
}

.category-links a {
  color: var(--accent-color);
  text-decoration: none;
}

.category-links a:hover {
  text-decoration: underline;
}

.category-meta {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--tertiary-bg);
  font-size: 12px;
  color: var(--meta-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Recent Posts */
.recent-posts {
  margin-bottom: 30px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.post-card {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.post-card-header {
  padding: 20px;
  border-bottom: 1px solid var(--tertiary-bg);
}

.post-card-title {
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 10px 0;
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.post-card-title a {
  color: var(--accent-color);
  text-decoration: none;
}

.post-card-title a:hover {
  text-decoration: underline;
}

.post-card-meta {
  font-size: 12px;
  color: var(--meta-color);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.post-card-content {
  padding: 20px;
  font-size: 13px;
  line-height: 1.6;
}

/* Widget Styles for Homepage */
.widget-style-featured {
  border-left: 4px solid #e74c3c;
}

.widget-style-featured .widget-box-header {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

.widget-style-highlight {
  border-left: 4px solid #f39c12;
}

.widget-style-highlight .widget-box-header {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
}

.widget-style-minimal .widget-box-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  padding: 15px 20px 10px;
}

.widget-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
}

.widget-link:hover {
  text-decoration: underline;
}

.widget-action {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

/* Sidebar - Narrower Width */
.sidebar {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 80px;
}

.sidebar .widget {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--tertiary-bg);
  padding-bottom: 20px;
}

.sidebar .widget:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar h3 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 12px;
}

.sidebar li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: bold;
}

.sidebar a {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
}

.sidebar a:hover {
  text-decoration: underline;
}

.sidebar .widget-date {
  font-size: 11px;
  color: var(--meta-color);
  display: block;
  margin-top: 2px;
}

/* Sidebar Statistics */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--tertiary-bg);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: var(--meta-color);
}

.stat-value {
  color: var(--accent-color);
  font-weight: bold;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-item {
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tertiary-bg);
  color: var(--text-color);
}

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

/* Posts List Layout */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.post-item {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 25px;
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.post-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.post-thumbnail {
  width: 150px;
  flex-shrink: 0;
}

.post-thumb-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.post-content {
  flex: 1;
}

.post-item .entry-header {
  margin-bottom: 15px;
}

.post-item .entry-title {
  font-size: 22px;
  font-weight: normal;
  margin: 0 0 10px 0;
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.post-item .entry-title a {
  color: var(--accent-color);
  text-decoration: none;
}

.post-item .entry-title a:hover {
  text-decoration: underline;
}

.post-item .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 12px;
  color: var(--meta-color);
}

.post-item .entry-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 15px;
}

.post-item .entry-footer {
  margin-top: 15px;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Archive Header */
.archive-header {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
  border: 1px solid var(--border-color);
  padding: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.archive-title {
  font-size: 28px;
  font-weight: normal;
  margin: 0 0 15px 0;
  font-family: "Linux Libertine", Georgia, Times, serif;
  color: var(--text-color);
}

.archive-description {
  font-size: 14px;
  color: var(--meta-color);
}

/* Pagination Styles */
.posts-pagination,
.category-pagination,
.tag-pagination {
  margin-top: 40px;
  text-align: center;
}

.posts-pagination .nav-links,
.category-pagination .nav-links,
.tag-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.posts-pagination .page-numbers,
.category-pagination .page-numbers,
.tag-pagination .page-numbers {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 8px 15px;
  text-decoration: none;
  color: var(--text-color);
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 13px;
  min-width: 40px;
  text-align: center;
}

.posts-pagination .page-numbers:hover,
.category-pagination .page-numbers:hover,
.tag-pagination .page-numbers:hover,
.posts-pagination .page-numbers.current,
.category-pagination .page-numbers.current,
.tag-pagination .page-numbers.current {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

.posts-pagination .prev,
.posts-pagination .next,
.category-pagination .prev,
.category-pagination .next,
.tag-pagination .prev,
.tag-pagination .next {
  padding: 8px 20px;
  font-weight: 500;
}

.posts-pagination .dots,
.category-pagination .dots,
.tag-pagination .dots {
  background: transparent;
  border: none;
  color: var(--meta-color);
  cursor: default;
}

.posts-pagination .dots:hover,
.category-pagination .dots:hover,
.tag-pagination .dots:hover {
  background: transparent;
  color: var(--meta-color);
  transform: none;
}

/* Footer */
.site-footer {
  background-color: var(--secondary-bg);
  border-top: 1px solid var(--border-color);
  padding: 30px 20px 20px;
  margin-top: 40px;
  font-size: 12px;
  color: var(--meta-color);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin-bottom: 20px;
}

.footer-section h4 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section li {
  margin-bottom: 5px;
}

.footer-section a {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 12px;
}

.footer-section a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

/* Performance Optimizations */
.lazy-load {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy-load.loaded {
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .site-main {
    grid-template-columns: 1fr 200px;
    gap: 20px;
  }

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

  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .header-search input {
    width: 150px;
  }

  .welcome-stats {
    gap: 20px;
  }

  .article-layout {
    grid-template-columns: 1fr 220px;
    gap: 25px;
  }

  .post-item {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .post-thumbnail {
    width: 100%;
    max-width: 200px;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  /* Header Mobile - Compact */
  .header-content {
    flex-direction: column;
    gap: 8px;
    padding: 8px 15px;
  }

  .site-branding {
    width: 100%;
    justify-content: center;
  }

  .header-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .header-search input {
    width: 160px;
  }

  .header-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-controls {
    flex-direction: row;
    gap: 8px;
  }

  /* Navigation Mobile */
  .mobile-menu-toggle {
    display: block;
  }

  .main-navigation ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

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

  .main-navigation li {
    border-bottom: 1px solid var(--tertiary-bg);
  }

  .main-navigation a {
    padding: 12px 15px;
  }

  /* Main Layout Mobile */
  .site-main {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .homepage-layout {
    padding: 10px;
  }

  .sidebar {
    order: 2;
    position: static;
    margin-top: 20px;
  }

  .article-layout {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .sidebar {
    order: 2;
    position: static;
    margin-top: 20px;
  }

  .article-header,
  .article-body,
  .article-footer {
    padding: 20px;
  }

  .article-title {
    font-size: 26px;
  }

  .article-meta {
    gap: 15px;
  }

  .nav-links {
    grid-template-columns: 1fr;
  }

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

  /* Welcome Section Mobile */
  .welcome-section {
    padding: 20px 15px;
    margin-bottom: 20px;
  }

  .welcome-title {
    font-size: 26px;
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .welcome-stats {
    gap: 15px;
  }

  .stat-number {
    font-size: 20px;
  }

  /* Widgets Mobile */
  .homepage-widgets {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .widget-box-header,
  .widget-box-content {
    padding: 15px;
  }

  /* Categories Mobile */
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .category-header,
  .category-content {
    padding: 15px;
  }

  /* Posts Mobile */
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .post-card-header,
  .post-card-content {
    padding: 15px;
  }

  .post-item {
    padding: 20px;
  }

  .post-item .entry-title {
    font-size: 20px;
  }

  /* Footer Mobile */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Pagination Mobile */
  .posts-pagination .nav-links,
  .category-pagination .nav-links,
  .tag-pagination .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .posts-pagination .page-numbers,
  .category-pagination .page-numbers,
  .tag-pagination .page-numbers {
    min-width: 35px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .header-search input {
    width: 140px;
  }

  .header-links a {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .dark-mode-toggle {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .site-main,
  .homepage-layout {
    padding: 10px;
  }

  .welcome-section {
    padding: 15px 10px;
  }

  .welcome-title {
    font-size: 22px;
  }

  .welcome-subtitle {
    font-size: 14px;
  }

  .welcome-stats {
    flex-direction: column;
    gap: 10px;
  }

  .stat-item {
    padding: 5px;
  }

  .widget-box-header,
  .widget-box-content,
  .category-header,
  .category-content,
  .post-card-header,
  .post-card-content {
    padding: 12px;
  }

  .header-search input {
    width: 100%;
    max-width: 250px;
  }

  .section-title {
    font-size: 20px;
  }

  .article-header,
  .article-body,
  .article-footer {
    padding: 15px;
  }

  .article-title {
    font-size: 22px;
  }

  .share-links {
    flex-direction: column;
  }

  .tags-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-item {
    padding: 15px;
  }

  .post-item .entry-title {
    font-size: 18px;
  }

  .archive-header {
    padding: 20px 15px;
  }

  .archive-title {
    font-size: 24px;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .main-navigation,
  .sidebar,
  .site-footer {
    display: none;
  }

  .site-main {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .widget-box,
  .category-box,
  .post-card {
    border: 1px solid #000;
    break-inside: avoid;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .widget-box,
  .category-box,
  .post-card,
  .featured-article {
    border-width: 2px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus States for Accessibility */
a:focus,
button:focus,
input:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Skip Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1001;
}

.skip-link:focus {
  left: 6px;
  top: 6px;
}

/* Category and Tag Page Styles */
.category-page-header,
.tag-page-header {
  background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
  border: 1px solid var(--border-color);
  padding: 30px;
  margin-bottom: 30px;
}

.category-title,
.tag-title {
  font-size: 28px;
  font-weight: normal;
  margin: 0 0 15px 0;
  font-family: "Linux Libertine", Georgia, Times, serif;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-icon,
.tag-icon {
  font-size: 32px;
}

.category-description,
.tag-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 15px;
}

.category-stats,
.tag-stats {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--meta-color);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-icon {
  font-size: 14px;
}

/* Articles List Styles */
.articles-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.category-article,
.tag-article {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 25px;
  transition: all 0.3s ease;
}

.category-article:hover,
.tag-article:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.category-article .article-header,
.tag-article .article-header {
  margin-bottom: 15px;
}

.category-article .article-title,
.tag-article .article-title {
  font-size: 22px;
  font-weight: normal;
  margin: 0 0 10px 0;
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.category-article .article-title a,
.tag-article .article-title a {
  color: var(--accent-color);
  text-decoration: none;
}

.category-article .article-title a:hover,
.tag-article .article-title a:hover {
  text-decoration: underline;
}

.category-article .article-meta,
.tag-article .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 12px;
  color: var(--meta-color);
}

.category-article .article-excerpt,
.tag-article .article-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 15px;
}

.read-more-wrapper {
  margin-top: 12px !important;
}

.read-more {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
}

.read-more:hover {
  text-decoration: underline;
}

/* Featured Image Styles */
.article-featured-image {
  margin-bottom: 30px;
  text-align: center;
}

.featured-image {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-caption {
  font-size: 12px;
  color: var(--meta-color);
  font-style: italic;
  margin-top: 8px;
  padding: 0 20px;
}

/* Related Categories */
.related-categories {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 25px;
  margin-top: 30px;
}

.related-categories h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
  color: var(--text-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.related-categories .categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.category-card {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.category-card:hover {
  background-color: var(--hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-card h4 {
  font-size: 16px;
  margin-bottom: 10px;
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.category-card h4 a {
  color: var(--accent-color);
  text-decoration: none;
}

.category-card h4 a:hover {
  text-decoration: underline;
}

.category-card p {
  font-size: 13px;
  color: var(--text-color);
  margin-bottom: 10px;
  line-height: 1.5;
}

.category-card .category-meta {
  font-size: 12px;
  color: var(--meta-color);
}

/* No Articles State */
.no-articles,
.no-results {
  text-align: center;
  padding: 60px 20px;
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.no-articles h2,
.no-results .entry-title {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 15px;
  color: var(--text-color);
  font-family: "Linux Libertine", Georgia, Times, serif;
}

.no-articles p,
.no-results p {
  font-size: 14px;
  color: var(--meta-color);
  margin-bottom: 25px;
}

.category-actions,
.tag-actions,
.helpful-links {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.helpful-links {
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.helpful-links h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--text-color);
}

.helpful-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.helpful-links li {
  margin-bottom: 8px;
}

.button {
  background: var(--accent-color);
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.button:hover {
  background: #0056b3;
  transform: translateY(-1px);
}