/* MECE Handbook Styles - UofA Theme */

/* CSS Variables for Theming */
:root {
    --primary-green: #275d38;
    --primary-gold: #F2CD00;
    --light-grey-bg: #f4f4f4;
    --nav-bg: #e9ecef;
    --dark-text: #333;
    --light-text: #ffffff;
    --italic-text: #555;
    --border-color: #ccc;
    --section-border: #ddd;
}

/* General Body and Layout */
body {
    font-family: Georgia, "Times New Roman", Times, serif;
    line-height: 1.6;
    background-color: var(--light-grey-bg);
    color: var(--dark-text);
    margin: 0;
    padding: 0;
}

/* Full-width Header and Footer */
header, footer {
    background-color: var(--primary-green);
    color: var(--light-text);
    /* MODIFIED: Reduced padding to make banner height wrap the logo */
    padding: 0.5rem 0;
}

/* Inner container to center header/footer/main content */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem; /* Side padding to prevent content from touching edges */
}

/* New Two-Column Layout Wrapper */
.content-wrapper {
    display: flex;
    gap: 1.5rem;
    max-width: 1100px; /* Widen the layout for columns */
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* Header-specific styles */
header .container {
    display: flex;
    align-items: center;
    gap: 15px;
}

header img {
    /* MODIFIED: Reduced height to ~65% of previous size */
    height: 50px;
    width: auto; /* Maintain aspect ratio */
}

header h1 {
    margin: 0;
    /* MODIFIED: Increased font size for visibility */
    font-size: 2.5rem;
    color: var(--primary-gold);
}

footer {
    margin-top: 2rem;
}

footer .container {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* Navigation Menu */
nav {
    flex: 1 0 18%; /* Flex-grow, flex-shrink, flex-basis */
    background-color: var(--nav-bg);
    padding: 0.5rem;
    border-radius: 5px;
    align-self: flex-start; /* Makes column height fit its content */
}

.semester-group {
    margin-bottom: 0.1rem;
}

.semester-group h3 {
    margin-top: 0;
    margin-bottom: 0.05rem;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 0.15rem;
    color: var(--primary-green);
    font-size: 0.8rem; /* Add this line to control the font size */
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start; /* Align items to the top to prevent vertical stretching */
    gap: 0.5rem;
}

.course-button {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.1rem;
    font-size: 0.45rem;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: var(--primary-green);
    font-weight: bold;
    min-height: 0.6rem; /* Ensure consistent height */
    line-height: 0.6rem; /* Vertically center text */
    vertical-align: middle; /* Align content vertically */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.course-button:hover {
    transform: scale(1.55); /* Reduced scale for a subtler effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}

.choice-wrapper {
    position: relative;
    display: flex; /* Use flexbox for better alignment */
    width: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.choice-wrapper:hover {
    transform: scale(1.55);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.choice-button {
    width: 100%; /* Make select fill the wrapper */
    -webkit-appearance: none; /* Remove default styling */
    -moz-appearance: none;
    appearance: none;
    min-height: 0.6rem; /* Ensure consistent height */
    line-height: 0.6rem; /* Vertically center text */
    vertical-align: middle; /* Align content vertically */
    /* Add custom arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23275d38%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.1rem center;
    background-size: 0.4em;
    padding-right: 0.5rem; /* Make space for arrow */
}

/* Content Sections */
main {
    flex: 3 1 70%; /* Takes up the remaining space */
    padding: 0; /* Reset padding */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Adds space between the top and bottom sections */
}

section {
    background-color: var(--light-text);
    border: 1px solid var(--section-border);
    border-radius: 5px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

section h2 {
    margin-top: 0;
    color: var(--primary-green);
}

/* Tab container styles */
.tab-container {
    border-bottom: 1px solid var(--section-border);
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
}

.tab-button {
    background-color: var(--nav-bg); /* Light grey background for inactive tabs */
    border: 1px solid var(--section-border);
    border-bottom: none; /* Remove bottom border to merge with container */
    outline: none;
    cursor: pointer;
    padding: 10px 15px;
    transition: background-color 0.3s;
    font-size: 0.9rem;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark-text);
    margin-right: 5px;
    margin-bottom: -1px; /* Overlap the container's bottom border */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tab-button:hover {
    color: var(--primary-green);
    background-color: #e2e6ea; /* Slightly lighter on hover */
}

.tab-button.active {
    background-color: var(--light-text); /* White background for active tab */
    color: var(--primary-green);
    font-weight: bold;
    /* The border is already set, the background change makes it look connected */
    border-bottom: 1px solid var(--light-text); /* Match content background */
}

.tab-content-wrapper {
    padding: 1.5rem;
    border: 1px solid var(--section-border);
    border-top: none; /* Top border is handled by the tab container */
    background-color: var(--light-text);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 1rem;
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s;
}

/* Add some styling for tables coming from markdown */
.tab-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.tab-content th, .tab-content td {
    border: 1px solid var(--border-color);
    padding: 8px;
    text-align: left;
}

.tab-content th {
    background-color: var(--nav-bg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}