/* 
  Basic Styles for Tables, including Responsive "stack" under @992px

    bespoke styles for tables in pages:
      - pages/semester-hours.css

  */


/* override bs barrio bs fonts for tables*/

table,
.table {
  font-size: var(--ua-type-size-0);
  line-height: var(--ua-line-height-ui);
}

.table th,
.table td {
/*   padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6; */
  /* padding: calc(0.33*var(--row-gap-sm)) var(--column-gap-md); */
}

.table thead th {
 /*  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6; */
}


/*  
    STACKED version

    * make everything display block so it 
    * aligns vertically
    */

    /* Labeling:
    * adding a data-title attribute to the cells
    * lets us add text before the content to provide
    * the missing context
    * 
    * Markup: 
    *   <td data-title="Column Header">Content Here</td>
    * 
    * Display:
    *   Column Header: Content Here
*/

@media all and (max-width: 992px) {
    table
    .table {
      display: block;
      width: 100%;
      
      font-size: var(--ua-type-size-0);
      line-height: var(--ua-line-height-ui);
    }

    table td,
    table th,
    .table td,
    .table th {
      text-align: left;
      white-space: wrap;
      min-width: unset;
      padding: var(--row-gap-sm) var(--column-gap-md);
    }
    table caption {
      display: block;
    }
    table thead {
      display: none;
      visibility: hidden;
    }
    table tbody, table tr, table th, table td {
      border: 0;
      display: block;
      padding: 0;
      text-align: left;
      white-space: normal;
    }
    th:first-of-type {
       width: unset;
    }

    table tr {
      margin-bottom: 1.5em;
    }
    table th[data-title]:before,
    table td[data-title]:before {
      content: attr(data-title) ": ";
      font-weight: bold;
    }
    table th:not([data-title]) {
      font-weight: bold;
    }
    table td:empty {
      display: none;
    }

}
