/**
 * @file heading.css
 * @component Heading (Content)
 * @description Applies section, label, band, statement and display typography and independent explicit heading sizes.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --fontSize : Resolved non-default font size transported by Heading Twig.
 *              The size is reset on every variant except Default so a value
 *              inherited from an ancestor cannot replace their default size.
 */
:where([data-component-id="marsal_sdc:heading"])[data-component-variant="section"] {
  --fontSize: initial;

  min-inline-size: 0;
  margin-block: var(--marsal-space-s) var(--marsal-space-2xs-xs);
  color: var(--marsal-color-textBrand);
  text-transform: none;
  overflow-wrap: anywhere;

  /* Lines start at the start edge, except inside a centered Container, whose centered text they follow. */
  &:not(:where([data-component-id="marsal_sdc:container"][data-alignment="center"]) *) {
    text-align: start;
  }

  /* Each level supplies the complete role; the explicit size wins locally. */
  &[data-heading-level="2"] {
    font-family: var(--marsal-fontFamily-heading-large);
    font-size: var(--fontSize, var(--marsal-fontSize-heading-large));
    font-weight: var(--marsal-fontWeight-heading-large);
    line-height: var(--marsal-lineHeight-heading-large);
    letter-spacing: var(--marsal-letterSpacing-heading-large);
  }

  &[data-heading-level="3"] {
    font-family: var(--marsal-fontFamily-heading-standard);
    font-size: var(--fontSize, var(--marsal-fontSize-heading-standard));
    font-weight: var(--marsal-fontWeight-heading-standard);
    line-height: var(--marsal-lineHeight-heading-standard);
    letter-spacing: var(--marsal-letterSpacing-heading-standard);
  }

  &[data-heading-level="4"] {
    font-family: var(--marsal-fontFamily-heading-small);
    font-size: var(--fontSize, var(--marsal-fontSize-heading-small));
    font-weight: var(--marsal-fontWeight-heading-small);
    line-height: var(--marsal-lineHeight-heading-small);
    letter-spacing: var(--marsal-letterSpacing-heading-small);
  }

  &[data-heading-level="5"],
  &[data-heading-level="6"] {
    font-family: var(--marsal-fontFamily-heading-verySmall);
    font-size: var(--fontSize, var(--marsal-fontSize-heading-verySmall));
    font-weight: var(--marsal-fontWeight-heading-verySmall);
    line-height: var(--marsal-lineHeight-heading-verySmall);
    letter-spacing: var(--marsal-letterSpacing-heading-verySmall);
  }
}

/* A section heading placed directly in a centered Container titles that band: balanced lines.
 * It is a container, so its size step follows its own width, the band's content width,
 * like a Short intro Prose in the same band.
 */
:where([data-component-id="marsal_sdc:container"][data-alignment="center"]) > .marsal-container__content > :where([data-component-id="marsal_sdc:heading"])[data-component-variant="section"] {
  container: marsal-sdc-heading / inline-size;
  text-wrap: balance;

  /* The text is its own block, so its line height comes from its own role, not the heading's. */
  & > .marsal-heading__text {
    display: block;
  }

  /* Opening the band, it adds no space above; the Container's padding supplies it. */
  &:first-child {
    margin-block-start: 0;
  }

  /* From 36rem wide, an H3 band title takes the H2 role; an explicit size still wins. */
  @container marsal-sdc-heading (min-width: 36rem) {
    &[data-heading-level="3"] > .marsal-heading__text {
      font-family: var(--marsal-fontFamily-heading-large);
      font-size: var(--fontSize, var(--marsal-fontSize-heading-large));
      font-weight: var(--marsal-fontWeight-heading-large);
      line-height: var(--marsal-lineHeight-heading-large);
      letter-spacing: var(--marsal-letterSpacing-heading-large);
    }
  }

  /* Below that width, an H2 band title takes the H3 role, so H2 and H3 band titles look the same at every width; an explicit size still wins. */
  @container marsal-sdc-heading (width < 36rem) {
    &[data-heading-level="2"] > .marsal-heading__text {
      font-family: var(--marsal-fontFamily-heading-standard);
      font-size: var(--fontSize, var(--marsal-fontSize-heading-standard));
      font-weight: var(--marsal-fontWeight-heading-standard);
      line-height: var(--marsal-lineHeight-heading-standard);
      letter-spacing: var(--marsal-letterSpacing-heading-standard);
    }
  }
}

:where([data-component-id="marsal_sdc:heading"])[data-component-variant="statement"] {
  --fontSize: initial;

  inline-size: min(100%, 13ch);
  margin-block: 0 var(--marsal-space-m);
  color: var(--marsal-color-textBrand);
  font-family: var(--marsal-fontFamily-heading-large);
  font-size: var(--fontSize, var(--marsal-fontSize-heading-large));
  font-weight: var(--marsal-fontWeight-heading-large);
  line-height: var(--marsal-lineHeight-heading-large);
  letter-spacing: var(--marsal-letterSpacing-heading-large);
  text-wrap: balance;
  overflow-wrap: break-word;

  /* A statement band spans the page, so its 40rem step follows the viewport. */
  @media (min-width: 40rem) {
    font-family: var(--marsal-fontFamily-heading-veryLarge);
    font-size: var(--fontSize, var(--marsal-fontSize-heading-veryLarge));
    font-weight: var(--marsal-fontWeight-heading-veryLarge);
    line-height: var(--marsal-lineHeight-heading-veryLarge);
    letter-spacing: var(--marsal-letterSpacing-heading-veryLarge);
  }
}

:where([data-component-id="marsal_sdc:heading"])[data-component-variant="display"] {
  --fontSize: initial;

  max-inline-size: 11em;
  margin-block: 0 var(--marsal-space-s-m);
  color: var(--marsal-color-textStrong);
  font-family: var(--marsal-fontFamily-display-large);
  font-size: var(--fontSize, var(--marsal-fontSize-display-large));
  font-weight: var(--marsal-fontWeight-display-large);
  line-height: var(--marsal-lineHeight-display-large);
  letter-spacing: var(--marsal-letterSpacing-display-large);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The lines inherit the band's alignment; a centered band also centers the 11em box. */
:where([data-component-id="marsal_sdc:container"][data-alignment="center"]) :where([data-component-id="marsal_sdc:heading"])[data-component-variant="display"] {
  margin-inline: auto;
}

:where([data-component-id="marsal_sdc:heading"])[data-component-variant="label"] {
  --fontSize: initial;

  margin-block: 0;
  font-family: var(--marsal-fontFamily-label-small);
  font-size: var(--fontSize, var(--marsal-fontSize-label-small));
  font-weight: var(--marsal-fontWeight-label-small);
  line-height: var(--marsal-lineHeight-label-small);
  letter-spacing: var(--marsal-letterSpacing-label-small);
  text-transform: uppercase;
}

:where([data-component-id="marsal_sdc:heading"])[data-component-variant="band"] {
  --fontSize: initial;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-block-size: 40px;
  margin: 0;
  padding: 4px 12px;
  background-color: var(--marsal-color-maize-050);
  color: var(--marsal-color-textOnAccent);
  border: 1px solid var(--marsal-color-textOnAccent);
  box-shadow: 0 0 20px rgb(0 0 0 / 15%);
  font-family: var(--marsal-fontFamily-label-small);
  font-size: var(--fontSize, 14px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.25em;
  text-transform: uppercase;

  & > .marsal-heading__band-label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  /* Rotates with Flex column_to_row at its 55.25rem breakpoint and in print. */
  @media screen and (min-width: 55.25rem), print {
    flex: 0 0 40px;
    justify-content: center;
    padding: 8px 4px;

    & > .marsal-heading__band-label {
      white-space: nowrap;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }
  }

  @media print {
    box-shadow: none;
  }
}

:where([data-component-id="marsal_sdc:heading"][style*="--fontSize"]) {
  font-size: var(--fontSize);
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 overrides component link colors; delete when the theme is fixed. */
[data-component-id="marsal_sdc:heading"] a:any-link {
  color: inherit;
}

:where([data-component-id="marsal_sdc:heading"]) a {
  text-decoration-line: none;

  &:is(:hover, :focus) {
    text-decoration-line: underline;
    text-underline-offset: 0.2em;
  }
}