/*
*  ****************
*  CSS GRID LAYOUT
*  ****************
*  for homepage 
*   -- mobile-first approach
*  re-arranges for tablet + desktop views (768px - BS4 'medium')
*    https://getbootstrap.com/docs/4.0/layout/overview/
*
*/

#homepage-grid { 
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  grid-template-areas: 
  "primo"
  "research_tools"
  "hours"
  "spaces"
  "slider"
  "events"
  "quick_links";
}

#slider {
  grid-area: slider;
}

#primo-search {
  grid-area: primo;
}

#research-tools {
  grid-area: research_tools;
}

#library-hours {
  grid-area: hours;
}

#quicklinks {
  grid-area: quick_links;
}

#home-events {
  grid-area: events;
}

#home-spaces {
  grid-area: spaces;
}

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

  #homepage-grid { 
    grid-template-areas: 
        "slider"
        "primo"
        "research_tools"
        "two-cols"
        "events"
        "quick_links";
  }
  
  .grid-col-container .container-fluid {
      grid-area: "two-cols";
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--column-gap-lg);
      margin: auto;
     /*  border: 1px solid red; */
  }
}

@media all and (min-width: 992px) { 
  .grid-col-container .container-fluid {
    grid-area: "two-cols";
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: var(--column-gap-lg);
    margin: auto;
    /* border: 1px solid red; */
  }
}

/*
* *****************
*  Homepage shared
* *****************
*/

.grid-col-container .container-fluid {
  /* padding-left: 0px;
  padding-right: 0px; */
  margin: auto;
}

#homepage-grid > .container-fluid {
  padding-right: var(--column-gap-md);
  padding-left: var(--column-gap-md);  
}

#homepage-grid > div:not(#slider, #quicklinks),
#homepage-grid #page-background > div {
  margin-bottom: calc((var(--row-gap-md)) * 0.66);
  margin-bottom: var(--row-gap-md);
  /* https://utopia.fyi/clamp/calculator?a=375,1200,8%E2%80%9424 */
  /*  margin-bottom: clamp(var(--row-gap-sm), 0.0455rem + 1.9394vw, var(--row-gap-md)); */
}

/* remove .row negative margins imposed by Barrio -- it adds .row to every section... :P  */
#homepage-grid .row:not(.view-content) {
  margin-right: 0px;
  margin-left: 0px;
}

#homepage-grid h2 {
  color: var(--ua-purple);
  font-size: var(--ua-type-size-2); 
}

#homepage-grid h2:not(#research-tools-header) svg {
  transform: scale(1.25);
  padding-right: 0.25em;
}

#homepage-grid h2 svg.svg-inline--fa .fa-primary,
#homepage-grid h2 svg.svg-inline--fa .fa-secondary {
  fill: var(--ua-gold);
}

.linktoall {
  text-align: right;
  display: block;
  border-top: 1px solid var(--lightest-offset);
  padding-top: 0.5em;
}

.linktoall:before {
  content: '> ';
}

.linktoall svg {
  display: none;
}


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


  #homepage-grid {
    background-color: var(--lightest-offset);
    padding-inline: 0 /* var(--column-gap-md) */;
    padding-block-start: 0 /* var(--column-gap-md) */;
    padding-block-end: 0;
  }

  #homepage-grid > .container-fluid {
    padding-right: 1em;
    padding-left: 1em;  
  }

  /* #homepage-grid > div:not(#slider, #quicklinks) {
    margin-bottom: var(--row-gap-md);
  } */

  #homepage-grid > div:not(#slider, #quicklinks),
  #homepage-grid #page-background > div {
    margin-bottom: var(--row-gap-lg);
  }

  .linktoall {
    /* text-transform: uppercase; */

    /* margin-right: 7.5%; */
    font-size: var(--ua-type-size--1);
    border-top: 1px solid var(--lightest-offset);
    padding-top: 0.5em;
    padding-right: 1em;
    margin-right: -2em;
  }

}

/*  
*   ********
*    SLIDER 
*   ********
*/

article.node--view-mode-homepage-slider {
  display: grid;/* 
  grid-template-columns: auto;
  grid-template-rows: auto; */
  grid-template-areas:
    "slide";
}

article.node--view-mode-homepage-slider .field--name-field-featured-image,
article.node--view-mode-homepage-slider .slide-copy {
  grid-area: slide;
}

/* remove bottom margin from field.css in barrio ln 6 and ln 36 */
article.node--view-mode-homepage-slider .field--type-entity-reference,
article.node--view-mode-homepage-slider .field--type-image img {
  margin-bottom: 0;
}

#homepage-grid #slider a,
#homepage-grid #slider h2  {
  color: var(--white-color);
}

#homepage-grid #slider h2  {
  font-size: var(--ua-type-size-1);
  text-decoration: none;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--ua-gold);
}


.slide-copy {
  /* see components/sliders.css */
}

#homepage-grid .field--name-field-media-image img{
  width: 100%;
  margin: auto;
  max-width: 1620px;
}

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

  .splide--skin--classic .splide__slide,
  .region-home-slider,
  .region-home-slider * {
    max-height: 480px;
  }

  .splide__track {
    /* background: linear-gradient(var(--ua-purple) 0%, var(--white-color) 100%); */
    /* background: linear-gradient(var(--dark-gray-color), var(--mid-gray-color), var(--white-color), white); */
    /* background: linear-gradient(var(--mid-gray-color), var(--white-color), white); */
   /*  background: linear-gradient(#cccccc, #d7d7d7, #e2e2e2, #ececec, #f4f4f4, #f8f8f8, #fbfbfb, #ffffff); */
    background-blend-mode: multiply;
  }

  .region-home-slider img {
    aspect-ratio: auto;
    max-height: 100%;
  }
  
}

/* xl from bootstrap_barrio.breakpoints.yml = 75em (1200px) but want above that, so increasing to 77em (1232px) */
@media all and (min-width: 77em) {

  .splide--skin--classic .splide__slide,
  .region-home-slider,
  .region-home-slider * {
    /* min-height: 480px; */
    max-height: 540px;
  }

}

/*
*  ****************
*   PRIMO SEARCH
*  ****************
*/

#homepage-grid #primo-search {
  background: var(--purple-to-teal-gradient);
  margin-bottom: 1em;
}

#homepage-grid #primo-search .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  /* padding: 1em; */
  padding: var(--column-gap-md);
  border-radius: var(--border-rad-md);
}

#homepage-grid #primo-search-label h2 {
  color: var(--white-color);
  text-shadow: var(--text-shadow-double);
}

#homepage-grid #primo-search-label h2 span {
  color: var(--ua-gold);
}

#homepage-grid #primo-search #primo-widget-container,
#homepage-grid #primo-search #primo-widget-container .block {
  width: 100%;
}

#primo-search form {
  display: flex;
  align-content: stretch;
  margin-block-end: 0.75em;
}

/* #homepage-grid #primo-search .input-group>.form-control  */

#homepage-grid #primo-search .form-control {
  /*  width: 1%; // from _input-group.css  */
 /*  width: auto; */
  border-radius: var(--border-rad-sm) 0em 0em var(--border-rad-sm);
  /* outline: 0; */
  border: 0px solid transparent;
  height: 48px; /* 44px = minimum touch target size, add a lil' room */
  padding-inline-start: 1em;
  /* https://www.uisurgeon.com/tools/inset-shadow-generator -- preset = 'subtle button' 5-14-25 --aap */
  box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}


/* #homepage-grid #primo-search .input-group>.form-control:active */
#homepage-grid #primo-search .form-control:active {
  box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
}

#homepage-grid #primo-search input[type=submit] {
  border-radius: 0em var(--border-rad-sm) var(--border-rad-sm) 0em;
  border: 0px solid transparent;
  background-color: var(--ua-gold);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ua-purple);
  letter-spacing: -0.01em;
}

#homepage-grid #primo-search .form-control:focus-visible + #homepage-grid #primo-search input[type=submit] {
  outline: 3px dotted var(--ua-gold);
}


#homepage-grid #primo-search a {
  font-size: var(--ua-type-size--1);
  text-transform: uppercase;
  color: var(--lightest-offset);
  text-decoration-color: var(--lightest-offset-accent);
  text-decoration: none;
  /* border: 1px solid red; */
  padding-block: 0.25em; /* added for touch target size */
}

#homepage-grid #primo-search a span { 
  text-decoration: underline;
  margin-inline-start: 0.05em;
}

#homepage-grid #primo-search a:hover {
  color: var(--ua-gold);
}


@media all and (min-width: 576px) {
  #homepage-grid #primo-search .container {
    /* padding-inline: 0em; */
  }
}

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

  #homepage-grid {
    --homepage-overlap-shift: 5em;
  }

  #homepage-grid #primo-search {
    margin-top: calc(-1 * (var(--homepage-overlap-shift)));
    z-index: 80;
    background: transparent;
    margin-bottom: 2em;
  }

  #homepage-grid #primo-search .container {
    box-shadow: var(--shadow-elevation-high);
    background: var(--purple-to-teal-gradient);
  /*   max-width: 700px; */
    align-items: center;
    /* padding-block: var(--row-gap-md); */
    /* padding-block: var(--row-gap-md) calc(var(--row-gap-md)*1.25); */
    padding-block: calc(var(--row-gap-md)*1.25) calc(var(--row-gap-md)*1.5);
  }
  
  #homepage-grid #primo-search-label h2 {
    padding-bottom: var(--row-gap-sm);
    font-size: var(--ua-type-size-3);
    text-align: center;
  }

  #homepage-grid #primo-search-label br {
    display: none;
  }

  #homepage-grid #primo-search #primo-widget-container {
    width: min(780px, 80%);
    display: block;
  }

  #homepage-grid #primo-search #primo-widget-container .block {
    width: 100%;
  }

}

@media all and (min-width: 992px) {
  /* #homepage-grid #primo-search .container {
    max-width: 900px;
  } */
}

@media all and (min-width: 1200px) {
  /* #homepage-grid #primo-search .container {
    max-width: 1100px;
  } */
}


/* was leftover from D8 - no more autocomplete here, but keeping it for styling - breaks if removed... --aap 6/20/25 */
#primoAutocomplete { 
  position: absolute; 
  top: 2.5em; left: 2em; 
  background: rgba(0, 0, 0, 0.85)!important;  
  width: 75%; 
  border-radius: 0px 0px 5px 5px; 
  z-index:10000000000000; 
  /* hide the autocomplete entirely on mobile (now, everywhere) */
  display: none !important;
}


/*
*  ****************
*   PAGE BACKGROUND 
*  ****************
*
*   no need on mobile
*
*/

#page-background {
  padding-inline: var(--column-gap-md);
}

@media all and (min-width: 768px) {
  #page-background {
    background-color: var(--white-color);
    margin-top: calc(-1.75 * (var(--homepage-overlap-shift)));
    padding-inline: var(--column-gap-md);
    padding-block-start: calc(1.75 * (var(--homepage-overlap-shift)));
    margin-inline: 0;
    box-shadow: var(--shadow-elevation-low);
  }
}

@media all and (min-width: 992px) {
  #page-background {
    padding-inline: var(--column-gap-lg);
  }
}


@media all and (min-width: 1200px) { 
  #page-background {
    margin-inline: auto;
  }
}

/*
*  ****************
*   RESEARCH TOOLS
*  ****************
*/



#research-tools h2 {
 /*  font-weight: var(--ua-home-heading-weight); */

}


#research-tools .container-fluid::after {
  background-color: var(--ua-gold);
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.5em;
  vertical-align: middle;
  margin-bottom: 1em;
  /* width: 55%;
  margin-right: -75%;
  margin-left: 0.5em; */
}

#research-tools .container-fluid:has(details[open])::after {
  height: 0px;
}

#research-tools h2 svg:first-of-type {
  transform: scale(1.1);
  padding-right: 0.25em;
}

#research-tools h2 svg.fa-chevron-down {
  margin-left: 0.5em;
  height:0.85em;
  margin-bottom: 0.06em;
  transition: all 0.25s ease-in-out;
  position: absolute;
  right: 2em;
}

#research-tools details > summary::marker {
  display: none;
  content: "";
}

#research-tools details[open] h2 svg.fa-chevron-down {
 transform: rotate(-180deg);
}

.region-home-research-tools,
.menu--research-tools {
  display: block;
}


/* research tools nav is a nav.w-lil-go -- using @992, so need to style for smaller, too */

ul.w-lil-go li {
  display: block;
}

ul.w-lil-go li > a {
  display: inline-block;
  font-size: var(--ua-type-size-1);
  color: var(--ua-teal);
  text-decoration-color: var(--ua-gold);
  text-decoration-thickness: var(--ua-text-underline-thickness-start);
  font-weight: 550;
  padding-block: calc(0.3 * var(--min-target-size));
  /* --ua-text-underline-offset-diff: 0.25em; */
}

/* undo vertical align set by fontawesome-custom.css:26 -- copy paste of inserted <style> in head when fa is installed */

ul.w-lil-go .svg-inline--fa {
    /* vertical-align: -.125em; */
    vertical-align: middle;
}

ul.w-lil-go li svg.svg-inline--fa .fa-primary {
  fill: var(--ua-gold);
  opacity: 1;
}
ul.w-lil-go li svg.svg-inline--fa .fa-secondary {
  fill: transparent;
  opacity: 1;
}

ul.w-lil-go li:hover > svg {
  transform: translate(0.3em);
}

ul.w-lil-go li:hover svg.svg-inline--fa .fa-primary {
  fill: transparent;
  opacity: 1;
}

ul.w-lil-go li:hover svg.svg-inline--fa .fa-secondary {
  fill: var(--ua-gold);
  opacity: 1;
}

.menu--research-tools ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: var(--row-gap-md);
  row-gap: 0.25em;
  margin-top: 0.75em;
  margin-left: 2.5em;
  margin-bottom: 1em;
}

.menu--research-tools li::marker {
  color: var(--ua-gold);
  outline: 3px solid var(--ua-gold);
}

.menu--research-tools .nav-item a {
   text-decoration-color: var(--ua-gold);
  font-weight: var(--ua-home-heading-weight);
  text-decoration-thickness: var(--ua-text-underline-thickness);
  /*  margin-left: 1.5em; */
  /* border-radius: var(--border-rad-sm); */
  /* border: 1px solid transparent; */
  /* text-decoration: none; */
  /* text-underline-offset: 0.5em; */
  /* text-decoration-thickness: */ /* 0.2em; */ /* var(--ua-biglink-underline-thickness); */
  /* text-underline-offset: */ /* 0.5em; */ /* var(--ua-biglink-underline-offset-start); */
   
}

.menu--research-tools .nav-item a:hover {
  /* border: 2px solid var(--ua-gold); */
 /*  text-underline-offset: 0.8em; */
 /*  text-decoration-thickness: */ /* 0.125em; */ /* calc(var(--ua-biglink-underline-thickness) + var(--ua-biglink-underline-thickness-diff)); */
 /*  text-underline-offset: */ /* 0.3em; */ /* calc(var(--ua-biglink-underline-offset-start) + var(--ua-biglink-underline-offset-diff)); */
}

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

  .region-home-research-tools,
  .menu--research-tools {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #research-tools {
    margin-bottom: var(--row-gap-lg);
  }


  /* research tools nav is a nav.w-lil-go -- using @992, so need to style for smaller, too */

  ul.w-lil-go li {
    display: flex;
    align-items: center;
  }

  ul.w-lil-go li > a {
    display: inline-flex;
  }




  #research-tools .container-fluid::after {
    display: none;
  }

  .menu--research-tools {
    /* display: flex;
    justify-content: space-between; */
    width: 100%;

    /* --ua-biglink-underline-offset-start: calc(0.66em + 1px); */
  }

  #homepage-grid #research-tools h2 svg.svg-inline--fa .fa-secondary {
    fill: var(--ua-gold-light);
  }

  #research-tools h2 svg:first-of-type {
    float: left;
    padding-bottom: 3rem;
    padding-right: 0.25em;
    margin-right: 0.25em;
    /* transform: scale(1.45) translate(3px, 2px); */
    transform: scaleX(-1.4) scaleY(1.4) translate(7px, 12px);
  }

  #research-tools .container-fluid .d-md-flex{
    justify-content: space-between;
    box-shadow: var(--ua-gold-light) inset 0px 0px 2.5em 0px, 
                var(--lightest-offset) inset 0px 0px 0.5em 0px;
    /* padding: 1.1em 1.75em 1em 1em; */
   /*  padding: 1.25em 1.75em 1.1em 1em; */
   padding: 1em 1em 0.25em 1em;
    border-radius: 0.5em;
    margin-inline: calc(-1em - 2px) -1em;
   /*  border: 1px solid var(--ua-gold-light); */
     border: 1px solid hsl(45, 76%, 86.9%); /* make this a gold-border var */

    /* hsl(44.8, 100%, 80.6%); */
    /* background-color: var(--ua-gold-light); */
  }
  
  .menu--research-tools ul {
    flex-direction: row;
    list-style: none;
    row-gap: 0.5em;
    column-gap:  clamp(1rem, 1.1705rem + -0.2273vw, 2.5rem);
    padding-left: 0;
    margin-left: 1em;
    margin-top: 2px;
  }
  

  ul.w-lil-go li > a {
    color: var(--ua-purple);
    font-size: inherit;
    text-decoration-color: var(--ua-gold);
    text-decoration-thickness: var(--ua-text-underline-thickness-start);
    font-weight: 550;
    padding-block: calc(0.25 * var(--row-gap-sm));
    /* --ua-text-underline-offset-diff: 0.25em; */
  }

  ul.w-lil-go li > a:is(:focus, :focus-visible) {
    outline: unset;
  }

   ul.w-lil-go li:focus-within {
     outline: var(--focus-outline);
     outline-offset: var(--focus-offset);
   }


  ul.w-lil-go li > svg {
    transition: all .5s ease-in-out;
  }

  /* undo vertical align set by fontawesome-custom.css:26 -- copy paste of inserted <style> in head when fa is installed */

  ul.w-lil-go .svg-inline--fa {
      /* vertical-align: -.125em; */
      vertical-align: middle;
  }


  ul.w-lil-go li svg.svg-inline--fa .fa-primary {
    fill: transparent;
    opacity: 0.1;
  }
  ul.w-lil-go li svg.svg-inline--fa .fa-secondary {
	  fill: transparent;
    opacity: 1;
  }

  ul.w-lil-go li:hover > svg {
    transform: translate(0.3em);
  }

  ul.w-lil-go li:hover svg.svg-inline--fa .fa-primary {
	  fill: transparent;
    opacity: 1;
  }

  ul.w-lil-go li:hover svg.svg-inline--fa .fa-secondary {
	  fill: var(--ua-gold);
    opacity: 1;
  }



  .menu--research-tools .nav-item a {
   /*  margin-left: 1.25em; */
    /* padding-block: var(--ua-biglink-underline-offset-start); */
   /*  text-underline-offset: var(--ua-biglink-underline-offset-start);
    text-decoration-thickness: var(--ua-biglink-underline-thickness); */

    /* text-decoration: none; */
   /*  border: solid var(--ua-biglink-underline-thickness) transparent;
    border-radius: var(--border-rad-md); */
    /* border-bottom: solid var(--ua-biglink-underline-thickness) var(--ua-gold); */

    /* this is where we need the magic number... */
   /*  text-underline-offset: calc( 
    var(--ua-biglink-underline-offset-start)); */
    /* transition: color 200ms, border 600ms, text-underline-offset 200ms, text-decoration-color 300ms; */
  }

  .menu--research-tools .nav-item a:hover {
   /*  border: solid var(--ua-biglink-underline-thickness) var(--ua-gold); */
   /* border: solid var(--ua-biglink-underline-thickness) var(--ua-gold);
   text-decoration-color: transparent; */
   /* border-width: calc(var(--ua-biglink-underline-thickness) - 1px); */
  }

  .menu--research-tools .nav-item .nav-link {
    padding: unset;
  }

}

@media all and (min-width: 992px) {
  .menu--research-tools {
   /*  display: flex;
    justify-content: space-between; */
  }
  /* 
  .menu--research-tools .nav-item a {
    margin-left: clamp(1rem, 1.1705rem + -0.2273vw, 1.125rem);
  } */


  #research-tools h2 {
   /*  margin-top: 2px; */
  }

  /* #research-tools h2 svg, */
  #research-tools h2 svg:first-of-type {
    /* float: left; */
   /*  padding-right: 0.33em; */
    /* padding-top: 2px;
    margin-bottom: 0.5em;
    transform: scale(1.25) translate(3px, 0px); */
   /*  padding-right: 0.25em; */
    /* transform: scale(1.45) translate(3px, 2px); */
    transform: scaleX(-1.4) scaleY(1.4) translate(8px, 6px);
    margin-bottom: -15px;
    padding-bottom: 1em;
    margin-right: 0.25em;

  }

  #research-tools .container-fluid .d-md-flex{
   
    /* padding: 1.25em 1.75em 1.1em 1em; */
       padding: 1.25em 1em 1.1em 1.75em;
    gap: var(--column-gap-md);
  }
  
  .menu--research-tools ul {
    row-gap: 0;
    justify-content: space-between;
    /* margin-right: -1em; */
    margin-left: 0;
    margin-bottom: 0;
    margin-top: calc(-0.5 * var(--ua-biglink-underline-offset-start)); 
    /* column-gap:  clamp(1.25rem, 1.1705rem + -0.2273vw, 2.5rem); */
    column-gap: var(--column-gap-sm);
    margin-right: -0.5em;
  }
  

 /* }

@media all and (min-width: 1200px) { */
    
  #research-tools h2 {
    padding-bottom: 0;
    margin-bottom: 0;
    /* font-size: var(--ua-type-size-1); */
  }

  .menu--research-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu--research-tools .nav-item a {
    margin-left: clamp(1rem, 1.1705rem + -0.2273vw, 1.125rem);
  }
  
}




/*
*  ********
*   HOURS
*  ********
*  see also: widgets/libcal-todays-hours.css
*/

#library-hours {
    position: relative;
    grid-area: unset;
    margin-bottom: var(--row-gap-md); /* mobile layout needs the bottom margin -- removed at 992 */
    /* background-color: var(--lightest-offset); */
}

#block-libcalhourswidget {
  padding-block: var(--row-gap-sm);
}

table th.hours-col-loc {
  display: block;
}

#block-libcaltodayshours {
  margin: auto;
  width: 100%;
}

/* hide old departments/units */
tr.hours-depart, tr.loc9094, tr.loc9451 {
  display: none;
}

/*
*   gold line after the heading - hours
*/

#library-hours h2::after {
  background-color: var(--ua-gold);
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.5em;
  vertical-align: middle;
  /* width: 55%;
  margin-right: -75%;
  margin-left: 0.5em; */
}

@media all and (min-width: 768px) {
    #library-hours {
      margin-bottom: unset;
      margin-top: 1em;
    }  

    #library-hours h2::after {
      /* width: 55%; */
      margin-top: 0em;
      margin-right: -75%;
      margin-left: 0.5em;
      width: 37.5%;
      display: inline-block;
      
    }

}

@media all and (min-width: 992px) {
  #library-hours h2::after {
    width: 45%;
  }
}

@media all and (min-width: 1200px) {
  #library-hours h2::after {
    width: 55%;
  }
}

/*
*  *************
*   SPACES
*  *************
*/

#home-spaces {
  grid-area: unset;
  /* margin-top: calc(var(--ua-type-size-2) + 10px);  move it down height of Today's Hours h2 */ 
}

.row.region-home-spaces {
  display: block;
}

#home-spaces ul {
  display: grid;
  width: 100%;
  gap: var(--column-gap-md);
  grid-template-columns: [col-1-start icon-1-start] 4em [icon-1-end] 1fr [col-1-end 
                          col-2-start icon-2-start] 4em [icon-2-end] 1fr [col-2-end];
}

#home-spaces li {
  grid-column: col-1-start / col-2-end;
  border: 1px solid var(--mid-gray-color);
  border: calc(0.5 * var(--ua-text-underline-thickness-start)) solid var(--mid-gray-color);
  
  border-radius:  var(--border-rad-sm);
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas: 
    "icon title title title"
    "icon description description description";
}

#home-spaces li .field--type-link {
  grid-area: title;
}

#home-spaces li .field--type-fontawesome-icon {
  grid-area: icon;
}

#home-spaces li .field--type-text-long {
  grid-area: description;
}

#home-spaces li .fa-3x {
  font-size: 2.75em;
  margin-block-start: 0.05em;
}

#home-spaces li {
  padding-inline: var(--row-gap-sm);
  padding-block: var(--row-gap-sm);
  transition: all .5s ease-in-out;
}

#home-spaces li a {
  text-decoration-color: transparent;
  font-size: var(--ua-type-size-1);
  font-weight: 700;
  display: block;
  /* border-bottom: 1px solid var(--ua-purple-light); */
  border-bottom: var(--ua-text-underline-thickness-start) solid var(--ua-gold);
  padding-bottom: 0.25em;
  margin-bottom: 0.33em;
}

#home-spaces li:hover,
#home-spaces li:has(a:hover) {
  border: calc(0.5 * var(--ua-text-underline-thickness-start)) solid var(--ua-gold);
  transform: scale(var(--scale-up-md)); 
  /* background-color: var(--ua-gold-light); */
}

/* #home-spaces li:hover svg.svg-inline--fa path, <-- the chosen icons */ 
#home-spaces li:hover svg.svg-inline--fa .fa-primary, 
#home-spaces li:hover svg.svg-inline--fa .fa-secondary {
	fill: var(--ua-gold);
  --fa-primary-color: var(--ua-gold);
}

#home-spaces a:is(:focus,:focus-visible) {
  outline: none;
  outline-offset: none;
}

#home-spaces li:is(:focus,:focus-visible,:focus-within), 
#home-spaces li:has(a:is(:focus,:focus-visible)) {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 0;
  transform: scale(var(--scale-up-md)); 
}

/* 
*
*
*** MAJOR HACK!!!! FOR UDOC REVIEW --- DO NOT LEAVE IN PRODUCTION!!! 
*   meh --- wasn't the worst hack -- was able to fix for homepage... gotta work on it still
*
*/

ul.w-go li,
#home-spaces li {
  position: relative;
}

ul.w-go li > svg,
#home-spaces li > svg {
  position: absolute;
  right: 1.5em;
  bottom: 1em;
  transition: all .5s ease-in-out;
}

ul.w-go li:hover > svg,
#home-spaces li:hover > svg {
  transform: translate(1em);
}
/* 
@media all and (min-width: 768px) {

  #home-spaces li > svg {
    position: relative;
    right: -11em;
    bottom: 0.5em;
  }
}

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

  #home-spaces li > svg {
    right: -7.75em;
    bottom: -4em;
  }

  #home-spaces li:is(:nth-child(3),:nth-child(4)) > svg {
    bottom: -5.5em;
  }
  
}

@media all and (min-width: 1200px) {
  #home-spaces li > svg {
    right: -10.5em;
    bottom: -3em;
  }

  #home-spaces li:is(:nth-child(3),:nth-child(4)) > svg {
    right: -10.5em;
    bottom: -4em;
  }
}
 */



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

  #home-spaces li {
    padding-inline: calc(0.66*var(--row-gap-sm));
    padding-block: calc(0.66*var(--row-gap-sm));
  }
  
}


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

  
  #home-spaces li {
    padding-inline: var(--row-gap-sm);
    padding-block: var(--row-gap-sm);
  }

  #home-spaces  ul {
    grid-template-rows: [row-1-start title-1-start] auto [title-1-end row-1-end 
                         row-2-start desc-1-start] auto [desc-1-end row-2-end
                         row-3-start title-2-start] auto [title-2-end row-3-end
                         row-4-start desc-2-start] auto [desc-2-end row-4-end]; 
}

  #home-spaces li {
    grid-template-areas: 
      "icon title"
      "icon description";
    grid-column: col-1-start / col-1-end;
    grid-row: row-1-start / row-2-end;
    grid-template-rows: subgrid;
    column-gap: var(--row-gap-sm);
    row-gap: 0;
  }

  #home-spaces li:nth-child(even) {
    grid-column: col-2-start / col-2-end;
  }
  
  #home-spaces li:nth-child(3), #home-spaces li:nth-child(4) {
    grid-row: row-3-start / row-4-end;
  }

}

/*
*  *************
*   EVENTS
*  *************
*  see also: widgets/libcal-homepage-events.css
*/

#home-events {
  margin-top: var(--row-gap-md);
}

#home-events {
   display: flex;
   position: relative;
}

#home-events .container {
  position: relative;
  min-height: 300px;
/*   border: 1px solid var(--lightest-offset);
 */  /* background-color: var(--lightest-offset); */
}

/*
*   gold line after the heading - Events
*/

/* same as hours on mobile, but twice as wide over 768 */
/* #home-events h2::after {
  background-color: var(--ua-gold);
  content: "";
  display: inline-block;
  height: 1px;
  vertical-align: middle;
  width: 45%;
  margin-right: -75%;
  margin-left: 0.5em;
} */

@media all and (min-width: 768px) {
  #home-events h2::after {
    background-color: var(--ua-gold);
    content: "";
    display: inline-block;
    height: 1px;
    vertical-align: middle;
   /*  width: 45%; */
   width: 62%;
    margin-right: -75%;
    margin-left: 0.5em;
  }
  /*  #home-events h2::after {
    width: 62%;
  } */

}

@media all and (min-width: 992px) {
  #home-events h2::after {
    width: 72%;
  }
}

@media all and (min-width: 1200px) {
  #home-events h2::after {
    width: 77.5%;
  }
}

/*
*
*   FAQ (not in D10 version)
*     here for safe-keeping
*
*/

#home-faq-area h2 {
   display: none;
}
/* 
#home-faq-area  h2:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f736';  *star calendar* 
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
} */

#home-faq-area  h2:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f7fa';  /* virus -- temp  */
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
}
/* 
#home-faq-area svg:first-child {
  display: inline-block;
  margin-right: 15px;
  margin-left: 5px;
  margin-top: -5px;
  transform: scale(1.25);
  color: #642A90;
} */

#home-faq-area svg:first-child {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: -7px;
  transform: scale(1.25);
 /* color: #642A90; */
 color: #eeb211;
}

/*
*  *************
*   QUICKLINKS
*  *************
*/


#quicklinks {
  background-color: var(--ua-teal);
  background: var(--ua-grad-teal);
  padding-block: var(--row-gap-md) var(--row-gap-lg);
}


#quicklinks h2 {
  color: var(--white-color);
  margin-bottom: var(--row-gap-sm);
}

#quicklinks nav > ul {
  display: flex;
  row-gap: var(--row-gap-sm);
  column-gap: var(--column-gap-md);
  list-style: none;
}

#quicklinks nav > ul > li {
  background: var(--white-color);
  padding: 1em 1.5em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .5s ease-in-out;
}


/* 
#quicklinks h2:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f709';  
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
}

#quicklinks svg:first-child {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: -2px;
  transform: scale(1.25);
  color: #642A90;
} */

#quicklinks img, #how-tos img {
    max-width: 100%;
}

.quick-links-container {
 
}

#quicklinks li .field--name-field-menu-description {
  margin-bottom: 2em;
}

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



  #quicklinks { 
    /* margin-inline: calc(-1*var(--column-gap-md)); */
    padding-inline: calc(2*var(--column-gap-md));
  }
  /* 
  *
  *
  *
      ALLL hacks!!! 
  *
  *
  *
  */

  #quicklinks li:first-child {
    width: 25%;
    /* flex: 1; */
  }

  #quicklinks li:nth-child(2) {
    width: 25%;
  /*   flex: 2; */
  }

  #quicklinks li:nth-child(3) {
    width: 35%;
    flex: 1;
  }

  #quicklinks li:nth-child(4) {
    width: 66%;
    /* flex: 1; */
  }

}


#quicklinks li a {
  text-decoration-color: transparent;
  font-size: var(--ua-type-size-1);
  font-weight: 700;
  display: block;
  border-bottom: 1px solid var(--ua-purple-light);
  padding-bottom: 0.25em;
  margin-bottom: 0.33em;
}

#quicklinks li:hover,
#quicklinks li:has(a:hover) {
  border: 1px solid var(--ua-gold);
  transform: scale(var(--scale-up-md)); 
}

#quicklinks a:is(:focus,:focus-visible) {
  outline: none;
  outline-offset: none;
}

#quicklinks li:is(:focus,:focus-visible,:focus-within), 
#quicklinks li:has(a:is(:focus,:focus-visible)) {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 0;
 /*  transform: scale(var(--scale-up-sm)); wait to do all at the same time */
}


/*----------*/
/* 
.slide-nav {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  padding: 0px 25px;
  z-index: 1020;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.slide-nav a {
  color: rgba(255,255,255,0.25);
}

.slide-nav:hover a {
  color: rgba(255,255,255,0.85);
}

.slide-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.1);
  background-blend-mode: multiply;
}
 */

a.more {
  text-decoration: none;
  font-size: var(--ua-type-size--1);
  text-transform: uppercase;
  border-bottom: 0px solid;
}



/* 
*
*   BIGGER THAN A BREAD BOX 
*
*/


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

  #homepage-grid
  #primo-search .container-fluid {
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
  }

  /* this makes the line after the heading */
  /* #homepage-grid .grid-regular h2:after {
    background-color: #46166b;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 40%;
    left: 0.5em;
    margin-right: -50%;
    margin-top: -5px;
  } */

  /* this makes the line after the heading */
 /*  #homepage-grid #quicklinks h2:after {
    background-color: #46166b;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 84%;
    left: 0.5em;
    margin-right: -50%;
    top: -4px;
  } */


  /* .quick-links-container {
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;
    margin-bottom: 15px;
    margin-left: 47px;
  } */

/* 
  .quick-link-block {
    padding: 16px 0px 16px 0px;
  } */


  .region-libcal-hours {
    padding-left: 0px;
  }
  
  tr.hours-depart, tr.loc9094, tr.loc9451 {
    display: table-row;
  }

  .linktoall {
    /* position: absolute;
    bottom: 0.5em;
    right: -1em;
    text-align: right;
    font-weight: 300;
    display: block;
    border: 1px solid var(--lightest-offset);
    padding: 0.25em 0.5em; */
  }
/* 
  #homepage-grid .grid-regular h2:after {
    width: 100%;
  } */
 
}

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

/* 
  .slide-copy {
    margin-left: 0px;
    font-weight: 300;
    width: 35%;
  }  */

  #homepage-grid { 
 /*    -ms-grid-rows: calc(70vh - 70px) 30vh;
    grid-template-rows: calc(70vh - 70px) 30vh;
   */
  }

}





/* 
*
*   WIDER THAN A BREAD BOX 
*   fit for macbook air, chromebook 11" screens
*
*/

@media only screen and (min-width: 768px) and (max-height: 768px) and (orientation: landscape) {
 
 /*  .region-home-slider, .views_slideshow_cycle_main, .views_slideshow_slide .slider-item, .slider-link-to-content a {
    height: calc(60vh - 70px);
  } */


  #homepage-grid {
 /*    -ms-grid-rows: calc(60vh - 70px) 40vh;
    grid-template-rows: calc(60vh - 70px) 40vh; */
  }

}




/* 
*
*   IE Fixes 
*
*/



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #library-hours {
    float: left;
  }
/* 
  .quick-link-block {
    float: left;
    margin-left: 50px;
  } */

  .grid-col-container {
    min-height: 400px;
  }

}