/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Secondary navigation styling.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

.secondary-nav {
  letter-spacing: 0.02em;
  font-size: var(--font-size-s);
  font-weight: 600;
}

.secondary-nav__menu {
  display: flex;
  align-items: center;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  list-style: none;
}

.secondary-nav__menu-item {
  /* Parent element is set to flex-basis: 0. We
   * don't want text to wrap unless it goes over a
   * certain arbitrary width.
   */

  /* @todo should this be scoped to desktop nav? */
  width: max-content;
  max-width: 12.5rem;
}

.secondary-nav__menu-item:not(:last-child) {
  margin-inline-end: var(--sp1-5);
}

.secondary-nav__menu-item .icon--leichte-sprache {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg height='21.700417' viewBox='0 0 18.178 21.700417' width='18.178' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.921 19.075417c-1.56968803-.6053941-3.23862996-.9123221-4.921-.905v-11.10012299c1.67683377-.00501106 3.33946799.30749631 4.9.921123 1.55531799.608135 2.97792035 1.51216161 4.189 2.66199999 1.2110796-1.14983838 2.633682-2.05386499 4.189-2.66199999 1.560532-.61362669 3.2231662-.92613406 4.9-.921123v11.10012299c-1.6870543-.0083778-3.3606938.2999599-4.934.909-1.5438075.5944525-2.956604 1.4847962-4.159 2.621-1.20298446-1.138883-2.61769501-2.0307214-4.164-2.625zm4.164 0c1.0380813-.7786731 2.1754584-1.4152949 3.382-1.893 1.1831267-.4682903 2.4216538-.7822074 3.685-.934v-6.96499999c-1.2728827.2350454-2.4970348.68298841-3.621 1.32499999-1.2650431.7250503-2.424257 1.6207912-3.445 2.662-1.02074298-1.0412088-2.17995688-1.9369497-3.445-2.662-1.12396517-.64201158-2.34811735-1.08995459-3.621-1.32499999v6.96499999c1.26334824.1517817 2.50187673.4656991 3.685.934 1.20605992.4791129 2.34276556 1.1170805 3.38 1.897zm-2.852-12.18599999c-.77219573-.74610948-1.20145094-1.77834881-1.186-2.852-.01545094-1.07365119.41380427-2.10589052 1.186-2.852.74628077-.77182796 1.77849801-1.20071205 2.852-1.185 1.0736512-.01545094 2.1058905.41380427 2.852 1.186.7721957.74610948 1.2014509 1.77834881 1.186 2.852.0154509 1.07365119-.4138043 2.10589052-1.186 2.852-.7461095.77219573-1.7783488 1.20145094-2.852 1.186-1.07365119.01445094-2.10589052-.41480427-2.852-1.187zm4.278-1.426c.3860979-.37305474.6007255-.8891744.593-1.426.0077255-.53682559-.2069021-1.05294526-.593-1.426-.3729859-.38619879-.88915136-.60084542-1.426-.593-.53684864-.00784542-1.05301407.20680121-1.426.593-.38609787.37305474-.60072547.88917441-.593 1.426-.00760566.53680257.20700294 1.05287655.593 1.426.37288336.38646568.88902514.60146443 1.426.594.5368256.00672547 1.0529453-.20790213 1.426-.594z' fill='%23831417'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: auto;
}

.secondary-nav__menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--sp2);
  font-size: 1.25rem;
  font-weight: normal;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5625rem;
}

.secondary-nav__menu-link.is-active {
  color: var(--color--red);
  font-weight: bold;
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header .secondary-nav {
    position: relative;
    display: flex;
    margin-inline-start: var(--sp);
    padding-inline-start: 0;
  }

  body:not(.is-always-mobile-nav) .site-header {
    [type="search"] {
      width: 15.625rem;
      padding: 1.5rem 1.875rem 0 0;
      vertical-align: text-bottom;
      border-top: 0;
      border-right: 0;
      border-left: 0;
      outline: none;
      font-size: 1.25rem;
    }
  }
  body:not(.is-always-mobile-nav) .site-header .secondary-nav__menu-item:not(:last-child) {
    margin-inline-end: var(--sp2);
  }
  body:not(.is-always-mobile-nav) .site-header .secondary-nav__menu-link:focus {
    position: relative;
    outline: 0;
  }

  body:not(.is-always-mobile-nav) .site-header .secondary-nav__menu-link:focus:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + var(--sp));
    height: var(--sp3);
    content: "";
    transform: translate(-50%, -50%);
    border: solid 2px var(--color--primary-50);
    border-radius: 0.25rem;
  }
}