/* Custom Calimero Branding Styles */

/* ============================================
   CUSTOM COLORS
   ============================================ */

:root {
  --md-accent-fg-color: #A5FF11;
}

/* Content body link colors */
.md-typeset a {
  color: #8AA200;
}

.md-typeset a:hover {
  color: #A5FF11;
}

/* Light mode: use black logo and proper header colors */
[data-md-color-scheme="default"] .md-header__button.md-logo img,
[data-md-color-scheme="default"] .md-logo img {
  content: url("../assets/img/logo-black.svg");
}

[data-md-color-scheme="default"] .md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Dark mode: use white logo and proper header colors */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-logo img {
  content: url("../assets/img/logo-white.svg");
}

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Ensure logo displays correctly */
.md-logo img {
  display: block;
  height: 100%;
  width: auto;
}

/* Ensure header buttons have proper contrast */
.md-header__button {
  color: var(--md-default-fg-color);
}

.md-header__button:hover {
  opacity: 0.7;
}

/* Search button proper styling */
.md-search__icon {
  color: var(--md-default-fg-color);
}

/* ============================================
   LAYOUT IMPROVEMENTS
   ============================================ */

/* Hide sidebars on desktop only (NOT on mobile - needed for hamburger menu) */
@media screen and (min-width: 60em) {
  .md-sidebar--primary {
    display: none !important;
  }
  
  .md-sidebar--secondary {
    display: none !important;
  }
}

/* Wider content area - no sidebars on desktop */
.md-main__inner {
  max-width: none;
}

.md-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Remove margins for sidebars on desktop */
@media screen and (min-width: 60em) {
  .md-content__inner {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* Mobile-specific padding to prevent text from touching edges */
@media screen and (max-width: 59.99em) {
  /* Main content padding */
  .md-content__inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Typography padding */
  .md-typeset {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure proper padding for main grid */
  .md-main {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Content container padding */
  .md-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Ensure the primary sidebar (navigation drawer) is visible and functional on mobile */
  .md-sidebar--primary {
    display: block !important;
  }
  
  /* Style the navigation drawer when it opens */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    background-color: var(--md-default-bg-color);
  }
  
  /* Ensure hamburger menu button is visible and clickable */
  .md-header__button.md-icon {
    display: inline-block;
    color: var(--md-default-fg-color);
  }
}

/* Tabs navigation - adapt to light/dark mode */
.md-tabs {
  background-color: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color);
}

.md-tabs__list {
  background-color: var(--md-default-bg-color) !important;
}

.md-tabs__link {
  color: var(--md-default-fg-color);
  opacity: 0.7;
}

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

.md-tabs__link--active {
  color: var(--md-primary-fg-color);
  opacity: 1;
}