/* bwin brand overrides for DocFX modern template.
   Colors are brand-locked (source: legacy variables.base.css).
   Layout/spacing intentionally left to the modern theme. */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

:root {
  --brand-highlight: #fc0;   /* bwin yellow  */
  --brand-nav-bg:    #000;   /* black navbar */
  --brand-nav-fg:    #fff;   /* navbar/footer foreground */
  --brand-link:      #1284e0;

  --bs-font-sans-serif: Roboto, Verdana, Arial, Helvetica, sans-serif;

  /* Slightly tighter than the modern 16px default for a cleaner, denser
     read, while staying rem-based and fully responsive. */
  --bs-body-font-size: .9375rem;   /* ~15px */
  --bs-body-line-height: 1.6;

  /* accent / links (page body) */
  --bs-primary: var(--brand-highlight);
  --bs-link-color: var(--brand-link);
  --bs-link-hover-color: var(--brand-highlight);
}

/* Heading scale: dialled down from the modern defaults (~40/32/28px), kept
   in rem so it scales responsively and reads elegant, not oversized. */
h1, .h1 { font-size: 2rem; }       /* ~30px */
h2, .h2 { font-size: 1.6rem; }     /* ~24px */
h3, .h3 { font-size: 1.3rem; }     /* ~20px */
h4, .h4 { font-size: 1.1rem; }     /* ~17px */
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }

/* Fixed-color navbar: force a light foreground for links, the theme
   toggle and the search icon by driving Bootstrap's navbar variables
   (not per-element !important, so the toggle stays visible in both modes). */
.navbar {
  background-color: var(--brand-nav-bg);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fc0;
  --bs-navbar-active-color: #fc0;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}

/* Brand logo: constrain size and keep clear of the menu.
   The app-name text is disabled via globalMetadata (_appName: "") so the
   logo stands alone and cannot overlap the nav links. */
.navbar-brand > img#logo {
  height: 34px;
  width: auto;
}

/* Theme switcher renders in the navbar as
   <a class="btn dropdown-toggle"><i class="bi bi-sun|moon|circle-half"></i></a>
   (a .btn, not a .nav-link). Colour it — and the search icon — explicitly
   so they stay visible on the dark navbar, in both light and dark mode. */
.navbar .btn,
.navbar .dropdown-toggle,
.navbar .bi,
.navbar i[class*="bi-"] {
  color: #fff !important;
}
.navbar .btn:hover .bi {
  color: var(--brand-highlight) !important;
}

/* Active TOC item uses the brand accent */
.toc .nav > li.active > a {
  color: var(--brand-link);
}

/* Collapsible imprint footer (replaces the legacy toggleImprint() script).
   "Imprint" expands the legal text; "Back to top" sits on the right. */
.brand-footer {
  position: relative;
  width: 100%;
}
.brand-footer .back-to-top {
  float: right;
}
.brand-footer .imprint > summary {
  cursor: pointer;
  list-style: none;          /* hide default disclosure triangle */
  display: inline-block;
}
.brand-footer .imprint > summary::-webkit-details-marker {
  display: none;
}
.brand-footer .imprint > summary:hover {
  color: var(--brand-highlight);
}
.brand-footer .imprint p {
  margin: .75rem 0 0;
  max-width: 70rem;
}
.brand-footer .imprint p:last-child {
  margin-bottom: 1rem;       /* breathing room after the final line */
}

/* ------------------------------------------------------------------ *
 * Brand theming for footer + links (restores parity with the legacy
 * theme, where the footer matched the header colour and links/hovers
 * used the brand palette).
 * ------------------------------------------------------------------ */

/* Footer: match the header — brand background + brand foreground.
   The modern template pins footer height to 60px and vertically centres
   its content; that clips the expanded Imprint text below the coloured
   band. Let the footer grow with its content so the brand background
   covers the expanded legal text. */
footer {
  background-color: var(--brand-nav-bg) !important;
  color: var(--brand-nav-fg) !important;
  border-top: 0 !important;
  height: auto !important;
  min-height: 60px;
  padding: 1rem 0 !important;
  margin-bottom: 0 !important;
}
footer > div {
  align-items: flex-start !important;
}
footer a,
.brand-footer .back-to-top,
.brand-footer .imprint > summary {
  color: var(--brand-nav-fg);
}
footer a:hover,
footer a:focus,
.brand-footer .back-to-top:hover,
.brand-footer .imprint > summary:hover {
  color: var(--brand-highlight);
}

/* Body / content links use the brand link colour, brand highlight on hover. */
.content a,
article a,
main a {
  color: var(--brand-link);
}
.content a:hover,
.content a:focus,
article a:hover,
article a:focus,
main a:hover,
main a:focus {
  color: var(--brand-highlight);
}

/* Left TOC + right in-page (affix) links: brand accent on hover/active. */
.toc .nav > li > a:hover,
.affix ul > li > a:hover,
.affix ul > li.active > a {
  color: var(--brand-highlight);
}


/* Notice / callout asides: restore the legacy grey highlight block.
   The content uses <aside class="notice"> which the modern template
   leaves unstyled (plain text). Legacy theme gave these a light-grey
   block (source: --background-light-highlight #e5e5e5). */
aside,
aside.notice {
  background: #e5e5e5;
  padding: .5em 1em;
  margin: 1em 0;
  border-radius: .4em;
}
[data-bs-theme="dark"] aside,
[data-bs-theme="dark"] aside.notice {
  background: rgba(255, 255, 255, .08);
}