/* Page sheet for seraph.php. Linked after style.css by includes/css.php,
   so these rules win ties against the shared sheet. */

/* ============================================================
   SERAPH ARTICLE
   A document, not a dashboard: headings, paragraphs, hairlines
   and four plain tables. Everything is prefixed .sx-* and page
   local, and all colour comes from the site tokens.

   The box itself is .page-wrap page-wrap--wide, the same rail
   every other Bible page sits on, so nothing here may set width,
   margin or padding: .sx-doc shares the element with .page-wrap
   and restating padding would replace the site gutter.
   ============================================================ */

/* ── Type ───────────────────────────────────────────────── */
/* A size up from --fs-body: EB Garamond has a small x-height and
   reads light at 0.92rem across a long article. */
.sx-doc p {
    margin: 0 0 17px;
    color: var(--text-mid);
    font-size: 1.04rem;
    line-height: 1.85;
}
.sx-doc b, .sx-doc strong { color: var(--text-main); font-weight: 700; }
.sx-doc a { color: var(--accent-hover); text-decoration: none; }
.sx-doc a:visited { color: var(--accent-hover); }
.sx-doc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sx-lead {
    margin-bottom: 32px !important;
    font-size: 1.18rem !important;
    line-height: 1.8 !important;
}

.sx-doc h2 {
    margin: 56px 0 18px;
    padding-bottom: 12px;
    font-size: var(--fs-h2);
    border-bottom: 1px solid var(--border-light);
    scroll-margin-top: calc(var(--nav-height) + 20px);
}

/* The teacher line and the "remember" line: quieter than body copy,
   the way the original set them a size down. */
.sx-meta { color: var(--text-dim) !important; font-size: 0.96rem !important; }
.sx-meta b { color: var(--text-mid); }

/* ── Contents ───────────────────────────────────────────── */
.sx-contents {
    margin: 0 0 12px;
    padding: 22px 28px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 2px solid var(--gold);
    border-radius: 3px;
}
.sx-eyebrow {
    margin: 0 0 12px !important;
    color: var(--text-dim) !important;
    font-size: var(--fs-2xs) !important;
    font-weight: 700;
    letter-spacing: var(--ls-chip);
    text-transform: uppercase;
}
.sx-contents ol { margin: 0; padding-left: 20px; color: var(--text-dim); }
.sx-contents li { margin-bottom: 10px; font-size: 1rem; line-height: 1.4; }
.sx-contents li:last-child { margin-bottom: 0; }
.sx-contents a { color: var(--text-mid); }
.sx-contents a:hover { color: var(--accent-hover); }

/* ── The four teachers ──────────────────────────────────── */
.sx-teachers { margin: 4px 0 20px; }
.sx-teacher {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--hair);
}
.sx-teacher:first-child { border-top: none; padding-top: 4px; }
.sx-teacher img {
    flex: 0 0 187px;
    width: 187px;
    height: 92px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #000;
    image-rendering: pixelated;   /* a 2012 screenshot, keep it crisp */
}
.sx-teacher p { margin: 0 !important; }
/* Two crimson links in a row (the teacher and what he teaches) made
   the line shout. Only what he teaches carries the accent. */
.sx-teacher b a { color: var(--text-main); }
.sx-teacher b a:visited { color: var(--text-main); }
.sx-teacher b a:hover { color: var(--accent-hover); }
.sx-way { display: block; margin-top: 4px; color: var(--text-dim); font-size: var(--fs-meta); }

/* ── Tables ─────────────────────────────────────────────── */
/* Deliberately NOT .rank-table: that one collapses into one card per
   row below 720px, which is right for a roster and wrong for three
   short numeric columns. These just scroll if they ever have to.

   Capped rather than stretched to the rail: three short numeric
   columns spread over 1300px put every number so far from its label
   that the row stops reading as a row. The original set these tables
   at 430-500px for the same reason. */
.sx-tw { overflow-x: auto; margin: 8px 0 20px; }
.sx-doc table { width: 100%; max-width: 720px; border-collapse: collapse; }
.sx-doc th {
    padding: 12px 14px;
    text-align: center;
    font-family: 'Beaulieux', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--ls-chip);
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}
.sx-doc td {
    padding: 12px 14px;
    text-align: center;
    font-size: 0.98rem;
    color: var(--text-mid);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sx-doc th:first-child,
.sx-doc td:first-child { text-align: left; }
.sx-doc td:first-child { color: var(--text-main); font-weight: 700; }
.sx-doc tbody tr:hover td { background: rgba(154,35,35,0.045); }
.sx-num { color: var(--steel) !important; font-weight: 700; }
.sx-pts { color: var(--gold)  !important; font-weight: 700; }

/* ── Back to top ────────────────────────────────────────── */
.sx-top { margin: 2px 0 0 !important; }
.sx-top a { color: var(--text-dim); font-size: var(--fs-meta); }
.sx-top a:hover { color: var(--accent-hover); }

@media (max-width: 600px) {
    .sx-doc h2 { margin-top: 46px; }
    .sx-doc p { font-size: 1.01rem; }
    .sx-lead { font-size: 1.1rem !important; }
    .sx-teacher { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sx-teacher img { flex: none; width: 100%; max-width: 280px; height: auto; }
    /* The headers are nowrap on desktop so they read as one line, but
       "Points needed to raise" alone is wider than a phone column: let
       them wrap here or the whole table has to be scrolled sideways. */
    .sx-doc th {
        white-space: normal;
        font-size: var(--fs-2xs);
        letter-spacing: .1em;
        /* 4px, not 6: the German level table's four headers
           ("Benötigtes Level", "Seraph-Punkte") come to 334px of
           min-content against a 319px phone column, and the cell
           padding is the 15px that decides it. */
        padding: 9px 4px;
    }
    .sx-doc td { font-size: 0.94rem; padding: 9px 4px; }
}