@layer
  reset,
  fonts,
  typography,
  base,
  layout,
  third-party;

@import url('../reset.css') layer(reset);
@import url('../fonts.css') layer(fonts);
@import url('../typography.css') layer(typography);
@import url('../third-party/prism-rhds.css') layer(third-party);

@layer base {
  /**
   * PFE based styles as we do not have control over the
   * html layout that is upstream with no current override
   */
  #main-header {
    --pf-theme--color--surface--accent: black;
    --pf-theme--color--accent: black;
  }
}

@layer layout {
  html,
  body,
  main { height: 100%; }

  [data-demo] {
    display: contents;
  }

  main {
    display: block;
    position: relative;
    max-height: initial;
  }

  #nav {
    height: 100%;
  }

  #main-header a img {
    margin-right: 0;
  }

  /* offset the padding on the demo container from above */
  rh-context-demo {
    min-height: calc(100% + 2 * var(--rh-space-xl, 24px));
    height: auto;
  }
}