:root {
  /* Accent (brand red — logo, critical admonitions only) */
  --color-accent: #cc1216;

  /* Secondary scale (dark → light) */
  --color-secondary-900: #2d4352;
  --color-secondary-700: #385868;
  --color-secondary-500: #597c87;
  --color-secondary-300: #84a6ad;
  --color-secondary-100: #87cedc;
  --color-light-grey: #f0f0f0;
  --color-ui-bg: #ffffff;
  --color-fs-link-dark: #22527b;
  --color-fs-link-light: #337ab7;
  --navtoggleicon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path fill="rgb(51,122,183)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></g></svg>');
}

/* content width */
.doc {
  max-width: 52rem;
}

/* === TYPOGRAFIE OVERRIDE === */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5; /* bessere Lesbarkeit als 1.15 */
  /* only takes effect once lang="de" is set (see supplemental-ui/layouts/default.hbs) */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.doc .dlist .dlist,.doc .dlist .olist,.doc .dlist .ulist,.doc .olist .dlist,.doc .olist .olist,.doc .olist .ulist,.doc .olist li+li,.doc .ulist .dlist,.doc .ulist .olist,.doc .ulist .ulist,.doc .ulist li+li {
    margin-top: .25rem
}

.doc .sidebarblock {
    background: var(--color-ui-bg);
    border-radius: .75rem;
    padding: .75rem 1.5rem;
    border-style: solid;
    border-color: var(--color-secondary-100);
}

em,
.doc .quoteblock .paragraph,
.doc .admonitionblock .title,
.doc .imageblock .title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-style: italic;
}

/* unneeded once images are correctly identified as block; needs the a.image branch
   because linked images wrap <img> in <a class="image">, so the float class
   (.left/.right) sits on the outer span, not on img's direct parent */
.doc .image:not(.left):not(.right)>img,
.doc .image:not(.left):not(.right)>a.image>img {
  margin-top: auto;
}

/* floated images: margin on every side but the one touching the container edge */
.doc .image.right {
  margin: 0.5em 0 0.5em 0.5em;
}

.doc .image.left {
  margin: 0.5em 0.5em 0.5em 0;
}

table,
.doc table,
.address,
.highlight-list {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* description list */
/* margin left larger -> compromise between vertical and horizontal dl (was: 1.5rem) */
.doc .dlist dd {
    margin: 0 0 0 5rem;
}

/* dl of functions less hard to skim (was: italics) */
.doc .dlist dt {
    font-style: normal;
}


/* Code bleibt monospace */
code, pre {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* colors */

.navbar {
  background: #fff;
  box-shadow: 0 2px 0 var(--color-secondary-900);
}

/* Size the header logo image (replaces the old inline SVG, which was sized via .navbar svg above) */
.navbar-brand img {
  height: 25px;
  width: auto;
}

/* Responsive navbar: below this width, .navbar-brand's non-wrapping flex row
doesn't have room for the logo + "Dokumentation" title + search input all
together - the search field (fixed at 150px via #search-input in
wiki-ui/src/css/header.css) has nowhere to shrink to and overflows past the
viewport edge instead.

Fix: drop the "Dokumentation" title (the logo image already spells out
"MACH | formsolutions" on its own, so no brand identity is lost) and shrink
the logo slightly. That frees enough width for the search input to shrink
into and stay on the same row as the logo - no wrapping, no need to touch
.navbar's height, no risk of the box-shadow ending up in the wrong place.
Reuses the 768.5px breakpoint wiki-ui/src/css/header.css already uses for
this same .navbar-item.search (the search input widens to 200px above
769px, so above that width there's already enough room and this is left
alone). */
@media screen and (max-width: 768.5px) {
  .navbar-title {
    display: none;
  }

  .navbar-brand img {
    height: 20px;
  }

  /* Let the search input actually shrink into the row's remaining width
  instead of floating at its hardcoded 150px - flex items don't shrink below
  their own explicit content size unless min-width is reset. */
  .navbar-brand .navbar-item.search,
  #search-field.field {
    min-width: 0;
  }

  .navbar-brand .navbar-item.search {
    /* header.css zeroes both sides at this breakpoint (needed room for the
    old, cramped inline layout); restore just the right side so the input
    (now width: 100% of this item, below) doesn't run flush to the edge.
    Left stays 0 - sitting close to the logo is fine and keeps the row compact. */
    padding-right: 1rem;
  }

  #search-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Header title text next to the logo, reusing the project's established body/heading font */
.navbar-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--color-secondary-900);
}

.navbar-end .navbar-link:hover,
.navbar-end > a.navbar-item:hover {
  background: var(--color-fs-link-light);
  color: #fff;
}

.navbar-brand .navbar-item:first-child :not(:last-child) {
    padding-right: 2rem;
}


/* headings */
.doc h1,
.doc h2,
.doc h3 {
  color: #2d4352;
}

/* breadcrumbs */
div.toolbar[role=navigation] {
  background-color: var(--color-ui-bg)
}

.home-link:hover {
  background: url(../img/home-o.svg) no-repeat 50%;
}

/* sidebar */
.nav {
  background: #f8f9fa;
}

.nav-menu h3.title {
  color: #2d4352;
}

div.nav-panel-menu.is-active {
  background-color: var(--color-ui-bg)
}

.nav-menu {
 background-color: var(--color-ui-bg)
}

.nav a:hover,.breadcrumbs a:hover {
  text-decoration: none;
}


.nav-text, a.nav-link {
  padding: 4px 10px 4px 10px;
  display:block;
}

/* .nav li {
  line-height: 1.25;
  padding: 6px 10px 6px 10px;
  margin-top: 0px;
} */

.nav-item {
  margin-top: 0px;
}

/* space between top-level nav sections, but not after the last one */
li.nav-item[data-depth="0"]:not(:last-child) > ul.nav-list {
  margin-bottom: 20px;
}

/*  highlight the first depth-1 nav item within its nav-list */
li.nav-item[data-depth="1"]:first-child > a.nav-link {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-fs-link-dark);
}

/* === BUTTONS === */

.button,
.navbar .button {
  background: var(--color-fs-link-light);
  color: #ffffff;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.button:hover,
.navbar .button:hover {
  background: var(--color-fs-link-dark);
}

/* admonitions */
.doc .admonitionblock td.icon i.icon-note {
  background-color: var(--color-fs-link-light);
}

.doc .admonitionblock td.icon i.icon-tip {
  background-color: #16990F;
}

.doc .admonitionblock td.icon i.icon-important {
  background-color: #944A91;
}

.doc .admonitionblock td.icon i.icon-warning {
  background-color: #D77F04;
}

.doc .admonitionblock td.icon i.icon-caution {
  background-color: var(--color-accent);
}

.doc .admonitionblock td.icon i.icon-note::before,
.doc .admonitionblock td.icon i.icon-tip::before,
.doc .admonitionblock td.icon i.icon-important::before,
.doc .admonitionblock td.icon i.icon-warning::before,
.doc .admonitionblock td.icon i.icon-caution::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.35rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.doc .admonitionblock td.icon i.icon-note::before {
  -webkit-mask-image: url("../img/admonition-note.svg");
  mask-image: url("../img/admonition-note.svg");
}

.doc .admonitionblock td.icon i.icon-tip::before {
  -webkit-mask-image: url("../img/admonition-tip.svg");
  mask-image: url("../img/admonition-tip.svg");
}

.doc .admonitionblock td.icon i.icon-important::before {
  -webkit-mask-image: url("../img/admonition-important.svg");
  mask-image: url("../img/admonition-important.svg");
}

.doc .admonitionblock td.icon i.icon-warning::before {
  -webkit-mask-image: url("../img/admonition-warning.svg");
  mask-image: url("../img/admonition-warning.svg");
}

.doc .admonitionblock td.icon i.icon-caution::before {
  -webkit-mask-image: url("../img/admonition-caution.svg");
  mask-image: url("../img/admonition-caution.svg");
}

.doc .admonitionblock td.icon i::after {
    content: attr(title);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase
}

/* tables */
.doc table.tableblock,
.doc table.tableblock > * > tr > * {
  border-color: #e5e5e5;
}

/* drop the outer frame; keep horizontal rules and cell borders */
.doc table.tableblock {
  border-style: none;
}

.doc table.tableblock > * > tr > *:first-child {
  border-left-style: none;
}

.doc table.tableblock > * > tr > *:last-child {
  border-right-style: none;
}

.doc table.tableblock > *:first-child > tr:first-child > * {
  border-top-style: none;
}

.doc table.tableblock > *:last-child > tr:last-child > * {
  border-bottom-style: solid;
}

.doc table.tableblock > thead > tr > * {
  background: var(--color-fs-link-light);
  color: #fff;
}

.doc table.stripes-all > tbody > tr:nth-of-type(even) {
  background: #f4f7f8;
}

/* code */
.doc pre,
.doc .listingblock pre {
  background: #f6f8fa;
  border-radius: 4px;
}

/* right navigation */
.toc .toc-menu a.is-active {
    border-left-color: var(--color-fs-link-light);
    color: #333;
}

div.nav-panel-explore {
  display: none !important;
}
.nav-panel-menu {
  height:calc(100%);
}

.nav-item-toggle {
  background: var(--navtoggleicon);
  background-repeat: no-repeat;
  background-size: 1.5em;
  margin-top: 0.2em;
  margin-left: -0.7em;
}

/* links */
.doc a {
  color: var(--color-fs-link-light);
  text-decoration:none;
}

.doc a:hover {
  color: var(--color-fs-link-dark);
  text-decoration:underline;
}

/* external links */
.doc a[href^="http"] {
  color: var(--color-secondary-500);
}

.doc a[href^="http"]:hover {
  color: var(--color-secondary-700);
}

.doc a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  background-color: currentColor;
  -webkit-mask: url("../img/external-link.svg") no-repeat center / contain;
  mask: url("../img/external-link.svg") no-repeat center / contain;
}

#search-input {
  box-shadow: 0px 0px 3px var(--color-secondary-500);
  border: none;
  padding-right: 1.6em;
}

/* search icon: <input> can't render ::before itself, so it's placed on the
   .field wrapper instead and positioned over the input's right padding */
#search-field {
  position: relative;
}

#search-field::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5em;
  width: 0.85em;
  height: 0.85em;
  transform: translateY(-50%);
  background-color: var(--color-secondary-500);
  -webkit-mask: url("../img/search.svg") no-repeat center / contain;
  mask: url("../img/search.svg") no-repeat center / contain;
  pointer-events: none;
}

/* disappears the moment the placeholder does, i.e. once a value is typed */
#search-field:has(#search-input:not(:placeholder-shown))::before {
  display: none;
}

.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  margin-top: 2rem;
}

/* anchor symbols for headings */
.doc h1 .anchor,.doc h2 .anchor,.doc h3 .anchor,.doc h4 .anchor,.doc h5 .anchor,.doc h6 .anchor {
    position: absolute;
    text-decoration: none;
    width: 3.75ex;
    margin-left: -3.5ex;
    visibility: hidden;
    font-size: .8em;
    font-weight: 400;
    padding-top: .05em
}

.doc h1 .anchor::before,.doc h2 .anchor::before,.doc h3 .anchor::before,.doc h4 .anchor::before,.doc h5 .anchor::before,.doc h6 .anchor::before {
    content: "\1F517"
}

.doc h1:hover .anchor,.doc h2:hover .anchor,.doc h3:hover .anchor,.doc h4:hover .anchor,.doc h5:hover .anchor,.doc h6:hover .anchor {
    visibility: visible
}

/* clear floating image space; invoke with [.clear]\nparagraphor==heading */
.clear {
  clear: both;
}

footer.footer {
    background-color: var(--color-fs-link-dark);
    color: var(--color-secondary-300);
    font-size: .83333rem;
    line-height: 1.6;
    padding: 0.8rem;
}

.footer a {
    color: var(--color-light-grey);
}

/* hover and marker removed
li:hover.nav-item:has(> .nav-link) {
  background-color: var(--color-light-grey);
}

.nav-text:hover {
  background-color: var(--color-light-grey);
}

li.is-current-page.is-active {
  background-color: var(--color-light-grey);
}

.is-current-path .nav-text {
  font-weight:bold;
}

*/

/* === BACK TO TOP === */
/* Markup/behavior: supplemental-ui/partials/article.hbs + js/back-to-top.js */

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 5; /* above article content; theme's own scale (vars.css) tops out at --z-index-navbar: 4, which this never overlaps */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-secondary-300);
  border-radius: 2rem;
  background: var(--color-ui-bg);
  color: var(--color-secondary-900);
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.back-to-top:hover {
  background: var(--color-light-grey);
}

/* Needed despite the `hidden` attribute on the element: an author-stylesheet
`display` declaration always wins over the browser's built-in
`[hidden] { display: none }` rule, regardless of selector specificity,
because author styles take precedence over user-agent styles in the cascade.
Without this, `display: flex` above makes the button ignore `hidden` entirely
and show up before any scrolling / before back-to-top.js has run. */
.back-to-top[hidden] {
  display: none;
}

.back-to-top-icon {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  background: url(../img/chevron.svg) no-repeat center / contain;
  transform: rotate(180deg); /* chevron.svg points down by default (used as a dropdown indicator elsewhere in the theme) */
}

@media print {
  .back-to-top {
    display: none;
  }
}