/* =====================================================================
 * Faragiri - Internal links
 * Rendered by mu-plugin faragiri-internal-links.php.
 *
 * Everything here is built on the global tokens defined in
 * theme-switcher-core.css (--fg-surface, --fg-card, --fg-text, --fg-text-2,
 * --fg-border, --fg-accent), so all eight colour modes are handled by the
 * switcher and there is not a single hardcoded colour below. That is the whole
 * reason this file is short.
 * ===================================================================== */

/* ---------------------------------------------------------------
 * Contextual links inside body copy.
 *
 * Deliberately quiet. These sit mid-sentence in a paragraph the reader is
 * already reading, so they get an underline and the accent colour and nothing
 * else - no pill, no icon, no background. A contextual link that announces
 * itself is a contextual link nobody trusts.
 * ------------------------------------------------------------- */

a.fgri-il {
	color: var(--fg-accent, #24baef);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	text-decoration-color: color-mix(in srgb, var(--fg-accent, #24baef) 45%, transparent);
	transition: text-decoration-color .18s ease, color .18s ease;
}

a.fgri-il:hover,
a.fgri-il:focus-visible {
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------
 * The silo strip under a course.
 * ------------------------------------------------------------- */

.fgri-il-silo {
	margin-block-start: clamp(1.6rem, 3vw, 2.4rem);
	padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.4vw, 1.6rem);
	border: 1px solid var(--fg-border, rgba(124, 138, 170, .16));
	border-radius: 14px;
	background: var(--fg-card, #11141f);
	color: var(--fg-text, #eef1f7);
	line-height: 1.95;
	text-align: start;
}

.fgri-il-silo p {
	margin: 0 0 .55rem;
}

.fgri-il-silo__path {
	font-size: 1rem;
}

.fgri-il-silo__also,
.fgri-il-silo__label {
	font-size: .92rem;
	color: var(--fg-text-2, #9aa3b8);
}

.fgri-il-silo__label {
	margin-block-start: .9rem;
}

.fgri-il-silo a {
	color: var(--fg-accent, #24baef);
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--fg-accent, #24baef) 35%, transparent);
}

.fgri-il-silo a:hover,
.fgri-il-silo a:focus-visible {
	border-block-end-color: currentColor;
}

.fgri-il-silo__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .35rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fgri-il-silo__list li {
	position: relative;
	padding-inline-start: .95rem;
	font-size: .95rem;
}

/* A marker rather than a list-style, so it sits on the correct side in RTL
 * without fighting the theme's list resets. */
.fgri-il-silo__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .85em;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--fg-accent, #24baef);
	opacity: .55;
}

/* ---------------------------------------------------------------
 * The hub strip on a /learn/ archive.
 * ------------------------------------------------------------- */

.fgri-il-hub {
	padding: clamp(1.2rem, 3vw, 2rem) 1.25rem;
	background: var(--fg-surface, #131722);
	border-block-start: 1px solid var(--fg-border, rgba(124, 138, 170, .16));
	color: var(--fg-text, #eef1f7);
	text-align: start;
}

.fgri-il-hub__inner {
	max-inline-size: 1180px;
	margin-inline: auto;
	display: grid;
	gap: .8rem;
}

.fgri-il-hub__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .75rem;
}

.fgri-il-hub__label {
	flex: 0 0 auto;
	min-inline-size: 8.5rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--fg-text-2, #9aa3b8);
}

.fgri-il-hub__links {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.fgri-il-hub__links a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .34rem .7rem;
	border: 1px solid var(--fg-border, rgba(124, 138, 170, .16));
	border-radius: 999px;
	background: var(--fg-card, #11141f);
	color: var(--fg-text, #eef1f7);
	font-size: .9rem;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.fgri-il-hub__links a:hover,
.fgri-il-hub__links a:focus-visible {
	border-color: var(--fg-accent, #24baef);
	color: var(--fg-accent, #24baef);
}

.fgri-il-hub__links a i {
	font-style: normal;
	font-size: .78rem;
	opacity: .6;
}

@media (max-width: 640px) {
	.fgri-il-hub__label {
		min-inline-size: 100%;
	}
}