/* currently here:

    - libcal events in a page
    - layout builder defaults
    - addable classes in layout builder
    - hero block
    - 'hide title' hero block
    - center title - h1, chat
    - image basics (?)
    - pdf file inserts

    COLORS: 
    --ua-purple: rgb(69, 22, 106);
    --ua-purple-mid: hsl(274, 55%, 36%);
    --ua-purple-light: hsl(272, 36%, 86%);
    --ua-gold: hsl(44, 87%, 50%);
    --ua-gold-mid: hsl(44, 85%, 69%);
    --ua-gold-light: hsl(45, 46%, 95%);
    
*/

/*
//
//
// LibCal Events List in a page
//
//
*/

.libcal-event-list h3{
  display: none;
}

.libcal-event-list ul {
  padding-left: 0px;
}

.libcal-event-list li {
  display: flex;
  flex-direction: row-reverse;
  list-style: none;
  line-height: 1.2rem;
  border-bottom: 1px solid #ececec;
  margin-bottom: 5px;
  padding: 15px 10px;
}


.libcal-event-list li .s-lc-ea-date {
  width: 40%;
}


.libcal-event-list li a {
  width: 55%;
  margin-left: 5%;
}


/*
//
//   Layout Builder
//   Default Values
//
*/
/* 
 original -- have to change for two-col -- See Landing Pages
@media all and (min-width: 768px) {
  
  .layout--twocol-section{ 
    flex-wrap: wrap;
  }

} */

@media all and (min-width: 768px) {
  
  .layout--twocol-section{ 
    flex-wrap: nowrap;
    gap: var(--column-gap-md);
  }

}


@media all and (min-width: 992px) {
  
  .layout--twocol-section{ 
    gap: var(--column-gap-lg);
  }

}

/* 
.block-layout-builder{
  margin-bottom: 25px;
} */
/* 
.node--view-mode-teaser .block-layout-builder,
.node--view-mode-content-in-a-page .block-layout-builder {
  margin-bottom: 5px;
} */
/* 
.layout--twocol-section { 
  flex-wrap: nowrap;
  flex-direction:column;  
 } */
/* 
body .layout--twocol-section--50-50 p {
  padding-right: 10%;
}
 */
/* 
.block-inline-blockbasic h2{
  border-top: 1px solid #d6d6d6;
  padding-top: 20px;
  margin-bottom: 10px;
} */

  /* threecol sections are probably tables */
/* 
.layout--threecol-section .block-inline-blockbasic h2{ 
  border-top: 0px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  padding-bottom: 10px; padding-top: 0px;
}

.layout:first-of-type .block-inline-blockbasic h2{
  border-top: 0px solid transparent;
}
 */

/* fancy the image in the top right corner of a page */
/* 
.layout:first-of-type .layout__region--second .block:first-child img {
  transform: translateY(-25px) translateX(25px) scale(1.275);
  margin-bottom: 50px;
}

.path-taxonomy .layout:first-of-type .layout__region--second .block:first-child img {
  transform: translateY(-50px) translateX(25px) scale(1.275);
   margin-bottom: -50px;
}


.view-content .layout:first-of-type .layout__region--second .block:first-child img {
  transform: translateY(0px) translateX(0px) scale(1.0);
   margin-bottom: 0px;
} */

.block-layout-builder.caption p {
  font-size: var(--ua-type-size--1);
  /* line-height: 1.2em;
  padding-top: 10px; */
}


/* undo the float on images not the full size from field.css (barrio) */
/* 
@media all and (min-width: 560px) {
  .node .field--type-image {
    float: left; 
    margin: 0 1em 0 0;
  }
  [dir="rtl"] .node .field--type-image {
    float: right;
    margin: 0 0 0 1em;
  }
  .node .field--type-image + .field--type-image {
    clear: both;
  }
} */

@media all and (min-width: 560px) {
  .node .field--type-image {
      float: none;
      /* width: 100%; */
  }
}



/*
//
//   Layout Builder
//   Add-able Classes
//
*/

.long-article,
.long-article p {
  /* margin-left: auto;
  margin-right: auto;
  max-width: 680px; */
}


/* break out of the container -- add full-full-width */

.full-full-width{
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
}


.parallax {
  background-attachment: fixed;
}

.small-text p {
  font-size: inherit;
  /* line-height: 1.3; */
}

.mini-bio {
  padding-left: 10%;
  padding-right: 10%;
}

.mini-bio .field--name-field-visible-teaser-text p {
  line-height: 1.1;
}

.mini-bio .field--name-field-after-the-teaser p {
  font-size: var(--ua-type-size--1);
  line-height: 1.3;
  text-align: left;
}

.testimonial blockquote {
  padding: 20px 40px;
  border-left: 3px solid #eeb211;
}

.layout__region--first .testimonial blockquote {
  border-right: 3px solid #eeb211;
  border-left: 0px;
}

.block-inline-blockbasic.h2-border-btm h2{
  border-top: 0px;
  border-bottom: 1px solid #d6d6d6;
  padding-top: 0px;
  padding-bottom: 10px;
}

.clicktozoom img {
  cursor: zoom-in;
}

p.highlight {
    transform: scale(1.25);
    padding: 0.5em 0em 1em 2em;
    border-left: 3px solid #eeb211;
    margin-top: 3em;
    margin-bottom: 3em!important;
}

p.smaller {
  font-size: var(--ua-type-size--1);
  line-height: 1.2rem;
}

body .layout--twocol-section--50-50 p.highlight {
  transform: scale(1.25);
  padding: .5em 5em 1em 2.5em;
  border-left: 3px solid #eeb211;
  margin-top: 3em;
  margin-bottom: 3em!important;
}

p.author-attribution {
  display: inline-block;
  font-size: 1.1rem;
  font-style: italic;
  padding: 0.5em 2em;
  top: -6em;
  border-top: 1px solid #eeb211;
  position: relative;
  color: #eeb211;
}

p.author-attribution + p {
  position: relative;
  top:-5em;
  margin-bottom: -4em;
}

span.highlight {
  background: linear-gradient(to top, rgba(238, 179, 17,0.25) 85%, transparent 85%);
}

.bg-purple {
  background-color: var(--ua-purple);
  color: #ffffff;
}

.bg-gold {
  background-color: var(--ua-gold);
  color: var(--ua-purple-darkest);
}

hr.spacer,
hr.neutral {
  /*spacing is (will be...) configurable, 
  so we use bs classes and on the twig block containing the hr */
  border-color: var(--light-gray-color);
}

hr.gold {
  border-color: var(--ua-gold);
}

hr.purple {
  border-color: var(--ua-purple-highlight);
}



/*
//
//
// HERO
//
//
//
*/

#hero-header-container {
   padding-right: 0px;
   padding-left: 0px;
}

.background-image-wrapper {
/*  display: flex;
  flex-direction: row;
*/
  position: relative;

}


.background-image-wrapper .container {
  padding-left: 0px;
  padding-right: 0px;
}

.background-image-wrapper, #block-ualibraries-backgroundimage {
  /*  min-height: 300px; */

  height: 50vh;
}

#block-ualibraries-backgroundimage {
    position: relative;
}

#block-ualibraries-backgroundimagetext {
  position: absolute;
  bottom: 25px;
  left: 0px;
  right: 0px;
}

.background-image-inner {
    position: absolute;
    z-index: 0;
    background: #000000;
}

.background-image, .background-image::before, .background-image::after {
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    opacity: 1.0;

}



.background-image-text {
  color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}


.background-image-overlay {
  display: block!important;
  background-blend-mode: darken;
  background: transparent;
  background: linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,0) 50%);
}


.background-image-text #hours {

}

.background-image-text h1 {
    color: #ffffff;
    background-color: rgba(0,0,0,0.65);
    padding: 25px;
    margin-left: -25px;
    margin-bottom: 0px;
    margin-top: 0px;
    width: auto;
    background-blend-mode: multiply;
}



/*
*
*  HERO-inserted PAGES
*  for the ones that get the "hide title" box checked in edit
*
*/


.hero-title #page-header{
  display:none;
}

.hero-title 
.layout:first-of-type .layout__region {
  padding-bottom: 0px!important;
}

h2.toc-nav-heading,
.hero-title 
.layout__region--second h2 {
    color: #46166b;
    border-bottom: 2px solid #46166b;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-top: 0px!important;
}


#in-page-nav h2 {
  display: none;
  font-size: 1.35em;
  background: #642a90;
  color: #ffffff;
  padding: 15px;
}

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


  .hero-title 
  .layout__region--second h2 {
      margin-left: -20px;
  }


  #in-page-nav {
      position: sticky;
      top: 80px;
  }

  .scrolled #in-page-nav h2 {
      display: block;
  }

  .page-nav a {
      border-left: 2px solid #46166b;
      font-size: 1.2em;
      line-height: 1.35em;
      margin-bottom: 3px;
  }
  .page-nav a.active {
    border-left: 2px solid #eeb211;
    background: #f8e1a5;
  }

}


/*
    center the heading for certain pages, like Chat
*/

.path-chat h1 {
  text-align: center;
  border-bottom: 1px solid var(--ua-gold);
  padding-bottom: 0.8em;
  margin-bottom: 0;
}



/*
**
**
**  PDF Inserts 
**    
**
*/

.file--application-pdf {
  padding-left: 0px;
  background-image: unset;
}/* 
.file--application-pdf:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f1c1'; 
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
} */

/*
//
//
//  Images
//
//
//
*/

.staff-image {
  max-width: 100%;
}

