/* Directory page specific styling for Bootstrap layout */

body.directory {
  padding-bottom: 4rem;
}

.directory-hero {
  width: 100%;
  max-width: 100%;
}

.directory-hero p {
  color: var(--muted);
  margin-bottom: 1rem;
}

.directory-hero .lead {
  font-size: 1.25rem;
  color: var(--brand-light);
  max-width: 100%;
}

.directory .section-title {
  color: var(--unf-blue-light);
  text-shadow: none;
}

.data-table caption {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.data-table thead th:nth-child(-n+2) {
  text-align: center;
}

.data-table td:first-child,
.data-table th:first-child {
  text-align: left;
}

@media (min-width: 992px) {
  .data-table td:first-child,
  .data-table th:first-child {
    min-width: 190px;
  }

  .data-table td:nth-child(2),
  .data-table th:nth-child(2) {
    min-width: 240px;
  }

  .data-table td:nth-child(3),
  .data-table th:nth-child(3) {
    min-width: 320px;
  }
}

.pseudo-link {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  cursor: default;
}

@media (max-width: 768px) {
  body.directory {
    padding-bottom: 3rem;
  }

  .data-table td,
  .data-table th {
    white-space: normal;
  }

  .data-table td:first-child {
    text-align: left;
  }

  .data-table thead th {
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
  }

  .data-table tbody td {
    font-size: 0.9rem;
    padding: 0.45rem 0.55rem;
    border-bottom-color: rgba(136, 170, 204, 0.12);
  }

  .data-table tbody td:nth-child(2) {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .data-table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.045em;
    padding: 0.25rem 0.35rem;
  }

  .data-table tbody td {
    font-size: 0.84rem;
    padding: 0.3rem 0.4rem;
  }

  .data-table tbody td:nth-child(2) {
    font-size: 0.8rem;
  }

  .data-table tbody td:first-child {
    font-size: 0.86rem;
  }
}