/*  Author: Joel Valdez
    Module: app.css
    Description: This will be the baseline CSS branding for a Library Application using Bootstrap v5.3
*/

/* 
  FONT NOTES: 
  For Web Link, add the following in the HEAD section
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  
    If NOT Using web link for the fonts, uncomment below 
*/
@font-face {
  font-family: "Fira Sans Regular", Helvetica Neue, Helvetica, Roboto, Arial,
    sans-serif;
  src: url("../fonts/FiraSans-Bold.ttf");
  src: url("../fonts/FiraSans-Regular.ttf");
  src: url("../fonts/FiraSans-Medium.ttf");
  src: url("../fonts/FiraSans-SemiBold.ttf");
}

/*********************************************************/
/* Custom css colors and others */
/*********************************************************/
.ucr-blue-text {
  color: #003da5;
}
.ucr-gold-text {
  color: #ffb81c;
}
.ucr-red-text {
  color:red;
}
.ucr-blue-bg {
  background-color: #003da5;
}
.ucr-gold-bg {
  background-color: #ffb81c;
}


/* Margins */
.ucr-ml--15 {
  margin-left: -15px !important;
}

.ucr-mr--15 {
  margin-right: -15px !important;
}

.ucr-mr-15 {
  margin-right: 15px !important;
}

.ucr-ml-15 {
  margin-left: 15px !important;
}

/*********************************************************/
/*  Custom Adjustments
/*********************************************************/

img {
  max-width: 90%;
  max-height: 100%;
}

.img-responsive {
  max-width: 100%;
  max-height: 100%;
}
.ucr-navbar {
  padding: 0.5rem 0 !important;
}
.ucr-navbar-toggler-btn {
  background-color: #003da5;
}

.navbar-toggler-icon {
  background-image: none;
}

.ucr-navbar-toggler-btn .ucr-icon-bar {
  background-color: #ffb81c;
  display: block;
  width: 25px;
  height: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-radius: 1px;
  padding: 2px;
}
ul.ucr-navbar-nav {
  margin-bottom: 5px;
  margin-right: -20px;
}
ul.ucr-navbar-nav li {
  padding: 0 15px;
}
ul.ucr-navbar-nav li.nav-item:hover {
  background-color: #003da5;
}
ul.ucr-navbar-nav li.nav-item:hover > a {
  color: #ffb81c;
}

ul.ucr-navbar-nav li a {
  color: #003da5;
  font-weight: 500;
}

ul.ucr-navbar-nav li > a:hover,
ul.ucr-navbar-nav li > a:active,
ul.ucr-navbar-nav li > div > a:hover,
ul.ucr-navbar-nav li > div > a:active {
  background-color: #003da5;
  color: #ffb81c;
}

ul.ucr-navbar-nav li > div.dropdown-menu {
  background: #ffb81c;
  text-transform: uppercase;
}

/*********************************************************/
/* TOP section */
/*********************************************************/
#org-section {
  border-bottom: 1px solid #003da5;
}
#org-section-container {
  position: relative;
  margin-bottom: -15px;
}
.top-org-title {
  text-transform: uppercase;
  font-family: "Fira Sans Medium", sans-serif;
  font-size: 1rem;
  font-weight: 550;
  display: inline-block;
  max-width: 100%;
  padding: 15px 0;
  margin: 0;
  color: #333333;
  letter-spacing: 0;
}

/*********************************************************/
/* TOP Logo section */
/*********************************************************/
.top-logo-container {
  border-bottom: 20px solid #003da5;
}

.bottom-shadow {
  box-shadow: 0 0 3px #666666;
  min-height: 0.5em;
}

.masthead-container .masthead-title {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
}

h1.masthead-title {
  margin-top: 12px;
  color: #003da5;
}

.masthead-container .masthead-slogan {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0;
}

.masthead-container {
  padding: 10px 0;
  background-color: #ffffff;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

h1.masthead-slogan {
  margin-top: 12px;
  color: #003da5;
  float: right;
}

.masthead-container .masthead-logo,
.masthead-container .masthead-logo-line {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: right !important;
  width: 78px;
  height: 39px;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-image: url("../images/UCR-horizontal-logo-over-white-bg-w-yellow-line.svg");
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
}

@media print, screen and (min-width: 55.9375em) {
  .masthead-container .masthead-logo,
  .masthead-container .masthead-logo-line {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-align: left !important;
    width: 190px;
    height: 56px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }
}

.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*********************************************************/
/* FOOTER section */
/*********************************************************/
footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: #003da5;
  z-index: 0;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: #ffff;
  font-family: "Fira Sans Bold", "Helvetica Neue", Helvetica, Roboto, Arial,
    sans-serif;
}
footer .footer-container {
  margin: 0;
  padding: 0;
}

@media print, screen and (min-width: 55.9375em) {
  footer:after {
    content: "";
    background: url("../images/bg-ucr-footer.jpg") 50%;
    background-size: cover;
    opacity: 0.15;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
  }
}

footer .footer-columns {
  padding-top: 50px;
}

footer .footer-columns .footer-column {
  padding-bottom: 15px;
  margin-bottom: 15px;
  min-height: 450px;
}

@media print, screen and (min-width: 55.9375em) {
  footer .footer-columns .footer-column {
    border-right: 1px solid #fefefe;
    height: 100%;
  }

  footer .footer-columns .footer-column:last-child {
    border-right: none;
    height: 100%;
  }
}

footer .footer-item {
  border-bottom: 1px dotted #ffb81c;
  margin: 5px 0 5px 0;
}

footer .footer-item h3,
footer .footer-item p.social-title {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.444;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  margin-bottom: 1.5em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #ffb81c;
}

footer .footer-item p {
  color: #ffffff;
  font-size: 0.8rem;
  line-height: 1.364rem;
  letter-spacing: 0.06875rem;
}

footer .footer-item a:not(.button) {
  color: #ffffff;
  border-bottom: 1px dotted;
}

footer .footer-item a:not(.button):focus,
footer .footer-item a:not(.button):hover {
  color: #ffe57f;
}

footer .footer-item a:not(.button) img:focus,
footer .footer-item a:not(.button) img:hover {
  opacity: 0.9;
}

footer .footer-item a:not(.button).link-alt {
  border-bottom: none;
  font-size: 0.625rem;
  line-height: 1.3;
  text-transform: uppercase;
}

footer .footer-item ul {
  list-style-type: none;
}

footer .footer-item ul li {
  font-size: 0.8rem;
  line-height: 1.2rem;
}

footer .footer-item ul li a:after {
  content: "";
  display: none;
}

footer .footer-item .footer-logo {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: left !important;
  width: 12.5rem;
  height: 3.9375rem;
  background: url("../images/UC_Riverside_Horiz_BluBG.svg") no-repeat;
}

.footer-item > div.social-link a.social-icon-button {
  color: #ffb81c;
  border-bottom: none !important;
  font-size: x-large;
  padding: 0px 5px;
  text-decoration: none;
}
.footer-item > div.social-link a.social-icon-button:hover {
  color: #fff;
  text-decoration: none;
}

footer .ucr-footer-info .footer-links {
  margin: 6px 0 14px 0;
  padding: 0;
}

footer .ucr-footer-info .footer-links li {
  border-bottom: 1px solid #ffb81c;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.167;
  letter-spacing: 0.083em;
  list-style-type: none;
}

footer .ucr-footer-info .footer-links li a {
  color: #fff;
  border: none;
  display: block;
  padding: 0.5rem 1.6875rem;
  text-decoration: none;
}

footer .ucr-footer-info .footer-links li a:focus,
footer .ucr-footer-info .footer-links li a:hover {
  background-color: rgba(220, 220, 220, 0.15);
  text-decoration: none;
}

footer .footer-dept-info address {
  font-style: normal;
  padding-bottom: 15px;
}

footer .footer-dept-info a.link-img {
  display: block;
  border-bottom: none;
}

footer .footer-dept-info a.link-img-location {
  text-transform: uppercase;
}

footer .footer-dept-info a.link-img:before {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: 1.5rem;
  vertical-align: middle;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: 4px;
  content: "\f34e";
}

footer .footer-dept-info a img {
  margin-left: 21px;
}

footer .site-legal-container {
  background-color: #ffb81c;
  margin: 0;
  padding: 0;
}

footer .site-legal-container {
  color: #003da5;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  flex-shrink: 0;
  text-align: center;
}

footer ul.site-legal-footer {
  list-style-type: none;
  margin: 0;
  padding: 18px 0;
}

footer ul.site-legal-footer li {
  display: inline;
}

footer ul.site-legal-footer li:before {
  content: "|";
  padding-right: 5px;
}

footer ul.site-legal-footer li:first-child:before {
  padding-right: 0;
  content: "";
}

footer ul.site-legal-footer li a {
  text-decoration: none;
}

footer ul.site-legal-footer li a:hover {
  text-decoration: underline;
}

@media print, screen and (max-width: @screen-sm) {
  .footer-column {
    border-right: 0;
    min-height: 100px;
  }
}