/* these are NEW Link Styles for D10 -- Teal w gold  --aap 8-22-25
 */


.field--name-field-link-in-group {
  display: grid;
  gap: 0.5em;
  margin: var(--row-gap-sm);
}

.field--name-field-link-in-group a {
  display: block;
  color: var(--ua-teal);
  font-size: var(--ua-type-size-1);
  font-weight: var(--ua-type-weight-heading);
  padding-block: calc(0.33 * var(--row-gap-sm));
  padding-inline: 0.5em;
}




/* override bootstrap <style> basics -- meh, revisit this... padding is kind of nice... */
/* 
.nav-link {
  padding: .5rem 1rem;
} */



a.has-icon {
  display: inline-flex;
  gap: 0.33em;
  align-items: first baseline;
}

a.has-icon svg {
  transform: translateY(2px);
}


/* DRUPAL 8 ----> in page buttons and button groups */

a.btn {
  justify-content: center;
  padding: 0.5lh var(--column-gap-md);
  border-radius: 0px;
}

a.btn-primary {
  border-color: var(--ua-purple-mid);
}


a.btn-secondary {
  border-color: var(--ua-gold);
  color: var(--ua-gold);
}



.btn .fontawesome-icons  {
  margin-right: 10px;  
  transform: scale(1.3) translateY(-1px);
}


.btn .fontawesome-icons-after  {
  margin-left: 10px;  
  transform: scale(1.3) translateY(-1px);
}

.btn-group {
  flex-wrap: wrap;
}




a.btn-outline-primary {
  display: inline-flex; 
  justify-content: center;
   font-size: var(--ua-type-size-1);
    font-weight: 550; /* strong = 550... */
    text-decoration: none;
  padding: .75em 1em;
  border-radius: 0px;
  color: var(--ua-purple-mid);
  border-color: var(--ua-purple-mid);
  margin-bottom: 0px;
  width: 100%;
  background-color: var(--ua-purple-darkest);
  background-image: var(--ua-grad-purple-dark-radial);
  color: var(--white-color);
  transition: all 0.5s all ease-in-out;
}

.btn-outline-primary:hover 

@media all and (min-width: 768px) {


  a.btn-outline-primary {
    width: auto;
  }
}
/* 
a.btn-outline-primary:hover {
  background-color: var(--ua-purple);
  border-color: var(--ua-purple-mid);
} */


.btn-group a.btn-outline-primary:first-child {
  margin-left: -1px;
}

.btn-group a {
   /*  padding-inline: 0.5em; */
    border-left: 0.5em solid var(--ua-purple-mid);
    padding-right: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.75em;
    transition: all 0.5s ease-in-out;
}

.btn-group a:hover {
    /* padding-inline-start: 1em; */
    border-left: 1em solid var(--ua-gold);
}

.layout__region .btn-group a {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    transition: all 0.5s ease-in-out;
}

.layout__region  .btn-group a:hover {
 /*    padding-inline-start: 1.0em;
    padding-inline-end: 0em; */
    border-left: 1em solid var(--ua-purple-mid);
    color: var(--ua-gold);
}



.layout:first-of-type 
.layout__region .btn-group {
  justify-content: center;
  width: 100%;
}

/* .layout:first-of-type */ 
.layout__region .btn-group 
.btn-outline-primary,
.block-layout-builder
.btn-outline-primary {
  background-color: var(--ua-purple-darkest);
  background-image: var(--ua-grad-purple-dark-radial);
  color: var(--white-color);
}

/* .layout:first-of-type */ 
.layout__region .btn-group 
.btn-outline-primary:hover,
.btn-outline-primary:hover {
  background-color: var(--ua-purple);
}

div[role=tablist] .list-group-item.active {
  background-color: var(--ua-gold-light);
  border-color: var(--ua-gold);
  color: var(--ua-purple);
}
