/* The guides for trainers (/guides, /da/guides; issue #461). They are set on
   legal.css, the long-text style /privacy and /terms use, and this file adds
   only what a guide has and a legal page does not: a table of examples, the
   demo box at the end and the list of the other guides. Presentation only. */

h1 + .lede { font-size: 1.08rem; color: var(--slate-900); }

ol { margin: 0 0 14px; padding-left: 22px; color: var(--gray-600); }

/* ---------- Table of examples ---------- */
.guide-table-wrap {
    /* A narrow phone scrolls the table inside itself, never the page. */
    overflow-x: auto;
    margin: 0 0 18px;
}
.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--slate-900);
}
.guide-table caption {
    text-align: left;
    font-size: 0.9rem;
    color: var(--gray-500);
    padding-bottom: 8px;
}
.guide-table th,
.guide-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gray-200);
}
.guide-table thead th {
    background: var(--slate-100);
    font-weight: 700;
}
.guide-table tbody th { font-weight: 600; white-space: nowrap; }
/* "(+2 and +1)" stays on one line; on a phone it moves under the total. */
.guide-table .guide-split { white-space: nowrap; }

/* ---------- The demo box at the end of a guide ---------- */
.guide-cta {
    margin-top: 28px;
    padding: 20px 22px;
    background: var(--blue-50);
    border: 1px solid rgba(29, 78, 216, 0.25);
    border-radius: 12px;
}
.guide-cta p { color: var(--slate-900); margin-bottom: 12px; }
.guide-cta-button {
    display: inline-block;
    background: var(--blue-dark);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 999px;
}
.guide-cta-button:hover { text-decoration: underline; }

/* ---------- The other guides ---------- */
.guide-list { list-style: none; padding-left: 0; }
.guide-list li {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-200);
}
.guide-list li:last-child { border-bottom: 0; }
.guide-list a { font-size: 1.05rem; }
.guide-list p { margin: 4px 0 0; }

.guide-more { margin-top: 24px; }
.guide-more h2 { margin-top: 0; padding-top: 0; border-top: 0; }