/* LAST UPDATED: 07.01.2024 - SM */

/* Standard accordions (Ex.: those on https://evms.edu/covid-19/faq) and card accordions 
(Ex.: those on https://www.evms.edu/education/medical_programs/doctor_of_medicine/) share much of the same functionalties and classes, 
** so they're combined into this one stylesheet */

/* NOTES: 
** Headings are out of order for accordions and need to be fixed. Both accordion styles use H5's for headings. 
Accordion cards then use H3's for their headings. 
*** Found in April 2022: The accordion cards (or the top portion of them) share similar classes with the "image with caption" content types. 
Their styles are in /image-with-captions.css. 
*/

.accordion .accordion-container {
    padding: 15px 0;
}

/* For the border below the accordion header? */
.accordion .accordion-container::after {
    background: var(--primary-neutral-gray);
    bottom: 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 95%;
}

/* Used on both standard and card accordions */
.card-header {
    background-color: transparent;
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
    position: relative;
}
 
/* Re-separating as a test, post-test T4 transfer */
.card-header:after,
.card-header:before {
    border-color: var(--primary-color);
    transition: border .3s ease-in-out;
        -webkit-transition: border .3s ease-in-out;
}

.card-header:after,
.card-header:before {
   /* border: 3px solid var(--primary-color);  For circles on the +/- in accordions, changed 06.27.2022, removed 05.15.2025 */
    border-radius: 0;
    content: "";
    display: block;
    height: 43px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    width: 43px;
    z-index: 0;
}
      
.card-header:focus-within:before {
    border-radius: 0;
    box-shadow: 0 0 0 0.2rem rgba(31, 127, 155, 0.25);
    outline: none;
}

/* 05.14.2024 - For Specializations/accordion cards */
#specializations .accordion-header {
  width: 95%;
}

#specializations .accordion-header::before,
#specializations .accordion-header::after {
 	bottom: 0;
 	right: 0;
    left: unset;
}

/* Even more confusing: .card-header and .accordion-header seem to be doing, or at least targeting the same thing. */
/* .card-header seems to be more for the little + sign than anything else. If I remove the .card-header class, the circle outline goes away 
and it doesn't change to a - sign when the accordion expands. */
.accordion-header {
    cursor: pointer;
    font-size: 1em; 
    position: relative;
}

/* Also re-separating as a test, post-test t4 transfer */
.accordion-header:after,
.accordion-header:before {
    background: var(--primary-color) !important;
}

.accordion-header:after,
.accordion-header:before {
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    right: 2em; /* The positioning of the +/- looks different in preview vs. live, check live before changing */
  	top: 50%;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    width: 18px;
    z-index: -1;
}

.accordion-header:after {
    transform: translateY(-50%) rotate(90deg);
        -webkit-transform: translateY(-50%) rotate(90deg);
    transition: transform 0.2s ease-in-out;
        -webkit-transition: -webkit-transform 0.2s ease-in-out;
}

.card-header:before,
.card-header:after {
  right: 1em;
}


/* Found with card accordion on live site */
.card-header[aria-expanded="true"] .accordion-header::after {
    transform: translateY(-50%) rotate(0deg);
        -webkit-transform: translateY(-50%) rotate(0deg);
}

.card-header[aria-expanded="true"] .accordion-header::before {
    background: none;
  }

.accordion-header:focus-within:after,
.accordion-header:hover:after,
.accordion-header:focus-within:before,
.accordion-header:hover:before {
    background: var(--primary-color);
    transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

.accordion-header .btn {
    padding-right: 70px;
    text-align: left;
    white-space: normal;
    width: 100%;
}

.accordion-header .btn.btn-link:focus,
.accordion-header .btn.btn-link:hover {
  color: var(--primary-accent);
}

.accordion .card-body {
    padding: 20px 0;
}

/*The live site is also calling the .card-body class from the news-grid.css page. I removed the attributes in browser, and the accordion still worked, so it may be okay to remove it from accordions.css? */
.accordion .card-body p:last-of-type {
    margin: 0;
}

/* I think this is a shared class too... it's being used on the COVID-19 pages as the "Last Updated" piece */
.item {
    font-size: 0.8em;
    font-style: italic;
    font-weight: 600;
}

/* For the "Back to top" link */
.accordion + :not(.accordion) {
    margin-top: 30px;
}

/* For the little triangular "arrow" that appears below open accordion cards */
#specializations .card-header[aria-expanded="true"] + .arrow::after {
    border-bottom: 23px solid var(--primary-color);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    bottom: -60px; /* Formerly -56px */
    content: "";
    height: 0;
    position: absolute;
    right: 18px;
    width: 0;
}

/* The way the accordion cards are set up: The cards are all in one div set, and the expanded/accordion content is in another 
div set below the card div set*/
.specializations .collapse {
    width: 100%;
}

.background-expanded {
    padding: 0;
}

.expanded-card-row {
    margin: 30px 0;
    padding: 30px 15px;
}

/* Not sure if this will stay here, especially if the live code is showing that it's using dark blue instead of black for a border */
.blk-outline {
    border: 1px solid var(--primary-dark);
}

/* FOUND AFTER TRANSFER INTO TEST T4 */
.card-body p {
  margin-bottom: 30px;
}

/* For panels/tabs -> accordions in responsive mode on /education */
#programs {
  display: none;
}
  
/* For new home page mission buttons and accordions */
#missions {
  min-height: 60px;
  padding: 20px 0 3em; /* 3em added for more spacing at bottom */
/*   text-align: center; */
}

.missions-buttons-row {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  z-index: 999; /* May have to be adjusted depending on how main nav or news grid modals display */
}

.mission-btns {
  display: grid;
  position: absolute;
  grid-auto-flow: column; 
  justify-items: center;
  width: auto;
}

.mission-btn {
  display: inline-block;
  width: 220px;
  margin: 0 15px;
  height: 52px;
  line-height: 52px;
  background: var(--primary-accent);
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0% 100%);

  position: relative;
  font-family: var(--primary-font-family);
}

.mission-btn button:hover,
.mission-btn button:focus,
.mission-btn a:hover,
.mission-btn a:focus {
  background: var(--primary-accent-to-primary-color-gradient);
  color: var(--primary-neutral-light);
  /*font-weight:bold;*/
  text-decoration: none !important;
}

.mission-btn a,
.mission-btn button {
  color: var(--primary-neutral-light);
  background: transparent;
  font-size: 20px;
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.mission-btn a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 64%;
  padding-left: 8%;
  padding-right: 6%;
  text-align: center;
}

.mission-btn button {
  position: absolute;
  right: 0;
  width: 10%;
  height: 100%;
  padding: 0 6% 0 6%;
  text-align: center;

  border: none;
  font-size: var(--base-font-size);
  line-height: 1.5;
  cursor: pointer;
  border-left: 1px solid var(--primary-neutral-light);
}

.subNav__indicator span:after {
  content: " \002B "; /* + sign */
  font-size: 1.25em;
  font-weight: bold;
}

.subNav__indicator span.active:after {
  content: " \2212 "; /* - sign */
}

.mission-details {
  padding: 0;
  max-width: 800px;
  margin: 0 auto;
  border: none;
  display: none;
}

.mission-details.active {
  display: inline-block;
  border: 1px solid var(--primary-accent);
  position: absolute;
  top: 60px;
  width: 100%;
  list-style: none;
  padding: 1em 1em 0.25em;
  column-count: 2;
  background-color: var(--primary-neutral-light);
  z-index: 1;
  margin: 0 -1em; /* Evens out how the submenus appear below the buttons */
}

.mission-details ul li {
  display: block;
  padding: 4px 0;
  text-align: left;  
}

.mission-details li {
  padding-bottom: 1em;
  text-align: left;
}

.mission-details li a {
  font-family: var(--primary-font-family);
  font-size: var(--base-font-size);
  text-decoration: none;
  color: var(--primary-dark);
  padding: 0;
}

.mission-details li a:hover,
.mission-details li a:focus {
  background-color: var(--secondary-neutral-light-gray);
  text-decoration: underline; 
}

.mission-list {
  height: 1px;
  overflow: hidden;
  transition: all 0.3s ease-out;
  margin: 0;
}

.subNav__indicator.subnav.activeSubNav {
  background-color: var(--secondary-accent);
  border-left: 1px solid var(--primary-neutral-light);
}






/***** MEDIA QUERIES *****/
@media screen and (min-width: 360px) and (max-width: 660px) {
  .missions-buttons-row {
    margin: 0 -1em;
  }
  
  .mission-btns {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 1.5em;
    width: 90%;
  }
  
  .mission-btn {
    display: inline-flex;
    width: 100%;
    margin: 0 auto 1.5em;
  }
  
  .mission-btn a {
    width: 69%;
  }
  
  .mission-details.active {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    width: 90%;
    top: 0;
    margin-bottom: 1.5em;
  }
  
  .mission-btn button {
    width: 5%;
  }
}

@media screen and (min-width: 360px) and (max-width: 768px) {
  .specializations .collapse {
    margin: 0 auto;
    width: 100%;
  }
  
  #programs {
    display: flex;
    flex-direction: column;
    margin: 0 -1.5em;
    width: 100%;
  }
  
  /* The last accordion on the /education page is a link, this removes the +/-
  symbol for the accordion indicator */
  #programs .accordion-header:last-of-type:after {
  	display: none;
  }
  
  #programs .accordion-header:before,
  #programs .accordion-header:after {
    right: 0;
  }
}

@media screen and (min-width: 360px) and (max-width: 1023px) {
  #specializations .card-header[aria-expanded="true"] + .arrow::after {
    bottom: -57px;
  }
}

@media screen and (min-width: 667px) {
  #specializations .accordion-header::before,
  #specializations .accordion-header::after {
    margin-right: 1em;
  }
}

@media screen and (max-width: 759px) {
  .accordion-header:before,
  .accordion-header:after {
    right: -4.33%; /* Formerly 4px */
  }
}

@media screen and (min-width: 760px) and (max-width: 1024px) {   
  .mission-btn {
    width: 200px;
  }
}

@media (min-height: 768px) {
  #specializations .card-header[aria-expanded="true"] + .arrow::after {
    right: 50%;
  }
}

@media screen and (min-width: 768px) {
    .expanded-card-row {
        margin: 15px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mission-details.active {
    margin: auto;
  }
}


/* Added 03.21.2024 */
@media screen and (min-width: 769px) and (max-width: 925px) {
  .specializations .collapse {
    margin: 0 auto 0 2em;
    width: 90%;
  }
}
      
@media screen and (max-width: 810px) and (orientation: portrait) {
   /* Mostly for when tabbed content (like on /explore_evms) is switched to accordions in responsive mode) */
  	.accordion-header {
      width: 90% !important;
    }
  
   /* For accordion cards/Specializations */
  .specializations .card-header .accordion-header {
    width: 92.25% !important;
  }
} 


@media screen and (min-width: 992px) {
    .expanded-card-row {
        margin: 15px 0;
        width: 100%;
    }
}

@media screen and (max-width: 1024px) {
  .accordion .accordion-container {
    padding: 15px;
    width: 100%;
  }
}
      

@media screen and (max-width: 1080px) {   
  .accordion .card-body {
    margin: 0;
    width: 100%;
  }
}