/* ======================================================================================================== */
/* MARK: Variables */
/* ======================================================================================================== */
:root {
	--su-text: #2e262a;
	--su-maroon: #8a0000;
	--su-gold: #ffc420;
	--su-light-tan: #f0eeea;
	--su-dark-tan: #e2ded7;
	--su-link-color: #256070;
	--su-box-shadow: 0 1.25rem 0 -0.625rem var(--su-dark-tan);
	--lib-hours-open: #438136;
	--lib-hours-closed: #6a6a6a;
}

/* ======================================================================================================== */
/* MARK: SU Style Overrides */
/* ======================================================================================================== */
a:not(.cta-link, .accordion__title, .primary-navigation__child-nav-trigger) .icon-chevron-right {
	display: none !important;
}

h3, .h3 {
	font-size: clamp(1.025rem, 2vw, 1.35rem);
	color: var(--su-text);
}

.callout:hover {
	background-color: transparent;
}

.callout:hover .callout__heading {
	color: var(--su-maroon);
}

.callout:hover p {
	color: var(--su-text);
}

.callout:hover .cta-link,
.callout:hover .cta-link svg {
	color: var(--su-link-color);
}

.accordions_section h3.acc_collapse {
	font-size: clamp(1.125rem, 2.25vw, 1.5rem);
	font-weight: 500;
	padding: 0px;
	margin: 0.5rem 0px 1rem 0.5rem;
}

.accordions_section .acc_collapse + div {
	margin-bottom: 1rem;
}

/* ======================================================================================================== */
/* MARK: Accessibility Styles */
/* ======================================================================================================== */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ======================================================================================================== */
/* MARK: Custom Description Lists */
/* ======================================================================================================== */
dl.libraryDescriptionList {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

dl.libraryDescriptionList dt,
dl.libraryDescriptionList dd {
  grid-column: 1 / -1;
}

dl.libraryDescriptionList dt {
	margin: 0;
	border-bottom: 1px solid var(--su-dark-tan);
}

dl.libraryDescriptionList dd {
	margin-bottom: 1em;
}

/* ======================================================================================================== */
/* MARK: Custom Figures */
/* ======================================================================================================== */
figure.libraryFigure {
	background-color: var(--su-light-tan);
	box-shadow: var(--su-box-shadow);
	padding: 1rem;
	margin-bottom: 1.5rem;
}

figure.libraryFigure img {
	padding: 0;
}

figure.libraryFigure figcaption {
	margin-top: 0.5rem;
	font-size: 14px;
}

/* ======================================================================================================== */
/* MARK: Custom Subsite Navs */
/* ======================================================================================================== */
.librarySubsiteNav {
	list-style: none;
}

.librarySubsiteNav li {
	border-top: .0625rem solid var(--su-dark-tan);
}

.librarySubsiteNav a {
	display: inline-block;
	text-decoration: none;
	color: var(--su-text);
	padding: .75rem 0 .75rem 0;
}

.librarySubsiteNav a:not(.submenu__current):hover {
	color: var(--su-link-color);
	text-decoration: underline;
}

/* ======================================================================================================== */
/* MARK: Library Hours Today (Homepage) */
/* ======================================================================================================== */
.column:has(.pageIntro) {
	padding-bottom: 0;
}

.hoursToday {
	margin-top: 0.5rem;
}

.hoursToday svg.hoursIcon {
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
	top: 3px;
}

.hoursTodayLabel {
	font-weight: 700;
}

.hoursTodayLabel:after {
	content: ": ";
}

.allHoursLink:before {
	content: "\0000a0\2022\0000a0";
}

#todaysLibraryHours.currentlyOpen:after {
	content: "Open Now";
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	padding: 2px 6px;
	margin-left: 6px;
	border-radius: 3px;
	background-color: var(--lib-hours-open);
	color: #ffffff;
	box-shadow: 0 0 6px rgba(67, 129, 54, 0.35),
	            0 0 12px rgba(67, 129, 54, 0.15);
}

.justify-content-end {
	display: flex;
	justify-content: end;
}

a.supportLink {
	padding: 0;
}

@media (max-width: 40em) {
	#todaysLibraryHours {
		display: block;
	}

	.hoursTodayLabel:after {
		content: "";
	}

	.allHoursLink:before {
		content: "";
	}
}

@media (min-width: 48em) and (max-width: 64em) {
	.row .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ======================================================================================================== */
/* MARK: Main Navigation Buttons (Homepage) */
/* ======================================================================================================== */
#libraryMainNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#libraryMainNav > ul > li {
	position: relative;
}

#libraryMainNav .libraryMenuBtn {
	width: 100%;
	background-color: #ffffff;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--su-maroon);
	border: 0.125rem solid var(--su-maroon);
	padding: 0.5rem;
	height: auto;
	letter-spacing: inherit;
	text-align: center;
	text-transform: uppercase;
	transition: 0.3s background-color, color ease-in-out;
	position: relative;
}

#libraryMainNav .libraryMenuBtn:hover,
#libraryMainNav .libraryMenuBtn:focus {
	background-color: var(--su-maroon);
	color: #ffffff;
}

#libraryMainNav .libraryMenuBtn::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%238a0000' d='M320.4 449.9L337.4 432.9L497.4 272.9L514.4 255.9L480.5 222L463.5 239L320.5 382L177.5 239L160.5 222L126.6 255.9L143.6 272.9L303.6 432.9L320.6 449.9z'/%3E%3C/svg%3E");
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1em;
	position: absolute;
	right: 0.5rem;
	transition: transform 0.3s ease-in-out;
}

#libraryMainNav .libraryMenuBtn:hover::after,
#libraryMainNav .libraryMenuBtn.expanded::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M320.4 449.9L337.4 432.9L497.4 272.9L514.4 255.9L480.5 222L463.5 239L320.5 382L177.5 239L160.5 222L126.6 255.9L143.6 272.9L303.6 432.9L320.6 449.9z'/%3E%3C/svg%3E");
}

#libraryMainNav .libraryMenuBtn.expanded::after {
	transform: rotate(180deg);
}

#libraryMainNav .libraryMenuBtn.expanded {
	background-color: var(--su-maroon);
	color: #ffffff;
	margin-bottom: 0;
}

#libraryMainNav ul ul.libraryNavSubmenu {
	max-height: 0;
	overflow: hidden;
	margin: 0 0.5rem 0 1rem;
	transition: 0.3s max-height ease-out;
	border-width: 0 0.125rem 0.125rem 0.125rem;
	border-style: solid;
	border-color: var(--su-maroon);
	text-align: center;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	background-color: #ffffff;
}

#libraryMainNav ul ul.libraryNavSubmenu::after {
	content: "";
	position: absolute;
	top: -10px;
	left: calc(50% - 5px);
	z-index: 51;
	width: 10px;
	height: 10px;
	display: block;
	background-color: var(--su-maroon);
	transform: rotate(45deg);
	opacity: 0;
	transition: 0.3s top, opacity ease-out;
}

#libraryMainNav ul ul.libraryNavSubmenu.expanded::after {
	top: -5px;
	opacity: 1;
}

#libraryMainNav ul ul.libraryNavSubmenu.expanded {
	max-height: calc(var(--expanded-height) + 12px);
	visibility: visible;
	box-shadow: 0 0.1875rem 0.375rem 0.3125rem rgba(0, 0, 0, 0.15);
}

#libraryMainNav ul ul.libraryNavSubmenu li:first-child {
	display: none;
}

#libraryMainNav ul ul.libraryNavSubmenu li:not(:last-child) {
	border-bottom: .0625rem solid var(--su-dark-tan);
}

#libraryMainNav ul ul.libraryNavSubmenu a {
	color: #2e262a;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 3rem;
	text-decoration: none;
}

#libraryMainNav ul ul.libraryNavSubmenu a:hover,
#libraryMainNav ul ul.libraryNavSubmenu a:focus {
	background-color: var(--su-light-tan);
}

@media (min-width:64em) {
	#libraryMainNav ul ul.libraryNavSubmenu {
		margin: 0 1rem;
	}
}

@media (max-width:48em) {
	#libraryMainNav .libraryMenuBtn {
		height: auto;
		min-height: 40px;
		padding: 0.25rem;
	}

	#libraryMainNav li:not(:first-child) .libraryMenuBtn {
		margin-top: 0.25rem;
	}

	#libraryMainNav ul ul.libraryNavSubmenu {
		margin: 0;
		position: inherit;
	}

	#libraryMainNav ul ul.libraryNavSubmenu li:first-child {
		display: list-item;
	}
}

/* ======================================================================================================== */
/* MARK: SURF Search Box (Homepage) */
/* ======================================================================================================== */
select {
	background-position: right !important;
	background-size: 12px !important;
}

#libraryDatabaseSearch {
	border: 0.125rem solid var(--su-dark-tan);
	padding: 1.875rem;
	box-shadow: var(--su-box-shadow);
	container-type: inline-size;
	container-name: libraryDatabaseSearch;
}

#libraryDatabaseSearch .surfLogo {
	display: inline-block;
	width: 150px;
	vertical-align: text-bottom;
	margin-right: 0.5rem;
}

#libraryDatabaseSearch .header {
	background-color: var(--su-maroon);
	margin: calc(-1.875rem - 2px) calc(-1.875rem - 2px) 1.5rem calc(-1.875rem - 2px);
	padding: 1rem 1.5rem .875rem 1.875rem;
	background-image: none;
	width: auto;
}

#libraryDatabaseSearch .header a {
	text-decoration: none;
	color: inherit;
}

#libraryDatabaseSearch .header a svg {
	display: none;
}

#libraryDatabaseSearch .header h2 {
	display: inline-block;
	margin: 0;
	color: #ffffff;
	font-size: 16px;
}

#libraryDatabaseSearch #librarySearchType {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--su-dark-tan);
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab {
	padding: 0.5em;
	margin: 0;
	cursor: pointer;
	position: relative;
	top: 1px;
	border: 1px solid var(--su-dark-tan);
	font-size: 15px;
	background-color: var(--su-light-tan);
	text-transform: none;
	color: inherit;
	height: auto;
	transition-delay: 0;
	transition-duration: 0.25s;
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab[aria-selected="true"] {
	background-color: #ffffff;
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab[aria-selected="false"]:hover {
	background-color: var(--su-dark-tan);
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab[aria-selected="true"] {
	background-color: #ffffff;
	border-bottom-color: #ffffff;
}


#libraryDatabaseSearch.mobileTypeMenuExpanded div[role="tabpanel"] {
	display: none;
}

#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn {
	display: none;
}

#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn svg {
	width: 1.5em;
	height: 1.5em;
	margin: 0;
}

#libraryDatabaseSearch p.tagLine {
	font-size: 90%;
	font-style: italic;
	margin: 0.5em 0;
}

#libraryDatabaseSearch .librarySearchQuery {
	border: 0.0625rem solid var(--su-maroon);
	border-right-width: 0;
	border-bottom-width: 0.25rem;
	font-size: 1.875rem;
	padding: 0 0 0 1.25rem;
	height: 4.25rem;
}

#libraryDatabaseSearch .inputGroup {
	position: relative;
}

#libraryDatabaseSearch button[type="submit"] {
	height: 4.25rem;
	padding: 0;
	width: 4rem;
	position: absolute;
	top: 0;
	right: 0;
	border-width: 1px 1px .25rem 1px;
	background-color: var(--su-maroon);
	color: #ffffff;
}

#libraryDatabaseSearch button[type="submit"] svg {
	fill: #ffffff;
	transition-property: fill;
	transition-delay: 0.1s;
	transition-duration: 375ms;
	transition-timing-function: ease-in-out;
}

#libraryDatabaseSearch button[type="submit"]:hover {
	background-color: var(--su-gold);
	color: #333333;
}

#libraryDatabaseSearch button[type="submit"]:hover svg {
	fill: #333333;
}

#libraryDatabaseSearch legend {
	margin-bottom: 8px;
}

#libraryDatabaseSearch .hidden {
	display: none;
}

#libraryDatabaseSearch .supplementalLink {
	clear: both;
}

#libraryDatabaseSearch .supplementalLinks {
	display: flex;
}

#libraryDatabaseSearch .supplementalLink.right {
	margin-left: auto;
}

#libraryDatabaseSearch #whatAmISearching {
	margin-top: 1rem;
	padding: 0.5rem;
	border: 1px solid var(--su-dark-tan);
}

#libraryDatabaseSearch #whatAmISearching h3 {
	font-size: 18px;
}

#libraryDatabaseSearch #whatAmISearching p:last-child {
	margin-bottom: 0;
}

#libraryDatabaseSearch #whatAmISearching a svg {
	display: none !important;
}

@container libraryDatabaseSearch (max-width: 525px) {
	#libraryDatabaseSearch>div:not(.header) {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	#libraryDatabaseSearch>.header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#libraryDatabaseSearch #librarySearchType {
		display: flex;
		border: none;
	}

	#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn {
		display: inline-block;
		background-color: transparent;
		border: 1px solid var(--su-dark-tan);
		border-left-width: 0;
		color: var(--su-link-color);
		line-height: normal;
		height: auto;
		text-transform: none;
		font-size: 14px;
		padding: 0 1rem;
	}

	#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn:hover {
		background-color: var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn:active {
		background-color: #c7c2bb;
	}

	#libraryDatabaseSearch #librarySearchType.mobileExpanded #mobileSearchTypeBtn {
		display: none;
	}

	#libraryDatabaseSearch #librarySearchType>div {
		padding: 0;
		flex-grow: 1;
		border: 1px solid var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType button.librarySearchTab {
		top: 0;
		display: block;
		border: none;
		width: 100%;
		text-align: left;
		background-color: transparent;
		transition: none;
	}

	#libraryDatabaseSearch #librarySearchType.mobileExpanded button.librarySearchTab:hover {
		background-color: var(--su-light-tan);
	}

	#libraryDatabaseSearch #librarySearchType button.librarySearchTab:not(:last-child) {
		border-bottom-width: 0;
	}

	#libraryDatabaseSearch #librarySearchType button.librarySearchTab:last-child {
		border-bottom-color: var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType:not(.mobileExpanded) button.librarySearchTab[aria-selected="true"] {
		border-bottom-width: 1px;
		border-bottom-color: var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType:not(.mobileExpanded) button.librarySearchTab[aria-selected="false"] {
		display: none;
	}

	#libraryDatabaseSearch .librarySearchQuery {
		width: calc(100% - 4rem);
		font-size: 18px;
	}

	#libraryDatabaseSearch .supplementalLinks {
		display: block;
	}
}

dialog {
	background-color: #ffffff;
	border-color: var(--su-text);
	padding: 1.5rem;
	max-width: 90vw;
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.65);
}

dialog .closeBtn {
	color: var(--su-text) !important;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background-color: transparent !important;
	border: none;
	padding: 0;
	font-size: 2rem;
	cursor: pointer;
	height: auto;
	line-height: 1rem;
}

dialog .closeBtn:hover, 
dialog .closeBtn:focus {
	color: var(--su-maroon);
}

dialog h1 {
	font-size: 1.5rem;
	border-bottom: 1px solid var(--su-dark-tan);
}

dialog h2 {
	font-size: 1.2rem;
}

/* ======================================================================================================== */
/* MARK: Library Quick Action Links (Homepage) */
/* ======================================================================================================== */
#libraryActionLinks {
	margin-top: 2rem;
}

#libraryActionLinks ul {
	list-style: none;
	padding: 0;
}

#libraryActionLinks li {
	text-align: center;
}

#libraryActionLinks svg {
	width: 60px;
	height: 60px;
	fill: var(--su-link-color);
}

#libraryActionLinks a.link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 0.25rem;
	color: var(--su-link-color);
	transition: 0.2s background-color ease-in-out;
}

#libraryActionLinks a.link:visited {
	color: var(--su-link-color);
}

#libraryActionLinks .link:hover {
	background-color: var(--su-link-color);
	color: #ffffff !important;
}

#libraryActionLinks .link:hover svg {
	fill: #ffffff;
}

#libraryActionLinks .link svg.icon-chevron-right {
	display: none;
}

.libraryh3lp iframe {
	width: 100% !important;
}

#showLibraryChatBtn {
	display: none;
}

@media (max-width: 48em) {
	.homepageChat .libraryh3lp {
		display: none;
	}

	.homepageChat .libraryh3lp.show {
		display: block;
	}

	#showLibraryChatBtn {
		display: block;
		width: 100%;
	}
}

/* ======================================================================================================== */
/* MARK: Library News Feed (Homepage) */
/* ======================================================================================================== */
#libraryNewsFeed {
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

#libraryNewsFeed .libraryNewsItem {
	display: flex;
	border: 2px solid var(--su-dark-tan);
}

#libraryNewsFeed .libraryNewsItem:hover {
	border-color: var(--su-link-color);
	cursor: pointer;
}

#libraryNewsFeed .libraryNewsItem .libraryNewsImage {
	width: 150px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--su-light-tan);
	flex-shrink: 0;
}

#libraryNewsFeed .libraryNewsItemContent {
	width: 100%;
	padding: 0.5rem;
	min-height: 100px;
	max-height: 150px;
	overflow: hidden;
	position: relative;

	&.overflowing::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: linear-gradient(transparent, rgba(255, 255, 255, 0.9) 80%);
	}
}

#libraryNewsFeed .libraryNewsItemContent p {
	margin-bottom: 4px;
	line-height: 1.4em;
}

#libraryNewsFeed .libraryNewsItemContent p a {
	font-size: 1.1rem;
	text-decoration: none;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

#libraryNewsFeed .libraryNewsItemContent p a:hover {
	text-decoration: underline;
}

#libraryNewsFeed .libraryNewsItemContent p.date {
	font-weight: 500;
	font-size: 0.85rem;
}

#libraryNewsFeed .libraryNewsItemContent p.date svg {
	width: 1.25em;
	position: relative;
	top: 4px;
}

#libraryNewsFeed .libraryNewsItemContent p.description {
	color: #63545e;
	font-size: 0.8rem;
}

#libraryNewsMoreLink {
	margin-top: 1rem;
}

@media (max-width: 64em) {
	#libraryNewsFeed {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 36em) {
	#libraryNewsFeed .libraryNewsItem {
		display: block;
	}

	#libraryNewsFeed .libraryNewsItemContent {
		border-top-width: 0;
		border-left-width: 2px;
	}

	#libraryNewsFeed .libraryNewsItem .libraryNewsImage {
		width: 100%;
		height: 200px;
	}
}

/* ======================================================================================================== */
/* MARK: Library Events Feed (Homepage) */
/* ======================================================================================================== */
#upcomingLibraryEvents {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1rem;
	margin: 0 0 1rem 0;
	list-style: none;
}

#upcomingLibraryEvents .libraryEvent {
	display: flex;
	gap: 1rem;
	border: 0.125rem solid var(--su-light-tan);
	background-color: rgba(240, 238, 234, 0.5);
	padding: 0.5rem;
	overflow: hidden;
}

#upcomingLibraryEvents .libraryEvent .date {
	text-align: center;
	border: 0.125rem solid var(--su-gold);
	padding: 0.25rem;
	width: 72px;
	background-color: #ffffff;
}

#upcomingLibraryEvents .libraryEvent .date>span {
	display: block;
	line-height: 1.1em;
}

#upcomingLibraryEvents .libraryEvent .date .month {
	text-transform: uppercase;
	font-weight: 600;
}

#upcomingLibraryEvents .libraryEvent .date .day {
	font-size: 28px;
	color: var(--su-maroon);
}

#upcomingLibraryEvents .libraryEvent .date .dow {
	text-transform: uppercase;
	font-size: 13px;
}

#upcomingLibraryEvents .libraryEvent .type {
	display: inline-block;
	padding: 0 0.5em;
	background-color: var(--su-dark-tan);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
}

#upcomingLibraryEvents .libraryEvent h3 {
	font-size: 18px;
	margin-bottom: 0;
}

#upcomingLibraryEvents .libraryEvent h3 a {
	text-decoration: none;
}

#upcomingLibraryEvents .libraryEvent h3 a:hover {
	text-decoration: underline;
}

#upcomingLibraryEvents .libraryEvent>div {
	font-size: 14px;
	line-height: 1.5em;
}

#upcomingLibraryEvents .libraryEvent .time {
	font-weight: 600;
}

@media (max-width: 64em) {
	#upcomingLibraryEvents {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40em) {
	#upcomingLibraryEvents {
		display: inline-flex;
		overflow-x: scroll;
		max-width: 100%;
	}

	#upcomingLibraryEvents .libraryEvent {
		width: 75vw;
		flex-shrink: 0;
	}
}

/* ======================================================================================================== */
/* MARK: Locations (Homepage) */
/* ======================================================================================================== */
#libraryLocations {
	margin-bottom: 2rem;
	display: flex;
	flex-wrap: wrap;
}

#libraryLocations .column {
	display: flex;
}

#libraryLocations .location {
	background-color: var(--su-light-tan);
	box-shadow: var(--su-box-shadow);
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

#libraryLocations .location img {
	width: 100%;
}

#libraryLocations .location .locationContent {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 0.75rem 1rem 0.75rem;
	flex: 1;
}

#libraryLocations .location h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--su-text);
	line-height: 1.25em;
}

#libraryLocations .location .locationContent p:not(:last-child) {
	flex: 1;
	font-size: 15px;
	line-height: 1.25em;
}

#libraryLocations .location p:last-child {
	margin-top: auto;
	margin-bottom: 0;
	flex-shrink: 0;
	line-height: 1.25em;
}

/* ======================================================================================================== */
/* MARK: Featured Links Boxes */
/* ======================================================================================================== */
.libraryFeaturedLinksContainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}

.libraryFeaturedLink {
	border: 0.125rem solid var(--su-dark-tan);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 238px;
	min-width: 238px;
	max-width: 100%;
}

.libraryFeaturedLink h2 {
	line-height: 1.25em;
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: 0.25rem;
}

.libraryFeaturedLink p {
	margin-bottom: 0.5rem;
}

.libraryFeaturedLink a.cta-link {
	margin-top: auto;
	height: auto;
}

/* ======================================================================================================== */
/* MARK: Library Hours Page */
/* ======================================================================================================== */
#libraryHoursLocationsList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 1rem;
	padding: 0;
}

#libraryHoursLocationsList li::before {
	content: "";
}

.libraryHoursLocation {
	padding-top: 1.5rem;
	border-top: 1px solid var(--su-dark-tan);
	margin: 1rem 0 2rem 0;
}

.libraryHoursLocation h2 {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
}

.accordion .accordion__title.currentlyOpen::after,
.accordion .accordion__title.currentlyClosed::after,
.libraryHoursLocation h2:after {
     display: none;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 14px;
     padding: 2px 6px;
     border-radius: 3px;
}

.accordion .accordion__title.currentlyOpen::after,
.accordion .accordion__title.currentlyClosed::after {
     position: absolute;
     right: 60px;
}

.accordion .accordion__title.currentlyOpen::after, 
.libraryHoursLocation h2.currentlyOpen:after {
	display: inline-block;
	content: "Open Now";
	background-color: var(--lib-hours-open);
	color: #ffffff;
	box-shadow: 0 0 6px rgba(67, 129, 54, 0.35),
	            0 0 12px rgba(67, 129, 54, 0.15);
}

 .accordion .accordion__title.currentlyClosed::after,
.libraryHoursLocation h2.currentlyClosed:after {
	display: inline-block;
	content: "Closed Now";
	background-color: var(--lib-hours-closed);
	color: #ffffff
}

.libraryHoursWeek {
	margin-bottom: 1.5rem;
	font-size: 14px;
	max-width: 100%;
}

.libraryHoursWeek figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.libraryHoursWeek dl.libraryHours {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.libraryHoursWeek dl.libraryHours dt {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 0;
	background-color: var(--su-maroon);
	color: #ffffff;
	padding: 8px 2px 6px 2px;
}

.libraryHoursWeek dl.libraryHours dt.today {
	background-color: var(--su-gold);
	color: var(--su-text);
}

.libraryHoursWeek dl.libraryHours dt .dow {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	line-height: 1.2em;
}

.libraryHoursWeek dl.libraryHours dd {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-color: var(--su-dark-tan);
	border-style: solid;
	border-width: 0 0 1px 1px;
	padding: 6px;
	color: #757575;
}

.libraryHoursWeek dl.libraryHours dd:last-child {
	border-width: 0 1px 1px 1px;
}

.libraryHoursWeek dl.libraryHours dd .time {
	color: var(--su-text);
	text-transform: uppercase;
}

.libraryHoursWeek dl.libraryHours dd.saturday,
.libraryHoursWeek dl.libraryHours dd.sunday {
	background-color: #f9f9f9;
}

.libraryHoursWeek dl.libraryHours dd.closed {
	font-weight: bold;
	color: var(--su-text);
}

.libraryHoursWeek dl.libraryHours dd .note {
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	margin-top: 4px;
}

.libraryHoursWeek .libraryHoursNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 4px;
	background-color: var(--su-maroon);
	color: #ffffff;
}

.libraryHoursWeek .libraryHoursNav .title {
	font-weight: 700;
	font-size: 16px;
	text-align: center;
}

.libraryHoursWeek .libraryHoursNav button {
	height: auto !important;
	background-color: var(--su-maroon);
	padding: 0.5rem;
	transition: none;
}

.libraryHoursWeek .libraryHoursNav button svg {
	fill: #ffffff;
	margin: 0;
}

.libraryHoursWeek .libraryHoursNav button:hover svg {
	fill: var(--su-gold);
}

.libraryHoursWeek .libraryHoursNav button:disabled,
.libraryHoursWeek .libraryHoursNav button:disabled:hover {
	background-color: var(--su-maroon);
	cursor: default;
}

.libraryHoursWeek .libraryHoursNav button:disabled svg {
	visibility: hidden;
	cursor: auto;
}

.libraryHoursLocation .libraryh3lp {
	position: relative;
}

.libraryHoursLocation .libraryh3lp a {
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	text-decoration: none;
	background-color: var(--lib-hours-open);
	color: #ffffff;
	transition: 0.2s background-color ease-in-out;
}

.libraryHoursLocation .libraryh3lp a:hover {
	background-color: var(--su-link-color);
}

.libraryHoursLocation .libraryh3lp::before {
	content: "";
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M112.9 325L121 300.7L105.3 280.4C89.1 259.5 80 234.6 80 208C80 141.2 140.5 80 224 80C307.5 80 368 141.2 368 208C368 274.8 307.5 336 224 336C206.3 336 189.5 333.2 174 328.1L158.9 323.1C152.3 325.3 135.3 331 107.9 340.1L112.9 325zM32 416C67.8 404.1 110.1 390 159 373.7C179.3 380.4 201.2 384 224 384C330 384 416 305.2 416 208C416 110.8 330 32 224 32C118 32 32 110.8 32 208C32 245.9 45.1 281.1 67.4 309.8C56.9 341.4 45.1 376.8 32 416zM416 576C438.8 576 460.7 572.4 481 565.7C529.9 582 572.3 596.1 608 608C594.9 568.8 583.1 533.4 572.6 501.8C594.9 473.1 608 437.9 608 400C608 317.6 546.3 248.5 463 229.3C461.4 245.6 457.9 261.2 452.9 276.2C516.8 291 560.1 343.5 560.1 400.1C560.1 426.7 551 451.6 534.8 472.5L519 492.7C524.9 510.5 529.3 523.6 532.1 532.1C504.7 523 487.7 517.3 481.1 515.1L466 520.1C450.5 525.2 433.7 528 416 528C343.8 528 288.9 482.3 275.3 426.8C259.7 430 243.6 431.8 227.2 432C243.6 513.9 321.9 576 416 576z"/></svg>');
	mask-size: contain;
	mask-repeat: no-repeat;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	left: 0.5rem;
}

/* Chat is online (there's a link to open the chat) */
.libraryHoursLocation .libraryh3lp:has(a)::before {
	background-color: #ffffff;
}

/* Visually hidden text to indicate that the link opens a new window (for improved accessibility) */
.libraryHoursLocation .libraryh3lp:has(a)::after {
	content: "Opens a new window to chat with a librarian";
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Chat is offline (there's no link to open the chat) */
.libraryHoursLocation .libraryh3lp:not(:has(a)) {
	display: inline-block;
	color: var(--lib-hours-closed);
	border: 2px solid var(--lib-hours-closed);
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
}

.libraryHoursLocation .libraryh3lp:not(:has(a))::before {
	background-color: var(--lib-hours-closed);
}

@media screen and (max-width: 520px) {
	.libraryHoursWeek .libraryHoursNav {
		padding-bottom: 0;
	}

	.libraryHoursWeek .libraryHoursNav button {
		padding: 1rem;
	}

	.libraryHoursWeek dl.libraryHours {
		grid-template-columns: 1fr 2fr;
	}

	.libraryHoursWeek dl.libraryHours dt {
		grid-row: auto;
	}

	.libraryHoursWeek dl.libraryHours dd {
		grid-row: auto;
	}
}

/* ======================================================================================================== */
/* MARK: Library Alerts */
/* ======================================================================================================== */

.libraryAlertContainer {
	background-color: var(--su-gold);
	padding: 1rem 1rem 1rem 3rem;
	margin-bottom: 1rem;
	position: relative;
}

.libraryAlertContainer:empty {
	display: none;
}

.libraryAlertContainer::before {
	content: "";
	background-image: url(/_demo/libraries/_files/css/"data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Pro 7.2.0 by @fontawesome - https:/fontawesome.com License - https:/fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM280 400L304 400L304 336L256 336L256 288L352 288L352 400L384 400L384 448L256 448L256 400L280 400zM352 256L288 256L288 192L352 192L352 256z'/%3E%3C/svg%3E");
	position: absolute;
	left: 1rem;
	width: 1.5rem;
	height: 1.5rem;
}

.libraryAlertContainer p:last-child {
	margin-bottom: 0;
}

/* ======================================================================================================== */
/* MARK: Graphic Button Lists */
/* ======================================================================================================== */
#popularGuidesList,
#libraryCirculatingItemsList,
#libraryBuildingMapsList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	padding: 0;
	margin: 0;
}

#libraryBuildingMapsList {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#popularGuidesList li,
#libraryCirculatingItemsList li,
#libraryBuildingMapsList li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

#popularGuidesList li::before,
#libraryCirculatingItemsList li::before,
#libraryBuildingMapsList li::before {
	display: none;
}

#popularGuidesList li a,
#libraryCirculatingItemsList li a,
#libraryBuildingMapsList li a {
	background-color: var(--su-dark-tan);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--su-text);
	text-decoration: none;
}

#popularGuidesList li a:hover,
#libraryCirculatingItemsList li a:hover,
#libraryBuildingMapsList li a:hover {
	background-color: var(--su-light-tan);
}

#popularGuidesList li a:hover span,
#libraryCirculatingItemsList li a:hover span,
#libraryBuildingMapsList li a:hover span {
	background-color: var(--su-maroon);
	color: #ffffff;
}

#popularGuidesList li span,
#libraryCirculatingItemsList li span,
#libraryBuildingMapsList li span {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: bold;
	background-color: var(--su-light-tan);
	padding: 0.5rem;
	flex-grow: 1;
}

#popularGuidesList li img,
#libraryCirculatingItemsList li img {
	width: 100%;
	padding: 1rem 3rem;
}

#libraryBuildingMapsList li span {
	flex-grow: 0;
}

#libraryBuildingMapsList li img {
	padding: 1rem;
	flex-grow: 1;
	min-height: 0;
	width: 100%;
	object-fit: contain;
}

#libraryCirculatingItemsDialog {
	width: 800px;
}

#libraryCirculatingItemsDialog .section {
	display: none;
	margin-top: 0.5rem;

	&.show {
		display: block;
	}
}

#libraryCirculatingItemsDialog .footer {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--su-dark-tan);
}

/* ======================================================================================================== */
/* MARK: Library Locations Page */
/* ======================================================================================================== */
.libraryLocationDescription {
	display: flex;
	margin-bottom: 1.5rem;

	@media (max-width: 520px) {
		flex-direction: column;
	}
}

.libraryLocationDescription > img {
	max-width: 200px;
	padding: 0 0 1rem 1rem;

	@media (max-width: 520px) {
		max-width: 65vw;
		margin: 1rem auto;
		padding: 0;
	}
}

.libraryLocationContactInfo {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;

	@media (max-width: 520px) {
		display: block;
	}
}

.libraryLocationContactInfo .libraryAddress {
	flex: 1;
}

.libraryLocationContactInfo .libraryEmail {
	width: max-content;
	margin-right: 1rem;
}

.libraryLocationContactInfo .libraryPhone {
	width: max-content;
}

/* ======================================================================================================== */
/* MARK: Contact Method Lists */
/* ======================================================================================================== */

#libraryContactList {
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;

	@media (max-width: 520px) {
		grid-template-columns: 1fr;
	}
}

#libraryContactList li {
	list-style: none;
	position: relative;
	padding-left: 3.5rem;
}

#libraryContactList li::before {
	display: none;
}

#libraryContactList .libraryIcon {
	width: 3rem;
	height: 3rem;
	margin-right: 0.5rem;
	position: absolute;
	left: 0;
}

#libraryContactList .libraryIcon svg path:first-child {
	fill: var(--su-dark-tan);
	filter: brightness(0.75);
}

#libraryContactList .libraryIcon svg path:last-child {
	fill: var(--su-maroon);
}

#libraryContactList p, 
#libraryContactList div.libraryh3lp {
	border-top: 1px solid var(--su-dark-tan);
}

/* ========================================================================================================= */
/* MARK: Research Guides Page */
/* ========================================================================================================= */

#guidesBySubjectListContainer ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5rem 1rem;
	padding: 0;
}

#guidesBySubjectListContainer ul li {
	display: flex;
	align-items: center;
	margin-bottom: auto;
}

#guidesBySubjectListContainer ul li:last-child {
	margin-bottom: auto;
}

#guidesBySubjectListContainer ul li::before {
	display: none;
}

#guidesBySubjectListContainer ul li a {
	flex: 1;
	background-color: var(--su-light-tan);
	color: var(--su-text);
	text-decoration: none;
	padding: 0.5rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#guidesBySubjectListContainer ul li a:hover {
	background-color: var(--su-maroon);
	color: #ffffff;
}