/*
 * page_content.css — typographic styling for /page.php content pages
 * (About, Masthead, Contacts, Editorial Standards, Corrections,
 * Terms of Service, Privacy Policy, Copyright, Cookie Policy, etc.).
 *
 * Editorial principle (May 2026 — "стильно, строго"):
 *   - Sans-serif Roboto throughout (already loaded site-wide, no
 *     Google Fonts hop). Reads sober and authoritative on legal docs
 *     / About / Contacts; no editorial flourish.
 *   - 840px reading column — wider than the original 720 so the page
 *     feels like a document, not a magazine spread.
 *   - Generous leading (1.7) and paragraph spacing — calm.
 *   - Minimum colour. Brand red shows up only in links and in the
 *     thin neutral rule under H1 (intentionally restrained).
 *   - No drop-cap, no eyebrow, no brand-red rule under H1.
 *
 * Scoped entirely under .page-elegant — nothing here leaks outside
 * the article wrapper rendered by templates/page/page_content.tpl.php.
 */

.page-elegant {
    max-width: 840px;
    margin: 0 auto;
    padding: 12px 0 72px;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #1F1F1F;
    font-feature-settings: "kern", "liga";
    text-rendering: optimizeLegibility;
}

/* ===== Headline ===== */
.page-elegant h1 {
    margin: 0 0 0.4em;
    font-family: inherit;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: #0A0A0A;
    text-wrap: balance;
}
/* Thin neutral separator under H1 — gives a clear masthead
   cut between the title and body without colourful drama. */
.page-elegant-rule {
    width: 100%;
    height: 1px;
    margin: 28px 0 32px;
    background: #E5E5E5;
    border: 0;
}

/* ===== Body paragraphs ===== */
.page-elegant p {
    margin: 0 0 1.05em;
}

/* ===== Headings inside content ===== */
.page-elegant h2 {
    margin: 1.9em 0 0.5em;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #0A0A0A;
}
.page-elegant h3 {
    margin: 1.6em 0 0.4em;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: #0A0A0A;
}
.page-elegant h4 {
    margin: 1.4em 0 0.4em;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #0A0A0A;
}

/* ===== Inline ===== */
.page-elegant a {
    color: #87080E;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.page-elegant a:hover {
    color: #C8101A;
    text-decoration-thickness: 2px;
}
.page-elegant strong, .page-elegant b {
    font-weight: 700;
    color: #0A0A0A;
}
.page-elegant em, .page-elegant i {
    font-style: italic;
}

/* ===== Lists ===== */
.page-elegant ul,
.page-elegant ol {
    margin: 0 0 1.1em;
    padding-left: 1.5em;
}
.page-elegant li {
    margin: 0 0 0.35em;
    padding-left: 0.25em;
}
.page-elegant ul li::marker {
    color: #6B6B6B;
}
.page-elegant ol li::marker {
    color: #6B6B6B;
    font-weight: 600;
}
.page-elegant li > ul,
.page-elegant li > ol {
    margin: 0.35em 0 0;
}

/* ===== Blockquote — neutral, not romantic ===== */
.page-elegant blockquote {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 22px;
    border-left: 3px solid #D9D9D9;
    color: #4A4A4A;
}
.page-elegant blockquote p:last-child {
    margin-bottom: 0;
}

/* ===== Tables ===== */
.page-elegant table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    font-size: 15.5px;
    line-height: 1.55;
}
.page-elegant thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #4A4A4A;
    border-bottom: 1.5px solid #1F1F1F;
}
.page-elegant tbody td,
.page-elegant tbody th {
    padding: 11px 14px;
    border-bottom: 1px solid #ECECEC;
    vertical-align: top;
}
.page-elegant tbody tr:last-child td,
.page-elegant tbody tr:last-child th {
    border-bottom: 0;
}

/* ===== Horizontal rule (when used inside content) ===== */
.page-elegant hr {
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid #ECECEC;
}

/* ===== Images inside content ===== */
.page-elegant img {
    max-width: 100%;
    height: auto;
    margin: 1.6em 0;
}
.page-elegant figure {
    margin: 1.8em 0;
}
.page-elegant figcaption {
    margin-top: 0.5em;
    font-size: 13.5px;
    color: #6B6B6B;
    text-align: center;
}

/* ===== Last-updated meta line at the foot of the article =====
 * Rendered by templates/page/page_content.tpl.php only when the CMS
 * has a non-zero $content->meta['last_modified']. Subtle separator
 * and muted italic text — it's metadata, it shouldn't compete with
 * the actual content.
 *
 * `background: transparent` is REQUIRED — style.css ships a global
 * `footer { background-color: #F5F5F5 }` rule for the legacy site
 * footer that also catches every <footer> inside <article>, painting
 * a grey block here. The semantic <footer>-inside-<article> tag is
 * correct HTML5 so we keep it and override the colour instead of
 * downgrading to <div>.
 *
 * Hidden in print (saves a line of bleed). */
.page-elegant-meta {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid #ECECEC;
    background: transparent;
    font-size: 13px;
    color: #6B7280;
    font-style: italic;
}
@media print {
    .page-elegant-meta { display: none; }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .page-elegant {
        padding: 8px 0 56px;
        font-size: 16px;
        line-height: 1.65;
    }
    .page-elegant h1 { font-size: 28px; }
    .page-elegant h2 { font-size: 19px; margin-top: 1.6em; }
    .page-elegant h3 { font-size: 17px; }
    .page-elegant h4 { font-size: 14px; }
    .page-elegant-rule { margin: 22px 0 26px; }
    .page-elegant table { font-size: 14px; }
    .page-elegant thead th,
    .page-elegant tbody td,
    .page-elegant tbody th { padding: 9px 10px; }
}