/* ==========================================================================
   SEM TABLE STYLES (DIV-BASED FLEXBOX LAYOUT)
   ========================================================================== */
/* Enables smooth animated scrolling across the entire page */
html {
    scroll-behavior: smooth !important;
}

/* Clean, Combined Rule for Semesters */
.sem-container {
    display: none; /* Keeps them hidden until JavaScript sets them to display: "block" */
    width: 100%;
    margin: 20px 0;
    font-family: 'Josefin Sans', sans-serif;
    box-sizing: border-box;
    scroll-margin-top: 100px; /* Perfect spacing cushion for smooth scrolling */
}


/* Shared sizing rules for rows to ensure perfect grid alignment */
.sem-row-header,
.sem-row-data {
    display: flex;
    align-items: flex-start;
    padding: 14px 15px;
    box-sizing: border-box;
}

/* Table Header Row Customizations */
.sem-row-header {
    background-color: #EA8E00;
    color: #ffffff;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}

/* Table Body Container */
.sem-body {
    background: #ffffff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    box-sizing: border-box;
}

/* Border separation between data entries */
.sem-row-data {
    border-bottom: 1px solid #eeeeee;
}

/* Base column setups */
.sem-col-course {
    flex: 1.5;
    min-width: 60px;
    font-weight: bold;
    color: #333;
    box-sizing: border-box;
}

.sem-col-sem {
    flex: 2;
    min-width: 90px;
    color: #666;
    box-sizing: border-box;
}

.sem-col-subject {
    flex: 6.5;
    color: #222;
    line-height: 1.5;
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
    box-sizing: border-box;
}

/* Header Text Rule Overrides */
.sem-row-header .sem-col-course,
.sem-row-header .sem-col-sem,
.sem-row-header .sem-col-subject {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Footer & Action Controls */
.sem-footer {
    display: flex;
    justify-content: flex-end;
    padding: 20px 15px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.sem-download-btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: #EA8E00;
    color: #ffffff;
    text-decoration: none !important;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.9em;
    box-shadow: 0 4px 6px rgba(234, 142, 0, 0.2);
    transition: transform 0.2s, background-color 0.2s;
}

.sem-download-btn:hover {
    background-color: #cc7a00;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Restricts table width to mirror your semester card columns exactly */
.sem-layout-wrapper {
    width: 100%;
    max-width: 840px;   /* Clamps the table width to line up with the 3 images */
    margin: 0 auto;     /* Centers the box horizontally beneath the cards */
    padding: 0 10px;    /* Keeps a clean safety cushion on mobile layouts */
    box-sizing: border-box;
}

/* Coordinates your container rows to fill this new restricted box */
.sem-container {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px 0 !important;
}