/* 
  UALibraries Web Color Palette --2025--
*/
:root {
  /* brand colors: purple and gold */
  --ua-purple: hsl(274, 66%, 25%);
  --ua-purple-mid: hsl(274, 55%, 36%);
  --ua-purple-light: hsl(272, 36%, 86%);
  --ua-purple-highlight: hsl(286, 99%, 49%);
  --ua-purple-darkest: hsl(274, 83%, 19.5%); /* ua purple meets langone purple */
  --ua-purple-darkest-bg: rgba(19, 3, 31, 0.862);

  --ua-gold: hsl(44, 87%, 50%);
  --ua-gold-mid: hsl(44, 85%, 69%);
  --ua-gold-light: hsl(45, 46%, 95%);

  --ua-gold-highlight:hsl(55, 100%, 50%);
  --ua-gold-darkest: hsl(44, 86%, 33%);

  /* teals: (custom) match chat widget bg teals, not internal teals */
  --ua-teal-light: #0f6e71; 
  --ua-teal-mid: #026067;
  --ua-teal: #024c50;

  /* gradients: https://www.learnui.design/tools/gradient-generator.html */
  --ua-grad-purple: linear-gradient(var(--ua-purple-mid) 0%, var(--ua-purple) 100%);
  --ua-grad-purple-inv: linear-gradient(var(--ua-purple) 0%, var(--ua-purple-mid) 100%);
  --ua-grad-gold-linear: linear-gradient(var(--ua-gold) 0%, var(--ua-gold-light) 66%, transparent 100%);
  --ua-grad-teal: linear-gradient(var(--ua-teal-light) 0%, var(--ua-teal-mid) 50%, var(--ua-teal) 100%); 
  --chat-widget-gradient: linear-gradient(175deg, rgba(70,22,107,1) 0%, #0f6e71 65%, #158c90 100%);
  --purple-to-teal-gradient:  linear-gradient(194deg, rgb(70, 22, 107) 0%, #0f6e71 80%, #158c90 100%);

  /* VARIATIONS of brand colors: inspired by Langone [NYU]: dark purple ++ */
 
  --ua-grad-purple-dark-radial: radial-gradient(at 80% 0%, hsla(195, 93%, 38%, 0.1) 0px, transparent 50%), 
          radial-gradient(at 0% 52%, hsla(274, 80%, 30%, 0.7) 0px, transparent 50%), 
          radial-gradient(at 39% 38%, hsla(274, 80%, 30%, 0.2) 0px, transparent 50%), 
          radial-gradient(at 50% 50%, hsla(211, 55%, 27%, 0.3) 0px, transparent 50%), 
          radial-gradient(at 73% 70%, hsla(211, 55%, 27%, 0.3) 0px, transparent 50%), 
          radial-gradient(at 49% 99%, hsla(274,  66%, 25%, 0.6) 0px, transparent 50%), 
          radial-gradient(at 1% 87%, hsl(275, 66%, 25%) 0px, transparent 50%),
          radial-gradient(at 29% 28%, hsla(211, 55%, 27%, 0.3) 0px, transparent 50%), 
          radial-gradient(at 39% 2%, hsla(211, 55%, 27%, 0.3) 0px, transparent 50%), 
          radial-gradient(at 66% 0%, hsla(211, 55%, 27%, 0.5) 0px, transparent 50%);

  /* repro of above in gold, using https://colorgradient.dev/ -- only option to save is as cookie, but did in private window... boo... */        
  --ua-grad-gold-radial: radial-gradient(75% 65% at 76% 52%, #F8F5EC4D 0%, #F8F5EC00 100%),radial-gradient(75% 75% at 72% 21%, #EEB311FF 0%, #EEB31100 100%),radial-gradient(75% 75% at 79% 134%, #9A730957 0%, #9A730900 100%),radial-gradient(75% 75% at 30% 12%, hsl(44, 85%, 69%) 0%, #F3CF6D00 100%);
  /* radial-gradient(75% 65% at 83% 51%, #F8F5EC4D 0%, #F8F5EC00 100%),radial-gradient(75% 75% at 72% 21%, #EEB311FF 0%, #EEB31100 100%),radial-gradient(75% 75% at 79% 134%, #9A730957 0%, #9A730900 100%),radial-gradient(75% 75% at 30% 12%, hsl(44, 85%, 69%) 0%, #F3CF6D00 100%); */
  /* radial-gradient(75% 65% at 48% 21%, #F8F5EC2B 0%, #F8F5EC00 100%),radial-gradient(75% 75% at 72% 21%, #EEB311FF 0%, #EEB31100 100%),radial-gradient(75% 75% at 79% 134%, #9A730957 0%, #9A730900 100%),radial-gradient(75% 75% at 30% 12%, hsl(44, 85%, 69%) 0%, #F3CF6D00 100%); */
  /* radial-gradient(75% 75% at 72% 21%, #EEB311FF 0%, #EEB31100 100%),radial-gradient(75% 75% at 102% 4%, hsl(45, 46%, 95%) 0%, #F8F5EC00 100%),radial-gradient(75% 75% at 79% 134%, #9A730985 0%, #9A730900 100%),radial-gradient(75% 75% at 30% 12%, hsl(44, 85%, 69%) 0%, #F3CF6D00 100%); */



  /* light mode color defaults */
  --primary-text-color: hsl(250, 13%, 9%);
  --secondary-text-color: hsl(0, 0%, 35%); 
  --secondary-text-color: hsl(240, 5%, 45%); /* from pantheon - nice gray, meets ratio */
  /* --secondary-text-color: hsl(0, 0%, 60%); fails contrast ratio */
  --light-gray-color: hsl(0, 0%, 80%); 
  --mid-gray-color: hsl(0, 0%, 50%);
  --dark-gray-color: hsl(0, 0%, 27%);
  --darker-gray-color: hsl(309, 26%, 5%);
  /*** have purple tint -- not quite right -- save for later ***/
  --dark-gray-color-tint: hsl(309, 47%, 12%);
  --darker-gray-color-tint: hsl(309, 26%, 5%);

  --lightest-offset:  #f2f2f2;
  --lightest-visible: #ededed;
  --lightest-offset-accent:  hsl(0, 0%, 50%);
  --black-color: hsl(0, 0%, 13%);
  --white-color: hsl(0, 0%, 99%);

  --error-dark: hsl(354, 61%, 28%);
  --error-light: hsl(355, 70%, 91%);

  /* shadows: generated 4/9/25 at https://www.joshwcomeau.com/shadow-palette/  thanks, Josh Comeau! */
  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    0.2px 0.3px 0.5px hsl(var(--shadow-color) / 0),
    0.8px 1px 1.9px hsl(var(--shadow-color) / 0.12);
  --shadow-elevation-medium:
    0.2px 0.3px 0.5px hsl(var(--shadow-color) / 0),
    1.4px 1.7px 3.3px hsl(var(--shadow-color) / 0.08),
    4.1px 4.9px 9.6px hsl(var(--shadow-color) / 0.15);
  --shadow-elevation-high:
    0.2px 0.3px 0.5px hsl(var(--shadow-color) / 0),
    3px 3.6px 7px hsl(var(--shadow-color) / 0.05),
    5.8px 7px 13.6px hsl(var(--shadow-color) / 0.1),
    10.3px 12.3px 24.1px hsl(var(--shadow-color) / 0.15),
    18.1px 21.7px 42.4px hsl(var(--shadow-color) / 0.2);
  --shadow-main-nav-mega-dropdowns:
    0px 0.8px 0.7px hsl(var(--shadow-color) / 0.21),
    0px 3.4px 3.1px -0.6px hsl(var(--shadow-color) / 0.19),
    0.1px 7.1px 6.5px -1.1px hsl(var(--shadow-color) / 0.17),
    0.2px 13.9px 12.7px -1.7px hsl(var(--shadow-color) / 0.15),
    0.3px 25.7px 23.5px -2.2px hsl(var(--shadow-color) / 0.14),
    0.5px 44.4px 40.6px -2.8px hsl(var(--shadow-color) / 0.12),
    0.8px 72px 65.9px -3.3px hsl(var(--shadow-color) / 0.1),
    1.2px 110.4px 101px -3.9px hsl(var(--shadow-color) / 0.08);
  --text-shadow-double:
    0px 4px 4px hsl(var(--shadow-color) / 0.25), -2px -2px 20px hsl(var(--shadow-color) / 0.5);
  --text-shadow-single:
    0px 4px 4px hsl(var(--shadow-color) / 0.25);
  --text-glow-double:
    0px 3px 3px rgba(255,255,255, 0.18), -2px -2px 20px rgba(255,255,255, 0.25);
  --text-glow-single: 
    0px 3px 3px rgba(255,255,255, 0.18);
    
  --focus-color: var(--ua-gold);
  --focus-offset: 3px;
  --focus-outline: dotted var(--focus-offset) var(--ua-gold);

  
  --ua-text-underline-offset-start: 0.2em;
  --ua-text-underline-offset-diff: 0.1em; 
  --ua-text-underline-thickness-start: 0.1em;
  --ua-text-underline-thickness-diff: /* .025em; */ 0.05em;

  --ua-biglink-underline-offset-start: 0.3em;
  --ua-biglink-underline-offset-diff: 0.15em;
  --ua-biglink-underline-thickness: 0.15em;
  --ua-biglink-underline-thickness-diff: 0em;
}


/*
*
*.  link styles from lgaz.css -- Database Finder
*                                       - 8-18-25 --aap
*   apply link effect from https://css-irl.info/exploring-has-again/ 

        :is(#s-lib-public-main) a, 
        :is(#s-lib-public-main) a:is(:visited,:active) {
          font-weight: 700;
          transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms;
          text-decoration: underline;
          text-underline-offset: 0.2em;
          text-decoration-thickness: 0.1em;
        }

        :is(#s-lib-public-main) 
        a:is(:hover,:focus,:focus-visible) {
          text-decoration: underline;
          text-underline-offset: 0.35em;
          color: var(--ua-purple);
          text-decoration-color: var(--ua-gold);
          text-decoration-thickness: 0.2em;
          transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms;
        }
 */


a {
  transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms ease-in-out;
  text-decoration: underline;
  text-underline-offset: var(--ua-text-underline-offset-start);
  text-decoration-thickness: /* 0.1em; */ var(--ua-text-underline-thickness-start);
  line-height: 150%;
  word-wrap: balance;
  color: var(--ua-purple-mid); /* purple links look visited - not good a11y -- let's try teal */
  color: var(--ua-teal-mid);
}

a:hover {
  color: var(--ua-teal);
  text-decoration: underline;
  text-decoration-thickness: /* 0.125em; */ calc(var(--ua-text-underline-thickness-start) + var(--ua-text-underline-thickness-diff));
  text-underline-offset: /* 0.3em; */ calc(var(--ua-text-underline-offset-start) + var(--ua-text-underline-offset-diff));
  text-decoration-color: var(--ua-gold);
}

a:is(:focus,:focus-visible) {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 0;
}

.form-control:is(:focus,:focus-visible),
input[type="submit"]:is(:focus,:focus-visible) {
  outline: var(--focus-outline); 
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 0;
}
  
/* override _nav.scss, which removed underline on hover */
.nav-link:focus,
.nav-link:hover {
  text-decoration: underline;
}

/* override bootstrap inserted style, which retains box-shadow and doesnt include focus-visible */
button:focus, button:focus-visible,
.btn-outline-light.focus, .btn-outline-light:focus, .btn-outline-light:focus-visible,
.btn-outline-primary:focus, .btn-outline-primary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 0;
}

/* give the images inside of links in the header and footer focus rings instead of the link area */
a.navbar-brand:focus,
a.navbar-brand:focus-visible,
#ualink a:focus,
#ualink a:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: 0 0 0 0;
}

a.navbar-brand:focus img, 
a.navbar-brand:focus-visible img,
#ualink a:focus img,
#ualink a:focus-visible img  {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 0;
}



.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show > .btn-outline-primary.dropdown-toggle {
  color: #ffffff;
  background-color: var(--ua-purple-highlight);
  border-color: var(--ua-purple-highlight);
  text-shadow: 3px 5px 5px rgba(19, 3, 31, 0.862);
}


/* ---------- Color Module Styles ----------- */
/* 
body {
  color: #3b3b3b;
  background: #292929;
}

#page,
#main-wrapper,
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: #fff;
}

.tabs ul.primary li a.is-active {
  background-color: #fff;
}

.tabs ul.primary li.is-active a {
  background-color: #fff;
  border-bottom-color: #fff;
}

#navbar-top {
  background-color: #055a8e;
}

#navbar-main {
  background-color: #1d84c3;
}

a,
.link {
  color: #0071b3;
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: #018fe2;
}
.nav-item .dropdown-item a.active {
  color: white;
}
.nav-link {
  color: rgb(231, 231, 231);
}
.nav-link:hover,
.nav-link:focus {
  color: rgb(231, 231, 231);
}
a:active,
.link:active {
  color: #23aeff;
}

.page-item.active .page-link {
  background-color: #0071b3;
  border-color: #0071b3;
}

.page-link,
.page-link:hover {
  color: #0071b3;
}

.sidebar .block {
  background-color: #f6f6f2;
  border-color: #f9f9f9;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #0256b1;
}

.site-footer {
  background: #292929;
}

.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: #fffeff;
} */


/* ---------- Color Form ----------- */
/* 
[dir="rtl"] .color-form .color-palette {
  margin-left: 0;
  margin-right: 20px;
}

[dir="rtl"] .color-form .form-item label {
  float: right;
}

[dir="rtl"] .color-form .color-palette .lock {
  right: -20px;
  left: 0;
}
 */