/* reach/templates/siteinfo/response.html: one response's open sites, by
 * city and state. Re-creates the layout the page had under public.css,
 * which public_base.html does not load. The section classes are named
 * notice-* because reach.css already styles .section-header and
 * .section-content for the case form's collapsible sections.
 */

@layer app {

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

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.back-link:hover {
    color: var(--color-primary);
}

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

.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-500);
}

.notice-related {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-sm);
}

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

.notice-section h2,
.notice-callout h2 {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.notice-section h2 {
    padding-bottom: var(--spacing-1);
    border-bottom: 2px solid var(--color-gray-200);
}

.notice-section-body {
    padding: var(--spacing-4);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.notice-section-body > p:first-child {
    margin-top: 0;
}

.site-locations {
    margin: 0;
    padding-left: var(--spacing-6);
}

.site-locations li {
    padding: var(--spacing-1) 0;
}

.notice-sign-in {
    margin: var(--spacing-4) 0 0;
    font-size: var(--font-size-sm);
}

/* Help for a homeowner, set apart from the volunteer sign-up */
.notice-callout {
    padding: var(--spacing-4);
    background: var(--color-brand-soft, var(--color-gray-50));
    border: 1px solid var(--color-brand-soft-border, var(--color-gray-200));
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.notice-callout p {
    margin: 0 0 var(--spacing-3);
}

.notice-callout .notice-callout-more {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 640px) {
    .notice-header h1 {
        font-size: var(--font-size-2xl);
    }
}

}