/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Source+Code+Pro&display=swap');

/* Global Colors */
:root {
  --md-primary-fg-color: #358544;
  --md-primary-fg-color--light: #CCE0D0;
  --md-primary-fg-color--dark: #35856C;
}

/* Font Families */
body,
input,
button,
select,
textarea {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
}

code,
pre,
code span {
  font-family: 'Source Code Pro', monospace !important;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
}

/* Typography Styles */
.md-typeset h1 { font-size: 2rem; }
.md-typeset h2 { font-size: 1.4rem; }
.md-typeset h3 { font-size: 1rem; }
.md-typeset { font-size: 0.75rem; line-height: 1.6; }

/* Change nav fonts and size */
.md-tabs__link, 
.md-header__title,
.md-header-nav .md-nav__link a
 {
  font-weight: bold !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Hide Categories in toc of blog pages */
.md-nav__link[href="#categories"] {
  display: none;
}

/* Active tab styles */
.md-tabs__item--active .md-tabs__link,
.md-tabs__link.md-tabs__link--active {
  color: white !important;
  border-bottom: 2px solid white !important;
}

.md-nav__link {
  font-size: 0.65rem; /* adjust as needed */
}


/* Code Block Styles */
.markdown-body pre {
  background: rgba(0, 0, 0, 0.7);
  color: #e0e0e0;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  border: none;
}

.markdown-body code {
  background: rgba(0, 0, 0, 0.5);
  color: #e0e0e0;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: 'Source Code Pro', monospace !important;
}

/* Blockquotes */
blockquote {
  background-color: #f9f9f9;
  border-left: 8px solid #00645A;
  margin: 1.8em 10px;
  font-style: italic;
  padding: 1em 10px;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote:before {
  color: #00645A;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

/* Custom Admonition (Tip) Style */
.md-typeset .admonition.tip {
  border-left: 5px solid #2dd4bf;
}

/* Custom Admonition (Info) Style */
.md-typeset details.info p {
  font-size: .65rem !important;
}

/* Blockquotes with Slate color scheme */
body[data-md-color-scheme="slate"] blockquote {
  background-color: #00645A;
  border-left: 8px solid #e1e1e1 !important;
  color: #e1e1e1;
  padding: 1em;
  margin: 1.5em 0;
  font-style: italic;
  box-shadow: 0 1px 5px rgba(97, 97, 97, 0.1);
}

body[data-md-color-scheme="slate"] blockquote:before {
  color: #e1e1e1;
}

/* Blog Meta */
.blog-meta {
  font-size: 0.72rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: center;
}

.blog-meta-container {
  display: flex;
  align-items: center;
}

.author-avatar {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin: 0 8px;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.author-avatar-link:hover .author-avatar {
  filter: grayscale(0%);
}

.meta-content {
  display: flex;
  align-items: center;
}

.meta-content a {
  text-decoration: none;
}

/* Hide categories section initially */
#categories,
#categories+ul,
#categories+ul li a {
  display: none !important;
}

/* Hide contributors and feedback sections by default */
.md-source-file,
.md-feedback {
  display: none !important;
}

/* Show contributors and feedback when 'show-contrib-feedback' class is added to body */
.show-contrib-feedback .md-source-file,
.show-contrib-feedback .md-feedback {
  display: block !important;
}

@media (max-width: 768px) {
  .blog-meta-container {
    display: block;
    font-size: 70%;
  }
}

/* Footer */
.md-footer {
  background: var(--md-primary-fg-color);
  color: white;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.md-footer a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.2s ease;
}

.md-footer a:hover {
  color: white;
}