/* BioFiles site helpers (keep tiny; prefer Bootstrap utilities) */

/* ---------- Small global tweaks ---------- */
.card {
	border-radius: 1rem;
}

.form-label {
	font-weight: 600;
}

.help {
	font-size: .875rem;
	color: #6c757d;
}

/* Legacy shim so old templates don’t explode during cutover */
.noBorder {
	border: none !important;
}

/* Media */
.biofilesImage {
	max-height: 900px;
	border: 1px solid #333;
}

/* Inline editors */
.mediaCaptionText {
	text-decoration: none;
	padding: 10px;
	color: #111;
}

/* Taxa lists (legacy) */
.taxaList,
a.taxaList:link,
a.taxaList:visited {
	color: #616161;
}

a.taxaList:hover {
	color: #ff5252;
}

li.taxaList {
	margin: 0 0 6px 0;
}

a.taxaListBottom:link,
a.taxaListBottom:visited {
	text-decoration: none;
	color: #616161;
}

a.taxaListBottom:hover {
	text-decoration: none;
	color: #ff5252;
}

/* ---------- Site variables + global link style (non-nav) ---------- */
:root {
	--bf-link: #1b4b91;
	--bf-link-hover: #163a72;
	--bf-subnav-left-shift: 25px;

	/* Lighter, modern default text */
	--bs-body-color: #3a3f45;
	/* was #212529 */
	--bs-secondary-color: rgba(58, 63, 69, .75);
	--bs-tertiary-color: rgba(58, 63, 69, .55);
}

/* Remove Bootstrap’s default underline: ensure we win the cascade */
a {
	color: var(--bf-link);
	text-decoration: none;
}

a:hover {
	color: var(--bf-link-hover);
	text-decoration: none;
}

/* In case any component resets text-decoration, we enforce no-underline */
body a {
	text-decoration: none !important;
}

a:focus-visible {
	outline: 2px dashed currentColor;
	outline-offset: 2px;
}

/* ---------- BioFiles subnav (tabs) ---------- */
.bf-subnav {
	background-color: transparent;
	border-color: var(--bs-border-color) !important;

	/* prevent margin-collapsing with the next element + consistent gap */
	padding-bottom: .125rem;
	margin-bottom: .5rem;
}

/* Fallback: if these tabs are wrapped as bf-subnav on some pages */
.bf-subnav {
	background: #f4f6f8;
}

/* Inherit surrounding text color; subtle fade on idle */
.bf-subnav .nav-link {
	padding: .6rem .75rem;
	color: inherit;
	opacity: .75;
}

.bf-subnav .nav-link:hover,
.bf-subnav .nav-link:focus {
	opacity: 1;
}

/* ==========================================================
   Site tabs (Totals / Thumbnails / Media / Random / …)
   Medium gray band + white/off-white text
   ========================================================== */

.bf-site-tabs {
	background: #5b5d5f;
	/* Bootstrap secondary gray */
	border-bottom: 1px solid rgba(0, 0, 0, .25);
}

/* Base link appearance */
.bf-site-tabs .nav-link {
	color: rgba(255, 255, 255, .85);
	opacity: 1;
	background: transparent;
	border-bottom: .2rem solid transparent;
}

/* Hover / focus: no color change, no background */
.bf-site-tabs .nav-link:hover,
.bf-site-tabs .nav-link:focus {
	color: rgba(255, 255, 255, .85);
	background: transparent;
}

/* Visited links stay the same */
.bf-site-tabs .nav-link:visited {
	color: rgba(255, 255, 255, .85);
}

/* Active tab: brighter text + underline */
.bf-site-tabs .nav-link.active {
	color: #fff;
	font-weight: 600;
	border-bottom-color: #fff;
}

/* Optional: slightly dim inactive underline spacing consistency */
.bf-site-tabs .nav-underline .nav-link {
	margin-bottom: -1px;
}

/* Underline-style tabs (border-bottom, not text-decoration) */
.nav-underline.bf-tabs .nav-link {
	border-bottom: .2rem solid transparent;
}

.nav-underline.bf-tabs .nav-link.active {
	border-bottom-color: var(--bs-primary);
	opacity: 1;
}

/* Dark variant (when header is dark) */
.bf-subnav.is-dark {
	--bs-border-color: rgba(255, 255, 255, .2);
}

.bf-subnav.is-dark .nav-link {
	color: rgba(255, 255, 255, .92);
	opacity: 1;
}

.bf-subnav.is-dark .nav-link:hover,
.bf-subnav.is-dark .nav-link:focus {
	color: #fff;
}

/* Let active underline follow the current link color (off-white on dark) */
.bf-subnav.is-dark .nav-underline.bf-tabs .nav-link.active {
	border-bottom-color: currentColor;
}

/* Left shift the subnav on lg+ screens, preserve mobile layout */
@media (min-width: 992px) {
	.bf-subnav .bf-tabs {
		margin-left: calc(-1 * var(--bf-subnav-left-shift));
	}
}

/* If you have a wrapper above <main> that needs spacing */
.biofiles-tabbar {
	margin-bottom: .5rem;
}

/* Site-level tabs bar (Totals / Thumbnails / Media / Random / …)
   Make it lighter than the header row above it. */
.biofiles-tabbar {
	background: #f4f6f8;
	/* tweak: #f8f9fa for even lighter */
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* If the nav inside is transparent, ensure the band reads as a solid bar */
.biofiles-tabbar .nav {
	background: transparent;
}

/* Optional: slightly soften idle links on that bar */
.biofiles-tabbar .nav-link {
	color: var(--bs-body-color);
	opacity: .85;
}

.biofiles-tabbar .nav-link:hover,
.biofiles-tabbar .nav-link:focus {
	opacity: 1;
}

/* ---------- Summary totals list + icons ---------- */
.bf-statlist .list-group-item {
	background: transparent;
	border: 0;
}

/* Base icon wrapper + image (works anywhere) */
.bf-icon-wrap {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: .5rem;
	background: rgba(0, 0, 0, .03);
	overflow: hidden;
	line-height: 0;
	/* avoid stray inline spacing */
}

.bf-icon {
	width: 90%;
	height: 90%;
	object-fit: contain;
	display: block;
}

/* Summary icons — fixed size + no flex shrink in lists */
.bf-statlist .bf-icon-wrap {
	flex: 0 0 56px;
}

/* ---------- Tom Select – compact to match Bootstrap .form-select ---------- */
.ts-wrapper.form-select,
.ts-control {
	min-height: calc(1.5em + .5rem + 2px);
	border-radius: .375rem;
}

.ts-dropdown .option {
	font-size: .95rem;
}

/* ---------- Full-bleed helper ---------- */
.bf-bleed {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
}

/* Allow bleed to show outside MDL containers (safe even on Bootstrap pages) */
.mdl-card,
.mdl-card__supporting-text,
.section--center,
.mdl-grid {
	overflow: visible;
}

/* Optional: remove padding around the gallery */
.bf-bleed .mdl-card__supporting-text {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------- Thumbnail gallery pages ---------- */
.bf-thumbnail-page {
	background: #f6f7f8;
}

.bf-gallery-header {
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.bf-gallery-heading {
	letter-spacing: 0;
}

.bf-gallery-kicker {
	color: var(--bs-secondary-color);
	font-size: .925rem;
}

.bf-gallery-shell {
	padding-top: .65rem;
	padding-bottom: 1.5rem;
}

.bf-thumbnail-page .nGY2 .nGY2GThumbnail {
	background: #111;
	border-radius: .5rem;
	box-shadow: 0 .25rem .8rem rgba(20, 24, 28, .13);
}

.bf-thumbnail-page .nGY2 .nGY2GThumbnailSub,
.bf-thumbnail-page .nGY2 .nGY2GThumbnailImage,
.bf-thumbnail-page .nGY2 .nGY2GThumbnailImg {
	border-radius: .5rem;
}

.bf-thumbnail-page .nGY2 .nGY2GThumbnailLabel {
	background: linear-gradient(180deg, rgba(86, 92, 98, .06), rgba(86, 92, 98, .72)) !important;
	padding: .65rem .6rem .35rem !important;
}

.bf-thumbnail-page .nGY2 .nGY2GThumbnailAlbumTitle,
.bf-thumbnail-page .nGY2 .nGY2GThumbnailImageTitle {
	color: #fff !important;
	font-size: .9rem !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .58) !important;
}

.bf-thumbnail-page .ngy2info {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	line-height: 1;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	color: #1f2933;
	box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .18);
	cursor: pointer;
	opacity: .9;
	transition: background-color .14s ease, box-shadow .14s ease, opacity .14s ease, transform .14s ease;
}

.bf-thumbnail-page .ngy2info:hover,
.bf-thumbnail-page .ngy2info:focus {
	background: #fff;
	box-shadow: 0 .4rem .9rem rgba(0, 0, 0, .22);
	opacity: 1;
	transform: translateY(-1px);
}

.bf-thumbnail-page .ngy2info:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bf-thumbnail-page .ngy2info .bi {
	font-size: 1rem;
	line-height: 1;
}

/* ---------- Breadcrumbs (taxonomy) ---------- */
.bf-crumbs .breadcrumb {
	--bs-breadcrumb-divider: '›';
	font-size: .9rem;
	margin: .25rem 0 .5rem;
	color: var(--bs-secondary-color);
}

.bf-crumbs .breadcrumb-item+.breadcrumb-item::before {
	color: var(--bs-tertiary-color);
}

.bf-crumbs .breadcrumb-item a {
	color: var(--bf-link);
}

.bf-crumbs .breadcrumb-item a:hover {
	color: var(--bf-link-hover);
	text-decoration: underline;
}

/* Truncate very long taxonomy names gracefully */
.bf-crumbs .breadcrumb-item {
	max-width: 22ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Taxonomy “chips” */
.bf-crumbs {
	margin: .25rem 0 .5rem;
}

.bf-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .5rem;
	border-radius: .5rem;
	background: rgba(0, 0, 0, .05);
	line-height: 1;
	white-space: nowrap;
	color: inherit;
}

.bf-chip:hover {
	background: rgba(0, 0, 0, .08);
	text-decoration: none;
}

.bf-chevron {
	font-size: 1rem;
	opacity: .5;
	line-height: 1;
}

/* ---------- Page-level tabs (Totals / Media / Random / …) ---------- */
.bf-page-tabs {
	background: #f4f6f8;
	/* light gray band */
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Tabs container stays clean */
.bf-page-tabs .bf-tabs {
	gap: .25rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bf-page-tabs .bf-tabs::-webkit-scrollbar {
	display: none;
}

.bf-page-tabs .nav-link {
	color: var(--bs-body-color);
	opacity: .85;
	padding: .5rem .75rem;
	border-bottom: .2rem solid transparent;
	border-radius: 0;
	background: transparent;
}

/* Hover */
.bf-page-tabs .nav-link:hover,
.bf-page-tabs .nav-link:focus {
	opacity: 1;
}

/* Active tab */
.bf-page-tabs .nav-link.active {
	color: var(--bf-link-hover);
	border-bottom-color: var(--bs-primary);
	font-weight: 600;
	opacity: 1;
}

/* ---------- EasyAutocomplete: keep dropdown flush to input ---------- */
.easy-autocomplete {
	position: relative;
}

.easy-autocomplete-container {
	position: absolute;
	top: 100% !important;
	left: 0;
	right: 0;
	margin-top: -3px !important;
	/* tweak: -2 / -3 / -4 */
	z-index: 2000 !important;
}

.easy-autocomplete-container ul {
	margin-top: 0 !important;
	padding-top: 0 !important;
	position: static !important;
	/* kills theme’s little top offset */
}

.easy-autocomplete input,
.easy-autocomplete .form-control {
	margin-bottom: 0 !important;
}

/* ---------- Mobile tweaks (consolidated) ---------- */
@media (max-width: 576px) {

	/* Subnav: single-row scroll on phones */
	.bf-subnav .bf-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: .01rem;
	}

	.bf-subnav .bf-tabs::-webkit-scrollbar {
		display: none;
	}

	.bf-subnav .nav-link {
		padding-top: .4rem;
		padding-bottom: .4rem;
	}

	/* Stat list sizing */
	.bf-icon-wrap {
		width: 44px;
		height: 44px;
	}

	.bf-statlist .d-flex {
		gap: .75rem !important;
	}

	.bf-statlist .list-group-item {
		padding-left: .25rem;
		padding-right: .25rem;
	}

	/* Breadcrumb truncation + size */
	.bf-crumbs .breadcrumb {
		font-size: .85rem;
	}

	.bf-crumbs .breadcrumb-item {
		max-width: 16ch;
	}

	/* Page tabs tighter */
	.bf-page-tabs .nav-link {
		padding: .45rem .5rem;
		font-size: .9rem;
	}

	header.container {
		padding-top: .75rem;
	}
}