/* LAST UPDATED: 06.26.2024 - SM */

/* NOTE: 
** "Panels"/tabs only appear on /education and /education/gme - both are handcoded 
*** There are slight differences between the two - the /education/gme one has classes that do not appear on /education, and they're both different widths
**** Tabs also appear on the library landing page, and they're also handcoded
***** PLEASE BE CAREFUL OF ANY CHANGES MADE TO TABS, SINCE SOME CHANGES MADE HERE AFFECT THE TABS ON /LIBRARY AND VICE VERSA 
*/

/* These are for the tabs on the "EVMS Programs" on the education page */
.panel {
    /* border-radius: 0.5em; */
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
}

.panel--programs {
    background-color: var(--primary-neutral-light);
    border: 1px solid var(--primary-dark);
    padding: 0;
}

.panel__header {
    background: var(--primary-dark);
    padding: .75em .5em 1em;
    text-align: center;
}

.panel__title {
    color: var(--primary-neutral-light);
    font-family: var(--primary-font-family);
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.panel__body {
    padding: 0;
}

/* Tabs on /library - mostly seem to be Bootstrap overrides */
.tabbed-content ul {
    border-bottom: 1px solid var(--secondary-accent);
    margin-left: 0;
}

.tab-pane {
    margin-left: 20px;
    margin-top: 30px;
    width: 100% !important;
}

.tab-content>.active {
    display: flex;
    flex-direction: column;
}

/* For Bootstrap 4 tabbed content on other pages, like Student Resources */
.nav-tabs {
  border-bottom: 1px solid var(--secondary-accent);
}


.tab-pane ul {
  border: none !important; 
  font-size: 1em !important;
  list-style: disc;
  margin-left: 3em !important; /* ul runs off container otherwise */
  width: 100%;
}

/* 05.30.2024 - Bootstrap overrides for /education */
#vTabs {
  background-color: var(--primary-accent);
  height: 100%;
  margin-left: -1em; /* The list tabs container started veering off a bit after colors, fonts, and border-radiuses were changed */
  margin-top: 0; /* See comment above */
}

.nav-pills .nav-link {
  color: var(--primary-neutral-light);
  font-family: var(--heading-font-family);
  font-size: var(--base-font-size);
  font-weight: 700;
  letter-spacing: 3px;
  padding: 1em;
  text-transform: uppercase;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-neutral-light);
  border-radius: 0; /* Overrides Bootstraps rounded tabs */
  clip-path: polygon(0 20px, 20px 0, 100% 0, 100% 100%, 0% 100%);
  color: var(--primary-accent);
  margin-left: 0.33em;
}

.tab-content > .active:not(.lib-resource) {
  margin-left: 0; /* Formerly -2em, changed for education/resources and after panels on /education were widened last week */
}

.tab__tabPanel h3 {
  color: var(--primary-color);
  font-size: 1.5em;
  margin-left: 1.25em; 
}





/***** MEDIA QUERIES *****/
@media screen and (min-width: 600px) {
    .panel__title {
        font-size: 2em;
    }
}

@media screen and (max-width: 767px) {
  .evms-program-explorer .panel--programs {
    display: none;
  }
}

@media screen and (min-width: 768px) {
    .nav-tabs {
        border-bottom: none;
        padding: 0;
    }
}

@media screen and (min-width: 800px) {
    .accordion-margin h2 {
        margin-bottom: 0;
    }
}

/* Added 06.22.2022 for the panels that turn into accordions on /education */
@media screen and (max-width: 1080px) {
    .accordion-margin.module {
        width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .evms-program-explorer {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
}