/**
 * @file
 * Utility classes to hide elements in different ways.
 */
/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be collapsible details that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */
.hidden {
  display: none;
}

/**
 * Hide elements visually, but keep them available for screen readers.
 *
 * Used for information required for screen reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.visually-hidden, .header-nav:not(.is-active) [data-drupal-link-system-path="user/login"] .ui-icons-menu-text,
.header-nav:not(.is-active) [data-drupal-link-system-path="user/logout"] .ui-icons-menu-text {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/**
 * The .focusable class extends the .visually-hidden class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.visually-hidden.focusable:active, .header-nav:not(.is-active) [data-drupal-link-system-path="user/login"] .focusable.ui-icons-menu-text:active,
.header-nav:not(.is-active) [data-drupal-link-system-path="user/logout"] .focusable.ui-icons-menu-text:active,
.visually-hidden.focusable:focus-within,
.header-nav:not(.is-active) [data-drupal-link-system-path="user/login"] .focusable.ui-icons-menu-text:focus-within,
.header-nav:not(.is-active) [data-drupal-link-system-path="user/logout"] .focusable.ui-icons-menu-text:focus-within {
  position: static !important;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
}

/**
 * Hide visually and from screen readers, but maintain layout.
 */
.invisible {
  visibility: hidden;
}

.header-nav.is-active svg {
  width: 30px;
  height: 30px;
}
.header-nav.is-active .primary-nav {
  margin-block-end: var(--sp-xl);
}