/* group-form — Create Group. Figma 600:35841. */

.group-form {
    padding-block: var(--wa-space-l);
    max-width: 44rem;
}

.group-form__breadcrumb,
.group-form__event-name {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.group-form h1 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    font-size: var(--wa-font-size-2xl);
    margin-block: var(--wa-space-s);
}

/* Scoped under .group-form rather than a dedicated class — the heading is
   structural to this screen and gains nothing from a name. */
.group-form h2 {
    font-size: var(--wa-font-size-s);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wa-color-text-quiet);
    margin-block: var(--wa-space-l) var(--wa-space-s);
    padding-top: var(--wa-space-m);
    border-top: 1px solid var(--wa-color-surface-border);
}

.group-form__error-summary {
    margin-bottom: var(--wa-space-l);
    padding: var(--wa-space-m);
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-lowered);
}

.group-form__error-summary h2 {
    font-size: var(--wa-font-size-s);
    text-transform: none;
    letter-spacing: normal;
    border-top: none;
    padding-top: 0;
    margin-block: 0 var(--wa-space-s);
}

.group-form__errors {
    margin: 0;
    padding-left: var(--wa-space-l);
}

.group-form__errors li {
    font-size: var(--wa-font-size-s);
    padding-block: 0.125rem;
}

/* Web Awesome elements are reachable from outside ONLY for layout properties,
   custom properties, and ::part() — a BEM class cannot style internals that
   live in a shadow root. */
.group-form wa-input {
    display: block;
    margin-bottom: var(--wa-space-m);
}