/* UIUC PL/FM/SE Seminar
   Bootstrap 5.3 supplies the page scaffolding (.container, spacing, .display-4,
   .lead). Everything below is this site's own: the header band, the logistics
   box, and the calendar. Both tables are styled here rather than with .table,
   so there is nothing to override. */

:root {
    --illini-blue: rgb(19, 41, 75);
    --illini-blue-deep: rgb(9, 21, 42);
    --illini-orange: rgb(199, 92, 28);
    --illini-orange-deep: rgb(150, 66, 15);
    --accent-next: rgb(37, 99, 164);
    --accent-next-deep: rgb(22, 68, 118);
    --cloud: rgb(247, 248, 250);
    --cloud-dark: rgb(224, 227, 232);
    --muted: #5b6270;
}

body { background-color: var(--cloud); }

#header {
    background: linear-gradient(135deg, var(--illini-blue), var(--illini-blue-deep));
    color: white;
    border-bottom: 3px solid var(--illini-orange);
}

#header .lead { color: rgb(197, 208, 224); }

@media (min-width: 768px) {
    .container { max-width: 960px; }

    table.infobox {
        float: right;
        max-width: 360px;
        margin-left: 1.5rem;
    }
}

a:link { text-decoration: none; }
a:hover { text-decoration: underline; }


/* ---------------- logistics box ---------------- */

table.infobox {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background-color: white;
    border: 1px solid var(--cloud-dark);
    border-top: 3px solid var(--illini-blue);
    font-size: .9375rem;
}

table.infobox td {
    padding: .3rem .9rem;
    vertical-align: baseline;
}

table.infobox tr:first-child td { padding-top: .8rem; }
table.infobox tr:last-child td { padding-bottom: .8rem; }

/* the label column sizes to its longest line and never wraps on its own;
   the <br> in the markup is what breaks "Faculty organizer" over two lines */
table.infobox td.label {
    width: 1%;
    white-space: nowrap;
    color: var(--muted);
    font-weight: 600;
}

table.infobox .nowrap { white-space: nowrap; }


/* ---------------- calendar ---------------- */

table.calendar {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    margin-bottom: .75rem;
}

table.calendar th {
    text-align: left;
    padding: 0 .75rem .4rem;
    border-bottom: 2px solid var(--illini-blue);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

table.calendar td { vertical-align: baseline; }

/* A row with two stacked .talk-title lines is taller than its neighbours;
   center the date/speaker/room against that block instead of its baseline. */
table.calendar tr:has(.talk-title + .talk-title) td { vertical-align: middle; }

/* A two-speaker meeting spans its date/room cells across both <tr>s with
   rowspan, so they should center against the full two-row block rather than
   sit at the baseline of the first speaker's row alone. */
table.calendar td[rowspan] { vertical-align: middle; }

/* One <tbody> per meeting; the border between tbodies (below) is what
   separates meetings, so no zebra striping is needed here. The upcoming
   meeting still gets a faint tint to draw the eye. */
table.calendar tbody.next { background-color: rgba(37, 99, 164, .06); }

table.calendar td.date { color: var(--muted); }
table.calendar td.speaker { font-weight: 600; }
table.calendar td.room { color: var(--muted); }
table.calendar tbody.next td.date { color: inherit; font-weight: 600; }

/* A speaker with two talks gets one .talk-title div per title in the topic
   <td>, so they stack on their own lines instead of running together, with a
   faint rule between them. */
.talk-title + .talk-title {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed rgba(19, 41, 75, .12);
}

/* a break or cancelled week */

/* Cell padding and column widths belong to the table layout only. They live in
   a min-width query rather than being overridden below, because a media query
   adds no specificity: `tbody tr:first-child td` would otherwise outrank the
   narrow-screen reset and leave stray padding on every stacked line. */
@media (min-width: 768px) {
    table.calendar td { padding: .5rem .75rem; }
    table.calendar tbody tr:first-child td { padding-top: .7rem; }
    table.calendar tbody tr:last-child td { padding-bottom: .7rem; }

    /* A two-speaker meeting (two <tr>s in one <tbody>) gets a faint rule
       between the speakers instead of the default row padding. */
    table.calendar tbody tr + tr td {
        padding-top: .5rem;
        border-top: 1px dashed rgba(19, 41, 75, .12);
    }

    table.calendar .col-date { width: 7.5rem; white-space: nowrap; }
    table.calendar .col-room { width: 6.5rem; white-space: nowrap; }
    table.calendar th.col-room,
    table.calendar td.room { text-align: right; }

    table.calendar tbody + tbody > tr:first-child > td { border-top: 1px solid var(--cloud-dark); }
    table.calendar tbody.next tr:first-child td:first-child { box-shadow: inset 3px 0 0 var(--accent-next); }
}

.badge-next,
.badge-external {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-left: .35rem;
    vertical-align: .12em;
}

.badge-next { color: var(--accent-next-deep); }

.badge-external {
    color: var(--illini-blue);
    border: 1px solid currentColor;
    border-radius: 2px;
    padding: 0 .3rem;
}


/* ---------------- misc ---------------- */

ul.topics { column-count: 2; column-gap: 2rem; clear: right; }
ul.topics li { break-inside: avoid; }

footer {
    border-top: 1px solid var(--cloud-dark);
    color: var(--muted);
    font-size: .9375rem;
}


/* ---------------- narrow screens ---------------- */

@media (max-width: 767.98px) {
    ul.topics { column-count: 1; }

    /* each meeting becomes a block, with the date as a label above it */
    table.calendar thead { display: none; }
    table.calendar,
    table.calendar tbody,
    table.calendar tr,
    table.calendar td { display: block; width: auto; }

    table.calendar { margin-top: .5rem; }
    table.calendar tbody { padding: .6rem .75rem; }
    table.calendar td { padding: 0; }
    table.calendar tbody + tbody { margin-top: .25rem; }
    table.calendar tr + tr {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px dashed rgba(19, 41, 75, .12);
    }
    table.calendar td:empty { display: none; }

    table.calendar td.date {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        margin-bottom: .15rem;
    }

    table.calendar td.room { font-size: .875rem; margin-top: .15rem; }
    table.calendar td.room:not(:empty)::before { content: "Room "; }
    table.calendar tbody.off td.room { display: none; }

    table.calendar tbody.next { box-shadow: inset 3px 0 0 var(--accent-next); }
}