/* salto-headers.css
 * Layout and structural styles only.
 * Colors come from the scheme-editor / scheme-reverse-1 design tokens:
 *   --role-background  (blue)
 *   --role-headings    (white)
 *   --role-text        (white)
 */

/* ── Sticky z-index: below Drupal toolbar (502 oriented, 1250 unoriented) ── */

#header-wrapper {
  z-index: 500;
}

/* ── Header shell ────────────────────────────────────────────────────────── */

.salto-header {
  background-color: var(--role-background, #0D6EFD);
  color: var(--role-text, #fff);
  width: 100%;
}

.salto-header a {
  color: var(--role-headings, #fff);
}

.salto-header a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* schemes.css setzt [class*="scheme-"] a { text-decoration: underline } (Spez. 0-2-1).
   Header-Element selbst hat scheme-Klassen → Override nötig mit Spez. 0-3-1. */
.salto-header.scheme-editor a:not(.btn),
.salto-header .salto-offcanvas a:not(.btn) {
  text-decoration: none;
}

/* ── Logo area ───────────────────────────────────────────────────────────── */

.salto-header__logo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .salto-header__logo-col {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
}

.salto-header svg {
  max-width: 100%;
  height: auto;
}

/* Default (all variants except full): height-based */
.salto-header__logo-link svg,
.salto-header__logo-link img {
  height: 2rem;
  width: auto;
  display: block;
  fill: var(--role-headings, #fff);
}

/* Full variant desktop: width-based, animatable */
@media (min-width: 1200px) {
  .salto-header--full .salto-header__logo-link svg,
  .salto-header--full .salto-header__logo-link img {
    width: 300px;
    height: auto;
    transition: width 0.4s ease;
  }

  .salto-header--full.header-compact .salto-header__logo-link svg,
  .salto-header--full.header-compact .salto-header__logo-link img {
    width: 160px;
  }

  /* Initialisierung ohne Flicker: Transitionen erst nach erstem Paint aktiv */
  .salto-header--full.header-no-transition .salto-header__logo-link svg,
  .salto-header--full.header-no-transition .salto-header__logo-link img,
  .salto-header--full.header-no-transition .salto-header__departments-menu,
  .salto-header--full.header-no-transition .salto-header__additional-menu {
    transition: none !important;
  }
}

/* ── Scroll-animated menu rows (full variant only) ───────────────────────── */

@media (min-width: 1200px) {
  .salto-header--full .salto-header__departments-menu,
  .salto-header--full .salto-header__additional-menu {
    overflow: hidden;
    max-height: 4rem;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }

  .salto-header--full.header-menus-hidden .salto-header__departments-menu,
  .salto-header--full.header-menus-hidden .salto-header__additional-menu {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

.salto-header__context-label {
  font-size: 16px;
  color: var(--role-headings, #fff);
  white-space: nowrap;
  align-self: flex-start;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .05em;
}

/* ── Language selector ───────────────────────────────────────────────────── */

.salto-header__language .nav-link {
  padding: 0;
  color: var(--role-headings, #fff);
}

.salto-header__language .nav-link:not(:last-child)::after {
  content: '|';
  margin: 0 0.3rem;
  color: var(--role-headings, #fff);
}

.salto-header__language .language-link.is-active {
  position: relative;
}

.salto-header__language .language-link.is-active::after {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Action icons ────────────────────────────────────────────────────────── */

.salto-header__actions {
  /* gap via Bootstrap gap-3 im Template */
}

.salto-header__abo-link {
  font-weight: 700;
  letter-spacing: .05em;
}

/* Icon sizes — mobile (< xl) */
.salto-header__user-toggle i,
.salto-header__write-link i {
  font-size: 1.2rem;
  cursor: pointer;
}

.salto-header__burger-toggle i {
  font-size: 1.8rem;
  cursor: pointer;
}

/* Icon sizes — desktop (≥ xl = 1200px) */
@media (min-width: 1200px) {
  .salto-header__user-toggle i,
  .salto-header__write-link i {
    font-size: 1.5rem;
  }

  .salto-header__burger-toggle i {
    font-size: 2.2rem;
  }
}

/* Circle outline around person icon */
.salto-header .bi-person,
.salto-header .bi-person-fill {
  position: relative;
}

.salto-header .bi-person .circled,
.salto-header .bi-person-fill .circled {
  display: block;
  font-style: normal;
  position: absolute;
  right: -5%;
  top: 7%;
  border: 0.1em solid currentColor;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
}

/* ── Department menu row ─────────────────────────────────────────────────── */

.salto-header__departments-menu {
  padding: 0;
}
/* Padding auf inneres div, damit es mit dem Content geclippt wird (max-height: 0 → kein Rest) */
.salto-header__departments-menu > div {
  padding: 0.3rem 0;
}

/* Taxonomy variant: scheme-editor class (added in Twig) → --role-background=white, --role-headings=blue */
.salto-header--taxonomy .salto-header__departments-menu a:hover,
.salto-header--taxonomy .salto-header__departments-menu a:focus {
  color: var(--role-headings, #0D6EFD) !important;
  opacity: 0.75 !important;
}

.salto-header__departments-menu ul,
.salto-header__additional-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.salto-header__departments-menu li,
.salto-header__additional-menu li {
  display: inline;
}

.salto-header__departments-menu a {
  padding: 0.25rem 1rem 0.25rem 0;
  display: inline-block;
  /* px statt rem: old bootstrap_salto sets html{font-size:18px} globally → menu wraps on old-theme pages */
  font-size: 16px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}


.salto-header__departments-menu a.active {
  font-weight: 600;
}

/* Karriere Südtirol: Text durch Logo ersetzen.
   [href$=] matcht /karrieresuedtirol, /de/karrieresuedtirol, /it/karrieresuedtirol.
   !important überschreibt die alte Theme-Regel auf bootstrap_salto-Seiten.
   SVG 330×88 → Ratio 3.75:1 → bei 1rem Höhe = 3.75rem Breite.
   vertical-align:middle zentriert das Element in der Textzeile (kein bottom-Hack).
   full-Variante (dunkler BG): weißes SVG. taxonomy-Variante (weißer BG): blaues SVG. */
.salto-header__departments-menu a[href$="/karrieresuedtirol"] {
  color: transparent !important;
  background-image: url('/themes/custom/bootstrap_salto_2026/images/logo-menuitem-karriere-suedtirol-white.svg') !important;
  background-repeat: no-repeat !important;
  background-size: auto .8rem !important;
  background-position: left calc(50% - 2px) !important;
  min-width: 3.75rem;
  vertical-align: middle;
}
.salto-header--taxonomy .salto-header__departments-menu a[href$="/karrieresuedtirol"] {
  background-image: url('/themes/custom/bootstrap_salto_2026/images/logo-menuitem-karriere-suedtirol-blue.svg') !important;
}

/* ── Additional menu row ─────────────────────────────────────────────────── */

.salto-header__additional-menu {
  padding: 0;
  font-size: 16px;
}
.salto-header__additional-menu > div {
  padding: 0.15rem 0;
}

.salto-header__additional-menu a {
  padding: 0.2rem 1rem 0.2rem 0;
  display: inline-block;
}

/* ── Offcanvas panels ────────────────────────────────────────────────────── */

/* Offcanvas-Backdrop: salto-blau statt Bootstrap-Standard-Schwarz */
.offcanvas-backdrop {
  background-color: var(--salto-base, #0D6EFD);
}
.offcanvas-backdrop.show {
  opacity: 0.6;
}

/* Spezifizität 0-2-0 (statt 0-1-0) damit Bootstrap's .offcanvas { --bs-offcanvas-bg:#fff }
   nicht nach Source-Order gewinnt — gilt auf allen Seitentypen (Barrio + 2026). */
.offcanvas.salto-offcanvas {
  --bs-offcanvas-bg: var(--role-background, #0D6EFD);
  background-color: var(--role-background, #0D6EFD);
  color: var(--role-text, #fff);
  max-width: 320px;
  font-family: var(--salto-font-sans);
}

.salto-offcanvas a {
  color: var(--role-headings, #fff);
}

.salto-offcanvas a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.salto-offcanvas .offcanvas-title svg,
.salto-offcanvas .offcanvas-title img {
  height: 1.75rem;
  width: auto;
  fill: var(--role-headings, #fff); 
}

.salto-offcanvas .btn-close {
  filter: invert(1);
}

.salto-offcanvas .offcanvas-body {
  padding: 0;
}

.salto-offcanvas--user .offcanvas-body {
  padding: 1rem;
}

.salto-offcanvas__search {
  padding: 1rem 1rem 0;
}

.salto-offcanvas__search .block-search-form-block {
  margin-bottom: 0;
}


/* Search form: input + button inline */
.salto-offcanvas__search .content {
  display: block;
}

#search-block-form {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
header #search-block-form {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.salto-offcanvas__search .js-form-item-keys {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0 !important;
}

.salto-offcanvas__search .js-form-item-keys .form-search {
  width: 100%;
  border-radius: 0;
}

.salto-offcanvas__search .form-actions {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
}

.salto-offcanvas__search .form-actions button[type="submit"] {
  background: transparent;
  color: var(--role-headings, #fff);
  border: none;
  padding: 0.2rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0; /* Text/Value verstecken; Icon kommt via ::before */
  line-height: 1;
  width: auto;
}

/* Suchglas via Bootstrap-Icons-Font — funktioniert in beiden Themes (Barrio + 2026),
   da BI-Font in beiden geladen wird. PHP-Hook setzt nur aria-label, kein #value. */
.salto-offcanvas__search .form-actions button[type="submit"]::before {
  font-family: "bootstrap-icons";
  content: "\f52a"; /* bi-search */
  font-size: 2rem;
  display: inline-block;
  line-height: 1;
}

/* Login-Formular und Suche: Inputs auf scheme-Hintergrund */
.salto-offcanvas .form-control {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.salto-offcanvas .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.salto-offcanvas .form-control:focus {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: none;
}
.salto-offcanvas label {
  color: var(--role-headings, #fff);
}

.salto-offcanvas__user-links {
  padding: 0.75rem 1rem 0;
}

/* Main menu: next lighter blue as background, full width */
.salto-offcanvas__main-menu {
  background-color: var(--salto-hover, #3284FC);
  padding: 0.25rem 1rem;
}

.salto-offcanvas__main-menu .nav {
  flex-direction: column;
}

.salto-offcanvas__main-menu .nav-link {
  color: var(--role-headings, #fff);
  font-size: 1rem;
  padding: 0.25rem 0;
}

/* ── Offcanvas accordion submenus ────────────────────────────────────────── */

.salto-menu-toggle {
  background: transparent;
  border: none;
  color: var(--role-headings, #fff);
  padding: 0.25rem 0.25rem;
  cursor: pointer;
  line-height: 1;
}

.salto-menu-toggle i {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.8rem;
}

.salto-menu-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.salto-submenu .menu {
  list-style: none;
  padding: 0.25rem 0 0.25rem 0.75rem;
  margin: 0;
}

.salto-submenu .nav-link {
  font-size: 0.9rem;
  padding: 0.2rem 0;
}

/* Bootstrap overrides: undo top:-3px from aggregated old-theme CSS */
.icon-link > .bi {
  top: unset;
}

/* old bootstrap_salto theme sets .font-salto-sans → var(--salto-font-sans) = "source sans pro"
   via variables-2k25.css (loaded after design-tokens.css). Scoped override wins via specificity. */
.salto-header .font-salto-sans,
.salto-offcanvas .font-salto-sans {
  font-family: "Source Sans 3", sans-serif !important;
}

/* ── SVG logo color override ─────────────────────────────────────────────── */

.salto-header svg path,
.salto-offcanvas svg path {
  fill: var(--role-headings, #fff);
}