// Global
:root {
  scroll-behavior: smooth;
  font-size: $font-size-root;

  // Disable smooth scroll when the user has set "prefers-reduced-motion"
  @media screen and (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

html {
  background-color: $white;
}

body {
  position: relative;
  min-height: 100vh;
}

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

.display-1 {
  font-size: clamp(2.7rem, 8vw, 5.5rem);
}

.display-2 {
  font-size: clamp(2.3rem, 7vw, 4.5rem);
}

.display-3 {
  font-size: clamp(1.9rem, 6vw, 3.5rem);
}

.display-4 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.lead {
  font-size: clamp(1.1rem, 3vw, 1.25rem);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);

  &:hover,
  &:focus {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
  }
}

.btn-group {
  margin-bottom: $template-grid-gutter;
  > input {
    padding: $template-grid-gutter/2;
    border: 1px solid $gray-400;
    @include border-start-radius($border-radius);
    @include border-end-radius(0);
  }
}

[dir="rtl"] .btn-group {
  > input {
    @include border-end-radius($border-radius);
    @include border-start-radius(0);
  }
}

.com-content-article {
  ol,
  ul {
    overflow: hidden;
  }
}

.com-content-category__pagination {
  margin-bottom: $template-grid-gutter;
}

small,
.small {
  font-size: $font-size-sm;
}

dd {
  padding: 0;
  word-wrap: break-word;
}

[dir="rtl"] dd {
  margin-right: 0;
  margin-left: auto;
}

.com-contact__thumbnail {
  text-align: left;
}

@include media-breakpoint-up(lg) {
  dl.dl-horizontal {
    display: grid;
    grid-template-columns: auto 1fr;

    dt {
      grid-column-start: 1;
      grid-column-end: 2;
    }

    dd {
      grid-column-start: 2;
      grid-column-end: 3;
      padding: 0 0 0 $template-grid-gutter;
      margin-bottom: 0;
    }
  }

  .com-contact__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-gap: 1rem;
    margin-bottom: $template-grid-gutter;

    h3 {
      grid-column: 1 / 5;
    }

    .com-contact__thumbnail {
      grid-column: 3 / 5;
      grid-row: 2 / 5;
      margin-bottom: $template-grid-gutter;
      text-align: right;
    }

    .com-contact__position {
      grid-column: 1 / 3;
      grid-row: 2 / 3;
    }

    .com-contact__info {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
    }
  }

  [dir="rtl"] dl.dl-horizontal {
    dd {
      padding: 0 $template-grid-gutter 0 0;
    }
  }

  .com-users-profile {
    dt {
      min-width: 180px;
    }
  }
}

figure {
  margin: 0 0 ($template-grid-gutter*2);
  &.float-start {
    margin-right: $template-grid-gutter;
  }
  &.float-end {
    margin-left: $template-grid-gutter;
  }
  [dir="rtl"] &.float-start {
    margin-right: 0;
    margin-left: $template-grid-gutter;
  }
  [dir="rtl"] &.float-end {
    margin-right: $template-grid-gutter;
    margin-left: 0;
  }
}

.mod-menu {
  flex-direction: column;
}

.hornav .mod-menu {
  flex-direction: row;
}

// meter element
meter {
  width: 100%;
}

.pagenavigation,
.pager {
  clear: both;
  .pagination {
    justify-content: space-between;
    padding: 0;
    margin: $template-grid-gutter 0;

    li.next:only-child {
      margin-left: auto;
    }

    [dir="rtl"] &>li.next:only-child {
      margin-right: auto;
      margin-left: $template-grid-gutter;
    }
  }
}

.page-link {
  color: var(--content-link-color);
  &:hover {
    color: var(--primary-color);
  }
}

.pager {
  .pagination {
    justify-content: center;
  }
}

[dir="rtl"] li.next .page-link {
  border-top-left-radius: .25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: .25rem;
}

[dir="rtl"] li.previous .page-link {
  border-top-left-radius: 0;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: 0;
}

.article-index {
  .toclink.active {
    color: currentColor;
  }
}

// Bootstrap 4 b/c
.sr-only {
  @extend .visually-hidden;
}