/* Bernard site-wide stylesheet. This site uses one stylesheet per page, so rules
 * that must apply to EVERY page live here - it is linked last in each page's
 * <head>, after the page's own sheet, so its rules win the cascade. */

/* ---- Help hub (/help/) ---- */
.help-top {
    max-width: 1120px;
    margin: 0 auto;
    padding: 56px 32px 8px;
    text-align: left
}
.help-top h1 {
    font-size: 2.6rem;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    max-width: 24ch
}
.help-lede {
    max-width: 62ch;
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 1.08rem
}
.help-start {
    margin: 0
}
.help-start a {
    font-weight: 700;
    text-decoration: none
}
.help-start a:hover {
    text-decoration: underline
}
.help-areas {
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 32px 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px
}
.help-area {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 26px 26px 24px;
    box-shadow: 0 1px 2px rgba(43, 41, 38, .06)
}
.help-area h2 {
    font-size: 1.3rem;
    margin: 0 0 8px
}
.help-area h2::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin-bottom: 14px
}
.help-area-note {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.55
}
.help-qs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px
}
.help-qs a {
    text-decoration: none;
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.45
}
.help-qs a:hover {
    text-decoration: underline
}
.help-ask {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 32px 72px
}
.help-ask h2 {
    font-size: 1.3rem;
    margin: 0 0 8px
}
.help-ask p {
    margin: 0;
    max-width: 62ch;
    color: var(--muted)
}

/* ---- Help articles (/help/<question>/) ---- */
.art {
    max-width: 680px;
    margin: 0 auto;
    padding: 44px 32px 76px
}
.art h1 {
    font-size: 2.25rem;
    letter-spacing: -0.01em;
    margin: 0 0 20px
}
.art h2 {
    font-size: 1.32rem;
    margin: 36px 0 10px
}
.art p,
.art li {
    font-size: 1.02rem;
    line-height: 1.7
}
.art ol,
.art ul {
    padding-left: 22px;
    margin: 18px 0
}
.art li {
    margin-bottom: 10px
}
.art .kicker {
    margin: 0 0 12px
}
.art-back {
    font-size: 14px;
    margin: 0 0 20px
}
.art-back a {
    text-decoration: none
}
.art-cta {
    margin: 26px 0 30px
}

/* ---- Step-by-step onboarding (/welcome/...) ---- */
.step {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 32px 80px;
    text-align: center
}
.step-progress {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px
}
.step h1 {
    font-size: 2.2rem;
    letter-spacing: -0.01em;
    margin: 0 0 12px
}
.step-sub {
    color: var(--accent-dark);
    font-weight: 700;
    max-width: 56ch;
    margin: 0 auto 32px;
    font-size: 1.02rem
}
.step-video {
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 40px 28px;
    margin: 0 auto 32px;
    background: #fff;
    color: var(--muted);
    font-size: 15px;
    max-width: 640px
}
.step-video strong {
    display: block;
    color: var(--ink);
    margin-bottom: 6px
}
.step-body {
    text-align: left;
    max-width: 640px;
    margin: 0 auto 34px
}
.step-body p,
.step-body li {
    font-size: 1.02rem;
    line-height: 1.7
}
.step-body h2 {
    font-size: 1.25rem;
    margin: 30px 0 10px
}
.step-body ul,
.step-body ol {
    padding-left: 22px
}
.step-body li {
    margin-bottom: 10px
}
.step-next {
    margin: 0 0 14px
}
.step-next .btn {
    padding: 15px 34px;
    font-size: 1.02rem
}
.step-back {
    font-size: 14px;
    color: var(--muted)
}
.step-back a {
    color: var(--muted)
}
.art-next {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
    font-size: 15px;
    color: var(--muted)
}
.course-header nav {
    display: inline-flex;
    gap: 18px;
    align-items: center
}

/* ---- "Log in to my course" header button ----
 * The header action used to read "My courses", which did not look like a way
 * in. It now says what it does. Two labels: the full wording where there is
 * room, the short "Log in" on phones (see the media query below). */
.nav .cta .cta-tight {
    display: none
}

/* ---- Header nav on phones ----
 * The nav now carries four items (Courses, Help, babyem.co.uk, My courses),
 * which overflows a phone screen. Drop the outbound babyem.co.uk link there:
 * a student on a course page needs Courses, Help and My courses. */
@media (max-width: 700px) {
    .hd-in {
        padding-left: 16px;
        padding-right: 16px;
        gap: 12px
    }
    .nav {
        gap: 14px
    }
    .nav a[href="https://www.babyem.co.uk/"] {
        display: none
    }
    .nav .cta {
        padding: 9px 14px;
        font-size: 12.5px;
        white-space: nowrap
    }
    .nav .cta .cta-full {
        display: none
    }
    .nav .cta .cta-tight {
        display: inline
    }
    .brand-logo img {
        width: 150px;
        height: auto
    }
}
.course-lesson .course-content blockquote > p:first-child > strong:first-child {
    color: #c2453f;
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin-bottom: .5em;
    text-transform: uppercase
}
main .bnd-ls-q {
    box-sizing: border-box;
    font-family: inherit;
    max-width: min(26rem, calc(100% - 64px));
    margin-left: max(32px, calc((100% - 1120px) / 2 + 32px));
    margin-right: 32px;
    margin-top: 4px;
    margin-bottom: 4px;
    border: 1px solid rgba(43, 41, 38, 0.28);
    border-radius: 10px;
    color: #2b2926
}
.bnd-upnext-label, .bnd-upnext-next {
    display: none !important
}
.course-lesson .course-content img[src*="ed0ff979e7bd"], .course-lesson .course-content img[src*="rebecca-moore"], .course-lesson .course-content img[src*="harriet-higgins"] {
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(43,41,38,.12);
    height: 164px;
    margin: 1.7em 0 1.3em;
    object-fit: cover;
    width: 164px
}
html:has(link[href*="/maternity-nurse-training-online-level-3-new/"], link[href*="/maternity-nurse-training-online-level-4-new/"]) .course-accordion {
    background: #faf5f0;
    border: none;
    border-radius: 8px;
    margin: 1.75rem 0;
    padding: 0 4px
}