/* Full article index on /learn/ — Golden Plumbing brand (gold #f5a623, purple #3b2544).
   Selectors are prefixed with .gp-learn-idx and use element+class specificity because our
   plugin stylesheets load BEFORE the theme's, so at equal specificity the theme wins on
   bare `a` and heading elements. */
.gp-learn-idx {
	--gpl-gold: #f5a623;
	--gpl-gold-deep: #d98c0e;
	--gpl-purple: #3b2544;
	--gpl-muted: #7a708c;
	--gpl-rule: #ece6ef;
	max-width: 1100px;
	margin: 3rem auto 1rem;
	padding: 0 clamp(1rem, 4vw, 2rem);
}
.gp-learn-idx .gp-learn-idx-head { margin-bottom: 1.8rem; }
.gp-learn-idx h2 {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: clamp(1.3rem, 3.2vw, 1.9rem);
	color: var(--gpl-purple);
	letter-spacing: -.02em;
	margin: 0 0 .6rem;
	text-wrap: balance;
}
.gp-learn-idx h2::after {
	content: ""; display: block; width: 40px; height: 3px;
	background: var(--gpl-gold); margin-top: .6rem;
}
.gp-learn-idx p.gp-learn-idx-note {
	font-family: "Open Sans", sans-serif;
	font-size: .96rem; line-height: 1.65;
	color: #4a4458; max-width: 62ch; margin: 0;
}
.gp-learn-idx .gp-learn-idx-group { margin-top: 2rem; }
.gp-learn-idx h3.gp-learn-idx-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 800; font-size: 1.02rem;
	color: var(--gpl-purple);
	margin: 0 0 .7rem;
	display: flex; align-items: center; gap: .55rem;
	border-bottom: 1px solid var(--gpl-rule);
	padding-bottom: .5rem;
}
.gp-learn-idx span.gp-learn-idx-count {
	font-size: .74rem; font-weight: 800;
	color: var(--gpl-gold-deep);
	font-variant-numeric: tabular-nums;
}
.gp-learn-idx ul.gp-learn-idx-list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: .1rem 1.6rem;
}
.gp-learn-idx ul.gp-learn-idx-list li { margin: 0; padding: 0; }
.gp-learn-idx a.gp-learn-idx-link {
	display: block;
	padding: .55rem 0;
	font-family: "Open Sans", sans-serif;
	font-size: .92rem; line-height: 1.45;
	color: var(--gpl-purple);
	text-decoration: none;
	border-bottom: 1px solid var(--gpl-rule);
	transition: color .15s ease;
}
.gp-learn-idx a.gp-learn-idx-link::before {
	content: "→ "; color: var(--gpl-gold-deep); font-weight: 700;
}
.gp-learn-idx a.gp-learn-idx-link:hover { color: var(--gpl-gold-deep); }
@media (prefers-reduced-motion: reduce) { .gp-learn-idx * { transition: none !important; } }