/* --- standard quick links override (with standard component) ---------------------------------- */

/* adjusting spacing above and below the quick link component */
.quick-links {
  padding-top: 0px !important;              /* tighter top padding */
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 6px !important;
  margin-top: 1rem !important;
  margin-bottom: 0rem !important;
}
.quick-links__list-wrapper {
  margin-bottom: 0rem; /* reduce default spacing between columns on collapse */
}
.quick-links__list {
  margin-bottom: 0 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.quick-links__item:last-child {
  margin-bottom: 0 !important;
}


/* font size is smaller than h4 */
.quick-links__link-text {
  font-size: 1.1rem !important;
  line-height: 1.3;
}

/* hover text is Monash blue */
.quick-links__link:hover .quick-links__link-text h4,
.quick-links__link:focus .quick-links__link-text h4,
.quick-links__link:hover .quick-links__link-text h5,
.quick-links__link:focus .quick-links__link-text h5 {
  color: #006dae;
  text-decoration: none;
}


/* remove lines separating column content in small screen view */
.quick-links__list-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.quick-links__list,
.quick-links__item {
  border: none !important;
}


/* ********************************** */


/* --- quick links override (with custom html solution) ---------------------------------- */
.quick-links--custom {
  padding-top: 0px;              /* tighter top padding */
  padding-left: 15px; 
  padding-right: 15px;
  padding-bottom: 6px;
  margin-top: 0;                 /* remove top margin if any */
  margin-bottom: 3rem;
}

h4 + .quick-links--custom {
  margin-top: 0 !important;      /* remove default spacing between heading and quick links */
}

.quick-links--custom .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.quick-links--custom .quick-link {
  display: flex;
  align-items: flex-start;
}

.quick-links--custom .quick-link__icon {
  flex: 0 0 25px;
  height: 25px;
  margin-right: 1rem;
  background: url('https://www.monash.edu/__data/assets/file/0010/2179621/navigate-right.svg')
    center/contain no-repeat;
}

/* ---------- heading & link text (with custom html solution) ---------------------------- */
.quick-links--custom h5.quick-link__heading {
  /* inherits Monash quick-link styles */
  margin: 0;
  font-size: 1rem;
  font-weight: 600; /* fallback if class missing */
}

.quick-links--custom a.quick-link__link {
  text-decoration: none;
  color: #000;
}

.quick-links--custom a.quick-link__link:hover,
.quick-links--custom a.quick-link__link:focus {
  color: #006dae;
  text-decoration: none;
}


/* ********************************** */


/* Example HTML for custom quick links */
/*
<section class="quick-links--custom">
  <div class="grid"><!-- Row-first order -->
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#teaching"><h5 class="quick-link__heading">Teaching</h5></a>
    </div>
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#assessmentandfeedback"><h5 class="quick-link__heading">Assessment and feedback</h5></a>
    </div>
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#designforlearning"><h5 class="quick-link__heading">Design for learning</h5></a>
    </div>
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#technologytosupportlearning"><h5 class="quick-link__heading">Technology to support learning</h5></a>
    </div>
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#inclusivepracticesandenvironments"><h5 class="quick-link__heading">Inclusive practices and environments</h5></a>
    </div>
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#leadershipdevelopment"><h5 class="quick-link__heading">Leadership development</h5></a>
    </div>
    <div class="quick-link"><span class="quick-link__icon"></span><a class="quick-link__link" href="#teachingexcellenceprogram"><h5 class="quick-link__heading">Teaching Excellence Program</h5></a>
    </div><!-- Add more links as needed -->
  </div>
</section>
*/