/* =============================================================
   courses.umb.edu.css
   Site-specific styles for courses.umb.edu only.

   Loads AFTER courses-shared.css, so anything here overrides the
   shared rules through normal cascade order. No need for !important
   to win against the shared file.

   Keep this file small. Only add a rule here when it is true for
   courses.umb.edu but NOT for online.umb.edu. If both sites need it,
   it belongs in courses-shared.css instead.
   ============================================================= */


/* ---------- Site identity / header ----------
   online.umb.edu uses .header--online and a .site-name in blue.
   Give courses its own header hook so the two never collide.
   Replace the placeholder values with the real courses header design. */

/* .header--courses .header__logo {
     display: flex;
     align-items: center;
     font-weight: bold;
} */


/* ---------- Per-site variable overrides ----------
   If courses ever needs a different accent or spacing while reusing
   the shared course rules, override the token here rather than
   duplicating whole blocks. Example:

   .courses-umb-edu {
     --color-blue: #003a70;
   }
*/


/* ---------- Courses-only tweaks ----------
   Add courses-specific layout or component overrides below. */

.hero__media img {
    max-height: 10em !important;
}

/* Active-filter chips: dev-umass-extra-css.css hides #event-filters with
   display:none, so selecting a filter updates results but the removable chip
   buttons never show. Online (umass-extra-css.css) has no such rule. Override it
   back to visible; the inner .results__buttons.cluster handles the layout. */
#event-filters {
  display: block;
}

.browse-subject__semesters ul {
  display: inline-flex;
  gap: 2rem;
}

/* Tablet and below: the semester links no longer fit on one line beside the
   subject name, so drop out of the flex row and let them stack in normal flow.
   64em is the site's desktop breakpoint (main0610.css), so this is everything
   under it. gap above is inert once display is not flex. */
@media (max-width: 63.99em) {
  .browse-subject__semesters ul {
    display: block;
  }
}

/* A semester and its count are one unit -- "Spring 2026" wrapping away from
   "(22)" reads as two separate links. The theme's .table-force-wrap forces
   white-space:normal on every td/th with !important, so this has to sit on the
   link itself rather than on the cell. */
.browse-subject__semester-link {
  white-space: nowrap;
}

/* ---------- Narrow screens ----------
   This table keeps two real columns at every width: the theme's responsive
   row-stacking is scoped to `.course_list table.responsive` and there is no
   .course_list on this page. Below 48em that leaves the subject column only a
   few words wide, and "American Studies (AMST)" wraps mid-name with the code
   stranded on its own line anyway. Put the code there deliberately instead. */
@media (max-width: 47.99em) {
  .browse-subject__code {
    display: block;
  }
}

/* ---------- Stacked course-search filters ----------
   The small-screen filter layout -- one full-width filter per row, its panel
   opening in the flow underneath it, behind a Show/Hide Filters toggle -- is
   the layout at every width on courses.umb.edu.

   It lives here rather than in courses-shared.css because online.umb.edu still
   wants the desktop dropdown row. Two groups of rules below: overrides of the
   min-width:64em block in courses-shared.css, which this file simply outranks
   by loading later, and overrides of main0610.css / t4-extra-css.css, which
   need the specificity noted on each. */

/* main0610.css:6844 sets width:auto above 64em, which is what lets the filters
   sit side by side in the .cluster row. Full width means one per line, since
   .cluster wraps. */
.c-filter-sidebar .filter__options {
  width: 100%;
}

/* main0610.css:6847 takes the open panel out of the flow above 64em. In the
   flow, the page grows to fit it and pushes the results down instead of the
   panel floating over them. */
.c-filter-sidebar .filter__options .content {
  position: static;
}

/* t4-extra-css.css:1092 pins every .search-filter to height:30px above 1000px
   ("to stop paging jumping on course search") -- fine when the panel was
   absolute and the <details> only ever held its summary, but it now clips the
   open panel to a 30px sliver. The same rule's `border: none` also wipes the
   hairline under each filter (courses-shared.css:91), so that comes back here
   too, along with the companion rule that drops it while the filter is open
   (courses-shared.css:95).

   Led with #searchoptions, not just the classes: that block names two of the
   filters by id (#deg-dets, #area-dets), so Online/In Person and College need
   an id in the selector here or they alone keep the clamp and lose their
   hairline. The !importants are only answering theirs. */
#searchoptions .filter__options .search-filter {
  height: auto !important;
  overflow: visible !important;
  border-bottom: 1px solid black !important;
}

#searchoptions .filter__options .search-filter[open] {
  border-bottom: none !important;
}

/* courses-shared.css:57 hides the Show/Hide Filters summary above 64em, because
   a permanently-open row of dropdowns has nothing to collapse. A stacked column
   is tall enough to be worth collapsing, so bring it back. !important only
   because theirs is !important -- this file already wins on order. */
#togglesearchoptions-btn {
  display: block !important;
}

/* courses-shared.css:59 repaints the filter area blue-on-white above 64em. The
   phone design keeps the cream panel with black text and the blue rule under
   it; these are that block's three declarations restated, so they apply at
   every width. */
.course_list #searchoptions {
  border-bottom: 5px solid var(--color-blue);
  background-color: rgba(250, 250, 243, var(--tw-bg-opacity));
  color: black;
}

/* courses-shared.css:64 tightens the row to `0 1em 1em 0` above 64em, which
   suits filters sitting shoulder to shoulder. Stacked, they want the phone
   spacing back. */
.filter-padding {
  padding: 2em 0;
}

/* The "Filter By" caption is gone from the template -- the Show/Hide Filters
   summary says the same thing in the place people look for it. This rule only
   matters until that template change is deployed, and is inert afterwards. */
.filter-by {
  display: none;
}

/* The panel height cap that keeps a 70-row Subject list from burying the
   results lives in courses-shared.css, inside a min-width:64em query. It was
   written for the dropdown and still suits the stack, so it is not repeated
   here. */

/* Kill the shared "Show "/"Hide " prefix. Both selectors are needed: the
   open-state rule in courses-shared.css carries an extra [open], so a single
   reset wins against the "Show " but loses to the "Hide ". */
details summary#togglesearchoptions-btn::before,
details[open] summary#togglesearchoptions-btn::before {
  content: none;
}

/* Show one label at a time. */
#togglesearchoptions-btn .filters-toggle__label--open,
#togglesearchoptions[open] #togglesearchoptions-btn .filters-toggle__label--closed {
  display: none;
}

#togglesearchoptions[open] #togglesearchoptions-btn .filters-toggle__label--open {
  display: inline;
}

/* Let the site's own caret rotation take effect on this summary. */
details summary#togglesearchoptions-btn::after {
  display: inline-block;
}

/* Light blue background for search bar */
.bg-search-bar {
  background-color: #DDEBF9;
}

/* ---------- Filter bar ----------
   The Show/Hide toggle, the active-filter chips and Clear Filters are one
   wrapping row of pills above the drawer: peers that flow onto as many lines as
   the width needs, rather than a toggle plus a block of chips that jumps to its
   own line the moment the two stop fitting side by side. Below 48em the toggle
   takes the full width, as the phone mockup has it, and the chips wrap under it.

   The toggle here is #filters-toggle, the button in the bar -- not the
   <summary>, which cannot leave its <details>. The script on the page unhides
   the button and marks the drawer .has-js-toggle; with JS off neither happens
   and the rules below leave the summary alone. */

/* No background of its own below the desktop breakpoint: the bar sits inside
   .c-filter-sidebar.bg-blue and lets that band show through, so the toggle is
   part of the search block the way the mockup has it. */
.filters-bar {
  background-color: transparent;

  /* One outline for the three controls in this row -- toggle, chips, Clear
     Filters. They are peers, so they read as a set rather than three borrowed
     button styles. Referenced by every rule below; change it once here. */
  --filters-bar-border: 0.0625rem solid var(--color-blue-dark, #132245);
}

.filters-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs, 0.9375rem);
  padding-top: var(--space-s, 1.25rem);
  padding-bottom: var(--space-s, 1.25rem);
}

/* The chips arrive wrapped in three containers -- the T4 ajax region, the
   #event-filters block and the .cluster -- which made them a single flex item
   beside the toggle: at any width where the two no longer fit, the whole block
   dropped to its own line and re-wrapped inside itself. display:contents drops
   those three boxes out of the layout so every pill is a direct child of the
   row and they all wrap together as one group. The elements stay in the DOM and
   keep their ids, ajax groups and roles; only their boxes go.

   Each carries an id in the selector because the rules being answered do too
   (dev-umass-extra-css.css hides #event-filters outright), and no number of
   classes outweighs an id. */
.filters-bar #searchoptions-filters,
.filters-bar #event-filters,
.filters-bar #event-filters .results__buttons {
  display: contents;
}

/* main0610.css:2110 gives .button width:100%, fit-content only from 48em up.
   Sharing one flex line, that makes each chip stretch or shrink to a width that
   has nothing to do with its label. A chip is its text. */
.filters-bar .results__buttons .button {
  width: auto;
}

/* .results__buttons carries the results-header spacing it was written for.
   Nothing above it here to space away from. */
.filters-bar .results__buttons {
  margin: 0;
}

/* The space between a chip's label and its X, and between "Clear Filters" and
   its chevron: 10px in both. courses-shared.css gives the chips 5px, which is
   tight enough that the X reads as part of the last word.

   Led with the id because theirs is `#searchoptions-filters span.remove` -- no
   number of classes outweighs an id, so the class-only version of this rule was
   silently losing on the chips while winning on Clear Filters. */
#searchoptions-filters .results__buttons .button .remove,
#searchoptions-filters .results__buttons .clear-filters .fa {
  margin-left: 0.625rem;
}



/* main0610.css:2129 hangs a margin-bottom:0.5em under every .button. The row
   centres each control on its outer box, so that half-em under the chips lifts
   them relative to the toggle -- which is what reads as a gap above the toggle.
   Off, and the three pills sit on one line. */
.filters-bar .results__buttons .button {
  margin-bottom: 0;
}

/* White by default, navy on hover, for all three controls.

   Every selector here carries three classes on purpose. This row now sits
   inside .c-filter-sidebar.bg-blue, and main0610.css:2141 paints any .button
   under a .bg-blue yellow (ecru on hover) -- two classes, so these outrank it
   without an !important. The chips and Clear Filters have to be named
   separately because .button--outline-reverse (main0610.css:2196) and
   .button.primary start from opposite ends: an outline and a navy fill. */
.filters-toggle,
.filters-bar .results__buttons .button--outline-reverse {
  border: var(--filters-bar-border);
  background-color: var(--color-light, #fff);
  color: var(--color-dark, #201F1F);
}

/* The toggle also holds the hover colouring while the drawer is open, so the
   row shows at a glance that the filters below it are the open ones, and while
   it has focus -- :focus as well as :focus-visible, so a mouse click fills it
   too and the button never sits half-lit. */
.filters-toggle[aria-expanded="true"],
.filters-toggle:hover,
.filters-toggle:focus,
.filters-toggle:focus-visible,
.filters-bar .results__buttons .button--outline-reverse:hover,
.filters-bar .results__buttons .button--outline-reverse:focus-visible {
  background-color: var(--color-blue-dark, #132245) !important;
  color: var(--color-light, #fff) !important;
}

/* Everything about the toggle that is not the shared colouring above. The
   <button> starts from browser defaults rather than the theme's .button, so
   the type and the pill shape are set here. */
/* Everything about the toggle that is not the shared colouring above. The
   <button> starts from browser defaults rather than the theme's .button, so
   the metrics of .button (main0610.css:2108) are restated here -- same padding,
   font size, weight and line-height, so the toggle is the same height as the
   chips beside it rather than a slightly taller pill. */
.filters-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  margin: 0;
  padding: 1rem 2rem;
  border-radius: 5rem;
  font-family: inherit;
  font-size: var(--size-step-s, 0.875rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: var(--transition, 250ms ease);
}

/* The wrapper is exactly one line box tall, so the icon cannot set a taller one
   and make this pill deeper than the chips. The glyph is drawn well above that
   height and simply overhangs, centred and unclipped -- the button's 1rem of
   padding is far more than the ~0.3em it spills, so it can grow further here
   without moving the pill's edges. */
.filters-toggle__icon {
  display: flex;
  align-items: center;
  height: 1em;
}

.filters-toggle__icon svg {
  display: block;
  width: auto;
  height: 1.6em;
}

/* One label at a time, off the same attribute the button exposes to assistive
   tech, so the two can never disagree. */
.filters-toggle .filters-toggle__label--open,
.filters-toggle[aria-expanded="true"] .filters-toggle__label--closed {
  display: none;
}

.filters-toggle[aria-expanded="true"] .filters-toggle__label--open {
  display: inline;
}

/* The button replaces the summary wherever it is running. This wins over the
   display:block !important above because the class adds specificity; the
   !important is only there to answer courses-shared.css. */
#togglesearchoptions.has-js-toggle > #togglesearchoptions-btn {
  display: none !important;
}

/* From the phone breakpoint up the toggle is a pill among the others, sized to
   its label, and the row wraps as one group. Below it, the full width from the
   base rule stands. */
@media only screen and (min-width: 48em) {
  .filters-toggle {
    width: auto;
  }
}

@media only screen and (min-width: 64em) {
  /* Out of the blue search band and onto the page: on desktop the band ends
     with the search field and this row reads as part of the results. */
  .filters-bar {
    background-color: var(--color-light, #fff);
  }
}

/* ---------- Desktop filter panel ----------
   The mockup insets the cream panel to the page's content column and gives the
   filter rows a much slower rhythm than the phone stack -- roughly one 83px row
   per filter at 1440px, with the panel's own padding above and below.

   Desktop only. Below 64em the panel stays full-bleed under the search band,
   which is what the phone mockup shows. */
@media only screen and (min-width: 64em) {
  /* The cream and the blue rule move off the full-bleed band and onto the
     wrapper inside it, so the panel can be inset without wrapping the markup in
     another element. .wrapper's max-width alone would not do it: at any viewport
     narrower than 85rem the wrapper is already full width. */
  .course_list #searchoptions {
    background-color: transparent;
    border-bottom: none;
  }

  /* The drawer itself carries .bg-blue-dark and sits inside .c-filter-sidebar's
     .bg-blue, both of which the full-bleed cream used to cover completely.
     Inset, they would frame the panel in blue -- the mockup has the page
     showing around it, so the drawer paints the page colour instead. Painting
     here rather than clearing .c-filter-sidebar keeps the search band above it
     full-bleed. */
  #togglesearchoptions {
    background-color: var(--color-light, #fff);
  }

  .wrapper_search {
    width: calc(100% - var(--gutter, 3rem) * 2);
    max-width: calc(var(--wrapper-max-width, 85rem) - var(--gutter, 3rem) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-m, 1.875rem);
    padding-right: var(--space-m, 1.875rem);
    background-color: rgba(250, 250, 243, var(--tw-bg-opacity, 1));
    border-bottom: 0.3125rem solid var(--color-blue, #005A8B);
  }

  /* The row rhythm is the summary's own padding, not the gap between filters:
     the hairline under each one has to sit between two evenly spaced rows, and
     a gap would leave it floating in the middle of the space instead. */
  #searchoptions .filter-padding {
    gap: 0;

    /* Asymmetric, as in the mockup: the first row starts almost at the top of
       the panel, while the last one keeps a full row's worth of space above the
       blue rule. */
    padding: 0.5em 0 2em;
  }

  #searchoptions .filter__options .search-filter > summary {
    padding-top: 1.6em;
  }
}

/* ---------- Phone search box ----------
   The phone mockup breaks the one search pill into two: the semester on its own
   full-width pill, the keyword field on a second one below it with the round
   submit button sitting on its right end. courses-shared.css wraps them into a
   single pill divided by a rule, which is what online.umb.edu still shows, so
   the split lives here.

   47.99em is where courses-shared.css already switches this widget to its
   small-screen layout; these rules replace that block rather than adding a
   third breakpoint. */
@media only screen and (max-width: 47.99em) {
  /* The form stops being the pill and becomes the space the two pills sit in.
     .filter__form (main0610.css:6745) is what painted and rounded it. */
  .course-search__form {
    background-color: transparent;
    padding: 0;
    border-radius: 0;

    /* Row gap only: the space between the two pills. Along the row the button
       is meant to sit on the keyword pill, not a gap away from it. */
    row-gap: var(--space-xs, 0.9375rem);
    column-gap: 0;
    align-items: stretch;
  }

  .course-search__field--term,
  .course-search__field--query {
    flex: 1 0 100%;
    background-color: var(--color-light, #fff);
    border-radius: 5rem;
    padding: 0.75rem var(--space-s, 1.25rem);

    /* The semester pill is 4.125rem tall on its own -- a label over a select --
       and the keyword pill is a single input, so without a floor the two would
       be visibly different sizes. The mockup draws them as a matched pair. */
    min-height: 4.125rem;
  }

  /* Was the rule between the two halves of the single pill. There are two
     pills now, and the gap between them says the same thing. */
  .course-search__divider {
    display: none;
  }

  /* Room at the right end for the button that overlaps it. */
  .course-search__field--query {
    flex: 1;
    padding-right: 4rem;
  }

  /* Pulled back onto the keyword pill instead of sitting beside it, so the two
     read as one control the way the mockup draws them. The button is 3rem
     (main0610.css:6761): -3.5rem left and 0.5rem right sit it half an rem
     inside the pill's edge, and the two margins cancel so the pill still
     measures the full width of the form rather than overhanging it. */
  .course-search__form .button-circle {
    order: 4;
    flex: none;
    align-self: center;
    margin-left: -3.5rem;
    margin-right: 0.5rem;
  }
}

/* ---------- Semester caret ----------
   courses-shared.css stretches the select to the full width of its field and
   pins the caret to the right edge, which on the phone pill leaves it stranded
   half a screen from "Summer 2026". Both mockups draw it right after the term,
   so the select shrinks to its content and the caret follows it.

   width:auto on a select sizes to the widest option, so the caret sits in one
   place across every term rather than shifting as the label changes. */
.course-search__select-wrap {
  display: inline-block;

  /* .course-search__field is a flex column, so its children stretch to the
     field's width by default -- the select would shrink to its content but the
     wrapper it is measured against, and the caret pinned to that wrapper, would
     not move an inch. */
  align-self: flex-start;
}

.course-search__select {
  width: auto;
  padding-right: 1.25rem;
}

.course-search__select-wrap::after {
  right: 0;
}

.return-to-search {
  font-weight: 700;
  text-decoration: none;
}

.return-to-search::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: 'Material Symbols Outlined';
  content: '\ef7d';
  font-size: 1.5rem;
  font-weight: 600;
  width: 2.625rem;
  height: 2.625rem;
  margin-right: 1rem;
  border-radius: 100%;
  color: var(--color-dark);
  background-color: var(--color-yellow);
  transition: 250ms ease;
  transition: var(--transition);
  position: relative;
  top: 7px;
  padding: 3px;
}

#courseOverview th,
#courseOverview td {
  border: none !important;
}

/* Mobile table cells specific to courses.umb.edu */
@media only screen and (max-width: 48em) {
    .course_list table.responsive td:before {
      font-weight: 500;
    }
  
    .course_list table.responsive td:nth-of-type(2):before {
      content: "Section: ";
    }
  
    .course_list table.responsive td:nth-of-type(3):before {
      content: "Class #: ";
    }
  
    .course_list table.responsive td:nth-of-type(4):before {
      content: "Status: ";
    }
  
    .course_list table.responsive td:nth-of-type(4):before {
      content: "Status: ";
    }
  
    .course_list table.responsive td:nth-of-type(5):before {
      content: "Time: ";
    }
  
    .course_list table.responsive td.multiple_sections:before {
      content: "" !important;
    }
}

.courses-umb-edu.courses-home .region {
  padding-top: var(--region-space, var(--space-l));
  padding-bottom: 3px;
}

.courses-umb-edu.courses-home .lg\:w-75 {
  width: 100% !important;
}