/**
 * Hauptnavigation des USM Tools
 *
 * Gins Werkzeugleiste fuehrt durch die Administration; die fachliche
 * Navigation (Dashboard, Aktive MitarbeiterInnen, Archiv, Weitere Funktionen)
 * liegt im Menue "main" und wird hier als waagerechte Leiste im Header
 * ausgegeben. Ohne diese Regeln rendert Drupal das Menue als vertikale Liste.
 */

.region-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gin-spacing-m, 16px);
}

/*
 * Reihenfolge im Kopfbereich: erst die Marke und die fachliche Navigation
 * in einer Zeile, darunter der Seitentitel, darunter die lokalen Reiter
 * (Ansicht / Bearbeiten / Revisionen). Ohne feste Reihenfolge schieben
 * sich Titel und Reiter zwischen Logo und Menue.
 */
.region-header > [id*="site-branding"] { order: 0; }
.region-header > [id*="main-menu"]     { order: 1; }
.region-header > [id*="searchform"]    { order: 2; }

.region-header > [id*="page-title"] {
  flex: 1 0 100%;
  order: 3;
}

.region-header > [id*="local-tasks"] {
  flex: 1 0 100%;
  order: 4;
}

/* ---------- Markenzeichen ---------- */

/*
 * Das USM-Logo ist eine 31KB-PNG in voller Aufloesung. Olivero begrenzte
 * sie ueber eigenes CSS; ohne Begrenzung fuellt sie den halben Bildschirm.
 */
[id*="site-branding"] {
  order: 0;
  flex: 0 0 auto;
}

/*
 * Das USM-Logo ist weiss auf transparentem Grund -- im vorherigen Theme sass
 * es in einem blauen Kasten. Auf Gins hellem Header waere es unsichtbar,
 * deshalb bekommt es seine Flaeche zurueck.
 */
[id*="site-branding"] .site-logo,
[id*="site-branding"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--gin-border-m, 6px);
  background: #013888;
}

[id*="site-branding"] img {
  block-size: auto;
  max-block-size: 28px;
  inline-size: auto;
  max-inline-size: 120px;
}

/* ---------- Aktionsmenue ("MitarbeiterIn hinzufuegen") ---------- */

/*
 * Das Menue "main-buttons" traegt die primaeren Aktionen des Dashboards.
 * Ohne diese Regeln erscheinen sie als gewoehnliche Textlinks.
 */
.menu--main-buttons ul,
nav[class*="main-buttons"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gin-spacing-xs, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu--main-buttons li,
nav[class*="main-buttons"] li {
  list-style: none;
  margin: 0;
}

.menu--main-buttons a,
nav[class*="main-buttons"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--gin-border-l, 8px);
  background: var(--gin-color-primary);
  color: var(--gin-color-button-text, #fff);
  font-size: var(--gin-font-size-s, .875rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  text-decoration: none;
}

.menu--main-buttons a:hover,
.menu--main-buttons a:focus-visible,
nav[class*="main-buttons"] a:hover,
nav[class*="main-buttons"] a:focus-visible {
  background: var(--gin-color-primary-active, var(--gin-color-primary));
  color: var(--gin-color-button-text, #fff);
  text-decoration: none;
  filter: brightness(1.1);
}

/* ---------- Navigationsleiste ---------- */

[id*="main-menu"] {
  order: 1;
  flex: 1 1 auto;
  min-inline-size: 0;
}

[id*="main-menu"] .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gin-spacing-xxs, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

[id*="main-menu"] .menu-item {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

[id*="main-menu"] .menu-item > a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--gin-border-m, 6px);
  color: var(--gin-color-text);
  font-size: var(--gin-font-size-s, .875rem);
  font-weight: var(--gin-font-weight-semibold, 600);
  text-decoration: none;
  white-space: nowrap;
}

[id*="main-menu"] .menu-item > a:hover,
[id*="main-menu"] .menu-item > a:focus-visible {
  background: var(--gin-bg-layer3);
  color: var(--gin-color-primary);
  text-decoration: none;
}

[id*="main-menu"] .menu-item > a.is-active {
  background: var(--gin-color-primary);
  color: var(--gin-color-button-text, #fff);
}

/* ---------- Zweite Ebene ("Weitere Funktionen") ---------- */

[id*="main-menu"] .menu-item--expanded > a::after {
  content: "";
  margin-inline-start: 6px;
  border: 4px solid transparent;
  border-block-start-color: currentColor;
  translate: 0 2px;
}

[id*="main-menu"] .menu .menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0;
  min-inline-size: 200px;
  padding: var(--gin-spacing-xxs, 4px);
  background: var(--gin-bg-layer);
  border: 1px solid var(--gin-border-color-layer);
  border-radius: var(--gin-border-m, 6px);
  box-shadow: var(--gin-shadow-l2, 0 8px 24px rgba(0, 0, 0, .16));
}

[id*="main-menu"] .menu-item:hover > .menu,
[id*="main-menu"] .menu-item:focus-within > .menu {
  display: flex;
}

[id*="main-menu"] .menu .menu .menu-item > a {
  inline-size: 100%;
  font-weight: var(--gin-font-weight-normal, 400);
}

/* ---------- Suche im Header ---------- */

[id*="searchform"] {
  order: 2;
  flex: 0 0 auto;
}

[id*="searchform"] form {
  display: flex;
  align-items: center;
  gap: var(--gin-spacing-xs, 8px);
}

[id*="searchform"] .form-item {
  margin-block: 0;
}