/*
 * typography.scss
 * -----------------------------------------------
*/
::selection {
  background: $black-333;
  color: $white-base;
  text-shadow: none;
}

::-moz-selection {
  background: $black-333; /* Firefox */
  color: $white-base;
  text-shadow: none;
}

::-webkit-selection {
  background: $black-333; /* Safari */
  color: $white-base;
  text-shadow: none;
}

:active,
:focus { outline: none !important; }


body {
  line-height: $line-height-base;
  color: var(--text-color);
  font-size: $body-font-size;
  font-family: $body-font;
  font-weight: $body-font-weight;
  background-color: $body-bg;
  background-attachment: fixed;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  counter-reset: my-sec-counter;
}

a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: $body-font-weight;
  @include transition(all .3s ease);

  &:hover,
  &:focus {
    color: var(--hover-theme-color);
    text-decoration: $link-hover-decoration;
  }
  b, strong {
    @include transition(all .3s ease);
  }

  img {
    border: none;
  }
}

b, strong {
  color: #333;
  font-weight: $body-font-bold;
}

img { max-width: 100%; }

iframe { border: none !important; }

/* -------- Headings ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: $heading-font;
  color: $headings-color;

  small,
  .small {
    font-weight: normal;
    line-height: 1;
    color: $headings-color;
  }

  a {
    color: inherit;
    font-weight: inherit;
  }
}

.h1, .h2, .h3, h1, h2, h3 {
  line-height: $headings-line-height;
  margin-bottom: 1rem;
  margin-top: 0.75rem;
  letter-spacing: 1px;
}
h4, h5, h6,
.h4, .h5, .h6 {
  line-height: $headings-line-height-smaller;
  margin-bottom: 1rem;
  margin-top: 0.75rem;
}

h1, .h1 { font-size: $h1-font-size; }
h2, .h2 {
  font-size: $h2-font-size;
  @include media-breakpoint-down(md) {
    font-size: $h2-font-size-mob;
  } 
}
h3, .h3 { font-size: $h3-font-size; }
h4, .h4 { font-size: $h4-font-size; }
h5, .h5 { font-size: $h5-font-size; }
h6, .h6 { font-size: $h6-font-size; }

h1, .h1 { font-weight: $headings-font-weight-h1; }
h2, .h2 { font-weight: $headings-font-weight-h2; }
h3, .h3 { font-weight: $headings-font-weight-h3; }
h4, .h4 { font-weight: $headings-font-weight-h4; }
h5, .h5 { font-weight: $headings-font-weight-h5; }
h6, .h6 { font-weight: $headings-font-weight-h6; }


/* -------- Body Text ---------- */
p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset { margin-bottom: 10px; }

table p {
  margin-bottom: 0;
}

p {
  margin-bottom: 20px;
  a {
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }
}
.wp-block-quote {
  margin: 20px 0;
}
caption {
  caption-side: top;
}


.main-content-area,
.page-content,
.post-content,
.post-excerpt,
.wpb_text_column,
.comments-area .comment-list {
  a:not(.btn):not(.styled-icons-item):not(.wp-block-button__link), p a:not(.btn):not(.styled-icons-item):not(.wp-block-button__link) {
  }
  ul > li,
  ol > li {
    margin-bottom: 10px;
    > ul, > ol {
      margin-top: 10px;
    }
  }
}
.main-content-area {
  .entry-content {
  }
}

/*Drop Caps*/
.drop-caps {
  > p {
    text-align: justify;
  }
  > p:first-child:first-letter {
    color: $black-333;
    display: block;
    float: left;
    font-size: 48px;
    line-height: 48px;
    margin: 6px 3px;
    padding: 10px 18px;
  }
  &.text-colored > p:first-child:first-letter {
    display: block;
    float: left;
    font-size: 48px;
    line-height: 48px;
    margin: 6px 3px;
    padding: 10px 18px;
  }
  &.border > p:first-child:first-letter {
    border: 1px solid;
    margin: 8px 16px 0 0;
    padding: 15px 20px;
  }
  &.border-rounded > p:first-child:first-letter {
    border: 1px solid;
    border-radius: 50%;
    margin: 8px 16px 0 0;
    padding: 15px 20px;
  }
  &.colored-square > p:first-child:first-letter {
    color: $white-base;
    margin: 8px 16px 0 0;
    padding: 15px 20px;
  }
  &.colored-rounded > p:first-child:first-letter {
    color: $white-base;
    margin: 8px 16px 0 0;
    padding: 15px 20px;
    border-radius: 50%;
  }
  &.dark-square > p:first-child:first-letter {
    background: $black-222;
    color: $white-base;
    margin: 8px 16px 0 0;
    padding: 15px 20px;
  }
  &.dark-rounded > p:first-child:first-letter {
    background: $black-222;
    color: $white-base;
    margin: 8px 16px 0 0;
    padding: 15px 20px;
    border-radius: 50%;
  }
}

/*Text Highlight*/
.text-highlight {
  background: none repeat scroll 0 0 $black-111;
  border-radius: 4px;
  color: $white-base;
  padding: 0 5px 3px;
  &.light {
    background: $gray-base;
  }
}


address {
  color: #777;
  font-style: italic;
}

ol, ul {
  list-style-position: inside;
  margin: 0;
  padding: 0;
}
ol ol li, ol ul li,
ul ol li, ul ul li {
  padding-left: $ul-li-padding-left;
}
ol > li,
ul > li {
}