/* GLORIOUS THEME OVERRIDE */
:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --primary-color: #D00000;
  /* Strong Soviet Red */
  --primary-dark: #a00000;
  --accent-color: #FFD700;
  /* Gold/Yellow */
  --border-color: #eaeaea;
  --header-height: 70px;
  --container-width: 1200px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Typography */
h1,
h2,
h3 {
  color: #000;
  /* Strict monochrome for logic */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

h1 {
  color: var(--primary-color);
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  border-bottom: 4px solid var(--accent-color);
  display: inline-block;
  padding-bottom: 10px;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: 3px;
}

/* Header */
header {
  border-bottom: 4px solid #fff;
  background: #111;
  padding: 0 1rem;
  height: var(--header-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #fff;
  padding: 5px 10px;
  background: transparent;
  display: flex;
  align-items: center;
}

.logo-initials {
  color: var(--accent-color);
  font-weight: 900;
  font-size: 1.2em;
  margin-right: 5px;
}

/* Scoped Header Nav */
.header-content nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-content nav a {
  color: #fff;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.header-content nav a:hover {
  color: var(--primary-color);
  background: var(--accent-color);
  padding: 2px 5px;
  text-decoration: none;
}

/* Components */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

main {
  padding: 6rem 0;
  min-height: 80vh;
}

.intro-text {
  font-size: 1.25rem;
  max-width: 800px;
  color: #444;
  margin-bottom: 4rem;
  border-left: 4px solid var(--accent-color);
  padding-left: 1.5rem;
}

/* Cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.category-card {
  border: 2px solid #000;
  padding: 2rem;
  background: #fff;
  transition: all 0.2s;
  position: relative;
  box-shadow: 6px 6px 0px var(--primary-color);
}

.category-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0px var(--accent-color);
}

.category-card h3 {
  margin-top: 0;
  color: #000;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.category-card h3 a {
  color: inherit;
}

.category-card p {
  color: #555;
  margin-bottom: 0;
}

/* Chips / Buttons */
.popular-tools {
  margin-top: 3rem;
}

.tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.tool-chip {
  background: #fff;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 0.6rem 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  display: inline-block;
}

.tool-chip:hover {
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  box-shadow: 4px 4px 0px var(--accent-color);
}

/* Tool Interface General Styles (re-adding from previous css logic if needed, adapting to new style) */
.tool-interface {
  background: #fff;
  border: 2px solid #000;
  padding: 2rem;
  box-shadow: 6px 6px 0px var(--border-color);
  margin-bottom: 3rem;
}

/* Footer */
footer {
  background: #111;
  color: #fff;
  padding: 3rem 0;
  margin-top: 6rem;
  border-top: 8px solid var(--primary-color);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-nav a {
  color: #fff;
  margin-left: 2rem;
}

.footer-nav a:hover {
  color: var(--accent-color);
}

/* Mobile */
.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    /* Kept red as per preview, or make white if on black header? Preview had red logic but header is black now. Let's check preview. Logic says if header is black, toggle should probably be white or red. Preview CSS said color: var(--primary-color); which is RED. Red on black is readable. */
    padding: 0.5rem;
    cursor: pointer;
  }

  .logo {
    font-size: 1rem !important;
    padding: 5px 8px !important;
  }

  .logo-initials {
    font-size: 1.1em;
  }


  /* Mobile Header Nav Trigger */
  .header-content nav ul {
    display: none;
    /* Hide header menu only */
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: #111;
    /* Match header */
    flex-direction: column;
    padding: 1rem;
    border-bottom: 4px solid var(--primary-color);
    gap: 0;
  }

  .header-content nav ul.show {
    display: flex;
  }

  .header-content nav li {
    width: 100%;
    border-bottom: 1px solid #333;
  }

  .header-content nav a {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
    color: #fff;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav a {
    margin: 0 0.75rem;
    display: inline-block;
    margin-top: 0.5rem;
  }

  .category-card {
    box-shadow: 4px 4px 0px var(--primary-color);
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 0.9rem !important;
  }
}

/* Sidebar & Layout */
.page-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.sidebar {
  flex: 0 0 250px;
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.content-wrapper {
  flex: 1;
  min-width: 0;
  /* Prevents flex item from overflowing */
}

.sidebar-block {
  background: #fff;
  border: 2px solid #000;
  padding: 1.5rem;
  box-shadow: 4px 4px 0px var(--border-color);
}

.sidebar-block h3 {
  margin-top: 0;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  /* Ensure vertical standard stacking */
}

.sidebar-nav li {
  margin-bottom: 0.5rem;
}

.sidebar-nav a {
  display: block;
  padding: 0.5rem;
  color: #444;
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: #f5f5f5;
  border-left-color: var(--primary-color);
  color: #000;
  padding-left: 0.8rem;
}

.sidebar-nav a.active {
  font-weight: 700;
}

@media (max-width: 900px) {
  .page-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    flex: none;
    position: static;
    order: 2;
    /* Move sidebar to bottom on mobile if preferred, or keep on top? User said links at bottom. Let's keep sidebar functional. 
                 Actually, often sidebars go to bottom on mobile OR become a dropdown. 
                 Let's put it at the top for navigation? Or bottom?
                 Standard "silo" usually implies easy navigation. 
                 However, content is king. Let's put it BELOW content on mobile so they read first. */
    margin-top: 2rem;
  }
}