/*
 * Volunteer pages (public site)
 * =============================
 *
 * Builds on peacock.css; every value comes from theme.css. The admin's tag
 * chips are styled separately, in admin-tags.css.
 *
 *   1. Tag chips          4. Shift lists
 *   2. Tag filter chips   5. Roles and departments
 *   3. Filter bar         6. Achievements
 */

/* 1. Tag chips =========================================================== */
/* An outlined chip: an icon and a name, in one colour. */

.vol-tags { display: inline-flex; flex-wrap: wrap; gap: var(--pc-space-1); }
.vol-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--pc-color-border-strong);
  border-radius: var(--pc-radius-pill);
  font-size: var(--pc-font-size-label);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--pc-color-text-muted);
  user-select: none;
}
.vol-tag__icon {
  font-size: var(--pc-font-size-icon);
  line-height: 1;
  cursor: default;
  user-select: none;
}

/* 2. Tag filter chips ==================================================== */
/* Links that cycle off -> must have -> must not have. */

a.vol-tag { cursor: pointer; text-decoration: none; }
a.vol-tag .vol-tag__icon { cursor: pointer; }
a.vol-tag:hover { color: var(--pc-color-text); border-color: var(--pc-color-text-subtle); }
.vol-tag--include {
  color: var(--pc-color-accent);
  border-color: var(--pc-color-accent-line);
  background: var(--pc-color-accent-soft);
}
.vol-tag--exclude {
  color: var(--pc-color-danger);
  border-color: var(--pc-color-danger-line);
}
.vol-tag--exclude .vol-tag__name { text-decoration: line-through; }
a.vol-tag--include:hover { color: var(--pc-color-accent); border-color: var(--pc-color-accent); }
a.vol-tag--exclude:hover { color: var(--pc-color-danger); border-color: var(--pc-color-danger); }

/* 3. Filter bar ========================================================== */
/* A <details>: open on wide screens (the summary is hidden), a "Filters"
   bar with a count on phones. Active filters repeat as removable chips
   under the bar on phones. */

.vol-filters { border-bottom: 1px solid var(--pc-color-border); }
.vol-filters__toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-3);
  min-height: var(--pc-tap-height);
  padding: 0 var(--pc-space-4);
  font-size: var(--pc-font-size-small);
  font-weight: var(--pc-font-weight-bold);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.vol-filters__toggle::-webkit-details-marker { display: none; }
.vol-filters__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--pc-space-2);
  padding: 0 0.35rem;
  border-radius: var(--pc-radius-pill);
  background: var(--pc-color-accent);
  color: var(--pc-color-on-accent);
  font-size: var(--pc-font-size-label);
}
.vol-filters__chevron { color: var(--pc-color-text-muted); transition: transform 0.15s; }
.vol-filters[open] .vol-filters__chevron { transform: rotate(180deg); }
.vol-filters__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-2);
  padding: var(--pc-space-3) var(--pc-space-4);
  border-bottom: 1px solid var(--pc-color-border);
}
/* Dropdowns on one row; the checkboxes and buttons on the row below */
.vol-filters__form {
  display: grid;
  gap: var(--pc-space-3);
  padding: var(--pc-space-3) var(--pc-space-4);
}
.vol-filters__fields,
.vol-filters__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-3) var(--pc-space-5);
}
.vol-filters__fields { align-items: flex-end; }
.vol-filters__actions { display: flex; align-items: center; gap: var(--pc-space-3); margin-left: auto; }
.vol-active-filters {
  display: none;
  flex-wrap: wrap;
  gap: var(--pc-space-1);
  padding: var(--pc-space-2) var(--pc-space-4);
  border-bottom: 1px solid var(--pc-color-border);
}
.vol-results {
  display: flex;
  justify-content: space-between;
  padding: var(--pc-space-2) var(--pc-space-4);
  border-bottom: 1px solid var(--pc-color-border);
  font-size: var(--pc-font-size-label);
  color: var(--pc-color-text-subtle);
}

/* 4. Shift lists ========================================================= */
/* A table on wide screens; each row stacks on phones. */

.vol-shift__time { width: 11rem; white-space: nowrap; }
.vol-shift__role .vol-tags { margin-top: var(--pc-space-1); }
.vol-shift__openings { white-space: nowrap; color: var(--pc-color-text-muted); }
.vol-shift__reason { font-size: var(--pc-font-size-label); color: var(--pc-color-text-muted); }

/* 5. Roles and departments =============================================== */

.vol-role { display: grid; gap: var(--pc-space-1); padding: var(--pc-space-3) var(--pc-space-4); border-top: 1px solid var(--pc-color-border); }
.vol-role:first-child { border-top: 0; }
.vol-role__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pc-space-2); }
.vol-role__name { font-weight: var(--pc-font-weight-bold); }

/* 6. Achievements ======================================================== */

.vol-achievement { display: grid; gap: var(--pc-space-2); }
.vol-achievement__header { display: flex; align-items: center; justify-content: space-between; gap: var(--pc-space-2); font-size: var(--pc-font-size-small); }

/* Small screens ========================================================== */

@media (max-width: 760px) {
  .vol-filters__toggle { display: flex; }
  .vol-active-filters { display: flex; }
  .vol-filters__fields,
  .vol-filters__options { flex-direction: column; align-items: stretch; }
  .vol-filters__actions { margin-left: 0; justify-content: space-between; }

  .vol-shifts thead { display: none; }
  .vol-shift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "role time" "openings action";
    gap: var(--pc-space-1) var(--pc-space-3);
    padding: var(--pc-space-3) var(--pc-space-4);
    border-bottom: 1px solid var(--pc-color-border);
  }
  .vol-shift:last-child { border-bottom: 0; }
  .vol-shift > td { display: block; padding: 0; border: 0; }
  .vol-shift__role { grid-area: role; }
  .vol-shift__time { grid-area: time; width: auto; color: var(--pc-color-text-muted); }
  .vol-shift__openings { grid-area: openings; align-self: center; }
  .vol-shift__action { grid-area: action; }
}

@media (prefers-reduced-motion: reduce) {
  .vol-filters__chevron { transition: none; }
}