/**
 * Membership page.
 *
 * Loads after membership.css and deliberately does not restyle the rate cards
 * or dues notice - those are the shared component, and the point of sharing
 * them is that they look the same here as on the homepage.
 */

.srpc-mem {
    max-width: 68rem;
}

.srpc-mem-lead {
    font-size: var(--srpc-text-lg);
    line-height: var(--srpc-leading-snug);
    color: var(--srpc-ink);
    max-width: var(--srpc-measure);
    margin: 0 0 1.4rem;
}

/* "How joining works" and "Forms and documents" sit side by side where there is
   room. They are the two halves of one task - the steps, and the paperwork the
   steps refer to - and each was a 584px column of text in a 1088px section with
   the right half empty.
   The documents section is moved up in the markup rather than placed here with
   grid-column, so that reading order, tab order and the stacked mobile layout
   all still match what is on screen. */
.srpc-mem-pair {
    display: grid;
    gap: 0 2.8rem;
}

@media (min-width: 62rem) {
    .srpc-mem-pair {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* --- sections --- */

.srpc-mem-section {
    margin: var(--srpc-section-gap) 0 0;
    padding-top: var(--srpc-section-pad);
    border-top: 1px solid var(--srpc-rule-soft);
}

.srpc-mem-section > h2 {
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-xl);
    line-height: var(--srpc-leading-tight);
    color: var(--srpc-navy);
    margin: 0 0 0.4rem;
}

.srpc-mem-section-intro {
    font-size: var(--srpc-text-md);
    color: var(--srpc-ink-soft);
    max-width: var(--srpc-measure);
    margin: 0 0 1.3rem;
}

.srpc-mem-section-note {
    font-size: var(--srpc-text-sm);
    color: var(--srpc-steel);
    max-width: var(--srpc-measure);
    margin: 1.1rem 0 0;
}

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

/* Numbered with a counter rather than list markers so the figure can sit in
   the gutter at a size that reads as a step number. */
/* Two columns where there is room. These were a single 584px track inside a
   1088px section, which read as a column of text abandoned on the left rather
   than a deliberate measure.
   Safe for a sequence because the steps are numbered: the grid flows row-wise,
   so 1,2 / 3,4 / 5 is still read in order, and the counter removes any doubt.
   An unnumbered list of instructions should not be done this way. */
.srpc-mem-steps {
    list-style: none;
    counter-reset: srpc-step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.1rem 2.2rem;
}

.srpc-mem-steps > li {
    counter-increment: srpc-step;
    position: relative;
    padding: 0 0 0 3.1rem;
}

.srpc-mem-steps > li::before {
    content: counter(srpc-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--srpc-navy);
    color: #fff;
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.srpc-mem-steps h3 {
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-md);
    line-height: var(--srpc-leading-tight);
    color: var(--srpc-navy);
    margin: 0.15rem 0 0.3rem;
}

.srpc-mem-steps p {
    font-size: var(--srpc-text-sm);
    line-height: var(--srpc-leading-body);
    color: var(--srpc-ink-soft);
    max-width: var(--srpc-measure);
    margin: 0;
}

.srpc-mem-step-note {
    margin-top: 0.5rem !important;
    color: var(--srpc-steel) !important;
}

/* The one thing on the page somebody will copy by hand, so it is set apart
   rather than buried in a sentence. */
.srpc-mem-address {
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    color: var(--srpc-navy);
    background: var(--srpc-navy-tint);
    border-left: 3px solid var(--srpc-navy);
    border-radius: 0 var(--srpc-radius) var(--srpc-radius) 0;
    padding: 0.8rem 1rem;
    margin: 0.6rem 0 0;
    display: inline-block;
}

/* One block element per line. The markup uses spans rather than <br> so a
   screen reader announces four separate lines. */
.srpc-mem-address span {
    display: block;
}

/* --- ranges --- */

.srpc-mem-ranges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.srpc-mem-ranges > li {
    border: 1px solid var(--srpc-rule);
    border-radius: var(--srpc-radius);
    background: var(--srpc-paper);
    padding: 0.85rem 1rem;
    display: grid;
    gap: 0.25rem;
    align-content: start;
}

.srpc-mem-range-name {
    font-family: var(--srpc-font-display);
    font-size: var(--srpc-text-sm);
    font-weight: 700;
    color: var(--srpc-navy);
}

.srpc-mem-range-detail {
    font-size: var(--srpc-text-sm);
    line-height: 1.4;
    color: var(--srpc-ink-soft);
}

/* --- documents --- */

/* Likewise, and with less to argue about: these are download links, scanned
   rather than read, with no order to disturb. */
.srpc-mem-docs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 2px;
}

.srpc-mem-docs > li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 1rem;
    align-items: baseline;
    padding: 0.7rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--srpc-radius);
    background: var(--srpc-paper);
}

/* The application is why most people are on this page; everything else is
   reference material. */
.srpc-mem-docs > li.is-primary {
    border-color: var(--srpc-orange);
    background: var(--srpc-orange-tint);
}

.srpc-mem-docs > li > a {
    font-weight: 600;
    color: var(--srpc-navy);
}

.srpc-mem-doc-meta {
    grid-column: 2;
    font-size: var(--srpc-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--srpc-steel);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.srpc-mem-doc-note {
    grid-column: 1 / -1;
    font-size: var(--srpc-text-sm);
    line-height: 1.4;
    color: var(--srpc-ink-soft);
    max-width: var(--srpc-measure);
}


/* The global rule in typography.css caps every p and li in #content at the
   prose measure. That is right for running text and wrong for these two: they
   are structured lists, and the cap was holding each row to 584px inside a
   1088px section whatever column it had been given. Scoped with #content
   because the global rule uses an ID selector. */
.srpc-mem-steps > li,
.srpc-mem-docs > li {
    max-width: none;
}