/* 
 * Default styles for PC 
 */  
body {
        background-color: lightblue;
        font-family: Arial, sans-serif;
        margin: 20px;
} /* end body */

/* Common header styling */
h1, h2, h3 {
margin: 20px 0;
}
    
/* Base styles for larger screens */
td {
  width: 50%; /* Each cell takes half the table width */
}

/* Ensure the table cell and image align top-left */
#imageTd {
      vertical-align: top;
      text-align: left;
}

#imageTd img {
      display: block;
}

.nested {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-in-out;
   margin-top: 10px; /* Added margin to push the expanded content down */
}
    
/*
 * Styles for tablets: keep two columns
 */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        background-color: lightgreen;
        font-family: Arial, sans-serif;
        margin: 10px;
    } /* end body */

    td {
      width: 50%; /* Each cell takes half the table width */
      /* display: block;  Might be useful if stacking cells */
    }
    
    #imageTd img {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }
} /* end media */
    
/*
 * Styles for phones 
 */
/* Phone: stack table cells vertically (one column) */
@media (max-width: 768px) {
        body { 
           background-color: lightcoral;
        }
        table, tr, td {
          display: block;
          width: 100%;
}
#imageTd {
        width: 100% !important;
}
#imageTd img {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
}

td {
        vertical-align: top;
        text-align: left;
}
  
/*
 * Create Expandable Lists 
 */
ul {
  list-style-type: none;
  padding: 0;
}
.nested {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-in-out;
   margin-left: 10px;
   width: 100%; /* Adjust width to full container */
}

.nested li {
   width: auto; /* Allows it to expand naturally */
   min-width: 250px; /* Ensures a minimum width */
   padding: 5px 10px; /* Adds some spacing */
   background: #f8f8f8; /* Light background for visibility */
   border-left: 3px solid #ccc; /* Optional left border */
}

.expandable {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8px;
  transition: transform 0.3s ease-in-out;
}

.expanded .icon {
  transform: rotate(90deg);
}