/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */

/*
 * Split padding of page header into top and bottom components, with an additional
 * top offset
 */
:root {
  --page-header-margin-top: 4.5rem;
  --page-header-padding-x: 0;
  --page-header-padding-y: 12.5rem;
  --page-header-small-padding-bottom: 6rem;
  --page-header-context-prefix-display: inline;
  --page-header-context-min-height: 7.6rem;
  --page-header-context-padding: 2rem 2rem 1.8rem 2rem;
  --page-header-context-side-margin: 6rem;
  --page-header-icon-dimensions: 40rem;
  --page-header-icon-offset-factor: calc(
    0rem - (var(--page-header-icon-dimensions) * 0.15)
  );
  --page-header-border-radius: 1.4rem;
  --page-header-heading-font-size: 2.6rem;
  --page-header-heading-line-height: 1.5;
  --page-header-heading-font-weight: 400;
  --page-header-gap-basis: 2rem;
  --page-header-max-width: 110rem;
  --page-header-text-content-font-size: 2.4rem;
  --page-header-text-content-line-height: 3.8rem;
  --page-header-back-button-display-when-accented: inline-flex;
  --page-header-back-button-within-box-top-offset: calc(
    var(--layout-gap-basis) * 0.5
  );
  --page-header-back-button-within-box-left-offset: calc(
    var(--layout-gap-basis) * 0.5
  );
  --page-header-back-button-top-offset: var(
    --page-header-back-button-within-box-top-offset
  );
  --page-header-back-button-left-offset: var(
    --page-header-back-button-within-box-left-offset
  );
  --page-header-content-padding-top: 2rem;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --page-header-icon-dimensions: 30rem;
    --page-header-margin-top: 3rem;
    --page-header-padding-y: 11rem;
    --page-header-context-min-height: 6.5rem;
    --page-header-context-padding: 1.8rem 2rem 1.5rem 2rem;
    --page-header-heading-font-size: 2.2rem;
    --page-header-byline-font-size: 5rem;
    --page-header-max-width: 100rem;
    --page-header-text-content-font-size: 2rem;
    --page-header-text-content-line-height: 3.2rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --page-header-margin-top: 2rem;
    --page-header-padding-y: 9rem;
    --page-header-context-side-margin: 4rem;
    --page-header-context-min-height: 5.5rem;
    --page-header-context-padding: 1.4rem 2rem 1.2rem 2rem;
    --page-header-heading-font-size: 1.8rem;
    --page-header-byline-font-size: 4rem;
    --page-header-max-width: 80rem;
    --page-header-text-content-font-size: 1.8rem;
    --page-header-text-content-line-height: 2.8rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --page-header-margin-top: 0;
    --page-header-padding-y: 7rem;
    --page-header-context-min-height: 4.5rem;
    --page-header-context-padding: 1rem 2rem 0.8rem 2rem;
    --page-header-heading-font-size: 1.6rem;
    --page-header-byline-font-size: 3rem;
    --page-header-gap-basis: 1.25rem;
    --page-header-max-width: 70%;
    --page-header-text-content-font-size: var(
      --typography-content-text-font-size
    );
    --page-header-text-content-line-height: var(
      --typography-content-text-line-height
    );
  }
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --page-header-context-padding: 1rem 1.5rem 0.8rem 1.5rem;
    --page-header-max-width: 90%;
    --page-header-padding-y: 5rem;
    --page-header-content-padding-top: 3.5rem;
    --page-header-icon-dimensions: 20rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --page-header-padding-x: 2rem;
    --page-header-padding-y: 3rem;
    --page-header-back-button-display-when-accented: none;
    --page-header-small-padding-bottom: 3rem;
    --page-header-icon-dimensions: 12rem;
    --page-header-content-padding-top: 2.5rem;
    --page-header-context-prefix-display: none;
    --page-header-context-side-margin: 1.5rem;
    --page-header-context-padding: 1.2rem 1rem 0.8rem 1rem;
    --page-header-back-button-within-box-top-offset: 1.5rem;
    --page-header-back-button-within-box-left-offset: 1.5rem;
    --page-header-back-button-top-offset: 0;
    --page-header-back-button-left-offset: 0.5rem;
  }
}

.page-header {
  margin-top: calc(var(--page-header-margin-top) - var(--header-padding-y));
}

.page-header-context-prefix {
  display: var(--page-header-context-prefix-display);
}

.page-header-context {
  min-height: var(--page-header-context-min-height);
  display: flex;
  justify-content: center;
  align-self: center;
  padding: var(--page-header-context-padding);
  margin: 0 var(--page-header-context-side-margin);
}

.page-header-context-text {
  display: block;
  text-align: center;
}

.page-header-main {
  width: 100%;
  color: var(--theme-color-border);
  text-align: center;
  padding: var(--page-header-padding-y) var(--page-header-padding-x);
  position: relative;
  overflow: hidden;
}

.page-header-context + .page-header-main {
  padding-top: calc(
    var(--page-header-padding-y) - var(--page-header-context-min-height)
  );
}

.with-icon .page-header-main .page-header-icon {
  position: absolute;
  width: var(--page-header-icon-dimensions);
  height: var(--page-header-icon-dimensions);
  top: var(--page-header-icon-offset-factor);
  right: var(--page-header-icon-offset-factor);
  opacity: 0.1;
}

.page-header-accent .page-header-context {
  background-color: var(--theme-color-accent);
  border-radius: var(--page-header-border-radius)
    var(--page-header-border-radius) 0 0;
}

.page-header-accent .page-header-main {
  background-color: var(--theme-color-accent);
  border-radius: var(--page-header-border-radius);
}

.page-header-accent .page-header-context + .page-header-main {
  background-color: var(--theme-color-white);
}

.page-header-small .page-header-main {
  padding-bottom: var(--page-header-small-padding-bottom);
}

.page-header-back-button {
  position: absolute;
}

.page-header-back-button {
  top: var(--page-header-back-button-top-offset);
  left: var(--page-header-back-button-left-offset);
}

.page-header-accent .page-header-back-button {
  top: var(--page-header-back-button-within-box-top-offset);
  left: var(--page-header-back-button-within-box-left-offset);
}

.page-header.with-header-context .page-header-back-button {
  display: var(--page-header-back-button-display-when-accented);
}

.page-header-content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--page-header-gap-basis);
  max-width: var(--page-header-max-width);
  padding-top: var(--page-header-content-padding-top);
}

.page-header-heading {
  font-size: var(--page-header-heading-font-size);
  line-height: var(--page-header-heading-line-height);
  font-weight: var(--page-header-heading-font-weight);
}

.page-header-byline {
  font-family: var(--typography-header-font-family);
  font-size: var(--typography-page-heading-font-size);
  line-height: var(--typography-page-heading-line-height);
  font-weight: var(--typography-page-heading-font-weight);
  color: var(--theme-color-border);
}

.page-header-text-content {
  max-width: 65rem;
  margin: 0 auto;
  color: var(--theme-color-primary);
  font-size: var(--page-header-text-content-font-size);
  line-height: var(--page-header-text-content-line-height);
}

.page-header-text-content:not(:first-child) {
  margin-top: var(--page-header-gap-basis);
}