.lgd-header {
  padding-block-start: var(--spacing-large);
  padding-block-end: 0;
  background-color: var(--color-white);
}

.lgd-header__inner {
  justify-content: start;
  padding-inline: var(--spacing);
}

.lgd-header .lgd-region--header {
  margin-inline-end: auto;
}

/* Branding Block Section */
.lgd-header .branding {
  display: flex;
  gap: var(--spacing);
  align-items: center;
}

.lgd-header .branding__item--logo {
  width: auto;
}
.lgd-header .branding__item--logo img {
  max-width: 5.75rem;
}

.branding__item--name {
  font-size: var(--font-size-1x-large);
  font-weight: bold;
}

.lgd-header .branding__logo:focus-visible {
  outline: var(--outline);
  outline-offset: var(--outline-offset);
}

/* Menus */
.lgd-header__menus {
  position: relative;
  margin-block-start: var(--spacing-large);
  border: none;
  border-block-start: var(--border-light);
}

.lgd-header__menus-inner {
  display: flex;
  flex-wrap: wrap;
}

.lgd-header .region-secondary-menu {
  background-color: var(--color-white);
}

.lgd-header__nav--secondary {
  width: 100%;
}

.lgd-header .menu--main > .menu-item a,
.lgd-header .menu--main > .menu-item > button {
  padding: var(--spacing);
  color: var(--color-grey-darkest);
  font-size: var(--font-size-small);
  &:focus-visible {
    outline: var(--outline);
  }
  &:hover,
  &:focus {
    background-color: var(--color-grey-lightest);
  }
}

.lgd-header .menu--main > .menu-item--active-trail a,
.lgd-header .menu--main > .menu-item a.is-active {
  position: relative;
  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: var(--color-accent);
  }
}

.lgd-header__toggles {
  margin-inline: 0;
}

.lgd-header .lgd-header__toggle {
  margin-inline-start: var(--spacing-smaller);
  padding: var(--spacing);
  color: var(--color-accent);
  border: 0;
  background-color: var(--color-white);
  font-size: var(--font-size-small);
  &:focus,
  &:hover {
    text-decoration: none;
    background-color: var(--color-grey-lightest);
  }
  &:focus-visible {
    color: var(--color-accent);
    outline: var(--outline);
  }
}

.lgd-header__nav--primary,
.lgd-header__nav--secondary {
  margin-inline: 0;
}

.lgd-header .region-secondary-menu .menu {
  padding: 0;
  list-style: none;
}

.lgd-header .region-secondary-menu .menu > .menu-item > a {
  padding: var(--spacing-smaller) var(--spacing);
  text-decoration: none;
  font-weight: normal;
}

.lgd-header .region-secondary-menu .menu > .menu-item > a:focus-within,
.lgd-header .region-secondary-menu .menu > .menu-item > a:focus,
.lgd-header .region-secondary-menu .menu > .menu-item > a:focus-visible,
.lgd-header .region-secondary-menu .menu > .menu-item > a:hover {
  background-color: var(--color-grey-lightest);
}

/* Search Region */
.lgd-header form {
  display: flex;
  align-items: center;
}

@media (max-width: 48rem) {
  .lgd-header form {
    padding: 0 var(--spacing);
  }
}

.lgd-header label {
  display: block;
  color: var(--header-search-button-color);
}

.lgd-header .form-item-s {
  flex-grow: 1;
  margin-block-end: 0; /* Override default form-item class */
}

.lgd-header .form-text {
  width: 100%;
  border: var(--header-search-input-border);
  border-bottom: 2px solid var(--color-accent);
  background: var(--color-grey-lighter);
}

.lgd-header .form-text:focus,
.lgd-header .form-text:focus-visible {
  border: none;
  border-bottom: 2px solid var(--color-accent);
  outline: var(--outline);
  box-shadow: none;
}

.lgd-header .form-actions {
  margin-block-start: auto;
}

.lgd-header .form-submit {
  color: var(--header-search-button-color);
  background-color: var(--header-search-button-bg-color);
}

.lgd-header .form-submit:hover,
.lgd-header .form-submit:focus {
  color: var(--color-white);
  background-color: var(--color-accent-hover);
}

.lgd-header .form-submit:active {
  color: var(--color-white);
  background-color: var(--color-accent-active);
}

.lgd-region--primary-menu .block-localgov-search form {
  display: flex;
  align-items: center;
}

.lgd-region--primary-menu .block-localgov-search .form-item-s {
  flex: 1;
  margin-bottom: 0;
}

.lgd-region--primary-menu .block-localgov-search label {
  display: none;
}

@media screen and (max-width: 48rem) {
  .lgd-header__menus-inner > * + *,
  .lgd-region__inner--primary-menu > * + * {
    margin-block-start: var(--spacing);
  }

  .lgd-region__inner--primary-menu {
    padding-block-start: var(--spacing);
    border-block-start: 1px solid var(--color-grey-light);
  }

  .lgd-region--secondary-menu .lgd-region__inner--secondary-menu {
    padding: 0;
  }

  .lgd-region--secondary-menu .lgd-region__inner--secondary-menu .menu-item {
    margin-block-end: 0;
  }

  .lgd-header .region-secondary-menu .menu > .menu-item > a {
    display: block;
    padding: var(--spacing);
    font-size: var(--font-size-small);
  }

  .lgd-header__nav--primary .menu,
  .lgd-header__nav--secondary .menu {
    margin-block-end: 0;
  }

  .lgd-region__inner--secondary-menu {
    margin-block-start: 0;
    padding: 0;
    border-block-end: var(--border);
  }

  .lgd-header__nav--secondary .region-secondary-menu {
    margin-block-start: 0;
  }

  .lgd-region--secondary-menu .lgd-region__inner--secondary-menu {
    padding-block-start: 0;
    padding-block-end: var(--spacing);
  }

  .lgd-region--search {
    display: none;
  }

  @media (max-width: 48rem) {
    .lgd-header__nav--primary {
      margin-block-start: 0;
    }
  }
}

@media (min-width: 48rem) {
  .lgd-region--primary-menu {
    padding-inline: 0;
  }

  .lgd-region--search {
    display: block;
    margin-block: 0;
  }

  .menu--main > .menu-item.menu-item {
    margin-inline-start: var(--spacing);
    margin-inline-end: 0;
  }

  .lgd-header .form-item-s {
    flex-grow: initial;
  }

  .lgd-region--primary-menu .block-localgov-search {
    display: none;
  }
}

.lgd-region--search .menu {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  margin-block-end: var(--spacing);
  padding: 0;
  list-style: none;
  gap: var(--spacing);
}

.lgd-header .lgd-region--search .menu a {
  padding: 0;
  color: var(--color-accent);
  font-size: var(--font-size-small);
  font-weight: bold;
  text-decoration-color: transparent;
}

.lgd-header .lgd-region--search .menu a:hover,
.lgd-header .lgd-region--search .menu a:focus,
.lgd-header .lgd-region--search .menu a:focus-within {
  text-decoration-color: var(--color-accent);
}
