@charset "utf-8";

/*
 * Visitor help page.
 *
 * Everything here is derived from the theme variables set in styles/mui/themes/*.css
 * rather than from fixed colours, so the page follows whichever theme is active.
 * Accent surfaces are mixed from the accent against white, which keeps the tint
 * faint enough to read on and correct for the blue, red and white themes alike.
 *
 * Type is sized in percentages, not rem: this app sets its base size on body
 * (--font-size, 13px) while rem still resolves against the 16px root, so rem values
 * would land roughly a quarter too large and break step with the rest of the UI.
 */

/*
 * --btn-color-one rather than --color-one: --color-one is near-white in the white
 * themes (#fefefe in white31, the default), which would leave the accent invisible.
 * --btn-color-one is a mid blue in every theme and is what the primary buttons on
 * this page already use, so the accents and the buttons stay in step.
 */
.help-page {
    --help-accent: var(--btn-color-one, #5f9dc9);
    --help-surface: #fff;
    --help-tint: color-mix(in srgb, var(--help-accent) 7%, #fff);
    --help-border: color-mix(in srgb, var(--help-accent) 22%, #fff);
    --help-radius: 10px;
}

/* ---------------------------------------------------------------- hero */

.help-hero {
    margin-bottom: 1.4rem;
}

/* The old page set h1 and the card headings barely a step apart, and made the
   headings lighter than the text below them. Restore a plain descending order:
   200 / 130 / 115 / 100 per cent of the base size. */
.help-page h1.title {
    font-size: 200%;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0.35rem;
}

.help-page .page-description {
    font-size: 108%;
    color: var(--font-color-lighter, #444);
    max-width: 46rem;
}

/* ------------------------------------------------------------ jump nav */

.help-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.help-jump__link {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--help-border);
    border-radius: 999px;
    background-color: var(--help-surface);
    color: var(--help-accent);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.help-jump__link:hover,
.help-jump__link:focus-visible {
    background-color: var(--help-accent);
    border-color: var(--help-accent);
    color: #fff;
    text-decoration: none;
}

/* --------------------------------------------------------------- group */

.help-group {
    margin-bottom: 1.8rem;
}

.help-group__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 130%;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0.8rem;
}

/* Short accent rule instead of an icon set — it groups the sections visually
   without introducing artwork the rest of the visitor UI does not have. */
.help-group__title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 1.1em;
    border-radius: 2px;
    background-color: var(--help-accent);
}

/* --------------------------------------------------------------- steps */

.help-steps {
    background-color: var(--help-tint);
    border: 1px solid var(--help-border);
    border-radius: var(--help-radius);
    padding: 1.1rem 1.2rem;
    margin-bottom: 0.9rem;
}

.help-steps__intro {
    margin: 0 0 1rem 0;
    color: var(--font-color);
}

.help-steps__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    counter-reset: help-step;
}

@media only screen and (min-width: 576px) {
    .help-steps__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 1200px) {
    .help-steps__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.help-steps__step {
    counter-increment: help-step;
}

.help-steps__step-title {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 115%;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0.3rem;
}

.help-steps__step-title::before {
    content: counter(help-step);
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: var(--help-accent);
    color: #fff;
    font-size: 85%;
    font-weight: 700;
    line-height: 1.5em;
    text-align: center;
}

.help-steps__step p {
    margin: 0;
    color: var(--font-color);
}

.help-steps__action {
    margin-top: 1rem;
}

/* --------------------------------------------------------------- cards */

/*
 * Grid rather than Bootstrap columns: the tracks stretch to a common height so the
 * card edges still line up, but the actions follow straight after the text instead
 * of being pushed to the bottom by mt-auto, which used to leave a visible void in
 * the shorter card of a pair. Column counts are fixed per breakpoint rather than
 * auto-fit so the reading measure never widens past about sixty characters.
 */
.help-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

@media only screen and (min-width: 768px) {
    .help-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 1200px) {
    .help-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.help-card {
    background-color: var(--help-surface);
    border: 1px solid var(--help-border);
    border-radius: var(--help-radius);
    padding: 1rem 1.1rem;
}

.help-card__title {
    font-size: 115%;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0.45rem;
}

.help-card p {
    margin-bottom: 0;
    color: var(--font-color);
}

/* This theme zeroes the margin on every p, so an aside would otherwise sit flush
   against the paragraph above it and read as one run-on block. */
.help-card__aside,
.help-steps__aside {
    margin-top: 0.6rem;
    font-size: 92%;
    opacity: 0.78;
}

.help-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Every entry point into this page is a deep link, so say plainly which card the
   visitor was sent to instead of dropping them into an undifferentiated grid. */
.help-card:target {
    border-color: var(--help-accent);
    box-shadow: 0 0 0 2px var(--help-accent);
}

.help-group:target .help-group__title {
    color: var(--help-accent);
}

/* ------------------------------------------------------- sign-in nudge */

/* Without an account, half of this page describes pages the visitor cannot reach.
   Offer the way in rather than leaving those cards as dead ends. */
.help-signin {
    grid-column: 1 / -1;
    background-color: var(--help-tint);
}

/* ------------------------------------------------------------- contact */

.help-contact {
    border: 1px solid var(--help-border);
    border-left: 3px solid var(--help-accent);
    border-radius: var(--help-radius);
    background-color: var(--help-tint);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.4rem;
}

.help-contact__title {
    font-size: 128%;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0.45rem;
}

.help-contact p {
    margin-bottom: 0;
}

.help-contact__address {
    margin-top: 0.6rem;
    font-size: 115%;
}

/* ---------------------------------------------------------------- more */

.help-more {
    border-top: 1px solid var(--help-border);
    padding-top: 1rem;
}

.help-more__title {
    font-size: 115%;
    font-weight: 600;
    color: var(--font-color);
    margin-bottom: 0.5rem;
}

.help-more__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.3rem;
}

.help-backtotop {
    display: inline-block;
    margin-top: 1.2rem;
    font-size: 92%;
}