/*
Utility CSS Classes:
    Used to augment HTML elements with common styling patterns by overriding previously defined styles.
    These may be used as multiple classes on a single element.
    This file should load after all other CSS files to ensure these utility classes take precedence.
*/

/* Paragraph Utilities */
.tab-indent { /* First line indent (mutually exclusive with .tab-outdent) */
    text-indent: var(--indent-size);
}

.tab-outdent { /* First line hanging -- use with .left-indent (mutually exclusive with .tab-indent)*/
    text-indent: calc(var(--indent-size) * -1);
}

.left-indent { /* Indent entire paragraph from left -- use with .right-indent for double indentation */
    margin-left: calc(var(--indent-size) * 2);
}

.right-indent { /* Indent entire paragraph from right -- use with .left-indent for double indentation */
    margin-right: calc(var(--indent-size) * 2);
}

.tight-top {
    margin-top: 0;
    padding-top: 0;
}

.tight-bottom {
    margin-bottom: 0;
    padding-bottom: 0;
}

.tight-line {
    line-height: 1.0;
}

/* Text Utilities */
.centered {
    text-align: center;
}

.right {
    text-align: right;
}

.underlined {
    text-decoration: underline;
}

.highlight {
    background-color: var(--highlight-color);
}

.end {
    /* May be used to end a sentence the old way with visible extra space */
    padding-left: 0.15rem;
}

.small {
    font-size: var(--tiny-text);
}

.visible-flex {
    display: flex;
}

hr {
    border: none;
    height: 2px;
    background-color: var(--subtle-border-color);
    margin: var(--padding-large) 0;
}

.middle-show {
    display: none; /* Hidden by default, shown on medium screens and up */
}


/* Screen Size Utilities - Responsive Design prior to mobile sizes */
@media only screen and (max-width: 1100px) {

    .middle-no {
        display: none;
    }

}

@media only screen and (max-width: 875px) {
    .middle-show {
        display: block;
    }
}