/* Examination subscribe form. Kept in its own sheet so it only loads on a page that really shows the form. */

.posn-exam-subscribe {
    margin-block: 1.5rem;
    padding: 24px;
    border: 1px solid var(--posn-border, #e2e8f0);
    border-radius: var(--posn-radius, 8px);
    background: var(--posn-bg, #ffffff);
    color: var(--posn-text, #1e293b);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.posn-subscribe-heading {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--posn-text, #1e293b);
}

.posn-subscribe-field {
    margin: 0 0 1rem;
}

.posn-subscribe-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.posn-subscribe-field input[type="email"] {
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--posn-border, #e2e8f0);
    border-radius: var(--posn-radius, 8px);
    background-color: var(--posn-bg, #ffffff);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--posn-text, #1e293b);
    box-sizing: border-box;
    transition: border-color var(--posn-transition, 0.2s ease), box-shadow var(--posn-transition, 0.2s ease);
}

.posn-subscribe-field input[type="email"]::placeholder {
    color: var(--posn-text-muted, #94a3b8);
}

.posn-subscribe-field input[type="email"]:focus {
    outline: none;
    border-color: var(--posn-primary, #681F7A);
    box-shadow: 0 0 0 3px var(--posn-primary-subtle, rgba(104, 31, 122, 0.08));
}

/* Same shape as .filter-group input in style.css, so the search block and the subscribe form use one control. */
.posn-subscribe-filter {
    margin: 0 0 1rem;
}

.posn-subscribe-filter label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.posn-subscribe-filter input[type="search"] {
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--posn-border, #e2e8f0);
    border-radius: var(--posn-radius, 8px);
    background-color: var(--posn-bg, #ffffff);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--posn-text, #1e293b);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--posn-transition, 0.2s ease), box-shadow var(--posn-transition, 0.2s ease);
}

.posn-subscribe-filter input[type="search"]::placeholder {
    color: var(--posn-text-muted, #94a3b8);
}

.posn-subscribe-filter input[type="search"]:focus {
    outline: none;
    border-color: var(--posn-primary, #681F7A);
    box-shadow: 0 0 0 3px var(--posn-primary-subtle, rgba(104, 31, 122, 0.08));
}

/* One column rather than the multi-column grid used before 4.11.0: the list is now a tree, and an indented child sitting in
   the next column would read as a sibling of whatever is above it. */
.posn-subscribe-categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    min-width: 0;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0 0 0.5rem;
    padding: 1rem;
    border: 1px solid var(--posn-border, #e2e8f0);
    border-radius: var(--posn-radius, 8px);
}

.posn-subscribe-hint {
    margin: 0 0 1rem;
    color: var(--posn-text-muted, #94a3b8);
    font-size: 0.875rem;
    line-height: 1.625;
}

.posn-subscribe-empty {
    margin: 0;
    color: var(--posn-text-muted, #94a3b8);
    font-size: 0.875rem;
}

.posn-subscribe-categories legend {
    padding: 0 0.5rem;
    font-weight: 500;
    color: #333;
}

.posn-subscribe-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    line-height: 1.5;
    cursor: pointer;
}

/* One step per level of the category tree. Capped at four in the markup, which is deeper than this taxonomy is ever nested. */
.posn-subscribe-choice[data-depth="1"] {
    padding-inline-start: 1.25rem;
}

.posn-subscribe-choice[data-depth="2"] {
    padding-inline-start: 2.5rem;
}

.posn-subscribe-choice[data-depth="3"] {
    padding-inline-start: 3.75rem;
}

.posn-subscribe-choice[data-depth="4"] {
    padding-inline-start: 5rem;
}

/* The flex display above would otherwise override the hidden attribute the filter sets. */
.posn-subscribe-choice[hidden] {
    display: none;
}

.posn-subscribe-choice input[type="checkbox"] {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1875rem 0 0;
    accent-color: var(--posn-primary, #681F7A);
}

.posn-subscribe-categories legend + .posn-subscribe-choice {
    grid-column: 1 / -1;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--posn-border, #e2e8f0);
}

.posn-subscribe-consent {
    margin: 0 0 1rem;
    color: var(--posn-text-muted, #94a3b8);
    font-size: 0.875rem;
    line-height: 1.625;
}

/* The honeypot field: taken out of the layout and out of the accessibility tree, never with display none, which some
   automated submitters check for. */
.posn-subscribe-decoy {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.posn-subscribe-actions {
    margin: 0;
}

.posn-subscribe-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 1.5rem;
    border: none;
    border-radius: var(--posn-radius, 8px);
    background: var(--posn-secondary, var(--posn-primary, #681F7A));
    color: #fff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--posn-transition, 0.2s ease), box-shadow var(--posn-transition, 0.2s ease);
}

.posn-subscribe-submit:hover {
    background: var(--posn-primary-hover, #7d2591);
}

.posn-subscribe-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--posn-primary-subtle, rgba(104, 31, 122, 0.08));
}

.posn-subscribe-submit[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

.posn-subscribe-push-on,
.posn-subscribe-push-off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 1.5rem;
    border: 1px solid var(--posn-border, #e2e8f0);
    border-radius: var(--posn-radius, 8px);
    background: #fff;
    color: var(--posn-text, #1e293b);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--posn-transition, 0.2s ease), box-shadow var(--posn-transition, 0.2s ease);
}

.posn-subscribe-push-on:hover,
.posn-subscribe-push-off:hover {
    background: #f8fafc;
    border-color: var(--posn-primary, #681F7A);
}

.posn-subscribe-push-on:focus,
.posn-subscribe-push-off:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--posn-primary-subtle, rgba(104, 31, 122, 0.08));
}

.posn-subscribe-push-on[disabled],
.posn-subscribe-push-off[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Kept in the render rather than hidden with display none: a live region that is taken out of the box tree stops announcing
   what is put into it. Collapsing the margin is enough to reclaim the space. */
.posn-subscribe-message:empty,
.posn-subscribe-push-message:empty {
    margin: 0;
}

.posn-subscribe-message,
.posn-subscribe-push-message {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--posn-text, #1e293b);
}

.posn-subscribe-push {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--posn-border, #e2e8f0);
}

/* The inline-flex display rules above would otherwise override the hidden attribute. */
.posn-subscribe-push[hidden],
.posn-subscribe-push-on[hidden],
.posn-subscribe-push-off[hidden] {
    display: none;
}

/* The notification dialog of the exam search block. The shell (backdrop, card, close button, header) is the download popup's
   own .posn-modal rules in style.css, so only its body needs anything here. */
.posn-notify-modal .posn-subscribe-form,
.posn-notify-modal .posn-subscribe-choices {
    margin: 0;
}

.posn-notify-modal .posn-subscribe-actions {
    margin: 0;
}

.posn-notify-modal .posn-subscribe-submit,
.posn-notify-modal .posn-subscribe-push-on,
.posn-notify-modal .posn-subscribe-push-off {
    width: 100%;
}

.posn-notify-modal .posn-subscribe-push {
    margin-top: 1rem;
    padding-top: 1rem;
}

@media (max-width: 768px) {
    .posn-exam-subscribe {
        padding: 20px;
    }

    .posn-subscribe-submit {
        width: 100%;
    }
}