@use "../tokens/base";
@use "../tokens/space";
@use "../tokens/color-vars";

:root,
:host {
  --extra-scroll-margin: 0;
  --header-height: 80px;
}

@media screen and (min-width: 992px) {
  :root,
  :host {
    --header-height: 120px;
  }

  html:has(
    .megamenu.is-sticky:not(.top-hidden)
      .megamenu__nav-logo
      > [data-megamenu-brand-mark]
      + span
  ) {
    --header-height: 107px;
  }

  html:has(
      .megamenu.is-sticky:not(.top-hidden)
        .megamenu__nav-logo
        > [data-megamenu-brand-mark]
    ):not(
      :has(
        .megamenu.is-sticky:not(.top-hidden)
          .megamenu__nav-logo
          > [data-megamenu-brand-mark]
          + span
      )
    ) {
    --header-height: 147px;
  }

  html:has(.megamenu.is-sticky.top-hidden),
  html:has(.megamenu.is-sticky + .megamenu-spacer--small) {
    --header-height: 80px;
  }
}

:target {
  scroll-margin-top: calc(
    var(--header-height) + var(--extra-scroll-margin) - 1px
  );
}

html {
  font-size: base.$font-size;
  scroll-padding-top: unset;
  overflow-x: hidden;
}

html,
body {
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  position: relative;
  background-color: base.$background;
  font-family: #{base.$font-family};
  color: base.$text-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

*::after {
  box-sizing: border-box;
}

*::before {
  box-sizing: border-box;
}

::selection {
  background-color: base.$selection-background;
  color: base.$text-color;
}

iframe {
  border: 0;
}

a[href],
area[href],
input,
select,
textarea,
button,
[type="button"],
iframe,
[tabindex]:not([tabindex="-1"]),
[contentEditable="true"] {
  @include base.focusring;
}

[tabindex="-1"]:focus {
  outline: none;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

a {
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: auto;
}

// stylelint-disable-next-line no-descending-specificity
button,
[role="button"] {
  border: 0 solid transparent;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
  appearance: none;

  /* Remove excess padding and border in Firefox 4+ */
  // stylelint-disable-next-line no-descending-specificity
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

caption {
  text-align: left;
}

table {
  border-collapse: collapse; // Prevent double borders
}

blockquote {
  margin: 0 0 space.get("large") 0;
}

th {
  // Matches default `<td > ` alignment by inheriting from the `<body > `, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

button[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}

figure {
  margin: 0;
}
