/*
 File: wordpress/pages/commencement/style.css
 URL:  wnmu.edu/pages/commencement/style.css
*/

.page-header-fg img { max-height: 70%; }

.main-heading { margin-bottom: 60px; }
.main-heading header { margin-bottom: 22px; ;font-size: 27px; font-weight: bold; }
/* .main-heading .sub-heading {} */

.number { color: hsl(0 0% 80%); display: none; }

.resources { margin: 80px 0 120px; }

.resources-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 36px;
}

@media (max-width: 700px) {
  .resources-content {
    grid-template-columns: repeat(1, 1fr);  grid-gap: 68px 0; }
}

.resources-content > * {
  text-decoration: none;
  background: hsl(0 0% 93%);
  border-radius: 20px;
}

.resources-content .icon-container {
  display: flex; justify-content: center; align-items: center;
  padding: 36px 0;
  text-align: center;
  border-radius: 20px 20px 0 0;
  transition: all 0.5s ease-out;
}

.resources-content a:hover { filter: brightness(0.7); }
.resources-content svg { width: 132px; height: 132px; stroke: hsl(0 0% 100%); opacity: 0.6; }
.resources-content > *:nth-child(1) .icon-container { background: #F26522; }
.resources-content > *:nth-child(2) .icon-container { background: #12A79D; }
.resources-content > *:nth-child(3) .icon-container { background: #6F489D; }
.resource-descript { padding: 9px 25px 26px; color: hsl(0 0% 0%); }
.resource-descript header { margin-top: 12px; margin-bottom: 6px; font-weight: bold; }
.resource-descript p { font-size: 16px; line-height: 23px; }

.instructions { margin: 20px 0; font-size: 17px; }

.instructions-panel {
  margin-bottom: 80px;
  padding: 28px 28px;
  border-left: 14px solid hsl(0 0% 90%);
}

.instructions-panel > h3:first-of-type { margin-top: 0; }

.instructions-inactive .instructions-panel { display: none; }
.instructions h2 {
  margin-bottom: 26px;
  padding: 40px 32px;
  background: hsl(0 0% 90%);;
  border-radius: 16px;
  cursor: pointer;
}

.instructions h2:hover { filter: brightness(0.8); }

.key-link-list li { list-style-position: inside; list-style-type: disclosure-closed; }
.key-link { font-weight: bold; text-decoration: none; }

.instructions-more-info { margin-top: 34px; padding: 20px 24px; background: hsl(0 0% 95%); border-radius: 10px; }
.instructions-more-info > header { margin-top: 2px; margin-bottom: 0; font-size: 16px; color: hsl(0 0% 60%); }
.instructions-more-info > header + h3 { margin-top: 10px; }
.instructions-more-info > h3:first-child { margin-top: 0; }