/* Custom width adjustments for larger screens */

/* Make content fill the available width */
@media (min-width: 50rem) {
  .side-bar {
    width: 16.5rem !important;
  }
  
  .main {
    margin-left: 16.5rem !important;
    max-width: none !important; /* Remove max-width restriction */
  }
}

/* Expand content container */
.main-content-wrap {
  max-width: 100% !important; /* Use full available width */
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.main-content {
  max-width: 100% !important; /* Use full available width */
}

/* For very large screens, add some max-width for readability */
@media (min-width: 120rem) {
  .main-content-wrap {
    max-width: 120rem !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Adjust code blocks to use full width */
.main-content pre,
.main-content .highlight {
  max-width: 100% !important;
}

/* Set code font-size and line-height to match */
pre code,
pre,
.highlight pre,
.highlight code,
code.language-bash,
div.highlighter-rouge pre {
  line-height: 1.15em !important;
}

/* Custom treeview styling */
.language-treeview,
code.language-treeview,
pre.highlight .language-treeview {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.9em !important;
  line-height: 1.3 !important;
  color: #24292e !important;
}

/* Table should also use more space */
.main-content table {
  max-width: 100% !important;
}

/* Top-align table cells */
.main-content table td,
.main-content table th {
  vertical-align: top !important;
}

/* Make logo bigger by reducing vertical padding */
.site-title {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

@media (min-width: 50rem) {
  .site-title {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}

/* Match aux-nav size to sidebar navigation */
.aux-nav .site-button {
  font-size: 14px;
}

/* Style aux links with Font Awesome icons */
/* Theme toggle - moon icon by default */
#theme-toggle::before {
  content: "\f186"; /* fa-moon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.5rem;
}

/* Sun icon when in dark mode */
[data-theme="dark"] #theme-toggle::before {
  content: "\f185"; /* fa-sun */
}

/* GitHub icon */
.aux-nav .aux-nav-list-item a[href*="github"]::before {
  content: "\f09b";
  font-family: "Font Awesome 6 Brands";
  margin-right: 0.5rem;
}

/* Docker Hub icon */
.aux-nav .aux-nav-list-item a[href*="docker"]::before {
  content: "\f395";
  font-family: "Font Awesome 6 Brands";
  margin-right: 0.5rem;
}

/* Make top navigation fixed */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--body-background-color, #fff) !important;
  border-bottom: 1px solid var(--border-color, #eeebee) !important;
}

/* Quick navigation cards with bottom-aligned buttons */
.quick-nav-card {
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quick-nav-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

.quick-nav-card p {
  margin-bottom: 1rem;
  color: #586069;
  flex-grow: 1;
}

.quick-nav-card a.btn {
  width: 100%;
  margin-top: auto;