/**
 * Base theme styles
 * This file contains theme base styles.
 *
 * For example:
 * - WYSIWYG styles and layouts
 * - Images and Videos
 * - Quote
 */

@use '_helper' as *;

html {
  font-size: 16px;
  scroll-padding-top: 79px;
  overflow-x: clip;

  @media screen and (min-width: $break-medium) {
    scroll-padding-top: 91px;
  }

  @media screen and (min-width: $break-large) {
    scroll-padding-top: 119px;
  }
}

body {
  @include body;
  overflow-x: clip;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  //** Fixed class to prevent scrolling
  &.js-fixed {
    overflow: hidden;
  }
}

//## Remove margin on last elements
*> {

  p:last-child,
  ul:last-child,
  ol:last-child {
    margin-bottom: 0;
  }
}

//## Add focus outline to focusable elements
a,
button,
input,
textarea,
select {
  @include focus-dark;
}

//## Visually hidden
.visually-hidden {
  @include element-invisible;
}

//## Skip to content
a.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  color: $color-black;

  &.visually-hidden {
    @include element-focusable;

    &:focus {
      background-color: $color-white;
      padding: 3px 10px;
      position: absolute !important;
      z-index: 10000;
    }
  }
}

main {
  overflow-x: clip;
}

.wysiwyg {
  margin: 0 auto;
  max-width: $content-narrow;

  &--full {
    max-width: none;
  }

  &>*:first-child {
    margin-top: 0;
  }

  .cta--button,
  .cta--link {
    @media screen and (max-width: $break-large - 1) {
      margin: 9px 0;
    }
  }
}

//## Floated content
.float-right {
  float: right;
}

.float-left {
  float: left;
}

//## Ordered and unordered lists 
.wysiwyg>ul,
.wysiwyg>ol {
  margin-top: $spacing-vertical-text-sm;
  margin-bottom: $spacing-vertical-text-sm;

  @media screen and (min-width: $break-large) {
    margin-top: $spacing-vertical-text-lg;
    margin-bottom: $spacing-vertical-text-lg;
  }
}

ol,
ul {
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;

  li {
    margin-bottom: 1.1rem;

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

ul {
  padding-left: rem(45px);
  list-style: none;

  ul {
    padding-left: rem(22px);
  }

  li {
    position: relative;
    margin-bottom: rem(11px);

    &::marker {
      content: "";
    }

    &:before {
      position: absolute;
      content: "";
      display: block;
      top: rem(8px);
      left: rem(-13px);
      border-radius: 100%;
      border: solid 2px $color-black;
    }

    ul>li {
      margin-top: rem(12px);
    }
  }
}

//## Ordered and unordered lists 
ol {
  margin: 1.6rem 0 3rem;
  padding-left: rem(47px);

  @media (min-width: $break-medium) {
    margin: 1.7rem 0 4rem;
    padding-left: rem(44px);
  }

  @media (min-width: $break-large) {
    margin: 1.9rem 0 7.8rem;
    padding-left: 2.78rem;
  }

  li {
    padding-left: rem(7px);
    margin-bottom: rem(12px);

    &::marker {
      color: $color-black;
    }

    ol {
      margin: 0;
      padding-left: rem(23px);

      li {
        margin-top: rem(10px);
      }
    }
  }
}

//## Links
a {
  @include body-link;
  @include hover-body-link;
}

//## CTA buttons: Primary and Secondary
.cta {
  &--button {
    @include ctaButton();
  }

  &--link {
    @include ctaLink();
  }
}

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

figure {
  margin: 0;
}

figcaption {
  margin: rem(20px) 0 0;
  font-family: $font-dm-sans;
  font-size: rem(16px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;

  @media screen and (min-width: $break-large) {
    font-size: rem(18px);
  }
}

//## Inline images
.img-inline {
  &--full {
    margin-top: $spacing-vertical-sm;
    margin-bottom: $spacing-vertical-sm;

    @media screen and (min-width: $break-large) {
      @include full-width;
      margin-top: $spacing-vertical-lg;
      margin-bottom: $spacing-vertical-lg;
    }

    img,
    figcaption {
      @media screen and (min-width: $break-large) {
        width: calc(100% - (58px * 2));
        max-width: calc($content-max - 58px * 2);
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  &--float {
    margin: 0 0 $spacing-vertical-text-sm;

    @media screen and (max-width: $break-medium - 1) {
      float: none;
    }

    @media screen and (min-width: $break-medium) {
      max-width: 310px;
    }

    @media screen and (min-width: $break-large) {
      max-width: 430px;
    }

    &.float-right {
      @media (min-width: $break-medium) {
        margin: 0 0 $spacing-vertical-text-sm $spacing-vertical-text-sm;
      }

      @media screen and (min-width: $break-large) {
        margin: 0 0 40px 40px;
      }
    }

    &.float-left {
      @media (min-width: $break-medium) {
        margin: 0 $spacing-vertical-text-sm $spacing-vertical-text-sm 0;
      }

      @media screen and (min-width: $break-large) {
        margin: 0 40px 40px 0;
      }
    }

    img {
      width: 100%;
    }
  }

  img {
    overflow: hidden;
    border-radius: rem(15px);
  }
}

.quote {
  @include watercolor-background(true);
  margin: $spacing-vertical-sm 0;
  padding: 40px 6px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  @media screen and (min-width: $break-medium) {
    padding: 60px 20px;
    gap: 18px;
  }

  @media screen and (min-width: $break-large) {
    margin: $spacing-vertical-lg 0;
    padding: $spacing-vertical-lg 0;
    gap: 22px;
  }

  &__copy {
    @include quote;
    position: relative;

    &::before {
      content: '“';
      position: absolute;
      top: 0;
      left: -8px;

      @media screen and (min-width: $break-medium) {
        left: -10px;
      }

      @media screen and (min-width: $break-large) {
        left: -14px;
      }
    }

    &::after {
      content: '”';
      margin-left: -2px;
      position: absolute;
    }
  }

  &__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 4px;

    @media screen and (min-width: $break-large) {
      gap: 0 5px;
    }
  }

  &__attr {
    @include body(true);

    &:not(:only-child) {
      &::after {
        content: ',';
      }
    }
  }
}