/* ==========================================================================
   volunteer.css — in-app volunteering request form
   Layered on top of dar-theme.css + registration.css (.anmeldung skeleton).
   Only adds what the volunteering flow needs: department/subject chips,
   conditional branch panels and the confirmation card.
   ========================================================================== */

.volunteer {
    font-family: var(--dar-font-display, var(--dar-font-latin));
    /* Clears the fixed bar below. */
    padding-top: calc(64px + clamp(12px, 2.5vh, 24px) + env(safe-area-inset-top, 0px));
}

.volunteer button,
.volunteer input,
.volunteer select,
.volunteer textarea,
.volunteer label {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Top app bar — mirrors .top-app-bar in main.css, which this public page
   cannot load. Keep the two in step if the app chrome changes.
   -------------------------------------------------------------------------- */

.vr-appbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(20, 70, 45, .08);
    box-shadow: 0 4px 20px rgba(20, 70, 45, .03);
}

.vr-appbar__inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vr-appbar__zone {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 96px;
    z-index: 2;
}

.vr-appbar__zone--end { justify-content: flex-end; }

/* Dead-centre regardless of how wide the edge zones grow. */
.vr-appbar__zone--logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 0;
    z-index: 1;
}

.vr-appbar__logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.vr-appbar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(20, 70, 45, .08);
    background: #f1f6f3;
    color: var(--dar-green-deep, #144e33);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1),
                background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.vr-appbar__btn:hover {
    background: #fff;
    border-color: var(--dar-green);
    color: var(--dar-green);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(26, 138, 87, .12);
}

.vr-appbar__btn:active { transform: scale(.95); }
.vr-appbar__btn:focus-visible { outline: 3px solid var(--dar-green); outline-offset: 2px; }

.vr-appbar__btn--wide {
    width: auto;
    gap: 6px;
    padding-inline: 12px;
    font-size: .9rem;
    font-weight: 600;
}

.vr-appbar__label { white-space: nowrap; }

/* The language pill collapses first, like the app bar does. The trailing
   action keeps its label longer: a bare house or arrow glyph does not tell
   you whether it leads to the dashboard or to the login screen. */
@media (max-width: 480px) {
    .vr-appbar__zone--start .vr-appbar__btn--wide { width: 44px; padding-inline: 0; }
    .vr-appbar__zone--start .vr-appbar__label { display: none; }
}

@media (max-width: 360px) {
    .vr-appbar__btn--wide { width: 44px; padding-inline: 0; }
    .vr-appbar__label { display: none; }
}

[data-theme="dark"] .vr-appbar {
    background: rgba(25, 35, 29, .88);
    border-bottom-color: var(--dar-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

[data-theme="dark"] .vr-appbar__btn {
    background: var(--dar-surface);
    border-color: var(--dar-border);
    color: var(--dar-text);
}

[data-theme="dark"] .vr-appbar__btn:hover {
    background: var(--dar-surface-hover);
    border-color: var(--dar-green-accent);
    color: #34d399;
    box-shadow: 0 4px 14px rgba(52, 211, 153, .25);
}

/* --------------------------------------------------------------------------
   Page heading — the logo lives in the bar now, so the hero is just a title
   -------------------------------------------------------------------------- */

.vr-head { text-align: center; }

.vr-head__title {
    margin: 0;
    color: var(--dar-green-dark);
    font-weight: 700;
    font-size: clamp(1.35rem, 5vw, 1.7rem);
    line-height: 1.2;
}

[data-theme="dark"] .vr-head__title { color: var(--dar-green-accent, #34d399); }

/* --------------------------------------------------------------------------
   "This is you" note above the prefilled contact step
   -------------------------------------------------------------------------- */

.vr-prefill {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(26, 138, 87, .18);
    border-radius: 12px;
    background: rgba(26, 138, 87, .07);
    color: var(--dar-green-dark);
    font-size: .92rem;
    line-height: 1.45;
}

.vr-prefill i {
    flex: 0 0 auto;
    margin-top: .1rem;
    font-size: 1rem;
    color: var(--dar-green);
}

[data-theme="dark"] .vr-prefill {
    border-color: var(--dar-border);
    background: var(--dar-surface);
    color: var(--dar-text);
}

/* --------------------------------------------------------------------------
   Success screen — next steps instead of a dead end
   -------------------------------------------------------------------------- */

.vr-next {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 1.4rem 0 .4rem;
    text-align: start;
}

.vr-next__card {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .7rem .9rem;
    border: 1px solid var(--dar-hairline, rgba(20, 70, 45, .1));
    border-radius: 14px;
    background: var(--dar-surface, #fff);
    color: var(--dar-green-dark);
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vr-next__card:hover,
.vr-next__card:focus-visible {
    transform: translateY(-1px);
    border-color: var(--dar-green);
    box-shadow: 0 4px 14px rgba(26, 138, 87, .12);
    color: var(--dar-green-dark);
}

.vr-next__card--primary {
    border-color: transparent;
    background: var(--dar-green, #1a8a57);
    color: #fff;
}

.vr-next__card--primary:hover,
.vr-next__card--primary:focus-visible { color: #fff; }

.vr-next__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(26, 138, 87, .1);
    font-size: 1.05rem;
}

.vr-next__card--primary .vr-next__icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.vr-next__text { flex: 1 1 auto; }

.vr-next__chevron {
    flex: 0 0 auto;
    opacity: .55;
    font-size: .95rem;
}

.vr-done__link {
    display: inline-block;
    margin-top: .2rem;
    color: var(--dar-muted);
    font-size: .95rem;
    text-decoration: underline;
}

.vr-done__link:hover { color: var(--dar-green); }

[data-theme="dark"] .vr-next__card {
    border-color: var(--dar-border);
    background: var(--dar-surface);
    color: var(--dar-text);
}

[data-theme="dark"] .vr-next__card--primary {
    border-color: transparent;
    background: var(--dar-green, #1a8a57);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Chips — multi-select pills for departments and school subjects
   -------------------------------------------------------------------------- */

.vr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
}

.vr-chip {
    position: relative;
    display: inline-flex;
}

/* Kept focusable but visually replaced by the label. */
.vr-chip__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.vr-chip__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border: 1.5px solid var(--dar-border);
    border-radius: var(--dar-radius-pill);
    background: var(--dar-surface);
    color: var(--dar-text);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.vr-chip__btn i {
    font-size: 1rem;
    color: var(--dar-muted);
    transition: color .15s ease;
}

.vr-chip__btn:hover { border-color: #cfd6cd; }

.vr-chip__input:checked + .vr-chip__btn {
    background: var(--dar-green-soft);
    border-color: var(--dar-green);
    color: var(--dar-green-dark, var(--dar-green));
}

.vr-chip__input:checked + .vr-chip__btn i { color: var(--dar-green); }

.vr-chip__input:focus-visible + .vr-chip__btn {
    outline: 2px solid var(--dar-green);
    outline-offset: 2px;
}

/* Reached the three-department limit: remaining chips are inert. */
.vr-chip__input:disabled + .vr-chip__btn {
    opacity: .45;
    cursor: not-allowed;
}

.vr-chips--sm .vr-chip__btn {
    padding: .4rem .85rem;
    font-size: .86rem;
}

.vr-chips.has-error + .field-error--group { display: block; }

.vr-chips.has-error .vr-chip__input:not(:checked) + .vr-chip__btn {
    border-color: var(--dar-red);
}

.vr-hint { margin-bottom: .1rem; }

/* --------------------------------------------------------------------------
   Department descriptions — one card per chosen department
   -------------------------------------------------------------------------- */

.vr-descriptions {
    display: grid;
    gap: .6rem;
    margin-top: .75rem;
}

.vr-descriptions:empty { display: none; }

.vr-desc {
    padding: .75rem .9rem;
    border: 1px solid var(--dar-border);
    border-radius: var(--dar-radius-card);
    background: var(--dar-surface);
}

.vr-desc[hidden] { display: none; }

.vr-desc__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .3rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--dar-green-dark, var(--dar-green));
}

.vr-desc__title i { font-size: 1rem; }

.vr-desc__text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--dar-muted);
}

/* --------------------------------------------------------------------------
   Conditional branch panels — revealed by the chosen departments
   -------------------------------------------------------------------------- */

.vr-branch {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid var(--dar-border);
    border-radius: var(--dar-radius-card);
    background: var(--dar-green-soft);
}

.vr-branch[hidden] { display: none; }

.vr-branch__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dar-green-dark, var(--dar-green));
}

.vr-branch__title i { font-size: 1.1rem; }

.vr-branch .form-row + .form-row { margin-top: .9rem; }

.vr-subbranch {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--dar-border);
}

.vr-subbranch[hidden] { display: none; }

/* Yes/No and the three-option pickers wrap instead of squeezing on phones. */
.volunteer .seg { flex-wrap: wrap; }

.volunteer .seg--stack .seg__btn { flex: 1 1 8rem; }

.vr-yesno .seg__btn { min-width: 5.5rem; }

/* --------------------------------------------------------------------------
   Confirmation card
   -------------------------------------------------------------------------- */

.vr-summary { margin-top: 1.2rem; }

.vr-done { text-align: center; }

.vr-done__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: .9rem;
    border-radius: var(--dar-radius-pill);
    background: var(--dar-green-soft);
    color: var(--dar-green);
    font-size: 2rem;
}

.vr-done__title {
    margin: 0 0 .6rem;
    font-size: clamp(1.25rem, 4.5vw, 1.6rem);
    font-weight: 800;
    color: var(--dar-text);
}

.vr-done__text {
    margin: 0 0 .5rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--dar-text);
}

.vr-done__text--muted { color: var(--dar-muted); font-size: .88rem; }

.vr-done .step-nav { justify-content: center; margin-top: 1.3rem; }

@media (max-width: 480px) {
    .vr-branch { padding-inline: .85rem; }
    .vr-chip__btn { font-size: .85rem; padding: .45rem .8rem; }
}