/*
 * SF Birding Links, styled to match the Sandbach Flashes theme: the same cards
 * as the blog posts, the same green pill buttons as the blog filters and
 * records dropdown, and the same small uppercase labels. Falls back to
 * sensible colours on other themes.
 */
.sfbl {
	--sfbl-text: var(--sc-text, #1f2328);
	--sfbl-muted: var(--sc-muted, #5b636e);
	--sfbl-surface: var(--sc-surface, #f5f6f7);
	--sfbl-border: var(--sc-border, #dfe2e5);
	--sfbl-accent: var(--sc-accent, #2f6f4e);
	--sfbl-accent-text: var(--sc-accent-text, #fff);
	--sfbl-bg: var(--sc-bg, #fff);
	--sfbl-radius: var(--sc-radius, 6px);
	--sfbl-gap: var(--sc-gap, 1.5rem);
}
.sfbl [hidden] { display: none !important; }
.sfbl__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Search: a pill like the records block's "Show records from" dropdown. */
.sfbl__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.sfbl__search { flex: 1 1 18rem; max-width: 28rem; }
.sfbl__search input {
	width: 100%; padding: .65rem 1rem .65rem 2.75rem; border: 2px solid var(--sfbl-accent); border-radius: 999px;
	font: inherit; color: var(--sfbl-text); -webkit-appearance: none; appearance: none;
	background: var(--sfbl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%232f6f4e' stroke-width='2'/%3E%3Cpath d='M13 13l4.5 4.5' stroke='%232f6f4e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 1rem center / 17px;
}
.sfbl__search input::placeholder { color: var(--sfbl-muted); }
.sfbl__search input:focus-visible { outline: 3px solid var(--sfbl-accent); outline-offset: 2px; }
.sfbl__count { margin: 0; font-size: .9rem; color: var(--sfbl-muted); }

/* Group buttons: the blog's category filters. */
.sfbl__nav { margin: 0 0 2rem; }
.sfbl__nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sfbl__chip {
	display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .9rem; border: 2px solid var(--sfbl-accent); border-radius: 999px;
	font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--sfbl-accent); text-decoration: none; white-space: nowrap; background: var(--sfbl-bg);
}
.sfbl__chip:hover, .sfbl__chip:focus-visible { background: var(--sfbl-surface); }
.sfbl__chip:focus-visible { outline: 3px solid var(--sfbl-accent); outline-offset: 2px; }
.sfbl__chip.is-active { background: var(--sfbl-accent); color: var(--sfbl-accent-text); }
.sfbl__chip-count { font-size: .8rem; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* Groups */
.sfbl__group { margin: 0 0 2.75rem; scroll-margin-top: 6rem; }
.sfbl__group:last-of-type { margin-bottom: 0; }
.sfbl__group-title { margin: 0 0 .25rem; font-size: 1.4rem; }
.sfbl__group-desc { margin: 0 0 1.25rem; color: var(--sfbl-muted); }
.sfbl__list { list-style: none; margin: 0; padding: 0; }

/* Cards: the blog's post cards. */
.sfbl--cards .sfbl__list { display: grid; gap: var(--sfbl-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.sfbl--cards .sfbl__item {
	position: relative; display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem;
	background: var(--sfbl-bg); border: 1px solid var(--sfbl-border); border-radius: var(--sfbl-radius);
	box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .25); transition: box-shadow .2s, transform .2s;
}
.sfbl--cards .sfbl__item:hover { box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .35); transform: translateY(-2px); }
.sfbl--cards .sfbl__item.is-featured { border-top: 4px solid var(--sfbl-accent); }
/* The link fills the card, so the whole card can be clicked; it stays the only thing you can tab to. */
.sfbl--cards .sfbl__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sfbl--cards .sfbl__link:focus { outline: none; }
.sfbl--cards .sfbl__item:focus-within { outline: 3px solid var(--sfbl-accent); outline-offset: 2px; }
.sfbl--cards .sfbl__link { display: flex; flex-direction: column-reverse; gap: .45rem; margin-bottom: .45rem; color: inherit; text-decoration: none; }
.sfbl--cards .sfbl__title { font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--sfbl-text); }
.sfbl--cards .sfbl__item:hover .sfbl__title, .sfbl--cards .sfbl__item:focus-within .sfbl__title { color: var(--sfbl-accent); }
/* The web address as a small label above the name, like the blog's category chips. */
.sfbl--cards .sfbl__domain {
	align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding: .1rem .5rem; border-radius: 3px; background: color-mix(in srgb, var(--sfbl-accent) 12%, transparent);
	color: var(--sfbl-accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sfbl--cards .sfbl__desc { margin: 0 0 1rem; font-size: .975rem; line-height: 1.55; color: var(--sfbl-muted); }
.sfbl--cards .sfbl__more { margin-top: auto; font-weight: 600; color: var(--sfbl-accent); }
.sfbl--cards .sfbl__more::after { content: "\2197"; display: inline-block; margin-left: .3em; transition: transform .2s ease; }
/* The arrow nudges up and to the right, towards the site it opens. */
.sfbl--cards .sfbl__item:hover .sfbl__more::after,
.sfbl--cards .sfbl__item:focus-within .sfbl__more::after { transform: translate(3px, -3px); }
.sfbl--cards .sfbl__item:hover .sfbl__more { text-decoration: underline; }
.sfbl--cards .sfbl__badge { position: absolute; top: .9rem; right: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sfbl-muted); }
.sfbl--cards .is-featured .sfbl__domain { max-width: calc(100% - 7.5rem); }

/* List */
.sfbl--list .sfbl__list { border-top: 1px solid var(--sfbl-border); }
.sfbl--list .sfbl__item { position: relative; padding: .85rem 0; border-bottom: 1px solid var(--sfbl-border); }
.sfbl--list .sfbl__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; text-decoration: none; }
.sfbl--list .sfbl__title { font-weight: 600; color: var(--sfbl-accent); }
.sfbl--list .sfbl__link:hover .sfbl__title { text-decoration: underline; }
.sfbl--list .sfbl__domain { font-size: .85rem; color: var(--sfbl-muted); }
.sfbl--list .sfbl__domain::after { content: "\2197"; display: inline-block; margin-left: .3em; transition: transform .2s ease; }
.sfbl--list .sfbl__link:hover .sfbl__domain::after,
.sfbl--list .sfbl__link:focus-visible .sfbl__domain::after { transform: translate(2px, -2px); }
.sfbl--list .sfbl__desc { margin: .2rem 0 0; font-size: .95rem; color: var(--sfbl-muted); }
.sfbl--list .sfbl__badge { float: right; margin-left: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sfbl-accent); }
.sfbl--list .sfbl__more { display: none; }

.sfbl__none, .sfbl__empty { color: var(--sfbl-muted); }

/* "Run a birding website?" box at the foot of the directory. */
.sfbl__suggest {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
	margin: 3rem 0 0; padding: 1.75rem 2rem; background: var(--sfbl-surface); border-radius: var(--sfbl-radius);
	border-left: 4px solid var(--sfbl-accent);
}
.sfbl__suggest-text { flex: 1 1 26rem; max-width: 46rem; }
.sfbl__suggest-title { margin: 0 0 .35rem; font-size: 1.3rem; }
.sfbl__suggest-text p { margin: 0 0 .5em; color: var(--sfbl-muted); }
.sfbl__suggest-text p:last-child { margin-bottom: 0; }
.sfbl__suggest-action { flex: 0 0 auto; margin: 0; }
/* Uses the theme's .button; these keep it looking right on other themes. */
.sfbl__suggest-button { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.4rem; border-radius: var(--sfbl-radius); background: var(--sfbl-accent); color: var(--sfbl-accent-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sfbl__suggest-button::after { content: "\2192"; display: inline-block; transition: transform .2s ease; }
.sfbl__suggest-button:hover::after, .sfbl__suggest-button:focus-visible::after { transform: translateX(3px); }
.cb--bg-light .sfbl__suggest { background: var(--sfbl-bg); box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .25); }

/* Light-background sections: cards keep their white background, as elsewhere on the site. */
.cb--bg-light .sfbl__chip { background: var(--sfbl-bg); }
.cb--bg-light .sfbl__chip.is-active { background: var(--sfbl-accent); }

/* Phones: group buttons scroll sideways in one row instead of stacking. */
@media (max-width: 639px) {
	.sfbl__nav { margin-right: -1rem; }
	.sfbl__nav ul { flex-wrap: nowrap; overflow-x: auto; padding: 0 1rem .35rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.sfbl__nav ul::-webkit-scrollbar { display: none; }
	.sfbl__chip { font-size: .9rem; }
	.sfbl--cards .sfbl__list { gap: 1rem; }
	.sfbl__group-title { font-size: 1.25rem; }
	.sfbl__suggest { padding: 1.4rem 1.25rem; margin-top: 2.25rem; }
	.sfbl__suggest-action, .sfbl__suggest-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.sfbl--cards .sfbl__item { transition: none; }
	.sfbl--cards .sfbl__item:hover { transform: none; }
	.sfbl__more::after, .sfbl__domain::after, .sfbl__suggest-button::after { transition: none; }
}