/* sportsinteraction brand overrides for DocFX modern template.
   Colors are brand-locked (source: legacy sportsinteraction variables.css). */
@import url("https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap");

:root {
  --brand-highlight: #e95f28;  /* sportsinteraction orange */
  --brand-nav-bg:    #07153d;  /* navy navbar              */
  --brand-nav-fg:    #fff;     /* navbar/footer foreground */
  --brand-link:      #e95f28;

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

  --bs-primary: var(--brand-highlight);
  --bs-link-color: var(--brand-link);
  --bs-link-hover-color: var(--brand-highlight);
}

.navbar {
  background-color: var(--brand-nav-bg);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #e95f28;
  --bs-navbar-active-color: #e95f28;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}

.navbar-brand > img#logo {
  height: 34px;
  width: auto;
}

.toc .nav > li.active > a {
  color: var(--brand-link);
}

/* Theme switcher / search icons on the navy navbar -> white, visible. */
.navbar .btn,
.navbar .dropdown-toggle,
.navbar .bi,
.navbar i[class*="bi-"] {
  color: #fff !important;
}
.navbar .btn:hover .bi {
  color: var(--brand-highlight) !important;
}

/* Collapsible imprint footer. */
.brand-footer { position: relative; width: 100%; }
.brand-footer .back-to-top { float: right; }
.brand-footer .imprint > summary {
  cursor: pointer;
  list-style: none;
  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; }

/* ------------------------------------------------------------------ *
 * 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). Variable-driven — identical across brands.
 * ------------------------------------------------------------------ */

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