/*
  @file Base/element level theming.

  This file sets up default CSS for elements, such as links as
  well as font sizes, vertical rhythm, etc.
*/

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin-top: 0; /* Removing top margin, for better vertical rhythm layout */
  transition: var(--anrt-transition-time);
}

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

body {
  margin: 0;
  color: var(--anrt-color-text);
  background: var(--anrt-background-gradient-blue);
  font-size: var(--anrt-font-size-default);
  line-height: var(--anrt-line-height-default);

  &:where(.page--grey) {
    background: var(--anrt-color-grey-94);
  }
}

.main {
  color: var(--anrt-color-white);

  & :where(.full-width-box--light-bg) a:not(.button) {
    color: var(--anrt-color-link);
  }
  & :where(a) {
    color: var(--anrt-color-white);
  }

  :where(.page--grey) & {
    color: var(--anrt-color-text);

    & :where(a) {
      color: var(--anrt-color-text);
    }
  }
}

/*
  Position the main canvas relative so anything further down the page that
  might use absolute will not cover the admin toolbar.
*/
.dialog-off-canvas-main-canvas {
  position: relative;
}

a {
  color: var(--anrt-color-link);
}

a:hover,
a:focus {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
ul,
ol,
pre,
table,
blockquote {
  margin-bottom: var(--anrt-vertical-rhythm-unit);
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-bottom: 0;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  line-height: 0;
}

sup {
  top: -0.5rem;
}

sub {
  bottom: -0.25rem;
}

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

thead {
  background-color: var(--anrt-color-grey-95);
}

th,
td {
  padding: var(--anrt-spacing-050);
  border: 1px solid var(--anrt-color-grey-16);
}

/* Adjust styles for logged-in users when Slimline is active. */
[data-contextual-id]:empty {
  display: none;
}

button,
input,
optgroup,
select,
textarea {
  max-width: 100%;
}

fieldset {
  border: 1px solid var(--anrt-color-white);
  border-radius: var(--anrt-radius);

  legend {
    padding-inline-start: var(--anrt-spacing-050);
    padding-inline-end: var(--anrt-spacing-025);
  }
}

.not-readable {
  speak: never;
}