/*
 * Sidebar
 */

.sidebar-logo {
  height: 127px;
  filter: contrast(0) brightness(200%);
}

/* Hide third-level sections in sidebar outline */
.sidebar .sidebar-page-links .section-level-3 {
  display: none;
}

/*
 * XXX: docs-builder currently hides the footer if there are no translations; until we
 * fix that, use `!important` to override so that the PDF download link is visible and
 * manually hide the Languages section
 */
.sidebar-footer {
  display: flex !important;
}

.sidebar-footer-langs {
  display: none;
}

/*
 * Chemical formulas with both subscript and superscript (for ions)
 */

.chem2-su {
  display: inline-block;
  font-size: 80%;
  line-height: 1;
  vertical-align: -0.35em;
  white-space: nowrap;
}

.chem2-su > span {
  display: block;
}

[dir="ltr"] .chem2-su > span {
  text-align: left;
}

[dir="rtl"] .chem2-su > span {
  text-align: right;
}

sub.chem2-sub {
  font-size: 80%;
  vertical-align: -0.35em;
}

sup.chem2-sup {
  font-size: 80%;
  vertical-align: 0.65em;
}

/*
 * Equation parameters
 */

.eqn-param {
  display: inline-block;
  font-family: STIXGeneral;
  font-style: italic;
  font-size: 1.2em;
  width: 80px;
}

[dir="ltr"] .eqn-param {
  text-align: right;
}

[dir="rtl"] .eqn-param {
  text-align: left;
}

/* Increase left margin for equation params when the window is wider */
@media screen and (min-width: 1000px) {
  .eqn-param {
    width: 180px;
  }
}

@media screen and (min-width: 1200px) {
  .eqn-param {
    width: 250px;
  }
}

/*
 * Print-optimized layout
 */

/* Hide hyper model component and section header in print/PDF version */
.content-container.complete .hyper-model-container {
  display: none;
}
/*
 * XXX: This preceding sibling approach `:has(+ ...)` does not work in Firefox as of
 * May 2023 (see https://tobiasahlin.com/blog/previous-sibling-css-has/), but since
 * we currently use Chromium to generate the PDF via Puppeteer, we can use it.
 */
.content-container.complete h2:has(+ .hyper-model-container) {
  display: none;
}

/*
 * Model listing
 */

/*
.listing.content .label {
  display: inline-block;
  width: 30px;
  color: #aaa;
  font-size: 0.7em;
}

.listing.content .units {
  color: #555;
  font-size: 0.7em;
}

.listing.content .comment {
  color: #555;
  font-style: italic;
  font-size: 0.7em;
}
*/

/*
 * Page-specific overrides
 */

/* XXX: Prevent text wrapping in first column of region aggregation table */
.demand.content tr td:first-child {
  width: 1%;
  white-space: nowrap;
}

/*
 * Comparison graphs
 */

.comparison_history.content,
.comparison_future.content {
  /* Override the default max-width so that the graphs and thumbnails fit more comfortably on smaller screens */
  max-width: 880px;

  /*
   * IMPORTANT: Mark the `content` div as the parent container that is used for container queries for the
   * comparison graph components (i.e., responsive layout of the graphs components is relative to the content
   * only and does not include the sidebar)
   */
  container-type: inline-size;
}

.embed-container,
.comparison-grid-container {
  /* max-width: 880px; */
  margin: 20px 0 60px 0;
  line-height: 1.2;
}

/* Override the Tech Ref default table styles so that the statistics tables display properly */
.comparison_history table,
.comparison_history tr,
.comparison_history th,
.comparison_history td,
.comparison_future table,
.comparison_future tr,
.comparison_future th,
.comparison_future td {
  padding: unset;
  border: unset;
  background: unset !important;
  line-height: 1.4em;
  vertical-align: bottom;
}

/* XXX: Restore hover effect for statistics tables (this overrides the `background: unset` above) */
.comparison-grid-stats-container tbody tr:not(.table-section-header, .table-footnote-row):hover {
  background-color: #e9e9e9 !important;
}

.comparison_history table sup,
.comparison_future table sup {
  top: unset;
  vertical-align: top;
  font-size: 0.7em;
  line-height: 1.4em;
}

.comparison_future h3 {
  position: relative;
  margin-top: 60px;
  font-size: 1.5em;
  margin-bottom: 12px;
}

.comparison_future h3::after {
  content: "";
  position: absolute;
  display: inline-block;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: #555;
}

[dir="ltr"] .comparison_future h3::after {
  left: 0;
}

[dir="rtl"] .comparison_future h3::after {
  right: 0;
}

.comparison_future h4 {
  font-size: 1.3em;
  margin-bottom: 0;
}

.comparison_future h5 {
  font-size: 1em;
  margin-bottom: 0;
}

.comparison_future .graph-nav {
  font-size: 0.7em;
  color: #888;
}

.comparison_future .graph-nav .sep {
  font-size: 1.3em;
}

/* Reduce the line spacing for cases where the title wraps to a second line */
.comparison-visual-container .comparison-visual-title {
  line-height: 1.2 !important;
  padding: 8px 6px 6px 6px !important;
}

/* Reduce the font size for specific graphs that have very long titles */
.comparison-grid-container[data-graph-variants="comp-future-39"]
  .comparison-visual-container
  .comparison-visual-title {
  font-size: 1.1em !important;
}