/* --- Root Variables --- */
:root {
  --bgColor: #181a1b;
  --boxColor: #1f2123;
}

/* --- Base Body Styles --- */
body {
  background-color: var(--bgColor);
  margin: auto;
  max-width: 50rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  color: white; /* Removed !important, not needed with better selectors */
  font-family: "montserrat";
}

/* --- Font Definitions --- */
@font-face {
  font-family: "monospace";
  src: url(/fonts/SpaceMono-Bold.ttf) format("truetype");
}

@font-face {
  font-family: "montserrat";
  src: url(/fonts/Montserrat-VariableFont_wght.ttf)
    format("truetype");
}

/* --- General Link Fix (THE PURPLE LINK FIX) --- */
/* By defining the visited state, we override the browser default */
a,
a:link,
a:visited {
  text-decoration: none;
}

.main-text a,
.main-text a:visited {
  color: aqua;
}

/* --- Site Header Component --- */
.site-header {
  background-color: var(--boxColor);
  border-radius: 5px;
  padding: 0;
  margin-bottom: 1rem;
}

.site-header .logo-container {
  text-align: center;
}

.site-header .logo-container a,
.site-header .logo-container a:visited {
  text-decoration: none;
  color: white;
}

.site-header .logo-container h1 {
  font-family: "monospace";
  display: inline-block;
  margin: 0;
}

.site-header .nav-container {
  text-align: center;
  padding-top: 0.5rem;
}

/* --- Navigation Centering Fix --- */
.site-header .nav-container ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.site-header .nav-container li {
  display: inline;
  margin: 0 0.5rem; /* Use margin for spacing instead of just margin-right */
  font-family: "monospace";
  font-weight: bolder;
  font-size: large;
  transition: all 0.2s ease;
}

.site-header .nav-container li:hover {
  color: aqua;
}

.site-header .nav-container a,
.site-header .nav-container a:visited {
  color: white;
}

/* --- Divider Line --- */
.header-divider {
  border: none;
  height: 2px;
  background-color: aqua;
  margin: 0;
  margin-bottom: 2rem;
}

/* --- Homepage Box Styles (THE BORDER & LAYOUT FIX) --- */
/* This class will now be used on the homepage */
.homepage-item {
  background-color: var(--boxColor);
  border: 1px solid #444; /* Restoring the border from your original design */
  border-radius: 5px;
  padding: 1.5rem;
}

/* This adds the space between the boxes, like your original design */
.homepage-item:not(:first-child) {
  margin-top: 25px;
}

.homepage-item h3 {
  margin-top: 0;
}

/* --- Other Styles (Unchanged but included for completeness) --- */
.main-text {
  font-size: large;
}

hr {
  color: aqua;
}

p {
    font-size: 1.1rem !important;
}

.post {
  background-color: var(--boxColor);
  padding: 15px 25px;
  padding-top: 15px;
  padding-bottom: 5px;
  border-radius: 15px;
}

.post-header h1 {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1.7rem !important;
}

.post-metadata {
  font-size: small;
  margin-bottom: 1rem;
  color: #aaa
}

.post-tags {
  list-style-type: none !important; /* Removes the bullet points */
  padding: 0; /* Removes default browser padding */
  margin: 0;
  display: inline !important; /* Makes the <ul> itself behave like text */
}

.post-tags li {
  display: inline; /* Makes each list item behave like text */
  margin-left: 0.5rem; /* Adds a little space between tags */
}

.post-tags a,
.post-tags a:visited {
  color: #aaa;
  text-decoration: none;
}

.post-tags a:hover {
  color: aqua;
  text-decoration: underline;
}

.post-preview {
  padding-left: 1rem;
  padding-right: 1rem;
  border: 1px solid #444;
  border-radius: 5px;
  background: var(--boxColor);
  margin-bottom: 1.5rem;
}

.post-preview a,
.post-preview a:visited {
  text-decoration: none;
  color: white;
}

.post-preview a:hover h2 {
  text-decoration: underline;
  color: aqua;
}

a {
    text-decoration: none;
    color: aqua;
}

.warning {
    background-color: #52551a;
    border: 2px solid #f2d600;
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 5px;
    font-style: italic;
}

.warning strong {
    color: white;
}

.warning-label {
    font-style: normal !important;
}