body {
    font-family: Arial, sans-serif;
    background-color: #fffdf6;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* SCROLL CONTAINER & SCROLL BAR */
.scroll-container {
    padding-top: 15px;
    padding-bottom: 10px;
    position: absolute;
    top: var(--nav-height); /* start right below the navbar */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto; /* scroll only in this area */
    padding-right: 3%;
    padding-left: 3%;
    box-sizing: border-box; /* make padding included in width */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */ /* Smooth scrolling performance */
    scroll-behavior: smooth;
    will-change: scroll; /* hints browser to optimize scroll */
}

/* ===== SUMMARY SECTION ===== */
.summary-section {
    position: relative;
    background: #ffffff; /* pure white for better readability */
    padding: 4px 20px 10px;  /* less top rightleft /bottom padding */
    border-left: 4px solid #ffc71d; /* accent */
    border-radius: 8px;
    margin-top: 16px; /* or 20px, adjust as needed */
    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.15); /* x-offset, y-offset, blur, color */
}

.summary-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #012650;
    margin-bottom: 14px;
}

.summary-content p {
    font-family: "Inter", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 14px;
}

.summary-content a { /*LINKS THAT SHOW UP IN TABLE*/
    color: #007BFF; /* Bright blue */
    text-decoration: underline;
}

.summary-content a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: none;
}

.summary-arrow {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #012650;
    border-bottom: 2px solid #012650;
    transform: translate(calc(-50% + 2px), 0) rotate(45deg); /* shifts slightly for border */
    transition: transform 0.35s ease;  /* HERE */
    pointer-events: none;
    display: none; /* Fade and arrow hidden on desktop */
}

/* MOBILE STYLING */
@media (max-width: 768px) {
    .summary-section {
        cursor: pointer;
        position: relative;
        padding-bottom: 0; /* footer handles spacing */
        padding: 2px 15px 10px;  /* less top rightleft /bottom padding */
    }

    .summary-title {
        margin-bottom: 0px;
    }

    .summary-footer { /* Footer zone */
        position: relative;
        height: 36px;              /* space between line and bottom */
        display: flex;
        align-items: center;       /* vertical centering */
        justify-content: center;   /* horizontal centering */
    }

    .summary-content {
        max-height: 9.9em;
        overflow: hidden;
        transition: max-height 0.45s ease-out;
    }

    .summary-content.expanded {
        max-height: 2000px;
    }
    
    .summary-section::after { /* Divider line */
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 36px; /* sits exactly above footer */
        height: 1px;
        background: #ccc;
        opacity: 0.3;
    }

    .summary-arrow { /* Arrow below fade, vertically centered in its small rectangle */
        display: block;
        width: 12px;
        height: 12px;
        border-right: 2px solid #012650;
        border-bottom: 2px solid #012650;
        transform: translateY(1px) rotate(45deg);
        transition: transform 0.35s ease;
        pointer-events: none;
    }

    .summary-section[aria-expanded="true"] .summary-arrow {
        transform: translateY(8px) translateX(-50%) rotate(-135deg);
    }
}

/* ===== ACADEMIC RECORD SECTION ===== */
.academic-record-title {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 36px 0 36px; /* top 40px, bottom 48px for more space */
    color: #012650;
    font-size: 1.8rem;
    font-weight: 700;
}

.academic-record-title::before,
.academic-record-title::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
    margin: 0 16px;
    opacity: 0.4;
}

/* SUMMARY BLOCK */
.academic-summary {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}

.academic-summary > div {
    display: flex;
    align-items: center; /* aligns smaller label to baseline of large value */
    gap: 6px; /* space between label and value */
}

.academic-summary .label {
    font-size: 0.85rem;
    font-weight: 525;
    text-transform: uppercase;
    color: #63676f;
    letter-spacing: 0.08em;

    position: relative;
    top: 1px; /* move label slightly up */
}
.academic-summary .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #012650;
}

/* MOBILE STYLING */
@media (max-width: 768px) {
    .academic-summary {
        flex-direction: column;
        gap: 16px;
    }
}

/* SEMESTER CARD */
.semester-card {
    margin-bottom: 24px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
    background: white;
}

.collapsible { /* COLLAPSIBLE HEADER */
    width: 100%;
    background: linear-gradient(135deg, #001e41 0%, #013168 60%, #034ea3 130%);
    color: white;
    border: none;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    transition: filter 0.1s ease;
}

.collapsible:hover {
    filter: brightness(1.25);
}

.semester-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.semester-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.semester-left {
    display: flex;
    align-items: center;
}

.metric {
    font-size: 0.9rem;
    opacity: 0.9;
    padding-left: 20px;
}

.metric strong {
    margin-left: 4px;
    font-size: 1.05rem;
    color: #ffc71d;
}

.collapsible-content { /* COLLAPSIBLE BODY */
    max-height: 0;
    overflow-y: hidden;            /* hide vertical overflow */
    transition: max-height 0.45s ease;
}

.collapsible-content.open {
    max-height: 2000px;
}

/* COURSE TABLE */
.course-table {
    width: 100%;
    border-collapse: collapse;
}

.course-table th {
    background: #f0f2f5;
    text-align: left;
    padding: 12px 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #384251;
}

.course-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

.course-table th:nth-child(3), /* Header alignment */
.course-table th:nth-child(4) {
    text-align: center;
}

.course-table td:nth-child(3), /* Cell alignment */
.course-table td:nth-child(4) {
    text-align: center;
}

.course-table col:nth-child(1) { width: 15%; }
.course-table col:nth-child(2) { width: 55%; }
.course-table col:nth-child(3) { width: 15%; }
.course-table col:nth-child(4) { width: 15%; }

.course-table tr:hover {
    background: #f1f3f4;
}

.course-table a { /*LINKS THAT SHOW UP IN TABLE*/
    color: #007BFF; /* Bright blue */
    text-decoration: underline;
}

.course-table a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: none;
}

/* MOBILE STYLING */
@media (max-width: 768px) {
    .horizontal-table-scroll { /* Enable horizontal scroll only on mobile */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
        scrollbar-width: none;            /* Firefox */
    }

    .horizontal-table-scroll::-webkit-scrollbar { /* Custom scrollbar for mobile */
        display: none; /* Chrome, Safari, Edge ADD BACK LATER IF NEEDED  height: 8px;*/
    }

    .course-table {     /* Mobile-specific table sizing */
        min-width: 650px; /* ensures columns fit horizontally */
        max-width: 768px; /* caps table width */
    }

    .semester-title {
        display: inline-block;   /* required for width to apply */
        max-width: 15ch;         /* approx width of two words */
        white-space: nowrap;      /* prevent wrapping */
        overflow: hidden;         /* hide overflow */
    }

    .metric-gpa {  /* Hide GPA metric */
        display: none;
    }

    /* Adjust column widths */
    .course-table col:nth-child(1) { width: 115px; }
    .course-table col:nth-child(2) { width: auto; }
    .course-table col:nth-child(3) { width: 95px; }
    .course-table col:nth-child(4) { width: 95px; }
}

/* ===== FOOTER ===== */
.footer-divider { /* Subtle line above footer */
    height: 1px; 
    width: 100%;          /* full width, or adjust to 80% if you want it shorter */
    margin-top: 2.75rem;       /* space above and below */
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,        /* fully transparent start */
        rgba(0, 0, 0, 0.08) 20%,    /* soft fade in */
        rgba(0, 0, 0, 0.08) 80%,    /* subtle solid in middle */
        rgba(0, 0, 0, 0) 100%       /* fade out to transparent end */
    );
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.3rem 2rem 2rem; /* more top spacing */
    font-size: 0.9rem;
    color: #555; 
    gap: 2rem;
    flex-wrap: wrap; /* stack on mobile */
    line-height: 1.5;
    /* Gradient fade into page background */
    background: linear-gradient(to bottom, rgba(255, 253, 246, 0) 0%, #fffdf6 100%);
    box-shadow: none; /* remove box border */
    border-top: none; /* no top border line */
    position: relative;
}

.footer .left-column, /* Each column takes equal space */
.footer .middle-column,
.footer .right-column {
    flex: 1 1 0;  /* equal width, grows/shrinks */
    text-align: center;
}

.footer .left-column { /* Column spacing on desktop */
    text-align: left;
}
.footer .middle-column {
    text-align: center;
}
.footer .right-column {
    text-align: right;
}

.footer h3 { /* Headings in footer columns */
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.footer a { /* Links and text */
    color: #007BFF;
    text-decoration: none;
}

.footer a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.footer div {
    margin-bottom: 0.25rem;
    color: #666;
}

/* MOBILE STYLING - stack columns vertically */
@media (max-width: 768px) {
    .footer {
        display: flex;
        flex-direction: column;       /* stack columns vertically */
        align-items: flex-start;      /* left-aligned */
        padding: .8rem 1rem 1.75rem; /* top padding first */
        gap: .3rem;                  /* space between sections */
    }

    .footer-divider {     /* Subtle line above footer */
        margin-top: 2rem; 
    }

    .footer .left-column, /* Each column takes full width */
    .footer .middle-column,
    .footer .right-column {
        width: 100%;                  /* full width */
        text-align: left;
        margin-bottom: 0;             /* no extra spacing beyond gap */
        font-size: 0.75rem;           /* smaller text for all columns */
        line-height: 1.05;             /* optional: tighter line spacing */
    }

    .footer h3 { /* Headings smaller on mobile */
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }

    .footer .left-column { /* Extra Notes wrap */
        word-wrap: break-word;
        white-space: normal;
    }
}