/* Custom styles for the site */

/* Make logo circular and larger */
.md-header__button.md-logo img {
  border-radius: 50%; /* Makes the logo circular */
  width: 3rem !important; /* Makes the logo larger (default is 1.2rem) */
  height: 3rem !important; /* Maintains aspect ratio */
  object-fit: cover; /* Ensures the image covers the area nicely */
  border: 2px solid rgba(0,0,0,0.1); /* Optional: adds a subtle border */
  margin-right: 0.5rem; /* Optional: adds some spacing to the right */
}

/* Adjust spacing in the header to accommodate larger logo */
.md-header__title {
  margin-left: 0.5rem;
}

/* For mobile view */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo img {
    width: 2.4rem !important; /* Slightly smaller on mobile but still bigger than default */
    height: 2.4rem !important;
  }
}

/* Fix headerlink scroll positioning - more comprehensive solution */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
  scroll-margin-top: 6rem;
  padding-top: 1rem;
}

.md-content .headerlink {
  scroll-margin-top: 6rem;
}

.md-main__inner {
  scroll-padding-top: 6rem;
}

/* Notebook-style styling for main content */
.md-main__inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
}

/* Light theme styles for main content */
[data-md-color-scheme="default"] .md-content {
  background-color: #fff; /* Standard white background */
  border: 1px solid #e0e0e0; /* Light grey border */
  color: #333; /* Standard dark text color */
}

/* Dark theme styles for main content */
[data-md-color-scheme="slate"] .md-content {
  background-color: #1a1d23; /* Even darker background */
  border: 1px solid #434c5e; /* Darker border color (Nord Polar Night Frost) */
  color: #d8dee9; /* Lighter text color for dark background (Nord Snow Storm) */
}

/* Common styles for main content (apply to both themes) */
.md-content {
  /* background-color: #fff; Commented out original light background */
  /* background-color: #2e3440; Previous dark background color (Nord Polar Night) */
  /* background-color: #1a1d23; Even darker background - Moved to dark theme */
  /* border: 1px solid #e0e0e0; Commented out original light border */
  /* border: 1px solid #434c5e; Darker border color - Moved to dark theme */
  /* color: #d8dee9; Lighter text color - Moved to dark theme */
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 2rem;
  margin: 1rem;
  position: relative;
}

/* Removed notebook paper lines effect */
/*
.md-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, transparent 9px, #434c5e 9px, #434c5e 10px);
  background-size: 1px 10px;
  margin-left: 30px;
  z-index: 1;
}
*/

/* Removed slight paper texture */
/*
.md-content {
  background-image:
    linear-gradient(rgba(67, 76, 94, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 76, 94, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
*/

/* Mobile optimization - make content wider on small screens */
@media screen and (max-width: 768px) {
  .md-main__inner {
    max-width: 100%;
  }
  
  .md-content {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  .md-grid {
    max-width: 100%;
    margin: 0;
  }
}

/* Reduce margins further on very small screens */
@media screen and (max-width: 480px) {
  .md-content {
    padding: 0.75rem;
    margin: 0.25rem;
  }
}