/* reach/templates/donations/page.html: what is needed and where to take it.
 * The notice-* layout is siteinfo-incident.css's, repeated here
 * because each public page loads only its own page file. */

@layer app {

.notice-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-12);
}

.notice-header {
    margin-bottom: var(--spacing-6);
}

.notice-header h1 {
    margin: 0 0 var(--spacing-1);
    font-size: 1.75rem;
    color: var(--color-gray-900);
}

.notice-subtitle {
    margin: 0;
    color: var(--color-gray-600);
}

.notice-section {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.notice-section h2 {
    margin: 0 0 var(--spacing-3);
    font-size: 1.25rem;
}

.donations-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: center;
    margin-top: var(--spacing-4);
}

.donations-zip {
    margin-bottom: var(--spacing-6);
}

.donations-zip-row {
    display: flex;
    gap: var(--spacing-2);
    max-width: 20rem;
    margin-top: var(--spacing-1);
}

.donation-needs,
.dropoff-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-3);
}

.donation-need,
.dropoff-point {
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.donation-need:last-child,
.dropoff-point:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.donation-need h3,
.dropoff-point h3 {
    margin: 0 0 var(--spacing-1);
    font-size: 1rem;
}

.donation-need p,
.dropoff-point p {
    margin: 0 0 var(--spacing-1);
}

.donation-need-quantity {
    font-weight: var(--font-weight-medium);
}

.donation-need-notes {
    color: var(--color-gray-600);
}
}