@import url("magic-abbr.css");/* Note: Relative Link. Must be a sibling with this CSS file. */

TABLE.full-width{
  width:100%;
}

 TABLE{
  border-collapse:collapse;
  
  TH {padding:.5rem;}
  TD {padding: 1rem .5rem;}
  TD:first-of-type{padding-left:1rem}
  TD:last-of-type{padding-right:1rem}
  
  TD A:any-link{
      text-decoration:none;
      
      &:hover{text-decoration:underline;}
  }
  TD A[href^="mailto"] B{
     white-space: nowrap; 
  }
  TD A[href^="tel"] SPAN.ac::AFTER{
         content:'-';
  }
}

TD.email > A:any-link {
    
    & > B{
        display:inline-block;

    }

    & > SPAN.tld {
        font-size:clamp(11px,2.75vw,17px);
        display:inline-block;
    }

   &:hover{
        B, SPAN.tld{text-decoration:underline}
    }
}

@media (max-width:992px){
    TABLE TD A[href^="tel"] SPAN.ac::BEFORE {content:'(';}
    TABLE TD A[href^="tel"] SPAN.ac::AFTER  {content:') ';}
    TD.phone > A[href^=tel],TD.email > A[href^=mailto]{
        padding-bottom:.2rem; display:inline-block;
    }
    
    TD.phone:not(:empty)::BEFORE {
        content: '\260E';
        position:absolute;
        translate:-118%;
        color:#007;
    }
    
    TD.email::BEFORE{
        content: '\2709';
        position:absolute;
        translate:-118%;
        color:#007;
    }
    
    TD.email > A:any-link {
        line-height:.5;
        
        & > B,& > SPAN.tld{
            padding-bottom: .2rem;
        }
    }
    
}

@media (min-width:1200px){
    TD[scope='row'],SPAN.clarification {white-space:nowrap}
}

.row TABLE TD A:any-link:hover{text-decoration:underline;}

TABLE.condensed{
  border-collapse:collapse;
  
  TH,TD {padding:.25rem;}
}

TABLE>THEAD>TR>TH{
    background-color:#002f87;
    background-color: var(--ung-blue, #002f87);
    color: white;
}

@supports ( background-color: attr(data-header-color type(<color>)) ){
    TABLE[data-header-bgcolor]{
      --hdrBgdClr:attr(data-header-bgcolor type(<color>), var(--ung-blue, #002f87));
      --hdrTxtClr:attr(data-header-color type(<color>));
      
      &>THEAD>TR>TH{
        background-color:var(--hdrBgdClr, var(--ung-blue, #002f87));
        color:var(--hdrTxtClr);
      }
    }
}

TABLE.striped{

  &>TBODY>TR:nth-child(even){
    background-color:#77C1;
  }
}

TABLE{
  &[data-centered-columns*="1"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(1),
  &[data-centered-columns*="2"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(2),
  &[data-centered-columns*="3"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(3),
  &[data-centered-columns*="4"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(4),
  &[data-centered-columns*="5"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(5),
  &[data-centered-columns*="6"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(6),
  &[data-centered-columns*="7"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(7),
  &[data-centered-columns*="8"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(8),
  &[data-centered-columns*="9"]>:is(TBODY,THEAD)>TR>:is(TD,TH):nth-child(9){
    text-align:center
  }
}

TABLE.frozen>THEAD>TR>TH{position:sticky;z-index:1;top:126px;}/* Top Nav Bar Height */

TD:empty::AFTER{content:'—'; margin:0 25%; opacity:.618}/* Margin approximates rule of thirds. Also works well when parent{align:center} */

B[data-campus]{
    /* position:relative; */

    &::BEFORE{
        font-family: 'Font Awesome 5 Free';
        content: "\F3C5"; /*fa-map-marker-alt*/
        font-size: 0.65em;
        text-shadow: 0.5px 1px .5px #000A;
        translate: -130% 18%;
        position: absolute;
    }

    &[data-campus='D']::BEFORE{color:#ffc62f;}
    &[data-campus='G']::BEFORE{color:#090;}
    &[data-campus='O']::BEFORE{color:#a12;}
    &[data-campus='C']::BEFORE{color:#808;}
    &[data-campus='B']::BEFORE{color:#00F;}

    /* Idea #2: Bigger first letter with the campus color. * /
    display:inline-block;
    &[data-campus]::FIRST-LETTER{font-size:larger;}
    &[data-campus='D']::FIRST-LETTER{color:#ffc62f;text-shadow:0 0 1.6px #000c,0 0 .6px #000c,0 0 .6px #000c;}
    &[data-campus='G']::FIRST-LETTER{color:#090;text-shadow:0 0 1.6px #000c,0 0 .6px #000c;}
    &[data-campus='O']::FIRST-LETTER{color:#a12;text-shadow:0 0 1.6px #000c,0 0 .6px #000c,0 0 .6px #000c;}
    &[data-campus='C']::FIRST-LETTER{color:#808;}
    &[data-campus='B']::FIRST-LETTER{color:#00F;} 
    */
}

TD:has(B[data-campus]) {padding-left:1.5rem;}

@media (max-width:992px){

TABLE.full-width{/* When switching to 'Card Mode' it shrinks to fit-content. */
width:unset;
margin:0 auto;
}

THEAD{ display:none;}

TBODY{
    display:inline-flex;
    gap:1rem;
    flex-direction:column;
}

TBODY>TR{
    display:grid;
    grid: [row1-start] "name email"  [row2-end]
[row2-start] "jobt phone"  [row2-end]
[row3-start] "dept office" [row3-end];
    border:1px solid #0008;
    border-radius:8px;
    padding:.5rem 1rem;
    max-width: 100%;
}


TBODY>TR>TD{
    padding:0; text-align:left !important; 

    &:nth-of-type(-n+3){ padding-right:1rem; }
    &[scope="row"]{grid-area:name;font-weight:bold;padding-left: 0;}
    &.jobt{grid-area:jobt; font-style:italic}
    &.dept{grid-area:dept;}
    &.email,&.phone,&.office{padding-left:1rem;align-self: center;}
    &.office{grid-area:office;}
    &.email{grid-area:email;}
    &.phonr{grid-area:phone;}
}

.dept SPAN{display:block}

SPAN.clarification {display: block;}

TD.dept,TD.jobt{font-size:smaller;color:#777;line-height:1.4;}

TD.dept{color:#009261}
}