@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/heading-styles";
@use "@s360-base-theme/ui-core/heading-font-sizes";
@use "s360-scss-toolkit";

.advanced-header-field {
  scroll-margin-top: var(--site-header-height);

  &:has(.advanced-header-field__subtitle) {
    --heading-margin-bottom: 0;

    margin-bottom: site-config.$heading-margin-bottom;

    &:has(h2),
    &.advanced-header-field--size-h2 {
      font-size: heading-font-sizes.h2-font-size();
    }

    &:has(h3),
    &.advanced-header-field--size-h3 {
      font-size: heading-font-sizes.h3-font-size();
    }

    &:has(h4),
    &.advanced-header-field--size-h4 {
      font-size: heading-font-sizes.h4-font-size();
    }
  }

  &:not(:has(.advanced-header-field__subtitle)) {
    h2,
    h3,
    h4 {
      @extend %heading-style-margin-bottom;
    }
  }

  .advanced-header-field__subtitle {
    margin-top: 0.25em;
    font-size: s360-scss-toolkit.font-size-ms(0);
  }

  // **************************************************
  // SYLES

  &.advanced-header-field--style-centered {
    text-align: center;
  }

  // **************************************************
  // SIZES

  &.advanced-header-field--size-h2 {
    .advanced-header-field__heading {
      @extend %heading-style-h2;
    }
  }

  &.advanced-header-field--size-h3 {
    .advanced-header-field__heading {
      @extend %heading-style-h3;
    }
  }

  &.advanced-header-field--size-h4 {
    .advanced-header-field__heading {
      @extend %heading-style-h4;
    }
  }
}
