/**
 * @file
 * Base Layout.
 */

.container {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--container-padding);

  /* This fixes an issue where if the toolbar is open in vertical mode, and
   * the mobile navigation is open, the "close" button gets pushed outside of
   * the viewport. */
  body.is-fixed & {
    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
  }
}

.page-wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  background: var(--color--white);
}

/**
 * Creates stacking context ensuring that child elements can never appear in
 * front of mobile navigation.
 */

.layout-main-wrapper {
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

.main-content__container {
  padding-block-start: var(--sp3);

  @media (min-width: 43.75rem) {
    padding-block-start: var(--sp4);
  }
}

.layout--without-sidebar > .site-main {
  max-width: 80.625rem;
  margin-inline: auto;
}

.layout--without-sidebar.layout--without-main-image > .region--highlighted,
.layout--without-sidebar.layout--without-main-image > .region--breadcrumb,
.layout--without-sidebar.layout--without-main-image > .site-main .region--content-above,
.layout--without-sidebar.layout--without-main-image > .site-main .node--view-mode-full > header {
  max-width: 80ch;
  margin-inline: auto;
}

.layout--without-sidebar > .region--highlighted,
.layout--without-sidebar > .region--breadcrumb {
  width: 100%;
  max-width: 80.625rem;
  margin-inline: auto;
}

.layout--without-sidebar > .site-main .node--view-mode-full .text-content,
.layout--without-sidebar > .site-main .node--view-mode-full .field--tags {
  margin-inline: auto;
}

.layout--without-sidebar > .site-main .paragraph--type--image {
  max-width: 56.25rem;
  margin-inline: auto;
}

/*
 * Contextual link wrappers load without the ".contextual" CSS class, which
 * causes layout shifts. We fix this by setting this to position: absolute;
 */

[data-contextual-id]:not(.contextual) {
  position: absolute;
}