/* =============================================================
   courses-shared.css
   Shared course display styles for online.umb.edu and courses.umb.edu

   Link order on each site:
     1. parent umb.edu theme (provides --color-blue and the other tokens)
     2. courses-shared.css   (this file)
     3. online.umb.edu.css OR courses.umb.edu.css   (per-site overrides last)

   Rule of thumb for this file: anything a browse-only visitor sees on a
   course finder, course list, or course detail page. No cart, no
   registration, no FormAssembly. Those stay in online.css.

   Bare element selectors from the original online.css (h2, .hero__title,
   .description, etc.) have been scoped to .course_list or .course_detail
   so they no longer leak into every page on either site.
   ============================================================= */


/* ---------- Course finder / list: search + filters ---------- */

#searchBarForm {
  margin: 0;
}

.suspender {
  margin: 0;
  padding: 0;
}

#searchoptionsGeneric {
  padding-top: 2em;
  padding-bottom: 2em;
}

#searchoptions-filters span.remove {
  margin-left: 5px;
}

.course_list #searchoptions {
  border-bottom: 5px solid var(--color-blue);
  background-color: rgba(250, 250, 243, var(--tw-bg-opacity));
  color: black;
}

.filter-padding {
  padding: 2em 0;
}

@media only screen and (max-width: 64em) {
  .filter-by {
    display: none;
  }
}

@media only screen and (min-width: 64em) {
  #togglesearchoptions-btn {
    display: none !important;
  }
  .course_list #searchoptions {
    border-bottom: none;
    background-color: var(--color-blue);
    color: white;
  }
  .filter-padding {
    padding: 0 1em 1em 0;
  }
  .filter-by {
    margin-bottom: 5px;
  }
}

#togglesearchoptions-btn {
  display: block;
  padding: 1em 30%;
  text-align: center;
}

details summary#togglesearchoptions-btn:after {
  top: 6px;
  right: -1px;
}

details summary#togglesearchoptions-btn:before {
  content: "Show ";
}

details[open] summary#togglesearchoptions-btn:before {
  content: "Hide ";
}

.course_list #searchoptions .filter__options details {
  border-bottom: 1px solid black;
}

.course_list #searchoptions .filter__options details[open] {
  border-bottom: none;
}


/* ---------- Course finder / list: results + program names ---------- */

.course_list .results__current {
  border-bottom: 2px solid #ddd;
  padding-left: .6em;
}

.results__current {
  padding: 0 clamp(1rem, 0.90rem + 0.49vw, 1.25rem) 0.5rem clamp(1rem, 0.90rem + 0.49vw, 1.25rem);
}

h2.program__name {
  padding: 1em;
}

.program__name-wrapper {
  display: block;
}

.course-links {
  display: flex;
  justify-content: start;
  gap: 2em;
  list-style: none;
  font-weight: 600;
  margin: 0 auto;
  text-align: center;
}

.course-links li {
  display: block;
}

.course-links li a {
  color: #4D4D4D;
  text-decoration: none;
  display: block;
  padding: .7em 0.3em;
}

.course-links li.active a {
  color: var(--color-blue) !important;
  border-bottom: 7px solid var(--color-blue);
}

/* scoped (was bare in online.css) */
.course_list .hero__title {
  max-width: initial;
}

.course_list .hero--sm .hero__media {
  max-height: 10rem;
}

.course_list .page__description {
  padding-top: 1em;
}

.course_list .hero__media img,
.program-finder .hero__media img {
  max-height: 10em !important;
}


/* ---------- Course finder / list: results table + accordion ---------- */

#courseResult {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}

#courseResult,
#courseOverview {
  border-top: none;
  border-spacing: 0;
}

#courseResult th,
#courseResult td {
  padding: 0;
}

#courseResult td.operation a {
  max-width: 50%;
  margin: 1.5em 0;
}

@media only screen and (min-width: 48em) {
  #courseResult td.operation a {
    max-width: unset;
  }
}

#courseResult tr th,
#courseOverview tr th {
  border-bottom: 3px var(--color-blue) solid;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}

#courseResult .umass-course-accordion-header td,
#courseResult .umass-course-accordion-header td:hover {
  background-color: #f3F5FB;
}

#courseResult .umass-course-accordion-content td {
  border-top: transparent .3125rem solid;
  border-bottom: transparent .3125rem solid;
}

#courseResult .umass-course-accordion-content.last-open td {
  border: none !important;
}

#courseResult .umass-course-accordion-content.last-open {
  border-bottom: var(--color-blue-light) .3125rem solid !important;
}

#courseResult .umass-course-accordion-header.open {
  border-top: var(--color-blue-light) .3125rem solid !important;
}

#courseResult .umass-course-accordion-header.open td {
  background-color: var(--color-blue);
  color: white;
  border: none !important;
}

#courseResult .umass-course-accordion-header.open,
#courseResult .umass-course-accordion-header.open:hover {
  background-color: var(--color-blue);
}

#courseResult .umass-course-accordion-header.open td h2.program__name {
  color: white;
  text-decoration: none;
}

#courseResult .umass-course-accordion-title::after {
  font-size: 1.3em;
}

#courseResult .umass-course-accordion-content td {
  border: none;
  background-color: rgba(250, 250, 243, 0.4);
}

#courseOverview tr th {
  position: initial;
}

#courseResult thead tr th {
  text-align: left;
  padding: 1.2em 0;
}

#courseResult thead tr th.course-title {
  padding: 1.2em 1em;
}

#courseOverview tr th,
#courseOverview td {
  text-align: left;
  padding: 0.7em 1em;
  align-content: start;
}

#courseOverview tr th:first-child,
#courseOverview td:first-child {
  padding-left: 0;
}

.course_list .wrapper.general-content-padding.region.flow-space-l.flow:last-child {
  margin-top: 0;
  padding-top: 0;
}

.umass-course-row td,
.umass-course-accordion-header td {
  border-bottom: 2px solid var(--color-gray);
}

.summer-course-accordion-content h2,
.course-accordion-content h2 {
  margin-left: 2em;
}

.course-title {
  width: 35%;
}

/* --- Filter dropdown panels -----------------------------------------
   Subject lists every subject code for the term (70 for Summer 2026) at
   one row each, so the open panel is taller than the viewport. It is
   position:absolute (.filter__options .content, main0610.css:6847), so
   the page does not grow to fit it and the bottom of the list cannot be
   reached at all. Cap the panel and scroll the list inside it.

   The whole block is inside the same 64em query that makes the panel a
   dropdown in the first place. Below that the panels are stacked in the
   flow of the filter drawer, the page scrolls them normally, and a cap
   would only add a second scroll region inside the first.

   Applied to every filter panel, not just #subject-dets: the short ones
   never reach the cap, and Area of Interest/Gen Ed grow with the data.
   Scoped to .search-filter so it cannot touch the generic .content used
   elsewhere on the page. */
@media (min-width: 64em) {
  .filter__options .search-filter > .content {
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    /* Do not hand the scroll off to the page once the list bottoms out. */
    overscroll-behavior: contain;
    /* Keep the panel on screen when its button sits near the right edge;
       long subject names wrap instead of running past the viewport. */
    max-width: calc(100vw - var(--space-m));
    /* No padding here on purpose. The panel already gets
       padding: var(--space-s) from .c-filter-sidebar details .content
       (main0610.css:6890), the same rule the program finder relies on,
       and a shorthand here outweighs it and flattens all four sides.
       That padding also keeps the scrollbar clear of the labels, since
       the scrollbar sits outside the content box. */
    scrollbar-width: thin;
  }

  /* macOS hides overlay scrollbars until you scroll, so nothing tells you
     the list continues. Giving ::-webkit-scrollbar a width opts the panel
     out of overlay scrollbars in Chrome and Safari and keeps the track
     visible; Firefox gets the same cue from scrollbar-width above. */
  .filter__options .search-filter > .content::-webkit-scrollbar {
    width: 0.5rem;
  }

  .filter__options .search-filter > .content::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background-color: rgba(32, 31, 31, 0.35);
  }

  .filter__options .search-filter > .content::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

/* ---------- Course finder / list: status, tuition, meeting ---------- */

.course-tuition,
.reg_announcement,
.course-meeting {
  font-size: small;
}

.reg_announcement {
  font-weight: 600;
  margin-top: 1em;
}

.reg_announcement:before {
  font-family: 'Material Symbols Outlined';
  content: '\e614';
  font-size: 1.5rem;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 72;
  transition: 250ms ease;
  transition: var(--transition);
  position: absolute;
  margin-left: -27px;
  margin-top: -8px;
  color: var(--color-blue-light);
}

.openforreg {
  flex-direction: column;
}

.openforreg .button {
  padding: 1em 1.5em;
}

@media only screen and (min-width: 48em) {
  .openforreg {
    flex-direction: row;
  }
}


/* ---------- Course overview block ---------- */

.course-overview-header {
  margin-top: 1em;
}

.overview-label {
  position: absolute;
  font-weight: 700;
}

.overview-row {
  border-bottom: 1px solid #eee;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.overview-content {
  text-align: left;
  margin-left: 34%;
}

.overview-row-description {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.overview-row-description .overview-label {
  position: initial;
  margin-bottom: 1em;
}

.overview-row-description .overview-content {
  text-align: left;
}


/* ---------- Course detail: layout + display ---------- */

.course_detail .hero__media::before,
.hero-marketing--full .frame-gradient::before {
  background-image: linear-gradient(-180deg, rgba(0,90,39,0.00) -15%, #000000 100%);
}

@media only screen and (min-width: 64em) {
  .course_detail .hero__media::before,
  .hero-marketing--full .frame-gradient::before {
    background-image: linear-gradient(-180deg, rgba(0,90,39,0.00) 45%, #000000 100%);
  }
}

/* scoped (was bare h2 in online.css) */
.course_detail h2 {
  margin: 1em 0;
}

.course_detail .announcement {
  margin: 0 auto;
  font-weight: 700;
}

.course-breadcrumbs li:nth-last-child(2) {
  display: none;
}

/* scoped (was bare .hero .button in online.css) */
.course_detail .hero .button {
  min-width: 10em;
}

.course_detail .full-width {
  width: 100%;
  text-align: center;
}

.course-overview {
  line-height: 1.5;
}

.course-overview span {
  font-weight: 700;
  margin-right: 0.5em;
}

.courseDetailsWrapper {
  padding-top: .5em;
  padding-bottom: 2em;
  margin-top: 2em;
}

#courseDetails {
  gap: 2em;
}

#courseOverview {
  margin-top: 1rem;
}

#courseDetails h3,
#courseDetails h4,
#courseOverview h4,
.course-description-heading,
.course-prereq-heading {
  font-size: 1em;
  line-height: 2;
  color: black;
}

#courseDetails h4 {
  color: black !important;
}

.course-description-heading,
.course-prereq-heading {
  line-height: initial;
  margin-top: 1em;
}

#courseDescription,
#coursePrereq {
  margin-top: 0.5em;
}

@media (min-width: 48em) {
  .title-long {
    font-size: clamp(2.00rem, 2.00rem + 3.05vw, 3.375rem);
  }
}

/* scoped (was bare .description in online.css) */
.course_detail .description {
  column-count: 2;
  margin-top: 1.5em;
}

.course_detail .description h3 {
  color: black;
  font-size: 1.3em;
  margin: 1em 0;
}

.course-info-panels p,
.course-info-panels-secondary p {
  margin-top: 1em;
}

.course-info-panels-secondary p {
  margin-bottom: 2em;
}

.tuition-estimate {
  color: #737373;
  line-height: 1.2em;
  margin-top: 1em;
}

.course_detail .hero__media img {
  max-height: 350px;
}

.course_detail .bottom-grid p {
  margin-bottom: 2em;
}

.course_detail .l-page-sidebar > :first-child {
  max-width: initial;
  flex: 2;
}

/* Return to list is browse navigation, so it is shared.
   The .course-registration button styles stay in online.css. */
.button.return-to-list a {
  color: var(--color-blue-dark) !important;
  width: 100%;
}


/* ---------- Shared responsive: course tables on mobile ---------- */

@media only screen and (max-width: 48em) {
  #courseResult table.responsive td {
    padding: 8px;
  }

  .course_list h2 {
    margin: 0;
  }

  .course-title {
    width: 100%;
  }

  .results__current {
    padding-left: 0;
    padding-right: 0;
  }

  .results__list {
    padding-top: 1em;
  }

  .course_list table.responsive,
  .course_list table.responsive thead,
  .course_list table.responsive tbody,
  .course_list table.responsive th,
  .course_list table.responsive td,
  .course_list table.responsive tr {
    display: block;
  }

  .course_list table.responsive td {
    padding: 0.5em 0;
    border: none;
  }

  .course_list table.responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .course_list table.responsive tr {
    padding: 1em;
    border-bottom: 2px solid #eee;
  }

  .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; }

  h2.program__name {
    padding: .5em 0;
    margin: 0;
  }

  .course-tuition {
    font-size: initial;
  }

  .program__name {
    font-size: var(--size-step-1);
  }

  .wrapper_results {
    padding: 0;
  }

  #courseResult th,
  #courseResult td {
    padding: 0 1em;
  }

  #courseResult .umass-course-row[style="display: table-row;"] {
    display: block !important;
  }

  #courseResult .umass-course-accordion-header.open {
    background-color: var(--color-blue);
    color: white;
  }

  #courseResult .umass-course-accordion-header,
  #courseResult .umass-course-accordion-header:hover {
    background-color: #F3F5FB;
  }

  span.results {
    padding: 1.5em;
  }

  nav.pagination {
    padding: 0 1.5em;
  }
}
  
/* Dynamic Semester + Search box */
  
.search-standalone {
   padding-top: 2rem;
   padding-bottom: 2rem;
}

/* .filter__form was built for a single input, so it pushes its two
   children apart. With three children (term, divider, query) the
   fields need to grow instead. */
.course-search__form {
  justify-content: flex-start;
  padding-left: var(--space-m);
  gap: var(--space-s);
}

/* Label above control. min-width:0 so a long placeholder can shrink
   the query field rather than overflowing the pill. */
.course-search__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-width: 0;
}

.course-search__field--term {
  flex: none;
}

.course-search__field--query {
  flex: 1;
  min-width: 0;
}

.course-search__label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-dark);
  cursor: pointer;
  opacity: 0.7;
}

.course-search__select-wrap {
  position: relative;
  display: block;
}

.course-search__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0;
  height: 0;
  margin-top: -0.125rem;
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-top: 0.375rem solid var(--color-dark);
  pointer-events: none;
}

.course-search__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  /* room for the caret */
  padding: 0 1.75rem 0 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--color-dark);
  cursor: pointer;
}

/* Firefox keeps a focus inner-outline on select; kill it and use the
   shared dashed ring below. */
.course-search__select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--color-dark);
}

/* The dropdown list is painted by the OS, not the pill -- it needs its
   own colours or it inherits the transparent background. */
.course-search__select option {
  background-color: var(--color-light);
  color: var(--color-dark);
}

.course-search__divider {
  flex: none;
  width: 1px;
  height: 2.5rem;
  background-color: var(--color-gray);
}

.course-search__form .course-search__input {
  margin-left: 0;
  padding: 0;
  width: 100%;
  font-size: 1.125rem;
  /* Literal 400: must be explicit because .filter__input sets
     var(--font-bold), and there is no regular-weight token to use --
     --font-base is a font-family stack, not a weight. */
  font-weight: 400;
  line-height: 1.2;
}

.course-search__input::-webkit-search-decoration,
.course-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* The shared dashed ring: same one .filter__input:focus-visible gives the
   rest of the search bar (main0610.css:6804). Both controls drop their
   border/appearance, so without this they have no visible focus state. */
.course-search__select.focus-visible,
.course-search__select:focus-visible,
.course-search__form .course-search__input.focus-visible,
.course-search__form .course-search__input:focus-visible {
  outline: 0.0625rem dashed var(--color-blue);
  outline-width: 3px;
  outline-offset: 3px;
}

/* --- Small screens --- */

@media (max-width: 47.99em) {
  .course-search__form {
    flex-wrap: wrap;
    padding-left: var(--space-s);
    border-radius: var(--space-m);
  }

  .course-search__field--term {
    flex: 1;
  }

  .course-search__field--query {
    flex: 1 0 100%;
    order: 3;
  }

  .course-search__divider {
    flex: 1 0 100%;
    order: 2;
    width: auto;
    height: 1px;
  }
}