/* DocuWare branding on top of the docfx modern template, which builds on Bootstrap 5. See https://dotnet.github.io/docfx/docs/template.html#custom-template */
:root {
  --dw-gold: #ff9d00;
  --dw-gold-rgb: 255, 157, 0;
  --dw-blue: #303ab2;
  --dw-charcoal: #353535;
  --dw-medium-grey: #9e9e9e;
  --dw-light-grey-rgb: 222, 222, 222;
  --dw-header-height: 60px; /* The modern template's sticky header. */
  --dw-subnav-height: 2rem;
}

[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-link-color: var(--dw-gold);
  --bs-link-color-rgb: var(--dw-gold-rgb);
  --bs-link-hover-color: var(--dw-gold);
  --bs-link-hover-color-rgb: var(--dw-gold-rgb);
}

[data-bs-theme="light"] {
  --dw-sidebar-bg: #f1f1f1;
  --dw-search-href-color: var(--dw-blue);
  --dw-affix-accent: var(--dw-blue);
  --dw-toc-link-color: var(--dw-charcoal);
}

[data-bs-theme="dark"] {
  --dw-sidebar-bg: var(--bs-tertiary-bg);
  --dw-search-href-color: rgb(var(--dw-light-grey-rgb));
  --dw-affix-accent: rgb(var(--dw-light-grey-rgb));
  --dw-toc-link-color: var(--bs-body-color);
}

/* The modern template crossfades between pages. The legacy site loaded each page without a transition. */
@view-transition {
  navigation: none;
}

/* Keeps the layout from shifting sideways between pages with and without a scrollbar. */
html {
  scrollbar-gutter: stable;
}

.toc li > a {
  color: var(--dw-toc-link-color);
}

.toc form.filter input {
  font-size: 0.875rem;
}

.toc li > a:hover,
.toc li.active > a {
  color: var(--dw-gold);
}

.toc li.active > a {
  font-weight: 600;
}

.sr-items b.dw-stop-word {
  font-weight: inherit;
}

.sr-items .sr-item > .item-href {
  color: var(--dw-search-href-color);
}

/* Charcoal text on gold keeps the active page above 4.5:1. White on gold does not. */
.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-color: var(--dw-gold);
  --bs-pagination-active-color: var(--dw-charcoal);
  --bs-pagination-active-bg: var(--dw-gold);
  --bs-pagination-active-border-color: var(--dw-gold);
}

.toc-offcanvas {
  background-color: var(--dw-sidebar-bg);
  padding: 0 1rem;
}

/* "In this article" in the legacy layout: section links, with the members of the current section under them. */
.affix {
  font-size: 0.75rem;
}

.affix h5 {
  border: 0 !important;
  color: var(--dw-toc-link-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: normal;
  margin: 10px 0 5px;
  padding: 0 0 0 10px;
}

.affix a {
  display: block;
  padding: 5px 12px;
}

.affix a:not(.active) {
  color: rgb(var(--bs-secondary-rgb));
}

.affix li:has(> a.link-secondary) {
  display: none;
}

.affix li:has(> a.link-secondary) > a {
  padding: 2px 15px 2px 27px;
}

/* public/main.js marks the section in view. Show its members, up to the next section. */
.affix li:has(> a.dw-current-section) ~ li:has(> a.link-secondary) {
  display: list-item;
}

.affix li:has(> a.dw-current-section) ~ li:has(> a.link-body-emphasis) ~ li:has(> a.link-secondary) {
  display: none;
}

#navbar .nav-link {
  color: var(--bs-body-color);
  padding-inline: 0.75rem;
}

/* Charcoal on gold keeps the active item above 4.5:1. The legacy white on gold does not. */
#navbar .nav-link.active,
#navbar .nav-link:hover {
  background-color: var(--dw-gold);
  color: var(--dw-charcoal);
}

/* The breadcrumb bar sticks under the header, as on the legacy site. Its fixed height keeps the page still when docfx fills it after load. */
.dw-subnav {
  background-color: var(--dw-blue);
  font-size: 0.875rem;
  min-height: var(--dw-subnav-height);
  position: sticky;
  top: var(--dw-header-height);
  z-index: 1020;
}

/* The modern template sizes the sticky sidebars for its header alone. Without the bar height, the TOC ends below the viewport, and docfx scrolls the page to show the active item. */
body:not([data-search])[data-layout=""] > main > :is(.toc-offcanvas, .affix),
body:not([data-search])[data-layout="conceptual"] > main > :is(.toc-offcanvas, .affix) {
  max-height: calc(100vh - var(--dw-header-height) - var(--dw-subnav-height) - 1.6rem);
}

@media (min-width: 768px) {
  body:not([data-search])[data-layout=""] > main > :is(.toc-offcanvas, .affix),
  body:not([data-search])[data-layout="conceptual"] > main > :is(.toc-offcanvas, .affix) {
    top: calc(var(--dw-header-height) + var(--dw-subnav-height) + 1.6rem);
  }

  body > main > .content > article [id] {
    scroll-margin-top: calc(var(--dw-header-height) + var(--dw-subnav-height));
  }
}

/* docfx adds the Bootstrap alert classes to note blocks after load. Matching the alert box here keeps the text from shifting when it does. */
article :is(.NOTE, .TIP, .WARNING, .IMPORTANT, .CAUTION) {
  padding: 1rem;
  margin-bottom: 1rem;
  border: var(--bs-border-width) solid transparent;
  border-radius: var(--bs-border-radius);
}

.dw-subnav .breadcrumb {
  --bs-breadcrumb-divider-color: #ffffff;
  --bs-breadcrumb-item-active-color: #ffffff;
  margin: 0;
  padding: 0.25rem 0;
}

/* On a narrow screen the TOC is an offcanvas panel and the affix is hidden, so the bar scrolls away, and the breadcrumb stays on one line to keep its reserved height. */
@media (max-width: 767.98px) {
  .dw-subnav {
    position: static;
  }

  .dw-subnav .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .dw-subnav .breadcrumb-item {
    flex-shrink: 0;
  }
}

.dw-subnav .breadcrumb a {
  color: #ffffff;
  text-decoration: none;
}

.dw-subnav .breadcrumb a:hover {
  text-decoration: underline;
}

.toc > div > ul > li > a,
.toc > div > ul > li.active > a,
.toc > div > ul > li > .name-only {
  font-weight: 700;
}

body[data-yaml-mime="ManagedReference"] article h3,
body[data-yaml-mime="ManagedReference"] article h4.section {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.25rem;
}

/* public/main.js marks the section in view and the heading in view, as on the legacy site: a bar beside the section, an arrow before the member. */
.affix a.dw-current-section {
  color: var(--dw-gold) !important;
  font-weight: 700;
  position: relative;
}

.affix a.dw-current-section::before {
  border-left: 2px solid var(--dw-affix-accent);
  bottom: 4px;
  content: "";
  left: 0;
  position: absolute;
  top: 4px;
}

.affix a.link-secondary.active {
  color: var(--dw-affix-accent) !important;
}

.affix a.link-secondary.active::before {
  content: ">\00a0";
  margin-left: -0.75em;
}

/* A rule under each type on a namespace page, as on the legacy site. */
article dl.jumplist > dt {
  border-bottom: 1px solid var(--bs-border-color);
  margin-top: 1.5rem;
}

/* Inheritance, implements, and inherited members as vertical lists, with each inheritance level indented. */
body[data-yaml-mime="ManagedReference"] article dl.typelist > dd > div {
  display: block;
}

body[data-yaml-mime="ManagedReference"] article dl.typelist > dd > div:not(:last-child)::after,
body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div:not(:last-child)::after {
  content: none;
}

body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div::before {
  content: "\21b3\00a0";
}

body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div:nth-child(2) { margin-left: 1rem; }
body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div:nth-child(3) { margin-left: 2rem; }
body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div:nth-child(4) { margin-left: 3rem; }
body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div:nth-child(5) { margin-left: 4rem; }
body[data-yaml-mime="ManagedReference"] article dl.typelist.inheritance > dd > div:nth-child(n + 6) { margin-left: 5rem; }

#logo,
#logo-dark {
  height: 44px;
  width: auto;
}

/* The modern template's secondary grey is too dark for text on a dark background. The brand light grey keeps it above 4.5:1. */
[data-bs-theme="dark"] .affix,
[data-bs-theme="dark"] article .facts {
  --bs-secondary-rgb: var(--dw-light-grey-rgb);
}

#logo-dark,
[data-bs-theme="dark"] #logo {
  display: none;
}

[data-bs-theme="dark"] #logo-dark {
  display: inline;
}

/* Breadcrumb links meet the 24px minimum target size. See https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
.breadcrumb-item {
  line-height: 24px;
}

.breadcrumb-item a {
  display: inline-block;
  min-height: 24px;
}

footer {
  --bs-secondary-rgb: var(--dw-light-grey-rgb);
  background-color: var(--dw-charcoal);
  color: #ffffff;
  text-align: center;
}

/* The modern template gives the footer a fixed 60px height with top padding, which leaves the text near the top. */
body > footer {
  align-items: center;
  display: flex;
}

footer a {
  color: #ffffff;
}

footer .flex-fill {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: center;
  position: relative;
}

/* Clears the Osano consent button, which sits fixed in the bottom-right corner. */
@media (min-width: 768px) {
  footer .dw-back-to-top {
    position: absolute;
    right: 4rem;
  }
}

/* Adds an arrow after any link that leaves the site, including .NET references and other DocuWare sites. It uses the bi-box-arrow-up-right glyph, because some system fonts render the U+2197 character as an emoji. */
article a[href^="http"]:not([href*="://developer.docuware.com"])::after {
  content: "\f1c5";
  font-family: bootstrap-icons;
  font-size: 0.7em;
  margin-left: 0.25em;
  color: var(--dw-medium-grey);
}

/* The last entry of an inheritance list is the class on the current page. */
.inheritance dd > div:last-child > .xref {
  font-weight: bold;
  border-left: 3px solid var(--dw-gold);
  padding-left: 6px;
}