/*
  @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;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    --anrt-transition-time: 0s !important;
  }

  :root {
    --anrt-transition-time: 0s !important;
  }
}

body {
  margin: 0;
  color: var(--anrt-color-text);
  font-family: var(--anrt-font-primary);
  font-size: var(--anrt-font-size-default);
  line-height: var(--anrt-line-height-default);
  font-weight: 400;
}

.field--type-text-with-summary,
.field--type-string-long,
.field--type-text-long,
p {
  font-weight: 300;

  & strong {
    font-weight: 400;
  }

  & a {
    font-weight: 700;
  }
}

@media (min-width: 80rem) {
  :root {
    --anrt-font-scale: var(--anrt-font-scale-desktop);
    --anrt-font-base: var(--anrt-font-base-desktop);
  }
}

/* Default Focus */
*:focus {
  outline: var(--anrt-focus-outline);
  box-shadow: var(--anrt-focus-shadow);
}

*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--anrt-focus-outline);
  box-shadow: var(--anrt-focus-shadow);
}

a[href="#main-content"].visually-hidden.focusable:focus {
  display: inline-block;
  margin: 0.25em;
}

/*
  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);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

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

.align-center img {
  margin-left: auto;
  margin-right: auto;
}

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

p:last-child {
  margin-bottom: 0;
}

.field--type-text-long {
  color: var(--anrt-color-text);
}

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;
}

table caption {
  font-size: 1.5rem;
  font-weight: 600;
  padding: var(--anrt-spacing-100);
}

table th {
  padding: var(--anrt-spacing-050) var(--anrt-spacing-075);
}

table td {
  color: var(--anrt-color-primary-b);
  padding: var(--anrt-spacing-075) var(--anrt-spacing-075);
}

table > thead > tr {
  color: var(--anrt-color-white);
}

table > tbody > tr:nth-child(odd) {
  background-color: var(--anrt-table-row-odd);
}

table > tbody > tr:nth-child(even) {
  background-color: var(--anrt-table-row-even);
}

/* button,
input[type="submit"],
.form-submit,
.form-reset {
  color: var(--anrt-color-white);
  background-color: var(--anrt-color-primary);
  font-size: 1rem;

  &:is(:hover, :focus) {
    text-decoration: underline;
    color: var(--anrt-color-primary);
    background-color: var(--anrt-color-white);
  }
} */

/* forms */
label,
.fieldset-legend {
  font-weight: 500;
  color: var(--anrt-color-primary);
  display: block;
}

label.form-required::after {
  content: "*";
  font-size: 1.5em;
}

.form-email,
.form-text,
.form-select,
.facets-dropdown,
.form-textarea,
.form-tel,
.form-date {
  width: 100%;
  border: 1px solid var(--anrt-color-text);
  padding: 14px;
  border-radius: var(--anrt-border-radius);
  background-color: var(--anrt-color-white);
  font-size: 1rem;
  /* height: 3rem; */
  font-family: var(--anrt-font-primary);

  &.error {
    border-color: var(--anrt-color-primary-b);
  }
}

.form-email:focus,
.form-text:focus,
.form-select:focus,
.facets-dropdown:focus,
.form-textarea:focus {
  --focus-outline: 3px solid var(--anrt-color-text);
}

.form-textarea {
  height: 10rem;
}

.form-item .description {
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 300;
  margin-top: 0.25rem;
}

/* Buttons */

input[type="submit"],
input[type="reset"],
button,
.button {
  font-family: var(--anrt-font-primary);
  padding: 0.75rem 1.25rem;
  background-color: var(--anrt-button-bg);
  color: var(--anrt-button-color);
  font-weight: 700;
  font-size: var(--anrt-font-size-default);
  text-decoration: none;
  /* text-align: center; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--anrt-button-border);
  gap: 0.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  line-height: 1.2;

  &:is(:hover, :focus) {
    color: var(--anrt-button-focus-color);
    background-color: var(--anrt-button-focus-bg);
    border-color: var(--anrt-button-focus-border);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }

  &:is(:focus-visible) {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), var(--anrt-focus-shadow);
  }
}

button .slimline-icon svg,
.button .slimline-icon svg {
  width: auto;
  height: 1em;
}

button .slimline-icon svg path:not([stroke]),
.button .slimline-icon svg path:not([stroke]) {
  fill: currentColor;
}

button .slimline-icon path[stroke],
.button .slimline-icon svg path[stroke] {
  stroke: currentColor;
}

.button--primary {
  --anrt-button-bg: var(--anrt-color-primary);
  --anrt-button-color: var(--anrt-color-white);
  --anrt-button-border: var(--anrt-color-primary);
  --anrt-button-focus-bg: var(--anrt-color-primary);
  --anrt-button-focus-border: var(--anrt-color-primary);
  --anrt-button-focus-color: var(--anrt-color-white);
}

.button--primary-inverted {
  --anrt-button-bg: var(--anrt-color-white);
  --anrt-button-color: var(--anrt-color-primary);
  --anrt-button-border: var(--anrt-color-primary);
  --anrt-button-focus-bg: var(--anrt-color-primary);
  --anrt-button-focus-border: var(--anrt-color-primary);
  --anrt-button-focus-color: var(--anrt-color-white);
}

.button--primary-a {
  --anrt-button-bg: var(--anrt-color-primary-a);
  --anrt-button-color: var(--anrt-color-white);
  --anrt-button-border: var(--anrt-color-primary-a);
  --anrt-button-focus-bg: var(--anrt-color-primary-a);
  --anrt-button-focus-color: var(--anrt-color-white);
  --anrt-button-focus-border: var(--anrt-color-primary-a);
}

.button--primary-b {
  --anrt-button-bg: var(--anrt-color-primary-b);
  --anrt-button-color: var(--anrt-color-white);
  --anrt-button-border: var(--anrt-color-primary-b);
  --anrt-button-focus-bg: var(--anrt-color-primary-b);
  --anrt-button-focus-color: var(--anrt-color-white);
  --anrt-button-focus-border: var(--anrt-color-primary-b);
}

.button--tertiary-20 {
  --anrt-button-bg: var(--anrt-color-tertiary-20);
  --anrt-button-color: var(--anrt-color-black);
  --anrt-button-border: var(--anrt-color-tertiary-20);
  --anrt-button-focus-bg: var(--anrt-color-tertiary-20);
  --anrt-button-focus-color: var(--anrt-color-black);
  --anrt-button-focus-border: var(--anrt-color-tertiary-20);
}

select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  background: url(../../assets/icons/chevron-down.svg) no-repeat center right
    10px white;
  background-size: 1rem auto;
  /* padding-right: 2rem; */
}

.form-select:not([multiple]) {
  padding-right: 2rem;
}

select:active:not([multiple]) {
  background-image: url("../../assets/icons/chevron-up.svg");
}

p.font-large {
  font-size: 1.5rem;
}

[hidden="true"] {
  display: none !important;
}