/* Forms group: contact, donate (+ confirmation), partner, partner registration, thank you.
   Composes tokens and components from ../sewainternational.css. Tokens only, mobile first. */

/* ---------- Form + aside layout ---------- */
.form-layout {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

@media (min-width: 960px) {
    .form-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: var(--space-8);
    }
}

.form-intro { margin-bottom: var(--space-6); }

/* The form surface: one flat card, hairline border, no shadow. */
.form-panel {
    padding: clamp(20px, 4vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.form-panel .form-alert { margin-bottom: var(--space-6); }

.form-messages { margin-bottom: var(--space-5); }
.form-messages .form-alert + .form-alert { margin-top: var(--space-2); }

.form-panel .form-alert,
.form-messages .form-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
}

.form-panel .form-alert .errorlist { flex-basis: 100%; }

/* Fieldsets: a quiet title and a hairline between groups.
   The legend is floated so it behaves like a normal block, not a border label. */
.form-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-group + .form-group {
    margin-top: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.form-group__title {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-5);
    padding: 0;
    font-family: var(--font-text);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy-800);
}

.form-group__title + * { clear: both; }

/* Comment boxes are optional extras: keep them compact (Django renders rows=10).
   The foundation sets a 140px min-height on textareas, so size with min-height too. */
.form-panel textarea { min-height: 8.5rem; height: 8.5rem; }
.form-panel #id_message { min-height: 12rem; height: 12rem; }
.form-panel #id_address { min-height: 5.5rem; height: 5.5rem; }

.label-optional { font-weight: 400; color: var(--ink-muted); }

.form-actions { margin-top: var(--space-2); }

@media (max-width: 599px) {
    .form-actions .btn { width: 100%; }
}

/* ---------- Contact: office details ---------- */
.contact-details {
    padding: clamp(24px, 4vw, 32px);
    background: var(--navy-50);
    border-radius: var(--radius);
}

.contact-details__title {
    margin-bottom: var(--space-2);
    font-size: 1.5rem;
    line-height: 1.2;
}

.detail {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.detail__icon {
    margin-top: 5px;
    font-size: 1rem;
    color: var(--navy-800);
    text-align: center;
}

.detail__label {
    margin-bottom: var(--space-1);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.detail address { color: var(--ink); }

.detail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail__list a { overflow-wrap: anywhere; }

.detail__note {
    margin-top: var(--space-1);
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.hours { display: grid; gap: var(--space-1); max-width: 360px; }

.hours__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--space-4);
}

.hours dt { color: var(--ink-muted); }
.hours dd { font-weight: 500; color: var(--ink); }

.contact-involve { padding-top: var(--space-5); }

/* Tablet: the panel is full width, so lay the details out in two columns
   instead of one tall strip with the hours stretched across it. */
@media (min-width: 600px) and (max-width: 959px) {
    .contact-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-7);
    }

    .contact-details__title,
    .contact-involve { grid-column: 1 / -1; }
}
.contact-involve p { color: var(--ink-muted); }
.contact-involve .button-row { margin-top: var(--space-3); column-gap: var(--space-6); }

@media (max-width: 719px) {
    .detail__list a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Contact: map ---------- */
.map-frame {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--navy-100);
    border-radius: var(--radius);
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 760px) {
    .map-frame { aspect-ratio: 16 / 7; }
}

/* ---------- Donate + partner registration asides ---------- */
.donate-aside__photo { margin: 0; }

.donate-aside__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.donate-aside__help { margin-top: var(--space-5); }
.donate-aside__help p,
.form-aside p { color: var(--ink-muted); }

.form-aside {
    padding: clamp(24px, 4vw, 32px);
    background: var(--navy-50);
    border-radius: var(--radius);
}

.donate-aside__help .detail__list,
.form-aside .detail__list { margin-top: var(--space-3); }

.donate-aside__help .detail__list li,
.form-aside .detail__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
}

.donate-aside__help .detail__list i,
.form-aside .detail__list i { width: 16px; color: var(--navy-800); text-align: center; }

@media (min-width: 960px) {
    .donate-aside,
    .form-aside {
        position: sticky;
        top: calc(var(--header-h) + var(--space-5));
    }
}

/* ---------- Partner ---------- */
.partner-body > h2 { margin-bottom: var(--space-5); }

.partner-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.partner-option {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--line);
}

.partner-option h3 { margin: 0; color: var(--navy-800); }
.partner-option p { max-width: 60ch; color: var(--ink-muted); }
.partner-option .btn { margin-top: var(--space-2); }

@media (min-width: 860px) {
    .partner-option {
        grid-template-columns: 220px minmax(0, 1fr) 15rem;
        align-items: center;
        column-gap: var(--space-7);
    }

    /* Equal-width buttons in a fixed track, so the action column lines up. */
    .partner-option .btn { margin-top: 0; justify-self: stretch; }
}

.partner-note { margin-top: var(--space-6); color: var(--ink-muted); }

/* ---------- Confirmation + thank you ---------- */
.form-done__panel {
    padding: clamp(24px, 5vw, 48px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.form-done__icon {
    display: block;
    margin-bottom: var(--space-5);
    font-size: 2.5rem;
    color: var(--navy-800);
}

.form-done__panel h1 { margin-bottom: var(--space-3); font-size: var(--text-h2); line-height: 1.15; }

.receipt {
    margin-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.receipt__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-1) var(--space-5);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.receipt dt { color: var(--ink-muted); }

.receipt dd {
    min-width: 0;
    font-weight: 500;
    color: var(--ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.receipt__row--total dd {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--navy-800);
}

.form-done__actions { margin-top: var(--space-6); }