/* Custom CSS for DevHome Blog - Adapted for Light/Dark Mode */

/* Logo size reduction */
.md-header__button.md-logo img {
  width: 30%;
  height: auto;
}

/* Navigation logo - smaller than header logo */
.md-nav__button.md-logo img {
  width: 20%;
  height: auto;
}

/* Improve header layout and position nav between logo and search */
.md-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.8rem;
  /* justify-content: space-between; */
}

/* Theme toggle styles */
.md-select__item {
  cursor: pointer;
}

.md-select__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.25s;
}

.md-select__link:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Logo styling */
.md-header__button.md-logo {
  margin-right: 0.5rem;
}

/* Adjust logo and title spacing */
.md-header__title {
  margin-right: 1rem;
}

/* Position search to the right */
.md-search {
  margin-left: auto;
}

/* Responsive Hamburger Navigation */
.navigation {
  position: fixed;
  top: 0.5rem;
  right: 10vw;
  padding: 1rem;
  background: var(--menu-bg, #f4f4f4);
  border-radius: 25px;
  display: none;
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.navigation__link {
  color: var(--menu-link, #47682c);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

[data-md-color-scheme="slate"] .navigation {
  --menu-bg: #23263a;
}
[data-md-color-scheme="slate"] .navigation__link {
  --menu-link: #76c1d4;
}

.navigation__button {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  color: #333;
  border: none;
  z-index: 1100;
  cursor: pointer;
  font-size: 2rem;
  display: block;
}

.navigation__menu--visible {
  display: flex !important;
}

.navigation__link {
  color: #47682c;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.navigation__link:hover,
.navigation__link:focus {
  background: #e0e0e0;
  color: #368cbf;
}

@media screen and (min-width: 768px) {
  .navigation {
    position: static;
    top: auto;
    right: auto;
    left: 0;
    background: none;
    border-radius: 0;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    gap: 1.5rem;
  }
  .navigation__button {
    display: none;
  }
}

/* Remove old header nav styles */
.md-header__nav,
.md-header__link {
  display: none !important;
}

/* Move navigation tabs to the top */
.md-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--md-primary-bg-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* Theme-specific tab styling */
[data-md-color-scheme="default"] .md-tabs {
  background-color: #ffffff;
  color: #101357;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--md-default-bg-color);
  color: rgba(255, 255, 255, 0.95);
}

/* Give tabs more space */
.md-tabs__list {
  display: flex;
  justify-content: center;
  padding: 0 1rem;
}

/* Style tab items */
.md-tabs__item {
  margin: 0 0.5rem;
}

/* Style tab links */
.md-tabs__link {
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

/* Improve navigation menu visibility - Theme specific */
/* Light theme (default) navigation */
[data-md-color-scheme="default"] .md-nav__item .md-nav__link,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link,
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__link {
  color: #33363b !important; /* Dark Slate Gray - same as body text */
  font-weight: 500;
}

[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
  color: #368cbf !important; /* Blue for active item in light mode */
  font-weight: 700;
}

/* Search icon in light theme */
[data-md-color-scheme="default"] .md-search__input + .md-search__icon {
  color: #ffffff; /* White for search icon */
}

/* Dark theme (slate) navigation */
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #76c1d4 !important; /* Light Blue for active item in dark mode */
  font-weight: 700;
}

/* Blurred background for code blocks - common */
.highlight {
  position: relative;
  overflow: visible; /* Keep for potential absolute positioning inside */
}

/* Default (Light) theme styles - NEW PALETTE */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #101357; /* Muted Black for headers */
  --md-primary-bg-color: #ffffff; /* White for navigation background */
  --md-primary-bg-color--light: #ffffff; /* White for light navigation background */
  --md-accent-fg-color: #368cbf; /* Blue for links/buttons */
  --md-accent-fg-color--transparent: rgba(54, 140, 191, 0.1); /* Blue transparent */
  --md-search-icon-color: #101357; /* Dark color for search icon to match headers */

  /* Backgrounds */
  --md-default-fg-color: #33363b; /* Dark Slate Gray for body text */
  --md-default-bg-color: #f7f7f7; /* Soft White base */
  --md-code-bg-color: #eaeaea; /* Light Gray for code blocks bg */
  --md-typeset-table-color: rgba(171, 36, 36, 0.5); /* Light Gray table bg */
}

/* Body text and background */
[data-md-color-scheme="default"] body {
  background-color: #f7f7f7; /* Soft White */
  color: #33363b; /* Dark Slate Gray */
}

/* Headings */
[data-md-color-scheme="default"] h1,
[data-md-color-scheme="default"] h2,
[data-md-color-scheme="default"] h3,
[data-md-color-scheme="default"] h4,
[data-md-color-scheme="default"] h5,
[data-md-color-scheme="default"] h6 {
  color: #101357; /* Muted Black */
}

/* Links */
[data-md-color-scheme="default"] a {
  color: #368cbf; /* Blue */
}
[data-md-color-scheme="default"] a:hover {
  color: #76c1d4; /* Light Blue hover */
}

/* Buttons */
[data-md-color-scheme="default"] .md-button--primary {
  background-color: #368cbf; /* Blue */
  color: white;
}
[data-md-color-scheme="default"] .md-button--primary:hover {
  background-color: #76c1d4; /* Light Blue hover */
}

/* Logo background on About page */
[data-md-color-scheme="default"] .md-content__inner img[alt='DevHome Logo'] {
  background-color: rgba(89, 142, 188, 0.342); /* Semi-transparent Light Gray #eaeaea */
  padding: 8px; /* Add some padding */
  border-radius: 4px; /* Slightly rounded corners */
  display: block; /* Ensure it takes block space if needed */
  margin-bottom: 1em; /* Add space below */
}

/* Code Blocks */
[data-md-color-scheme="default"] .highlight pre {
  background-color: rgba(234, 234, 234, 0.7) !important; /* Light Gray background #eaeaea */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-left-color: #368cbf; /* Blue accent */
}

/* Inline Code */
[data-md-color-scheme="default"] code:not(.highlight code) {
  background-color: rgba(234, 234, 234, 0.5); /* Light Gray inline code bg #eaeaea */
  color: #101357; /* Muted Black */
}

/* Syntax Highlighting */
[data-md-color-scheme="default"] .highlight .k { color: #7045af; } /* Keywords: Darker Purple */
[data-md-color-scheme="default"] .highlight .s,
[data-md-color-scheme="default"] .highlight .s1,
[data-md-color-scheme="default"] .highlight .s2 { color: #06B995; } /* Strings: Darker Green */
[data-md-color-scheme="default"] .highlight .v,
[data-md-color-scheme="default"] .highlight .nv,
[data-md-color-scheme="default"] .highlight .nf { color: #0277BD; } /* Variables/Names: Darker Blue */
[data-md-color-scheme="default"] .highlight .c,
[data-md-color-scheme="default"] .highlight .c1,
[data-md-color-scheme="default"] .highlight .cm { color: #888888; } /* Comments: Darker Gray for better contrast on light bg */
[data-md-color-scheme="default"] .highlight .err { color: #fc5226; } /* Errors: Red-Orange */
[data-md-color-scheme="default"] .highlight .p { color: #33363b; } /* Punctuation: Dark Slate Gray */
[data-md-color-scheme="default"] .highlight .nt { color: #2E7D32; } /* Tags: Darker Green */
[data-md-color-scheme="default"] .highlight .na { color: #7045af; } /* Attributes: Darker Purple */
[data-md-color-scheme="default"] .highlight .mi { color: #2E7D32; } /* Numbers: Darker Green */

/* Specific component styling */
[data-md-color-scheme="default"] .newsletter-signup {
  background: linear-gradient(135deg, #ffffff 0%, #eaeaea 100%); /* White to Light Gray gradient */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #eaeaea;
}

[data-md-color-scheme="default"] .hero-section {
  background: linear-gradient(135deg, rgba(54, 140, 191, 0.05) 0%, rgba(126, 188, 89, 0.05) 100%); /* Subtle Blue to Green gradient */
  border: 1px solid #eaeaea;
}

[data-md-color-scheme="default"] .article-card {
  background-color: #ffffff; /* White card background */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaeaea;
}

[data-md-color-scheme="default"] .article-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Error/Warning Admonitions */
[data-md-color-scheme="default"] .admonition.error,
[data-md-color-scheme="default"] .admonition.warning {
  border-left-color: #fc5226; /* Red-Orange */
}
[data-md-color-scheme="default"] .admonition.error .admonition-title,
[data-md-color-scheme="default"] .admonition.warning .admonition-title {
  background-color: rgba(252, 82, 38, 0.1); /* Light Red-Orange background */
}

/* Success Admonitions */
[data-md-color-scheme="default"] .admonition.success,
[data-md-color-scheme="default"] .admonition.tip {
  border-left-color: #7ebc59; /* Green */
}
[data-md-color-scheme="default"] .admonition.success .admonition-title,
[data-md-color-scheme="default"] .admonition.tip .admonition-title {
  background-color: rgba(126, 188, 89, 0.1); /* Light Green background */
}


/* Dark theme specific overrides - KEEP EXISTING */
/* Firefox-compatible navigation styles for dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1a1a2e;
  --md-accent-fg-color: #76c1d4;
}

/* Links in dark mode - make unselected links more visible */
[data-md-color-scheme="slate"] a {
  color: #a8ddeb; /* Lighter blue for better visibility on dark backgrounds */
}

[data-md-color-scheme="slate"] a:hover {
  color: #76c1d4; /* Same as accent color for hover state */
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1a1a2e !important; /* Explicit dark background */
  color: #ffffff !important; /* Explicit white text */
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(255, 255, 255, 0.9) !important; /* Explicit white text with slight transparency */
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #76c1d4 !important; /* Light blue for active/hover tabs */
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #1a1a2e !important; /* Explicit dark background */
  color: #ffffff !important; /* Explicit white text */
}

[data-md-color-scheme="slate"] .highlight pre {
  background-color: rgba(40, 44, 52, 0.7) !important; /* Darker background for slate */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

[data-md-color-scheme="slate"] code:not(.highlight code) {
  background-color: rgba(70, 70, 90, 0.5); /* Darker inline code bg */
  color: var(--md-accent-fg-color); /* Use accent color for contrast */
}

[data-md-color-scheme="slate"] .language-yaml .highlight {
  background-color: rgba(40, 44, 52, 0.5); /* Darker YAML bg */
}

[data-md-color-scheme="slate"] .newsletter-signup {
  background: linear-gradient(135deg, #2c313a 0%, #3a404a 100%); /* Dark gradient */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

[data-md-color-scheme="slate"] .hero-section {
  background: linear-gradient(135deg, rgba(96, 125, 139, 0.2) 0%, rgba(233, 30, 99, 0.2) 100%); /* Darker gradient */
}

[data-md-color-scheme="slate"] .article-card {
  background-color: var(--md-code-bg-color); /* Use theme's code bg for cards */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .article-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Common styles for both themes - KEEP EXISTING */
.highlight pre {
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border-left: 4px solid var(--md-accent-fg-color); /* Use theme accent color */
}

/* Enhance code block readability */
.highlight code {
  font-size: 0.9em;
  line-height: 1.5;
}

/* Style for inline code - common properties */
code:not(.highlight code) {
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* Style for admonitions (note, tip, warning boxes) */
/* Use theme variables for admonition shadow */
.admonition {
  border-radius: 8px;
  box-shadow: var(--md-shadow-z1); /* Use theme shadow */
}

/* Custom styling for the landing page */
.md-typeset h1 {
  /* color: var(--md-primary-fg-color); /* Use theme primary color - Now handled by scheme */
  font-weight: 700;
}

/* Newsletter signup form styling - common */
.newsletter-signup {
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.newsletter-signup h3 {
  /* color: var(--md-primary-fg-color); /* Use theme primary color - Now handled by scheme */
  margin-top: 0;
}

/* Hero section styling - common */
.hero-section {
  text-align: center;
  padding: 3rem 1rem;
  margin-bottom: 2rem;
  border-radius: 8px;
}

.hero-section h2 {
  /* color: var(--md-primary-fg-color); /* Use theme primary color - Now handled by scheme */
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Article grid for landing page - common */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Article card styling - common */
.article-card {
  border-radius: 8px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  transform: translateY(-5px);
}

.article-card h3 {
  /* color: var(--md-primary-fg-color); /* Use theme primary color - Now handled by scheme */
  margin-top: 0;
}

.article-card a {
  /* color: var(--md-accent-fg-color); /* Use theme accent color - Now handled by scheme */
  font-weight: 500;
  text-decoration: none;
}

/* Project showcase styling - common */
.project-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Button styling - common */
.md-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
  text-align: center;
  margin: 0.5rem;
}

/* Responsive adjustments - KEEP EXISTING */
@media (max-width: 768px) {
  .article-grid, .project-showcase {
    grid-template-columns: 1fr;
  }

  .hero-section h2 {
    font-size: 1.5rem;
  }
}