/* Global layout */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Aptos', sans-serif; display: flex; line-height: 1.6; color: #333; background: #f4f7f6; }

.sidebar { width: 250px; background: #2c3e50; height: 100vh; position: fixed; color: white; padding: 2rem; z-index: 10; }
.sidebar .logo { font-size: 1.5rem; font-weight: bold; margin-bottom: 2rem; border-bottom: 2px solid #3498db; padding-bottom: 1rem; }
.sidebar ul { list-style: none; }
.sidebar ul li { margin-bottom: 1rem; }
.sidebar a { color: #bdc3c7; text-decoration: none; transition: 0.3s; }
.sidebar a:hover { color: #3498db; }

.content { margin-left: 250px; padding: 4rem 3%; width: calc(100% - 250px); }
section { margin-bottom: 3rem; padding: 2rem 0; }
/* Main Project Title */
h1 {
    font-size: 3.0rem;
    color: #2c3e50;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;       
}
h2 { font-size: 2.5rem; margin-bottom: 2rem; color: #2c3e50; border-left: 5px solid #3498db; padding-left: 1rem; }

/* Styling for the subtitle under the H1 title */
.subtitle {
    font-size: 1.0rem;  
    color: #7f8c8d;          
    font-style: italic;    
    margin-top: -0.5rem;    
    margin-bottom: 3rem;     
    font-weight: 400;        
}

/* Grid Logic uses 2x2 layout */
.grid, .metrics-list, .ethical-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Forces exactly 2 columns */
    gap: 1.5rem; 
    margin: 2rem 0; 
}

/* Outcomes Grid - 3 Columns */
.final-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.5rem; 
}

/* Universal Card Styling */
.card, .metric-item, .outcome-card, .image-box { 
    background: white; 
    padding: 1.5rem; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

.image-box {
    margin-bottom: 3rem; 
}

.card h3, .metric-item h4, .outcome-card h3 {
    font-size: 1.5rem; /* Ensures both h3 and h4 are the same font size */
    margin-bottom: 1rem;    /* add space under card titles */
    color: #3498db;
}

/* Allow images to be responsive */
.responsive-img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto 10px; }
.caption { font-size: 0.85rem; color: #7f8c8d; font-style: italic; text-align: center; }

/* Click to enlarge functionality */
details summary { list-style: none; cursor: zoom-in; outline: none; }
details summary::-webkit-details-marker { display: none; }

/* Style for enlarged (clicked) images */
details[open] img {
    position: fixed; 
    inset: 0; 
    margin: auto;
    max-width: 90vw; 
    max-height: 90vh;
    z-index: 99999; /* Ensure it's above the sidebar */
    cursor: zoom-out;
    outline: 5000px solid rgba(0,0,0,0.8);
    background: white;
    padding: 10px;
    border-radius: 8px;
}

/* Outcome Card Colors */
.card, .metric-item, .outcome-card { border-top: 6px solid #3498db; }
.res { border-color: #3498db; }
.con { border-color: #f39c12; }
.rec { border-color: #27ae60; }

.dark-section { background: #2c3e50; color: white; padding: 4rem 2rem; border-radius: 8px; }

/* Ensure captions inside the dark technical section are white */
.dark-section .caption {
    color: #7f8c8d;
    opacity: 0.8;
}

/* Ensure all text inside a dark section is readable */
.dark-section h2, 
.dark-section p, 
.dark-section h4 {
    color: #ffffff; 
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners work */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

th {
    background-color: #2c3e50; /* To match the side bar */
    color: white;
    text-align: left;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

td {
    padding: 1rem;
    border-bottom: 1px solid #eeeeee;
    color: #444;
}

/* Zebra striping for readability */
tr:nth-child(even) {
    background-color: #f9fbfb;
}

/* Highlights the custom python column  */
td:last-child {
    font-weight: bold;
    color: #27ae60; 
}