/**
 * CalculatorPeak base styles.
 *
 * Layout primitives, typography and shared components used across calculator
 * pages, category pages and search. Every selector is prefixed `cp-`, so this
 * file can never restyle the active theme or another plugin.
 *
 * Loaded on every page. Kept small on purpose — the heavier calculator styles
 * live in cp-calculator.css and only load where a calculator exists.
 */

/* Layout ------------------------------------------------------------------ */

.cp-main {
	padding: var(--cp-space-6) 0 var(--cp-space-8);
}

.cp-container {
	width: 100%;
	max-width: var(--cp-page-width);
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-container--narrow {
	max-width: calc(var(--cp-content-width) + (var(--cp-gutter) * 2));
}

.cp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Page header ------------------------------------------------------------- */

.cp-page-header {
	margin-block: var(--cp-space-5) var(--cp-space-6);
}

.cp-page-title {
	margin: 0 0 var(--cp-space-3);
	font-family: var(--cp-font-sans);
	font-size: var(--cp-text-3xl);
	font-weight: var(--cp-weight-bold);
	line-height: var(--cp-leading-tight);
	color: var(--cp-navy);
	letter-spacing: -0.02em;
}

.cp-page-intro {
	margin: 0;
	font-size: var(--cp-text-lg);
	line-height: var(--cp-leading-normal);
	color: var(--cp-text-muted);
}

/* Breadcrumb -------------------------------------------------------------- */

.cp-breadcrumb {
	margin-block: var(--cp-space-4) 0;
	font-size: var(--cp-text-sm);
}

.cp-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--cp-space-2);
	color: var(--cp-text-muted);
}

.cp-breadcrumb__item:not(:last-child)::after {
	content: "/";
	color: var(--cp-border-strong);
}

.cp-breadcrumb__item a {
	color: var(--cp-text-muted);
	text-decoration: none;
}

.cp-breadcrumb__item a:hover,
.cp-breadcrumb__item a:focus-visible {
	color: var(--cp-blue);
	text-decoration: underline;
}

/* Buttons ----------------------------------------------------------------- */

.cp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cp-space-2);
	min-height: 48px;
	padding: 0 var(--cp-space-5);
	border: 1px solid transparent;
	border-radius: var(--cp-radius);
	font-family: inherit;
	font-size: var(--cp-text-base);
	font-weight: var(--cp-weight-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cp-transition), border-color var(--cp-transition), color var(--cp-transition);
}

.cp-button--primary {
	background: var(--cp-blue);
	color: var(--cp-text-inverse);
}

.cp-button--primary:hover {
	background: var(--cp-blue-hover);
}

.cp-button--ghost {
	background: transparent;
	border-color: var(--cp-border-strong);
	color: var(--cp-text);
}

.cp-button--ghost:hover {
	border-color: var(--cp-navy);
	background: var(--cp-bg-sunken);
}

.cp-button--small {
	min-height: 36px;
	padding-inline: var(--cp-space-3);
	font-size: var(--cp-text-sm);
	background: transparent;
	border-color: var(--cp-border-strong);
	color: var(--cp-text);
}

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

/* Article ----------------------------------------------------------------- */

.cp-article {
	margin-top: var(--cp-space-7);
	font-size: 1.0625rem;
	line-height: var(--cp-leading-normal);
	color: var(--cp-text);
}

.cp-article p {
	margin: 0 0 var(--cp-space-4);
}

.cp-article h2.cp-article__heading {
	margin: var(--cp-space-7) 0 var(--cp-space-3);
	font-size: var(--cp-text-2xl);
	font-weight: var(--cp-weight-bold);
	line-height: var(--cp-leading-tight);
	color: var(--cp-navy);
	letter-spacing: -0.015em;
}

.cp-article h3.cp-article__heading {
	margin: var(--cp-space-5) 0 var(--cp-space-2);
	font-size: var(--cp-text-xl);
	font-weight: var(--cp-weight-semibold);
	color: var(--cp-navy);
}

.cp-article ul,
.cp-article ol {
	margin: 0 0 var(--cp-space-4);
	padding-left: var(--cp-space-5);
}

.cp-article li {
	margin-bottom: var(--cp-space-2);
}

.cp-article a {
	color: var(--cp-blue);
	text-underline-offset: 2px;
}

.cp-article blockquote {
	margin: 0 0 var(--cp-space-4);
	padding: var(--cp-space-3) var(--cp-space-5);
	border-left: 3px solid var(--cp-blue);
	background: var(--cp-blue-light);
	border-radius: 0 var(--cp-radius-sm) var(--cp-radius-sm) 0;
}

.cp-article blockquote p:last-child {
	margin-bottom: 0;
}

.cp-article code {
	padding: 0.125em 0.375em;
	border-radius: 4px;
	background: var(--cp-bg-sunken);
	font-family: var(--cp-font-mono);
	font-size: 0.9em;
}

.cp-code {
	margin: 0 0 var(--cp-space-4);
	padding: var(--cp-space-4);
	overflow-x: auto;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	background: var(--cp-bg-soft);
	font-family: var(--cp-font-mono);
	font-size: 0.9375rem;
	line-height: var(--cp-leading-snug);
}

.cp-code code {
	padding: 0;
	background: none;
}

.cp-article__rule {
	margin: var(--cp-space-6) 0;
	border: 0;
	border-top: 1px solid var(--cp-border);
}

/* Cards ------------------------------------------------------------------- */

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

.cp-card {
	padding: var(--cp-space-4);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	background: var(--cp-bg);
	transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
}

.cp-card:hover {
	border-color: var(--cp-blue);
	box-shadow: var(--cp-shadow);
}

.cp-card__title {
	margin: 0 0 var(--cp-space-2);
	font-size: var(--cp-text-base);
	font-weight: var(--cp-weight-semibold);
	line-height: var(--cp-leading-snug);
}

.cp-card__link {
	color: var(--cp-navy);
	text-decoration: none;
}

.cp-card__link:hover {
	color: var(--cp-blue);
}

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

/* Sections ---------------------------------------------------------------- */

.cp-faq,
.cp-related {
	margin-top: var(--cp-space-7);
}

.cp-faq__title,
.cp-related__title {
	margin: 0 0 var(--cp-space-4);
	font-size: var(--cp-text-2xl);
	font-weight: var(--cp-weight-bold);
	color: var(--cp-navy);
	letter-spacing: -0.015em;
}

.cp-faq__item {
	border-bottom: 1px solid var(--cp-border);
}

.cp-faq__question {
	padding: var(--cp-space-4) var(--cp-space-6) var(--cp-space-4) 0;
	position: relative;
	font-size: var(--cp-text-lg);
	font-weight: var(--cp-weight-semibold);
	color: var(--cp-navy);
	cursor: pointer;
	list-style: none;
}

.cp-faq__question::-webkit-details-marker {
	display: none;
}

.cp-faq__question::after {
	content: "";
	position: absolute;
	right: var(--cp-space-2);
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--cp-text-muted);
	border-bottom: 2px solid var(--cp-text-muted);
	transform: translateY(-65%) rotate(45deg);
	transition: transform var(--cp-transition);
}

.cp-faq__item[open] .cp-faq__question::after {
	transform: translateY(-25%) rotate(225deg);
}

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

.cp-faq__answer {
	padding-bottom: var(--cp-space-4);
	line-height: var(--cp-leading-normal);
	color: var(--cp-text);
}

.cp-faq__answer p {
	margin: 0;
}

/* Disclaimer and meta ----------------------------------------------------- */

.cp-disclaimer {
	margin-top: var(--cp-space-6);
	padding: var(--cp-space-4) var(--cp-space-5);
	border: 1px solid var(--cp-border);
	border-left: 3px solid var(--cp-warning);
	border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
	background: var(--cp-warning-bg);
}

.cp-disclaimer__title {
	margin: 0 0 var(--cp-space-2);
	font-size: var(--cp-text-sm);
	font-weight: var(--cp-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cp-warning);
}

.cp-disclaimer__text {
	margin: 0;
	font-size: var(--cp-text-sm);
	line-height: var(--cp-leading-normal);
	color: var(--cp-text);
}

.cp-updated {
	margin-top: var(--cp-space-6);
	padding-top: var(--cp-space-4);
	border-top: 1px solid var(--cp-border);
	font-size: var(--cp-text-sm);
	color: var(--cp-text-muted);
}

/* Formula ----------------------------------------------------------------- */

.cp-formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-3);
	margin-top: var(--cp-space-5);
	padding: var(--cp-space-4) var(--cp-space-5);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	background: var(--cp-bg-soft);
}

.cp-formula__label {
	font-size: var(--cp-text-xs);
	font-weight: var(--cp-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cp-text-muted);
}

.cp-formula__code {
	font-family: var(--cp-font-mono);
	font-size: 0.9375rem;
	color: var(--cp-navy);
}

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

@media (max-width: 600px) {

	.cp-page-title {
		font-size: var(--cp-text-2xl);
	}

	.cp-article h2.cp-article__heading {
		font-size: var(--cp-text-xl);
		margin-top: var(--cp-space-6);
	}

	.cp-card-grid {
		grid-template-columns: 1fr;
	}
}