/******************* ALL DEVICES *******************/

/* Make theme switcher match navbar color */
#theme-switcher {
	color: var(--bs-navbar-color);
}

/* Theme switcher hover states */
#theme-switcher:hover {
	color: var(--bs-gray-800);
}

#theme-switcher.theme-toggle--toggled:hover {
	color: var(--bs-gray-600);
}

/* Make logo bigger */
.navbar-brand-img,
.navbar-brand > img {
	max-height: 2.3rem;
}

/* Allow search bar to shrink on small screens */
#topnav .container {
	flex-wrap: nowrap !important;
}

/* Prevent zoom on input fields (iOS only) */
@supports (-webkit-touch-callout: none) {
	input[type="color"],
	input[type="date"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select:focus,
	textarea {
		font-size: 16px;
	}
}

/* TO REVIEW */
/******************* TOPNAV *******************/

/* Ensure dropdowns can overflow the navbar */
#topnav {
	overflow: visible !important;
}

#topnav .container {
	overflow: visible !important;
}

/* Keep navbar items horizontal on all screen sizes */
#topnav .navbar-nav {
	flex-direction: row !important;
	align-items: center !important;
}

/* Make dropdown menu position absolutely so it overlays content */
#topnav .dropdown-menu {
	position: absolute !important;
	background-color: var(--bs-dropdown-bg) !important;
	border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color) !important;
	border-radius: var(--bs-dropdown-border-radius) !important;
	box-shadow: var(--bs-dropdown-box-shadow) !important;
}

/* Ensure dropdown items have proper styling on all screen sizes */
#topnav .dropdown-menu .dropdown-item {
	color: var(--bs-dropdown-link-color) !important;
	background-color: transparent;
}

#topnav .dropdown-menu .dropdown-item:hover,
#topnav .dropdown-menu .dropdown-item:focus {
	color: var(--bs-dropdown-link-hover-color) !important;
	background-color: var(--bs-dropdown-link-hover-bg) !important;
}

#topnav .dropdown-menu .dropdown-item.active {
	color: var(--bs-dropdown-link-active-color) !important;
	background-color: var(--bs-dropdown-link-active-bg) !important;
}

/******************* TOAST NOTIFICATIONS *******************/

/* Responsive positioning */
#toast-container {
	top: 0;
	bottom: auto;
}

@media (max-width: 768px) {
	#toast-container {
		top: auto;
		bottom: 0;
	}
}

/******************* HTMX *******************/

/* HTMX Indicators */
.htmx-indicator {
	display: none;
}

.htmx-request .htmx-indicator {
	display: inline-block;
}

.htmx-request.htmx-indicator {
	display: inline-block;
}

/* Smooth transitions for HTMX swaps */
.htmx-swapping {
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.htmx-settling {
	opacity: 1;
	transition: opacity 200ms ease-in;
}

/******************* WELCOME BANNER *******************/

#welcome-banner {
	background: linear-gradient(135deg, var(--bs-primary-bg-subtle) 0%, var(--bs-body-bg) 100%);
	border: 1px solid var(--bs-primary-border-subtle);
	position: relative;
}

#welcome-banner h1 {
	font-size: 1.4rem;
}

#welcome-banner p {
	font-size: 16px;
}

/******************* ICON RIGHT ANIMATION *******************/

/* Adds margin to the left of the arrow */
a .icon-arrow-right {
	vertical-align: top;
	width: auto;
	margin-left: calc(var(--pico-spacing) * 0.25);
}

/* During transition, move arrow pieces slowly */
a .icon-arrow-right path.line,
a .icon-arrow-right g.head {
	transition-duration: 0.2s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

/* When hovered, move the line of the arrow to the right and scale it */
a .icon-arrow-right path.line {
	transform: translate(0) scaleX(0);
	transform-origin: 14px;
}
a:hover .icon-arrow-right path.line {
	transform: translate(5px) scaleX(1);
}

/* When hovered, move the head of the arrow to the right */
a .icon-arrow-right g.head {
	transform: translate(0);
}
a:hover .icon-arrow-right g.head {
	transform: translate(5px);
}

/******************* ARTIST/ARTWORK/COLLECTION DETAIL PAGE STYLING *******************/

.summary-description {
	font-size: 17px;
}