/* Dark “King of Anonymyty” overrides for style2.css */

/* ======================
   VARIABLES
   ====================== */
:root {
  --clr-primary:    #39ff14;
  --clr-primary-d:  #2aaa0f;
  --clr-secondary:  #888888;
  --clr-text:       #e0e0e0;
  --clr-bg-light:   #181818;
  --clr-bg-lighter: #202020;
  --clr-border:     #2a2a2a;
  --radius:         5px;
  --spacing:        1rem;
  --shadow-light:   0 2px 4px rgba(0,0,0,0.5);
  --shadow-hover:   0 4px 12px rgba(57,255,20,0.15);
}

/* ======================
   RESET & GLOBAL
   ====================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 100%;
  background-color: var(--clr-bg-light);
  color: var(--clr-text);
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: var(--clr-bg-light);
  color: var(--clr-text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
img, video, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ======================
   CONTAINER
   ====================== */
.site,
#content.site-content.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 2);
  background: var(--clr-bg-lighter);
  box-shadow: var(--shadow-light);
}

/* ======================
   HEADER (DARK OVERRIDE)
   ====================== */
.site-header {
  background: var(--clr-bg-light) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--spacing) !important;
  margin-bottom: calc(var(--spacing) * 2) !important;
  box-shadow: var(--shadow-light) !important;
}
.site-title a {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--clr-text) !important;
  text-decoration: none;
}

/* Header links container */
.header-categories {
  display: flex !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: var(--spacing) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.header-categories a {
  color: var(--clr-secondary) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}
.header-categories a:hover {
  color: var(--clr-primary) !important;
  text-shadow: var(--shadow-hover) !important;
}

/* ======================
   BREADCRUMBS
   ====================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--spacing);
  font-size: 0.9rem;
  color: var(--clr-secondary);
}
.breadcrumbs a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover {
  color: var(--clr-primary-d);
}
.breadcrumbs .current {
  font-weight: bold;
  color: var(--clr-text);
}

/* ======================
   ARTICLES
   ====================== */
article {
  margin-bottom: calc(var(--spacing) * 2);
}
article h1 {
  font-size: 2rem;
  color: var(--clr-text);
  border-bottom: 2px solid var(--clr-primary);
  padding-bottom: 0.5rem;
  margin-bottom: var(--spacing);
}
article h2 {
  font-size: 1.4rem;
  color: #bbb;
  margin: calc(var(--spacing) * 1.5) 0 var(--spacing);
}
.meta-date {
  font-size: 0.85rem;
  color: var(--clr-secondary);
  margin-bottom: var(--spacing);
}

/* ======================
   FIGURES
   ====================== */
figure {
  margin: var(--spacing) 0;
  text-align: center;
  background: var(--clr-bg-lighter);
  box-shadow: var(--shadow-light);
}
figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
figcaption {
  margin-top: 0.5rem;
  font-style: italic;
  color: var(--clr-secondary);
}

/* ======================
   AUTHOR CONTACT
   ====================== */
.author-contact {
  background: var(--clr-bg-lighter);
  padding: var(--spacing);
  border-left: 4px solid var(--clr-primary);
  margin: var(--spacing) 0;
}

/* ======================
   COMMENTS
   ====================== */
.comments {
  background: var(--clr-bg-lighter);
  padding: var(--spacing);
  margin: var(--spacing) 0;
  border-radius: var(--radius);
}
.comments textarea {
  width: 100%;
  padding: 0.75rem;
  background: var(--clr-bg-light);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
}
.comments button {
  background: var(--clr-primary);
  color: var(--clr-bg-light);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.comments button:hover {
  background: var(--clr-primary-d);
  box-shadow: var(--shadow-hover);
}

/* ======================
   SIDEBAR
   ====================== */
.sidebar-categories {
  background: var(--clr-bg-lighter);
  padding: var(--spacing);
  margin: var(--spacing) 0;
  border-radius: var(--radius);
}
.category-item a {
  display: block;
  padding: 0.75rem;
  background: var(--clr-bg-light);
  border-radius: 3px;
  border: 1px solid var(--clr-border);
  text-align: center;
  color: var(--clr-text);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.category-item a:hover {
  background: var(--clr-primary);
  color: var(--clr-bg-light);
  box-shadow: var(--shadow-hover);
}

/* ======================
   NAVIGATION & TAGS CLOUD & RELATED
   ====================== */
nav a {
  color: var(--clr-primary);
  transition: color 0.2s, text-shadow 0.2s;
}
nav a:hover {
  color: var(--clr-primary-d);
  text-shadow: var(--shadow-hover);
}

.tags-cloud-section {
  margin: calc(var(--spacing) * 2) 0;
  padding: var(--spacing);
  background: var(--clr-bg-lighter);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-light);
}
.tags-cloud-section h3,
.tag-results h3 {
  margin-bottom: 1rem;
  color: var(--clr-text);
  font-size: 1.2rem;
  border-bottom: 2px solid var(--clr-primary);
  padding-bottom: 0.5rem;
}
.tag-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--clr-primary);
  color: var(--clr-bg-light);
  text-decoration: none;
  border: 1px solid var(--clr-primary-d);
  border-radius: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tag-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.tag-result-item {
  background: var(--clr-bg-light);
  padding: var(--spacing);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tag-result-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--clr-primary);
}
.tag-result-item a {
  color: var(--clr-text);
}
.tag-result-item a:hover {
  color: var(--clr-primary);
}

/* ======================
   BACK TO ARTICLE
   ====================== */
.back-to-article a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--clr-secondary);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.back-to-article a:hover {
  background: var(--clr-bg-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

/* ======================
   FOOTER
   ====================== */
.site-footer {
  background: var(--clr-bg-light);
  color: var(--clr-secondary);
  text-align: center;
  padding: calc(var(--spacing) * 1.5);
  margin-top: calc(var(--spacing) * 2);
}
.site-footer a {
  color: var(--clr-secondary);
  transition: color 0.2s;
}
.site-footer a:hover {
  color: var(--clr-text);
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 768px) {
  .site { padding: var(--spacing); }
  .header-categories { justify-content: center; }
  .tag-results-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  article h1 { font-size: 1.6rem; }
  .tag-link { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
  .back-to-article a { padding: 0.6rem 1rem; font-size: 0.8rem; }
}