// Overrides for certain GOV.UK Frontend styles to make its components match this application's design

// Notify's header navigation aligns to the right
.govuk-header__navigation {
  text-align: right;

  // reset the alignment of each item to left-to-right
  .govuk-header__navigation-item {
    text-align: left;
  }

}

// Overrides for certain GOV.UK Frontend styles to make its components match this application's design

// Notify's header navigation aligns to the right
.govuk-header__navigation {
  text-align: right;

  // reset the alignment of each item to left-to-right
  .govuk-header__navigation-item {
    text-align: left;
  }

}

// The GOV.UK Frontend header component wraps content that is `position: relative`
// This changes its z-index position, putting it above the `<main>` section
// We need the `<main>` section to be above it, like the default order, to hide the theme colour
// bar on full-width pages
.govuk-main-wrapper {
  position: relative;
}

Make `<main>` section `position: relative`
Make `<main>` section `position: relative`

The content of the GOV.UK Frontend header
component is `position: relative`. This changed
the [default z-index
stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index_
so it was above `<main>`.

This aligns `<main>` with the header, meaning
`<main>` appears above it due to being below it in
the document.
