//
// Headings
//
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: @headings-margin-top;
    margin-bottom: @headings-margin-bottom;
    font-family: @headings-font-family;
    font-weight: @headings-font-weight;
    line-height: @headings-line-height;
    text-transform: @heading-text-transform;
    color: var(--black);

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

h1,
.h1 {
    font-size: @h1-font-size;
    font-family: @h1-font-family;
    font-weight: @h1-font-weight;
    line-height: @h1-line-height;
    text-transform: @h1-text-transform;
    color: var(--black);

    @media @md-max {
        font-size: @h1-font-size-mobile;
    }
}

h2,
.h2,
.header-title {
    font-size: @h2-font-size;
    font-family: @h2-font-family;
    font-weight: @h2-font-weight;
    line-height: @h2-line-height;
    text-transform: @h2-text-transform;
    color: var(--black);
}

h3,
.h3 {
    font-size: @h3-font-size;
    font-family: @h3-font-family;
    font-weight: @h3-font-weight;
    line-height: @h3-line-height;
    text-transform: @h3-text-transform;
    color: var(--black);
}

h4,
.h4,
.section-title {
    font-size: @h4-font-size;
    font-family: @h4-font-family;
    font-weight: @h4-font-weight;
    line-height: @h4-line-height;
    text-transform: @h4-text-transform;
    color: var(--black);
}

h5,
.h5,
.section-sub-title {
    font-size: @h5-font-size;
    font-family: @h5-font-family;
    font-weight: @h5-font-weight;
    line-height: @h5-line-height;
    text-transform: @h5-text-transform;
    color: var(--black);
}

h6,
.h6 {
    font-size: @h6-font-size;
    font-family: @h6-font-family;
    font-weight: @h6-font-weight;
    line-height: @h6-line-height;
    text-transform: @h6-text-transform;
    color: inherit;
}

//title size in mobile
@media @md-max {
    .for-loop(@index) when (@index > 1) {

        h@{index},
        .h@{index} {
            font-size:~"calc(@{h@{index}-font-size} - 0.125rem)";
        }

        .for-loop(@index - 1);
    }

    .for-loop(5);
}

//
// Pharagraphs
//
p {
    margin: 0;
    font-size: @font-size;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    p {
        margin: 0;
    }
}

b,
strong,
.strong {
    font-weight: @font-weight-bold;
}

i,
em,
dfn,
cite {
    font-style: italic;
}

code,
kbd,
tt,
var,
pre,
samp {
    font-size: @font-size;
    font-family: @font-family;
}

var {
    font-style: italic;
}

//
// Horizontal rules
//
hr {
    margin-top: @hr-margin-y;
    margin-bottom: @hr-margin-y;
    border: 0;
    border-top: @hr-border-width solid var(--border-200);
}

//
// Emphasis
//
small,
.small {
    font-size: @font-size-sm;
    font-weight: @font-weight-normal;
}

.capture-text {
    font-size: @font-size-xs;
    font-weight: @font-weight-normal;
}

mark,
.mark {
    padding: @mark-padding;
    background-color: var(--yellow-50);
}

//
// Lists
//
address,
dl {
    margin-bottom: @spacer;
}

dt {
    font-weight: @font-weight-bold;
}

ul ul,
ol ol {
    margin: 0 0 0 @spacer;
}

ol {
    list-style-type: decimal;
    padding-left: @spacer;
}

.list-unstyled {
    margin-left: 0;
    list-style: none;
}

.list-bullet {
    list-style-type: disc;
    list-style-position: inside;
}

.list-style-lower-letter {
    list-style-type: lower-alpha;
    list-style-position: inside;
    padding-left: 0;
}

.list-style-upper-letter {
    list-style-type: upper-alpha;
    list-style-position: inside;
    padding-left: 0;
}

.list-with-bold-titles {
    font-weight: @font-weight-bold;
    list-style-position: inside;
    padding-left: 0;

    li {
        *:not(b):not(strong):not(.bold) {
            font-weight: @font-weight-normal;
        }
    }
}

.list-marked {
    &:extend(.list-unstyled);

    li {
        &:not(:first-child) {
            margin-top: 24px;

            @media @lg {
                margin-top: 15px;
            }
        }

        display: flex;
        line-height: 1.5;
    }

    &-text {
        padding-left: 42px;

        @media @md {
            max-width: 475px;
        }
    }

    .icon-tick {
        font-weight: @font-weight-bold;
        display: inline-block;
        margin-top: 4px;

        &:before {
            color: var(--primary);
        }
    }
}

//
// Blockquotes
//
blockquote,
.blockquote {
    position: relative;
    border: @blockquote-border;
    margin: @blockquote-margin;
    padding: @blockquote-padding-top 0 @blockquote-padding-bottom;
    font-size: @blockquote-font-size;
    text-transform: @blockquote-text-transform;
    width: @blockquote-width;
    color: var(--text-600);
    line-height: @blockquote-line-height;
    text-align: @blockquote-text-align;

    &:before,
    &:after {
        background-color: var(--white);
        color: var(--text-600);
        font-size: 3.75rem;
        font-weight: bold;
        height: 1.75rem;
        width: 5rem;
        left: 50%;
        .transform(translate(-50%));
        position: absolute;
        z-index: 1;
    }

    &:before {
        content: "\201C";
        top: 0;
    }

    &:after {
        bottom: 0;
        content: "\201D"
    }

    &>div {
        position: relative;
        margin: 0;
        font-weight: @font-weight-light;

        &:before,
        &:after {
            background-color: var(--text-600);
            content: "";
            height: 1px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        &:before {
            top: -@blockquote-padding-top;
        }

        &:after {
            bottom: -@blockquote-padding-bottom;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 0;
        }

        p {
            font-style: italic;

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

        cite,
        span {
            font-weight: @font-weight-normal;
        }
    }
}

//
// Table
//
table {
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    border-width: 0;
    margin: 0 0 @spacer * 1.5;
    table-layout: fixed;
    width: 100%;

    thead th {
        text-transform: @table-th-text-transform;
        color: var(--text-600);
        font-size: @table-th-font-size;
    }

    td,
    th {
        padding: @table-padding-y @table-padding-x;
        border-bottom: @table-border;

        @media @xs {
            padding-left: @table-padding-x-mobile;
            padding-right: @table-padding-x-mobile;
        }
    }

    th {
        font-weight: @table-th-font-weight;
    }

    td {
        font-size: @table-font-size;
        color: var(--text-600);
        font-weight: @table-font-weight;
    }

    &.table-striped {
        tbody tr {
            &:nth-of-type(odd) {
                background-color: rgba(216, 216, 216, 0.2);
            }
        }
    }
}