/* Symfony presentation layer; the design tokens come from the Drupal CSS snapshot. */
.has-fixed-header { padding-top: 80px; }
.webteam-skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; background: white; padding: 1rem; }
.webteam-skip-link:focus { top: 1rem; }
#cookie-banner { z-index: 60; }
#backdrop { z-index: 40; }
#mobile-menu { overflow-y: auto; }
#mobile-menu nav a { padding: .5rem 1rem; }
#mobile-menu nav a:hover, #mobile-menu nav a[aria-current=page] { background: var(--color-background-tertiary); }
[id] { scroll-margin-top: 110px; }
[data-dropdown-toggle] + div { position: absolute; z-index: 55; top: 100%; margin-top: .5rem; }
.webteam-form, .webteam-form-fields { display: grid; gap: 1.5rem; }
.webteam-form-row { display: grid; gap: .5rem; min-width: 0; }
.webteam-form label, .webteam-form legend { color: var(--color-secondary); font-size: .875rem; font-weight: 500; }
.webteam-form label.required::after { content: ' *'; color: var(--color-error); }
.webteam-form input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=file]),
.webteam-form textarea, .webteam-form select {
    width: 100%; border: 1px solid var(--color-border-secondary); border-radius: 4px;
    padding: 12px 16px; background-color: white; color: var(--color-primary); font: inherit;
}
.webteam-form select:not([size]):not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%234B4D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 24px 24px; padding-right: 48px;
}
.webteam-form select[multiple] { background-image: none; padding-right: 16px; }
.webteam-form textarea { min-height: 130px; }
.webteam-form :is(input, textarea, select):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.webteam-form :is(input[type=checkbox], input[type=radio]) {
    appearance: none; position: relative; flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer;
    border: 2px solid var(--color-border-secondary); border-radius: 2px; background: white; box-shadow: none;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.webteam-form input[type=radio] { border-radius: 50%; }
.webteam-form :is(input[type=checkbox], input[type=radio]):hover { border-color: var(--color-brand-dark); }
.webteam-form :is(input[type=checkbox], input[type=radio]):checked { background: var(--color-brand); border-color: var(--color-brand); }
.webteam-form input[type=checkbox]:checked::after { content: ''; position: absolute; top: 3px; left: 7px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.webteam-form input[type=radio]:checked::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: white; }
.webteam-form-row-check { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.webteam-form .webteam-form-row-check > label { flex: 1 1 0; min-width: 0; color: var(--color-primary); font-weight: 400; cursor: pointer; }
.webteam-form-row-check > :is(.webteam-form-errors, .help-text) { flex-basis: 100%; }
.webteam-choice-group { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.webteam-choice-option { display: inline-flex; align-items: center; gap: .5rem; }
.webteam-form .webteam-choice-option label { color: var(--color-primary); font-size: 1rem; font-weight: 400; cursor: pointer; }
.webteam-form .webteam-choice-option label.required::after { content: none; }
.webteam-form .webteam-pills { gap: .5rem; }
.webteam-form .webteam-pills label {
    display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 20px;
    border: 2px solid var(--color-border-secondary); border-radius: 100px; background: var(--color-background-secondary);
    color: var(--color-secondary); font-size: 1rem; font-weight: 600; white-space: nowrap; user-select: none;
    transition: border-color .15s ease-in-out, color .15s ease-in-out;
}
.webteam-form .webteam-pills label:hover { border-color: var(--color-brand); }
.webteam-form .webteam-pills input:checked + label { border-color: var(--color-brand); color: var(--color-brand); }
.webteam-form .webteam-pills input:focus-visible + label { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.webteam-form-row-file { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 0; }
.webteam-form-row-file > .webteam-form-errors { flex-basis: 100%; }
.webteam-form-row-file > .help-text, .webteam-file-name:not(:empty) { margin-left: .75rem; }
.webteam-form-row-file > .webteam-form-errors ~ .help-text { margin-left: 0; }
.webteam-form .webteam-file-trigger { display: inline-flex; align-items: center; gap: .75rem; color: var(--color-brand); font-size: 1rem; font-weight: 600; cursor: pointer; transition: color .15s ease-in-out; }
.webteam-form .webteam-file-trigger:hover { color: var(--color-brand-dark); }
.webteam-form .webteam-file-trigger.required::after { content: none; }
.webteam-form .webteam-file-trigger.required > span::after { content: ' *'; color: var(--color-error); }
.webteam-form .webteam-file-trigger svg { flex: none; width: 24px; height: 24px; }
.webteam-form input[type=file]:focus-visible + .webteam-file-trigger { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.webteam-form input[type=file][aria-invalid=true] + .webteam-file-trigger, .webteam-form .webteam-file-trigger.webteam-invalid { color: var(--color-error); }
.webteam-form .webteam-pills input[aria-invalid=true] + label { border-color: var(--color-error); }
.webteam-file-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--color-tertiary); font-size: 1rem; font-weight: 600; }
.webteam-form .help-text { color: var(--color-tertiary); font-size: 1rem; }
.webteam-visually-hidden, .webteam-form .webteam-pills input, .webteam-form .webteam-form-row-file input[type=file] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.webteam-form-errors { color: var(--color-error, #c00); font-size: .875rem; }
.webteam-form-errors li { color: inherit; }
.webteam-form :is(input, textarea, select):is([aria-invalid=true], .webteam-invalid), .webteam-form .webteam-pills label.webteam-invalid { border-color: var(--color-error); }
.webteam-form :is(input, textarea, select).webteam-valid { border-color: var(--color-brand); }
.webteam-form button[type=submit] { justify-self: start; }
.webteam-form button[type=submit]:disabled { cursor: not-allowed; }
.webteam-form .webteam-full-width { grid-column: 1 / -1; }
.webteam-pagination { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.webteam-pagination [aria-current=page] { font-weight: bold; color: var(--color-brand); }
@media (min-width: 687px) {
    .webteam-form-columns > .webteam-form-fields { grid-template-columns: 1fr 1fr; }
    .webteam-filters > .webteam-form-fields { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
.webteam-filters { margin-bottom: 2rem; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    #mobile-menu { transition: none; }
}
