/* WebHelp styling on top of DITA Bootstrap, modeled on the Oxygen WebHelp Responsive output
   the docs team uses: Roboto, black title bar, blue search banner, breadcrumb bar. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/roboto-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-latin-700-normal.woff2") format("woff2");
}

:root {
  --fort-black: #000;
  --fort-banner: #386cb9;
  --fort-banner-light: #4c7ec1;
  --fort-search-btn: #c63e21;
  --fort-crumbs: #edf2f9;
  --fort-link: #337ab7;
  --fort-link-hover: #23527c;
  --fort-note-border: #1e759e;
  --fort-note-bg: #ebf3f6;

  --bs-body-font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #000;
  --bs-link-color: var(--fort-link);
  --bs-link-color-rgb: 51, 122, 183;
  --bs-link-hover-color: var(--fort-link-hover);
  --bs-link-hover-color-rgb: 35, 82, 124;
  --bs-primary: var(--fort-link);
  --bs-primary-rgb: 51, 122, 183;
}

/* The banner is tall, so the header scrolls away like the Oxygen output. */
header.sticky-top { position: static; }

.fort-navbar { background: var(--fort-black); padding: .9rem 0; }
.fort-navbar .fort-guide-title { color: #fff; font-size: .95rem; font-weight: 500; }
.fort-navbar .fort-guide-title:hover { color: #fff; text-decoration: underline; }
.fort-home-link { color: #ccc; font-size: .8rem; text-decoration: none; }
.fort-home-link:hover { color: #fff; }

/* Search banner, with the triangle motif on the right. */
.fort-banner {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='xMaxYMax meet'%3E%3Cpath d='M0 100 50 0 100 100Z' fill='%23ffffff' fill-opacity='.08'/%3E%3Cpath d='M60 100 110 0 160 100Z' fill='%23ffffff' fill-opacity='.12'/%3E%3Cpath d='M110 0 160 0 200 80 200 100 160 100Z' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E")
      right bottom / auto 100% no-repeat,
    var(--fort-banner);
  padding: 2rem 1rem;
}
.fort-search-row { display: flex; align-items: flex-start; max-width: 50rem; margin: 0 auto; }
.fort-search { position: relative; flex: 1; }
.fort-search-btn {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: var(--fort-search-btn);
  color: #fff;
}
.fort-search {
  --pagefind-ui-scale: .7;
  --pagefind-ui-primary: var(--fort-link);
  --pagefind-ui-text: #000;
  --pagefind-ui-border: #ccc;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 3px 0 0 3px;
  --pagefind-ui-font: var(--bs-body-font-family);
}
#search .pagefind-ui__search-input { height: 2.75rem; background: #fff; font-weight: 400; }
.fort-search .pagefind-ui__drawer {
  position: absolute;
  left: 0;
  right: -2.75rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0 1rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  z-index: 1050;
}
.fort-search .pagefind-ui__drawer:empty,
.fort-search .pagefind-ui__drawer:not(:has(*)) { display: none; }

/* Breadcrumb bar above the topic. */
.bs-content .breadcrumb,
nav[aria-label="breadcrumb"] .breadcrumb {
  background: var(--fort-crumbs);
  padding: .35rem 1rem;
  font-size: .8rem;
  margin-bottom: 1.25rem;
}
.breadcrumb a { text-decoration: none; }

/* Topic text: normal-weight headings, plain first paragraph, unbolded links. */
.bs-content h1.title { font-size: 1.85rem; font-weight: 400; margin-bottom: .75rem; }
.bs-content h2, .bs-content .h2 { font-weight: 400; }
.bs-content .shortdesc.lead { font-size: inherit; font-weight: inherit; color: inherit !important; }
.bs-content a { text-decoration: none; }
.bs-content a:hover { text-decoration: underline; }
.bs-content li { margin-bottom: .5rem; }

/* Notes as an outlined box with a pencil icon. */
.bs-content .note.alert {
  position: relative;
  padding: .9rem 1rem .5rem 2.75rem;
  color: #000;
  background: var(--fort-note-bg);
  border: 1px solid var(--fort-note-border);
  border-radius: 4px;
}
.bs-content .note.alert::before {
  position: absolute;
  left: .9rem;
  top: .75rem;
  font-family: "bootstrap-icons";
  font-size: 1.15rem;
  color: var(--fort-note-border);
  content: "\f4ca";
}
.bs-content .note__title { font-weight: 700; }

/* Sidebar links in the same font and color as the content. */
.bd-links a, .bd-links span[data-bs-toggle] { color: #000; font-weight: 400; text-decoration: none; }
.bd-links a.active { color: var(--fort-link); font-weight: 500; }

:focus-visible { outline: 3px solid var(--fort-link); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .fort-home-link { display: none; }
  .fort-banner { padding: 1rem; }
}