/* psi-overflow: the public pages, the overview and the privacy policy. */

/* privacy policy */

/* Long-form reading (privacy policy) wants a narrower measure, but the page
   frame stays the same width everywhere so navigating causes no layout shift. */
.prose > * {
    max-width: 44rem;
}

/* Its rhythm, largest gap first: a part (one way to ask, or both) is set off
   by a rule; a section inside a part by space; a heading sits close to the
   text it heads. Without this, a part's last section dropped its margin and
   the next part's heading ran straight into it. */
.prose h2 {
    margin-bottom: 0.6rem;
}

.prose h3 {
    margin-bottom: 0.35rem;
}

.prose .section {
    margin-bottom: 2rem;
}

.prose .part {
    margin: 2.75rem 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--psi-overflow-rule);
}

.prose .part > h2 {
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
}

.prose .part .section {
    margin-bottom: 1.5rem;
}

/* Last in a part or in the page, as any section is. */
.prose .section:last-child {
    margin-bottom: 0;
}

.prose .part + .section {
    padding-top: 1.75rem;
    border-top: 1px solid var(--psi-overflow-rule);
}

/* The controller, who runs the instance, and the data protection officer:
   three cards in a row where there is room, stacked where there is not. */
.prose > .parties {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
    /* stylelint-disable-next-line property-disallowed-list -- a grid's, which Safari 12 knows */
    gap: 0.85rem;
    margin-bottom: 2rem;
}

@media (min-width: 48rem) {
    .prose > .parties {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

/* Each is a .panel; in the grid, the gap does the spacing. */
.prose .party {
    margin: 0;
}

.prose .party h2 {
    font-size: 1rem;
}

/* The two ways to ask, one after the other; on a screen wide enough for two
   comfortable columns, side by side, so they read as alternatives rather than
   as one long policy. Each column is then about as wide as a line should be. */
.prose > .alternatives {
    max-width: none;
}

@media (min-width: 64rem) {
    .prose > .alternatives {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* stylelint-disable-next-line property-disallowed-list -- a grid's, which Safari 12 knows */
        gap: 0 3rem;
        margin: 2.75rem 0;
    }

    .alternatives > .part {
        margin: 0;
    }
}

/* A party on the privacy policy: name, address, phone, email, one per line.
   Not indented or boxed, because it is an address and reads as one. */
.contact {
    line-height: 1.6;
}

/* footer */

.footer {
    border-top: 1px solid var(--psi-overflow-rule);
    margin-top: 3rem;
    padding-top: 1rem;
    color: var(--psi-overflow-ink-faint);
    font-size: 0.875rem;
}

/* Spaced as the masthead's bar is, an element of its own for the same reason. */
.footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -0.5rem 0 0 -1.25rem;
}

.footer__links > * {
    margin-top: 0.5rem;
    margin-left: 1.25rem;
}

/* overview */

/* What the overview is limited to (§7.1): the limit on a line of its own,
   what it hides under it. It wraps, the button going under the words on a
   narrow screen, in line with them. */
.notice--scope {
    flex-wrap: wrap;
}

.notice--scope .notice__text {
    flex-basis: 16rem;
    margin: 0 0.75rem 0 0.6rem;
}

@media (max-width: 34rem) {
    /* Past the icon and the words' own margin. */
    .notice--scope .notice__action {
        align-self: flex-start;
        margin: 0.6rem 0 0 calc(18px + 0.6rem);
    }
}

.ask {
    background: var(--psi-overflow-surface);
    border: 1px solid var(--psi-overflow-rule);
    border-radius: var(--psi-overflow-radius-large);
    padding: 1.15rem;
    margin-bottom: 2.25rem;
    box-shadow: var(--psi-overflow-shadow-raise);
}

.ask__title {
    margin-bottom: 0.85rem;
}

.ask psi-overflow-form {
    display: block;
    max-width: 34rem;
}