/**
 * Circled person helper
 * Put <i class='circled'></i> inside the bootstrap icon <i>
 * Menu prefixes:
 * .salto-header (whole header)
 * .header-line-main (Logo plus icon menu beside logo)
 * .header-line-departments-menu (Departments menu line)
 * .header-line-additional-menu (Additional menu line)
 * .offcanvas-user-menu (Off canvas user menu)
 * .offcanvas-burger-menu (Off canvas burger menu = whole menu)
 **/


/* Colors */
.salto-header,
.salto-header h1,
.salto-header h2,
.salto-header h3,
.salto-header h4,
.salto-header h5,
.salto-header h6,
.salto-header a {
  color: var(--salto-white);
  text-decoration: none;
}

.salto-header a:hover {
  color: #ccc;
  cursor: pointer;
}

/* Make black close button white. Since it is a background image we use filter */
.salto-header .btn-close.text-reset {
  filter: invert(100%) brightness(1);
}

/* Backgrounds for the various sub headers */
.salto-header.salto-header-full-music .header-line-main,
.salto-header.salto-header-full-music .header-line-departments-menu,
.salto-header.salto-header-full-music .header-line-additional-menu,
.salto-header.salto-header-full-music .offcanvas-user-menu,
.salto-header.salto-header-full-music .offcanvas-burger-menu {
  background: linear-gradient(270deg, #FFCC17 0%, #BD00FF 100%) !important;
}
.salto-header.salto-header-full-music .offcanvas-burger-menu {
  background: var(--salto-primary) !important;
}

.salto-header.salto-header-full-music .header-line-music-menu {
  background: var(--salto-white);
}

.salto-header.salto-header-full-music .offcanvas-burger-menu .offcanvas-burger-menu-menu {
  background: #3D8BFD;
  border-top: 2px solid var(--salto-white);
  border-bottom: 2px solid var(--salto-white);
}

/* Logo color */
.salto-header svg path {
  fill: var(--salto-white) !important;
}

.salto-header .btn.btn-primary {
  background: #3D8BFD;
}

/**
 * Helpers and fixes
 **/

/* Offcanvas menus scrollable */
.salto-header .offcanvas-user-menu,
.salto-header .offcanvas-burger-menu {
  overflow-y: scroll;
}

/* Header byline text */
.salto-header .header-text {
  position: relative;
  top: -.25rem;
}

/* Circled helper. Put <i class='circled'></i> inside the bootstrap icon <i> */
.salto-header .circled {
  font-style: normal;
  position: absolute;
  right: -5%;
  top: 10%;
  border: .1em solid;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
}

/* Hide register/recover password links on login form; we set the text manually in the template.
 * Could also be hidden with an alter hook.
 */
.salto-header .block-user-login-block .item-list {
  display: none;
}

/* We must set the bootstrap icons relative to set the circled helper in the right place*/
.salto-header .bi-person,
.salto-header .bi-person-fill {
  position: relative;
}

/* Reset search block form paddings */
.salto-header .offcanvas .search-block-form #search-block-form {
  padding: 0 !important;
  width: 100%;
}

/* Search form block: set whole width*/
.salto-header .offcanvas-burger-menu .search-block-form .container-inline {
  width: 100%;
}

.salto-header .offcanvas-burger-menu .search-block-form .container-inline .js-form-item {
  width: 70%;
}

.salto-header .offcanvas-burger-menu .search-block-form .container-inline .h-100 {
  width: 30%;
}

.salto-header .offcanvas-burger-menu .search-block-form .container-inline .h-100 #edit-submit {
  width: 100%;
  border-radius: 0;
}

/* Language selectors: lines inbetween */
.salto-header .language-selector .en.nav-link {
  display: none;
}

.salto-header .language-selector .nav-link:not(:first-child):not(:last-child) {
  padding-right: 0;
  padding-left: .25rem;
}

.salto-header .language-selector .nav-link:not(:last-child) a::after {
  content: '|';
  padding-left: .25rem;
}

.salto-header .language-selector .nav-link:first-child {
  padding-right: 0;
}

.salto-header .language-selector .nav-link:last-child {
  padding-left: .25rem;
}

.salto-header .language-selector .nav-link .language-link {
  position: relative;
}

.salto-header .language-selector .nav-link .language-link.is-active::before {
  content: ".";
  position: absolute;
  left: .5rem;
  top: .25rem;
}

/* Some fixes for the first nav item alignment */
.salto-header .header-line-departments-menu li a {
  padding-left: 0;
  padding-right: .5rem;
  text-transform: uppercase;
}

/* Inbetween menu items (e. g. '|', not used on main) */
.salto-header .header-line-departments-menu li a:after {
  content: '';
  padding-left: .5rem;
}

.salto-header .header-line-departments-menu li:last-child a:after {
  content: '';
}

/* Header line additional menu */
/* Some fixes for the first nav item alignment */
.salto-header .header-line-additional-menu li a {
  padding-left: 0;
  padding-right: .5rem;
}

/* Inbetween menu items (e. g. '|', not used on main) */
.salto-header .header-line-additional-menu li a:after {
  content: '';
  padding-left: .5rem;
}

.salto-header .header-line-additional-menu li:last-child a:after {
  content: '';
}

/* Sizes for menu icons for header and offcanvas menus */
@media only screen and (min-width: 768px) {

  .header-line-main .bi.bi-person,
  .header-line-main .bi.bi-person-fill,
  .offcanvas-burger-menu .bi.bi-person,
  .offcanvas-burger-menu .bi.bi-person-fill {
    font-size: 1.5rem;
  }

  .header-line-main .bi.bi-pencil {
    font-size: 1.5rem;
  }

  .header-line-main .bi.bi-justify {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 767px) {

  .header-line-main .bi.bi-person,
  .header-line-main .bi.bi-person-fill,
  .offcanvas-burger-menu .bi.bi-person,
  .offcanvas-burger-menu .bi.bi-person-fill {
    font-size: 1.2rem;
  }

  .header-line-main .bi.bi-pencil {
    font-size: 1.2rem;
  }

  .header-line-main .bi.bi-justify {
    font-size: 1.8rem;
  }
}



.desktop-music-menu a {
  color: #BD00FF;
  text-transform: uppercase;
  font-weight: 600;
}

.header-logo svg,
.desktop-music-menu svg {
  max-width: 100%;
}

/* Salto Music Logo*/
.header-logo svg path {
  fill: white !important;
}


/* Salto Logo */
.desktop-music-menu svg path {
  fill: var(--salto-primary) !important;
}


.desktop-music-menu .salto-logo i {
  font-size: 1.2rem;
  position: relative;
  top: .2rem;
}

.desktop-music-menu a.salto-logo {
  color: var(--salto-primary);
  position: relative;
  top: .2rem;
}

.salto-logo-wrapper {
  white-space: nowrap;
  position: relative;
  top: .2rem;
}

.salto-logo-wrapper svg {
  height: 1.2rem;
}