/* ==========================================================================
   Directory
   Searchable/sortable table built by _includes/directory.html.
   Builds on .data-table and .table-scroll (_sass/_components.scss)
   ========================================================================== */

/* ==========================================================================
   Controls
   ========================================================================== */

.directory-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.directory-search input,
.directory-filter select,
.directory-reset,
.directory-pager button {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  color: var(--charcoal);
  background: white;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.directory-search {
  flex: 1 1 18rem;
}

.directory-search input {
  width: 100%;
  appearance: none;
}

.directory-filter select {
  max-width: 16rem;
}

.directory-search input:focus,
.directory-filter select:focus {
  border-color: var(--plum);
}

.directory-reset,
.directory-pager button {
  cursor: pointer;
}

.directory-reset:hover,
.directory-pager button:hover:not(:disabled) {
  border-color: var(--plum);
  color: var(--plum);
}

.directory-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ==========================================================================
   Table
   ========================================================================== */

/* Header labels are real <button>s so sorting is keyboard-operable without
   overriding the th's columnheader role. There is no global button reset on
   this site, so the chrome has to be undone here; the padding moves off the th
   onto the button so the whole cell stays the hit target. */
.directory-table thead th {
  padding: 0;
}

.directory-table thead th button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem; /* matches .data-table th/td */
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  appearance: none;
}

.directory.is-enhanced thead th button {
  cursor: pointer;
}

.directory.is-enhanced thead th button:hover {
  color: var(--plum);
}

.directory-table thead th button:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Empty box reserves the arrow's width so sorting never reflows the header. */
.directory.is-enhanced thead th button::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  margin-left: 0.35em;
  color: var(--plum);
}

.directory-table thead th[aria-sort='ascending'] button::after {
  content: '\2191';
}

.directory-table thead th[aria-sort='descending'] button::after {
  content: '\2193';
}

.directory-table mark {
  padding: 0 0.1em;
  color: var(--plum);
  background: color-mix(in srgb, var(--plum) 12%, transparent);
  border-radius: var(--radius-sm);
}

.directory-table td.directory-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--warm-gray);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.directory-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.directory-count,
.directory-pager {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--warm-gray);
  margin: 0;
}

.directory-pager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* display: flex above would otherwise beat the UA's [hidden] rule. */
.directory-pager[hidden] {
  display: none;
}

.directory-pager button {
  min-width: 2.25rem;
  padding: 0.35rem 0.6rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {

  .directory {
    padding: 16px;
    background-color: var(--warm-white);
    border-radius: var(--radius-lg);
  }

  .directory-table,
  .directory-table tbody {
    display: contents;
  }

  .directory-table thead {
    display: none;
  }

  .directory-table tbody tr,
  .directory-table tbody td {
    display: block;
  }

  .directory-table tbody td:empty {
    display: none;
  }

  .directory .table-scroll {
    display: grid;
    gap: 0.75rem;      
    overflow: none; 
    padding: 10px;
  }

  .directory-table tbody tr {
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-lg);
  }

  .directory-table tbody td {
    padding: 0;
    border: 0;
  }

  .directory-table tbody tr:hover {
    background: white;
  }

  .directory-filter {
    flex: 1 1 100%;
  }

  .directory-filter select {
    width: 100%;
    max-width: 100%;
  }

  /* Stylging for the table cards */

  .directory-table tbody td:nth-child(1) {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
  }

  .directory-table tbody td:nth-child(2) {
    font-size: 0.9rem;
    color: var(--warm-gray);
  }

  .directory-table tbody td:nth-child(3) {
    font-weight: 700;
    color: var(--plum);
  }
  
  .directory-table tbody td:nth-child(2)::before,
  .directory-table tbody td:nth-child(3)::before,
  .directory-table tbody td:nth-child(4)::before {
    content: '';
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    vertical-align: -0.12em;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  

  .directory-table tbody td:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
  }

  .directory-table tbody td:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M271.9 20.2c-9.8-5.6-21.9-5.6-31.8 0l-224 128c-12.6 7.2-18.8 22-15.1 36S17.5 208 32 208l32 0 0 208 0 0-51.2 38.4C4.7 460.4 0 469.9 0 480 0 497.7 14.3 512 32 512l448 0c17.7 0 32-14.3 32-32 0-10.1-4.7-19.6-12.8-25.6l-51.2-38.4 0-208 32 0c14.5 0 27.2-9.8 30.9-23.8s-2.5-28.8-15.1-36l-224-128zM400 208l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zM256 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M271.9 20.2c-9.8-5.6-21.9-5.6-31.8 0l-224 128c-12.6 7.2-18.8 22-15.1 36S17.5 208 32 208l32 0 0 208 0 0-51.2 38.4C4.7 460.4 0 469.9 0 480 0 497.7 14.3 512 32 512l448 0c17.7 0 32-14.3 32-32 0-10.1-4.7-19.6-12.8-25.6l-51.2-38.4 0-208 32 0c14.5 0 27.2-9.8 30.9-23.8s-2.5-28.8-15.1-36l-224-128zM400 208l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zM256 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
  }

  
  .directory-table tbody td:nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }

}

@media (min-width: 641px) {
  .directory.is-enhanced .directory-table {
  table-layout: fixed;
}

  .directory.is-enhanced .directory-table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}