/* Typography
   ========================================================================== */

/**
 * Establish baseline.
 */

html {
    font-size: $base-font-size;
    line-height: $base-line-height;
}

/**
 * Global font and colour.
 */

body {
    font-family: $font-body;
}

/**
 * Harmonize size, style and vertical margin of headings.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: $color-text-heading;
}

/**
 * `h1` headings.
 *
 * Example HTML:
 *
 * <h1>Heading</h1>
 * <h1>
 *     Heading
 *     <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a>
 * </h1>
 */

h1 {
    margin: 0.26923076923077em 0 0.5em; // 7px / 26px, 13px / 26px
    font-size: 2rem; // 26px / 13px
    line-height: 1.23076923076923; // 32px / 26px

    .pophelp {
        font-size: 1rem;
    }
}

/**
 * `h2` headings.
 *
 * Example HTML:
 *
 * <h2>Heading</h2>
 * <h2>
 *     Heading
 *     <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a>
 * </h2>
 */

h2 {
    margin: 0.5em 0 0.72222222222222em; // 9px / 18px + 13px / 18px
    font-size: 1.384615384615385rem; // 18px / 13px
    line-height: 1.33333333333333; // 24px / 18px

    .pophelp {
        font-size: 1rem;
    }
}

/**
 * `h3` headings.
 */

h3 {
    margin: 0.86666666666667em 0; // 13px / 15px
    font-size: 1.153846153846154rem; // 15px / 13px
    line-height: 1.4; // 21px / 15px
}

/**
 * Normalize `h4`, `h5` and `h6` headings (these are effectively unused).
 */

h4,
h5,
h6 {
    margin: 1em 0;
    font-size: 1rem;
}

@include dark-mode {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: $dark-color-text-heading;
    }
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * Add vertical margin to addresses.
 */

address {
    margin: 1em 0;
}

/**
 * Additional styling for blockquotes.
 */

blockquote {
    margin: 1em 0;
    padding: 0 0 0 1em;
    border-left: 3px solid $color-border;
}

@include dark-mode {
    blockquote {
        border-left-color: $dark-color-border;
    }
}

/**
 * 1. Remove the bottom border in Chrome 57+.
 * 2. Add the correct text decoration.
 */

abbr[title] {
    /* 1 */
    border-bottom: 0;
    /* 2 */
    text-decoration: underline dotted;
}

/**
 * Consistent styling for `mark` and `var` tags.
 */

mark,
var {
    padding: 1px 0.23076923076923em; // 3px / 13px

    @if $border-radius > 0 {
        border-radius: math.div($border-radius, 2);
    }

    background: $color-selected;
    color: $color-text;
}

@include dark-mode {
    mark,
    var {
        background: $dark-color-selected;
        color: $dark-color-text;
    }
}

/**
 * Harmonize size and style of computer text.
 */

pre,
code,
kbd,
samp,
.code {
    font-family: $font-code;
}

code,
kbd,
samp {
    padding: 1px 0.23076923076923em; // 3px / 13px
    border: 1px solid $color-border-extra-light;

    @if $border-radius > 0 {
        border-radius: math.div($border-radius, 2);
    }

    background: $color-background-box;
}

/**
 * Additional stylng for preformatted text/code.
 *
 * 1. Contain overflow in all browsers.
 * 2. Don't wrap long words.
 * 3. Set tab size to 4 spaces.
 */

pre {
    margin: 1em 0;
    padding: 1em; // 13px
    /* 1 */
    overflow-x: auto;
    border: 1px solid $color-border-extra-light;

    @if $border-radius > 0 {
        border-radius: math.div($border-radius, 2);
    }

    background: $color-background-box;
    /* 2 */
    word-wrap: normal;
    /* 3 */
    tab-size: 4;
}

@include dark-mode {
    pre,
    code,
    kbd,
    samp {
        border-color: $dark-color-border-extra-light;
        background-color: $dark-color-background-box;
        color: $dark-color-text;
    }
}

/**
 * Override `code` styling for code display within preformatted text areas and
 * form text areas.
 */

pre code,
.code code,
code.body,
code.excerpt {
    padding: 0;
    border: 0;

    @if $border-radius > 0 {
        border-radius: 0;
    }

    background-color: transparent;
    direction: ltr;
    hyphens: none;
    text-align: left;
    word-wrap: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: pre;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */

sub,
// override Textile class
sup.footnote,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.33333333333333em;
}

/**
 * Harmonize size and style of small text.
 */

small,
figcaption,
tfoot,
.footnote,
.txp-form-field-instructions,
.txp-footer {
    font-size: $small-font-size;
    line-height: $small-line-height;
}

figcaption,
tfoot,
.footnote,
.txp-form-field-instructions {
    color: $color-text-footnote;
}

@include dark-mode {
    figcaption,
    tfoot,
    .footnote,
    .txp-form-field-instructions {
        color: $dark-color-text-footnote;
    }
}

figcaption {
    margin-top: 0.5em;
    font-style: italic;
}