/* 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;
}

/* Custom treeview styling */
.language-treeview,
code.language-treeview,
pre.highlight .language-treeview {
  font-size: 0.9em !important;
  line-height: 1.3 !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;
  }
}

/* Fix white background in dark mode only */
[data-theme="dark"] .site-title,
[data-theme="dark"] .site-title a {
  background: transparent !important;
  background-color: transparent !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;
}

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

/* Helm charts icon : Font Awesome has no Helm logo, so the official Helm icon (the wheel with
   HELM inside, assets/images/helm.svg from the CNCF artwork) is an svg mask filled with the
   text colour. It is drawn larger than the icons above so the letters stay readable, and the
   negative margins keep the header the same height */
.aux-nav .aux-nav-list-item a[href$="/helm-charts/"]::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.35em;
  margin: -0.2em 0.5rem -0.2em 0;
  background-color: currentColor;
  -webkit-mask: url("../images/helm.svg") center / contain no-repeat;
  mask: url("../images/helm.svg") center / contain no-repeat;
}

/* Phones : the four labelled links are wider than the screen, so below the md breakpoint
   (50rem, where the header links move into the menu) they show their icons alone, centred
   on the row. The label stays in the page for screen readers */
@media (max-width: 49.99rem) {
  .aux-nav .aux-nav-list {
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }

  .aux-nav .aux-nav-list-item .site-button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    font-size: 18px;
  }

  .aux-nav .aux-nav-list-item .site-button::before,
  .aux-nav .aux-nav-list-item a[href$="/helm-charts/"]::before {
    margin: 0;
  }

  .aux-nav .aux-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Language selector (_includes/language_select.html) : the flag of the current language in
   the header, a menu of every language below it, as in the app */
.af-lang {
  position: relative;
}

/* the theme scrolls the header links (overflow: auto), which would clip the menu ; they fit
   on every width, phones showing the icons alone. The extra .main-header outweighs the
   theme stylesheet, which theme-toggle.js loads after this one */
.main-header .aux-nav {
  overflow: visible;
}

.af-lang-button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.af-flag {
  width: 1.35em;
  height: 0.9em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  vertical-align: -0.1em;
  flex-shrink: 0;
}

.af-lang-button .af-flag {
  margin-right: 0.5rem;
}

.af-lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 11rem;
  margin: 0.25rem 0 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--body-background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}

.af-lang-menu[hidden] {
  display: none;
}

.af-lang-menu li {
  margin: 0;
  padding: 0;
}

.af-lang-menu li::before {
  content: none;
}

.af-lang-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: var(--body-text-color);
  font-size: 14px;
  text-decoration: none;
}

.af-lang-menu a:hover,
.af-lang-menu a.active {
  background: var(--af-accent-soft);
}

.af-lang-check {
  margin-left: auto;
  padding-left: 1rem;
  color: var(--link-color);
}

@media (max-width: 49.99rem) {
  .af-lang-button {
    font-size: 18px;
  }

  .af-lang-button .af-flag {
    margin-right: 0;
  }
}

/* Paragraphs, list items and table cells never end on a word or two alone on their last line, at any
   width : the browser evens out the lines of a short one (balance, up to six lines) and
   rebalances the last lines of a longer one (pretty). Browsers without them wrap as before */
.main-content p,
.main-content li,
.main-content td {
  text-wrap: pretty;
  text-wrap: balance;
}