/* ==========================================================================
   help.css — Coremail Help Center ("Hot topics" article listing)
   Colors and spacing below were pixel-sampled directly from the uploaded
   screenshot (a 2x/retina capture, so native pixel measurements are halved
   for CSS px). Not part of the original custom.css bundle — this is a new
   page type, built to sit alongside it and share the same brand colors.
   ========================================================================== */

* { box-sizing: border-box; }
body, h1, ul, li, p { margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", Roboto, Arial, sans-serif;
    background: #ffffff;
    color: #333;
}

a { color: inherit; text-decoration: none; }

/* thin brand-blue rule at the very top of the viewport */
.help-top-rule {
    height: 3px;
    background: #4B9FCE;
}

/* header bar — logo/back-link area + "Email home" */
.help-header {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 40px;
}
.help-header a.email-home {
    color: #2E5E99;
    font-size: 14px;
}
.help-header a.email-home:hover { text-decoration: underline; }

/* the thicker accent bar separating header from the two-column body */
.help-divider-bar {
    height: 5px;
    background: #4B9FCE;
}

.help-body {
    display: flex;
    align-items: flex-start;
}

/* ---------------- sidebar ---------------- */
.help-sidebar {
    width: 202px;
    flex: 0 0 202px;
    border-right: 1px solid #B0CFE7;
    padding: 20px 0 40px 18px;
    font-size: 14px;
    line-height: 1.9;
}
.help-sidebar ul {
    list-style: none;
}
.help-sidebar li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 2px;
}
.help-sidebar li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #555;
}
.help-sidebar a {
    color: #2E5E99;
}
.help-sidebar a:hover { text-decoration: underline; }
.help-sidebar a.is-current { font-weight: bold; }

.help-sidebar hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 14px 10px 0;
}

/* ---------------- main content ---------------- */
.help-main {
    flex: 1;
    min-width: 0;
    padding: 26px 40px 60px 30px;
}
.help-main h1 {
    font-size: 22px;
    font-weight: bold;
    color: #000;
    margin-bottom: 18px;
}

.topic-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F6F6F6;
    height: 37px;
    padding: 0 16px;
    margin-bottom: 5px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.topic-row:hover {
    background: #eef0f1;
}
.topic-row .chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #C4CACE;
}
.topic-row a {
    color: #2E5E99;
    font-size: 15px;
}
.topic-row a:hover { text-decoration: underline; }

/* small-screen fallback — sidebar collapses above content */
@media (max-width: 760px) {
    .help-body { flex-direction: column; }
    .help-sidebar {
        width: 100%;
        flex: 1 1 auto;
        border-right: none;
        border-bottom: 1px solid #B0CFE7;
        padding: 16px 18px 20px;
    }
    .help-main { padding: 22px 20px 40px; }
    .help-header { padding: 0 20px; }
}