/*
 * «Програми підвищення кваліфікації (автоматично)» (layout
 * qualification_programs) of the department block page: the catalog laid
 * out as the electives' (page-elective-courses.css) — the search and the
 * choices, then every programme an accordion with a bordered heading and,
 * open, its table of themes under the navy heading row. No rounding, no
 * shadows, no red (the owner's rules). Also the finder of the section's page.
 * Loaded only where the block is (enqueue.php); page-department.css comes first.
 */

/* The list's navy rule; on graphite a navy line would vanish, so it takes the accent, as the alumni pages do. */
.dept-pk {
  --dept-pk-rule: var(--color-blue-200);
  background-color: var(--color-bg-primary);
}

html[data-theme="dark"] .dept-pk {
  --dept-pk-rule: var(--color-accent);
}

/* The selects' chevron, in the heading's colour of each theme: drawn, since the
   native arrow sat against the edge and the finder's lines had none. */
.dept-pk,
.dept-pk-finder {
  --dept-pk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316295b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .dept-pk,
html[data-theme="dark"] .dept-pk-finder {
  --dept-pk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f6f3ef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.dept-pk--partners {
  background-color: var(--color-bg-secondary);
}

.dept-pk__intro {
  max-width: 62rem;
  margin: 0 0 28px;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------ filters */

/* As the electives' catalog: the search across, the choices under it, then how many and «Розгорнути всі». */
.dept-pk__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
  scroll-margin-top: calc(var(--dept-header-h, 0px) + var(--dept-subnav-h, 48px) + 24px);
}

.dept-pk__filters[hidden] {
  display: none;
}

.dept-pk__filter {
  display: block;
  min-width: 0;
  margin: 0;
}

.dept-pk__filter--search {
  grid-column: 1 / -1;
}

.dept-pk__filter .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Two classes: the reset's input[type="search"] sets content-box and outranks one. */
.dept-pk__filter select,
.dept-pk__filter input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1rem;
}

.dept-pk__filter select {
  padding-right: 40px;
  background-image: var(--dept-pk-chevron);
  background-position: right 14px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  appearance: none;
  cursor: pointer;
}

.dept-pk__filter select:focus-visible,
.dept-pk__filter input:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 1px;
}

.dept-pk__bar {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 8px;
}

.dept-pk__count {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.dept-pk__all {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dept-pk__all:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------- dropdowns */

/*
 * The selects as the page draws them (dept-qualification.js): a field-like
 * button with the choice and a chevron, and under it a list — the departments
 * under their faculties' names. The browser's own list on Windows was a long
 * grey column the owner found broken. No rounding; a border, no shadow.
 */
.pk-dd {
  position: relative;
  min-width: 0;
}

.pk-dd__button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 42px 12px 16px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-card) var(--dept-pk-chevron) no-repeat right 16px center / 14px 14px;
  color: var(--color-text-heading);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.pk-dd__button.is-empty {
  color: var(--color-text-primary);
  font-weight: 400;
}

.pk-dd__button:hover,
.pk-dd.is-open .pk-dd__button {
  border-color: var(--dept-pk-rule);
}

.pk-dd__button:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 1px;
}

.pk-dd__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  box-sizing: border-box;
  width: max(100%, 340px);
  max-width: min(480px, 90vw);
  max-height: min(380px, 60vh);
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--dept-pk-rule);
  background-color: var(--color-surface-card);
  overscroll-behavior: contain;
}

.pk-dd__list[hidden] {
  display: none;
}

.pk-dd__group + .pk-dd__group,
.pk-dd__option--all + .pk-dd__group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.pk-dd__group-title {
  padding: 8px 16px 4px;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}

.pk-dd__option {
  padding: 9px 16px;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
}

.pk-dd__option.is-active {
  background-color: rgba(var(--color-tint--rgb), 0.08);
  color: var(--color-text-heading);
}

.pk-dd__option[aria-selected="true"] {
  color: var(--color-link);
  font-weight: 700;
}

.pk-dd__option--all {
  font-weight: 500;
}

/* -------------------------------------------------------- accordions */

/*
 * A programme: a bordered heading on the card's paper — number, the
 * department with its faculty under it, the volume, the cost and a plus —
 * and when open, its table of themes under the navy heading row.
 */
.dept-pk__list {
  display: grid;
  gap: 10px;
}

.dept-pk__item {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-card);
  scroll-margin-top: calc(var(--dept-header-h, 0px) + var(--dept-subnav-h, 48px) + 24px);
}

.dept-pk__item[hidden] {
  display: none;
}

.dept-pk__head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 15rem) minmax(0, 8rem) 24px;
  gap: 8px 24px;
  align-items: center;
  padding: 18px 24px;
  list-style: none;
  cursor: pointer;
}

.dept-pk__head::-webkit-details-marker {
  display: none;
}

.dept-pk__n {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.dept-pk__title {
  display: block;
  color: var(--color-text-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
}

.dept-pk__head:hover .dept-pk__title {
  color: var(--color-link);
}

.dept-pk__unit {
  display: block;
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.dept-pk__volume,
.dept-pk__cost {
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* The plus turns into a minus when the programme is open. */
.dept-pk__toggle {
  position: relative;
  width: 16px;
  height: 16px;
  justify-self: end;
}

.dept-pk__toggle::before,
.dept-pk__toggle::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: var(--color-text-heading);
  transition: transform 0.2s ease;
}

.dept-pk__toggle::after {
  transform: rotate(90deg);
}

.dept-pk__item[open] .dept-pk__toggle::after {
  transform: rotate(0deg);
}

.dept-pk__body {
  padding: 0 24px 24px;
}

.dept-pk__about {
  max-width: 62rem;
  margin-bottom: 16px;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.dept-pk__about p {
  margin: 0 0 6px;
}

.dept-pk__facts {
  color: var(--color-text-secondary);
}

/* The table of themes, as the electives' tables: the navy heading row, hairlines between rows. */
.dept-pk__table-wrap {
  overflow-x: auto;
}

.dept-pk__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.dept-pk__table th,
.dept-pk__table td {
  padding: 14px 12px;
  border: 0;
  color: var(--color-text-primary);
  text-align: left;
  vertical-align: top;
}

.dept-pk__table thead th {
  background-color: var(--color-blue-200);
  color: var(--color-white);
  font-weight: 700;
  vertical-align: middle;
}

.dept-pk__table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.dept-pk__table .dept-pk__col-n {
  width: 3rem;
  padding-left: 16px;
  color: var(--color-text-secondary);
}

.dept-pk__table thead .dept-pk__col-n {
  color: var(--color-white);
}

.dept-pk__theme {
  display: block;
  color: var(--color-text-heading);
  font-weight: 500;
}

.dept-pk__results {
  display: block;
  margin-top: 6px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.dept-pk__modules {
  margin: 0;
  padding: 0 0 0 1.1em;
  list-style: disc;
}

.dept-pk__modules li + li {
  margin-top: 4px;
}

.dept-pk__hours {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.dept-pk__more-about {
  margin-top: 18px;
}

.dept-pk__label {
  margin: 0 0 6px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.dept-pk__competences {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
  line-height: 1.55;
}

.dept-pk__document {
  margin: 16px 0 0;
  color: var(--color-text-primary);
  font-weight: 500;
}

.dept-pk__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 18px;
}

.dept-pk__file {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dept-pk__file:hover {
  color: var(--color-link-hover, var(--color-link));
}

.dept-pk__contacts {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.dept-pk__none {
  margin: 24px 0 0;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------ finder */

/*
 * source «finder» (parts/qualification-finder.php), the section page's way
 * into the catalog: the heading and the link to the whole catalog, then one
 * row of plain fields named above them, as the catalog's own filters, and
 * the button. No rounding.
 */
.dept-pk-finder {
  --dept-pk-rule: var(--color-blue-200);
  background-color: var(--color-bg-secondary);
}

html[data-theme="dark"] .dept-pk-finder {
  --dept-pk-rule: var(--color-accent);
}

.dept-pk-finder__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: 28px;
}

.dept-pk-finder__intro {
  max-width: 46rem;
  margin: 10px 0 0;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.dept-pk-finder__all {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dept-pk-finder__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 16px;
  align-items: end;
  margin: 0;
}

.dept-pk-finder__field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.dept-pk-finder__label {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Two classes: the reset's input[type="search"] sets content-box and outranks one;
   a phone's input rules shrink the type. */
.dept-pk-finder__form .dept-pk-finder__control {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1rem;
  appearance: none;
}

.dept-pk-finder__form select.dept-pk-finder__control {
  overflow: hidden;
  padding-right: 42px;
  background-image: var(--dept-pk-chevron);
  background-position: right 16px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dept-pk-finder__control option {
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
}

.dept-pk-finder__control::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.dept-pk-finder__control:hover {
  border-color: var(--dept-pk-rule);
}

.dept-pk-finder__control:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 1px;
}

.dept-pk-finder__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dept-pk-finder__go {
  min-height: 52px;
  white-space: nowrap;
}

.dept-pk-finder__reset {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.dept-pk-finder__reset:hover {
  color: var(--color-text-primary);
}

@media (max-width: 1199px) {
  .dept-pk-finder__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dept-pk-finder__actions {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------- partners */

.dept-pk__partner + .dept-pk__partner {
  margin-top: 48px;
}

.dept-pk__partner-name {
  margin: 0 0 16px;
  color: var(--color-text-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.dept-pk__partner-name a {
  color: inherit;
}

.dept-pk__partner-contacts {
  margin: 16px 0 0;
  color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
  .dept-pk__head {
    grid-template-columns: 2rem minmax(0, 1fr) 24px;
  }

  /* The volume and the cost go under the name. */
  .dept-pk__volume,
  .dept-pk__cost {
    grid-column: 2;
  }

  .dept-pk__toggle {
    grid-row: 1;
    grid-column: 3;
  }
}

@media (max-width: 767px) {
  .dept-pk-finder__form {
    grid-template-columns: minmax(0, 1fr);
  }

  .dept-pk__filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .dept-pk__head {
    padding: 16px;
  }

  .dept-pk__body {
    padding: 0 16px 16px;
  }

  /* The table is a list of themes: each cell under the one before, named by its column. */
  .dept-pk__table thead {
    display: none;
  }

  .dept-pk__table,
  .dept-pk__table tbody,
  .dept-pk__table tr,
  .dept-pk__table td {
    display: block;
    width: 100%;
  }

  .dept-pk__table tbody tr {
    padding: 12px 0;
    border-top: 2px solid var(--dept-pk-rule);
    border-bottom: 0;
  }

  .dept-pk__table td {
    padding: 6px 0;
  }

  .dept-pk__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .dept-pk__table td.dept-pk__col-n {
    display: none;
  }

  .dept-pk__table td:empty {
    display: none;
  }
}