/*
   Assignment 5 - Your Personal Website
   Family Page

   Author: James Lynch
   Date: 09/28/2026
*/

/* Family table container */
.familyTable {
   width: 100%;
   overflow-x: auto;
   margin: 20px 0;
}


/* Main table */
.familyTable table {
   width: 100%;
   border-collapse: collapse;
   background-color: #ffffff;
   border: 2px solid #333333;
}


/* Table caption */
.familyTable caption {
   padding: 10px;
   font-size: 1.5em;
   font-weight: bold;
   color: #333333;
}


/* Table headings */
.familyTable th {
   background-color: #2f5d8c;
   color: white;
   border: 1px solid #333333;
   padding: 12px;
   text-align: left;
}


/* Table cells */
.familyTable td {
   border: 1px solid #333333;
   padding: 12px;
   vertical-align: top;
}


/* Alternating row colors */
.familyTable tbody tr:nth-child(even) {
   background-color: #eaf2f8;
}

.familyTable tbody tr:nth-child(odd) {
   background-color: #ffffff;
}


/* Highlight rows when the mouse is over them */
.familyTable tbody tr:hover {
   background-color: #d6eaf8;
}


/* Table footer */
.familyTable tfoot td {
   background-color: #2f5d8c;
   color: white;
   font-weight: bold;
   text-align: center;
}


/* Mobile table layout */
@media screen and (max-width: 600px) {

   .familyTable {
      width: 100%;
      overflow-x: visible;
   }

   .familyTable table {
      width: 100%;
      border: none;
   }

   .familyTable thead {
      display: none;
   }

   .familyTable tbody,
   .familyTable tr,
   .familyTable td {
      display: block;
      width: 100%;
      box-sizing: border-box;
   }

   .familyTable tr {
      margin-bottom: 20px;
      border: 2px solid #333333;
      background-color: #ffffff;
   }

   .familyTable td {
      border: none;
      border-bottom: 1px solid #cccccc;
      padding: 10px;
      padding-left: 45%;
      position: relative;
      min-height: 20px;
   }

   .familyTable td:last-child {
      border-bottom: none;
   }

   .familyTable td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      top: 10px;
      width: 40%;
      font-weight: bold;
      color: #2f5d8c;
   }

   .familyTable tfoot {
      display: block;
   }

   .familyTable tfoot tr {
      border: none;
   }

   .familyTable tfoot td {
      display: block;
      width: 100%;
      padding: 12px;
      background-color: #2f5d8c;
      color: white;
      text-align: center;
   }
}