/**
 * Icon placement across calculator, category and search pages.
 *
 * Icons are always decorative here — each sits beside text that carries the
 * meaning — so none of these rules make information depend on seeing them.
 *
 * The tool-card styles are declared here as well as in the theme, because
 * category and related-calculator grids are rendered by the plugin and must
 * look right even if the theme is swapped.
 */

.cp-icon {
	flex: 0 0 auto;
	display: block;
}

/* Page headers with a category chip --------------------------------------- */

.cp-page-header--with-icon {
	position: relative;
}

.cp-page-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--cp-space-3);
	border-radius: var(--cp-radius);
	background: var(--cp-accent-bg, var(--cp-blue-light));
	color: var(--cp-accent, var(--cp-blue));
	text-decoration: none;
	transition: transform var(--cp-transition);
}

a.cp-page-icon:hover {
	transform: translateY(-1px);
}

a.cp-page-icon:focus-visible {
	outline: 2px solid var(--cp-focus);
	outline-offset: 2px;
}

.cp-page-icon--large {
	width: 54px;
	height: 54px;
}

/* Section headings -------------------------------------------------------- */

.cp-faq__title,
.cp-related__title {
	display: flex;
	align-items: center;
	gap: var(--cp-space-3);
}

.cp-section-icon {
	flex: 0 0 auto;
	color: var(--cp-blue);
}

/* Formula and meta lines -------------------------------------------------- */

.cp-formula__label {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-2);
}

.cp-formula__label .cp-icon {
	color: var(--cp-blue);
}

.cp-updated {
	display: flex;
	align-items: center;
	gap: var(--cp-space-2);
}

.cp-disclaimer__title {
	display: flex;
	align-items: center;
	gap: var(--cp-space-2);
}

/* Tool cards (category grids, related calculators) ------------------------ */

.cp-tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--cp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-tool__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-2);
	height: 100%;
	padding: var(--cp-space-4) var(--cp-space-4) calc(var(--cp-space-7) + var(--cp-space-1));
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-bg);
	text-decoration: none;
	transition: border-color var(--cp-transition), box-shadow var(--cp-transition), transform var(--cp-transition);
}

.cp-tool__link:hover {
	border-color: var(--cp-accent, var(--cp-blue));
	box-shadow: var(--cp-shadow);
	transform: translateY(-2px);
}

.cp-tool__link:focus-visible {
	outline: 2px solid var(--cp-focus);
	outline-offset: 2px;
}

.cp-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--cp-space-2);
	border-radius: var(--cp-radius);
	background: var(--cp-accent-bg, var(--cp-blue-light));
	color: var(--cp-accent, var(--cp-blue));
}

.cp-tool__name {
	font-size: var(--cp-text-base);
	font-weight: var(--cp-weight-bold);
	line-height: var(--cp-leading-snug);
	color: var(--cp-navy);
}

.cp-tool__text {
	font-size: var(--cp-text-sm);
	line-height: var(--cp-leading-snug);
	color: var(--cp-text-muted);
}

.cp-tool__arrow {
	position: absolute;
	right: var(--cp-space-4);
	bottom: var(--cp-space-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cp-blue-light);
	color: var(--cp-blue);
	transition: background-color var(--cp-transition), color var(--cp-transition);
}

.cp-tool__link:hover .cp-tool__arrow {
	background: var(--cp-blue);
	color: var(--cp-text-inverse);
}

/* Related grids sit inside the narrow article column, so they need fewer
   columns than a full-width archive. */
.cp-tool-grid--related {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Tags with icons --------------------------------------------------------- */

.cp-tag--icon {
	gap: var(--cp-space-2);
	color: var(--cp-text);
}

.cp-tag--icon .cp-icon {
	color: var(--cp-accent, var(--cp-text-muted));
}

.cp-tag--icon:hover {
	border-color: var(--cp-accent, var(--cp-blue));
	color: var(--cp-navy);
}

/* Search results ---------------------------------------------------------- */

.cp-result-item {
	display: flex;
	align-items: flex-start;
	gap: var(--cp-space-4);
}

.cp-result-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: 2px;
	border-radius: var(--cp-radius);
	background: var(--cp-accent-bg, var(--cp-blue-light));
	color: var(--cp-accent, var(--cp-blue));
}

.cp-result-item__body {
	min-width: 0;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 600px) {

	.cp-tool-grid,
	.cp-tool-grid--related {
		grid-template-columns: 1fr;
	}

	.cp-page-icon {
		width: 40px;
		height: 40px;
	}

	.cp-page-icon--large {
		width: 46px;
		height: 46px;
	}

	.cp-result-item__icon {
		width: 34px;
		height: 34px;
	}
}