/*
 * Content typography standard (band 3 of the technical-fix document).
 *
 * Scope: .contentBody wraps ONLY the HTML that content editors write in CKEditor
 * (article text / menu page content / post text). Site partials such as
 * _priceTableBlock.html.twig and the FAQ accordion stay outside this wrapper and
 * keep their own styling.
 *
 * !important is required here for two reasons:
 *   1. fontiran.css declares `body a,small,p,span,li,...,div { font-family: ... !important }`
 *      and is loaded after style.css.
 *   2. Content already stored in the database carries inline font-family / font-size /
 *      line-height from copy-paste (Word, other sites). Author !important beats a
 *      non-important inline style, so legacy content is normalised without touching the DB.
 *
 * Deliberately NOT overridden (authors keep control): color, background-color,
 * text-align, bold/italic/underline, links, lists, images.
 */

.contentBody {
    font-family: 'IRANSansWeb_Medium' !important;
    font-size: 20px !important;
    line-height: 40px !important;
}

.contentBody p,
.contentBody div,
.contentBody li,
.contentBody td,
.contentBody th,
.contentBody blockquote {
    font-family: 'IRANSansWeb_Medium' !important;
    font-size: 20px !important;
    line-height: 40px !important;
}

/* Paragraph rhythm. style.css sets `.contentMenu p { margin: 0 }`, which glues
   paragraphs together; 16px is the agreed standard gap. */
.contentBody p {
    margin: 0 0 16px !important;
}

.contentBody p:last-child {
    margin-bottom: 0 !important;
}

.contentBody ul,
.contentBody ol {
    margin: 0 0 16px !important;
}

.contentBody li {
    margin-bottom: 8px !important;
}

/* Inline carriers of pasted styles. They must follow the surrounding text. */
.contentBody span,
.contentBody font,
.contentBody em,
.contentBody i,
.contentBody u,
.contentBody a,
.contentBody small,
.contentBody sub,
.contentBody sup {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* sub/sup keep their smaller rendering */
.contentBody sub,
.contentBody sup {
    font-size: 75% !important;
    line-height: 0 !important;
}

.contentBody strong,
.contentBody b {
    font-family: 'IRANSansWeb_Bold' !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Headings: one fixed scale for every article and service page. */
.contentBody h1,
.contentBody h2,
.contentBody h3,
.contentBody h4,
.contentBody h5,
.contentBody h6 {
    font-family: 'IRANSansWeb_Bold' !important;
    line-height: 1.8 !important;
    margin: 24px 0 12px !important;
}

.contentBody h1:first-child,
.contentBody h2:first-child,
.contentBody h3:first-child,
.contentBody h4:first-child,
.contentBody h5:first-child,
.contentBody h6:first-child {
    margin-top: 0 !important;
}

.contentBody h1 { font-size: 30px !important; }
.contentBody h2 { font-size: 28px !important; }
.contentBody h3 { font-size: 24px !important; }
.contentBody h4 { font-size: 22px !important; }
.contentBody h5 { font-size: 20px !important; }
.contentBody h6 { font-size: 20px !important; }

/* A heading pasted from Word often arrives as <p><strong><span style="font-size:x"> */
.contentBody h1 span, .contentBody h2 span, .contentBody h3 span,
.contentBody h4 span, .contentBody h5 span, .contentBody h6 span,
.contentBody h1 strong, .contentBody h2 strong, .contentBody h3 strong,
.contentBody h4 strong, .contentBody h5 strong, .contentBody h6 strong,
.contentBody h1 font, .contentBody h2 font, .contentBody h3 font,
.contentBody h4 font, .contentBody h5 font, .contentBody h6 font {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/*
 * Automatic table of contents (band 6). The placeholder is empty until
 * scripts/content-toc.js fills it, and stays invisible if there is nothing to list.
 */

#contentToc {
    display: none;
}

#contentToc.contentToc-ready {
    display: block;
    background: #f7f9f9;
    border: 1px solid #E5EAEA;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 0 0 24px;
}

.contentToc-title {
    font-family: 'IRANSansWeb_Bold' !important;
    font-size: 20px !important;
    line-height: 32px !important;
    margin-bottom: 8px;
}

.contentToc-list {
    margin: 0;
    padding: 0 20px 0 0;
}

.contentToc-item {
    font-family: 'IRANSansWeb_Medium' !important;
    font-size: 18px !important;
    line-height: 32px !important;
    margin-bottom: 4px;
}

.contentToc-item-sub {
    padding-right: 20px;
    font-size: 16px !important;
    list-style-type: circle;
}

.contentToc-list a {
    color: #0DC0C0;
}

.contentToc-list a:hover {
    text-decoration: underline;
}

/*
 * Last-updated / reviewed-by line above the content (band 1).
 */

.contentMeta {
    font-family: 'IRANSansWeb_Medium' !important;
    font-size: 16px;
    line-height: 28px;
    color: #777;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5EAEA;
}

.contentMeta-item {
    display: inline-block;
    margin-left: 20px;
}

.contentMeta-item i {
    margin-left: 5px;
}

.contentMeta time {
    color: #555;
}

/*
 * Responsive images inside editor-written content (band 5).
 * Editors paste images with fixed width/height attributes; on a phone those overflow
 * the column and push the page sideways.
 */

.contentBody img {
    max-width: 100% !important;
    height: auto !important;
}

.contentBody figure {
    max-width: 100% !important;
    margin: 0 0 16px;
}

/* Wide tables scroll inside their own box instead of stretching the page. */
.contentBody table {
    max-width: 100%;
}