/* ============================================================
   components.css — buttons, cards, badges, navigation, FAQ,
   hero, footer, breadcrumbs, trust strip, how it works, etc.
   ========================================================== */

/* ----- Buttons ----- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--radius);
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
	transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.button:hover { text-decoration: none; }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.button-primary {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}
.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.button-secondary {
	background: var(--surface-elevated);
	color: var(--text);
	border-color: var(--border);
}
.button-secondary:hover { background: var(--surface); color: var(--text); }

.button-ghost {
	background: transparent;
	color: var(--text-muted);
	border-color: transparent;
}
.button-ghost:hover { background: var(--surface); color: var(--text); }

.button-lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-lg); min-height: 52px; }

.button .icon { width: 18px; height: 18px; }

/* ----- Badges ----- */
.badge {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--text-muted);
	font-weight: 500;
	text-decoration: none;
}
.badge:hover { color: var(--primary); text-decoration: none; }
.badge-pill { border-radius: var(--radius-pill); }

/* ----- Card ----- */
.card {
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

/* ----- Input ----- */
.input {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font: inherit;
	font-size: var(--fs-base);
	color: var(--text);
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	min-height: 48px;
	transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.input::placeholder { color: var(--text-muted); opacity: 0.7; }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--primary-tint); }
.input[type="url"] { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ----- Header ----- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--background);
	border-block-end: 1px solid var(--border);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	background-color: color-mix(in srgb, var(--background) 92%, transparent);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: var(--header-height);
	padding-block: var(--space-2);
}
.site-branding { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.site-title {
	font-weight: 700;
	font-size: var(--fs-lg);
	color: var(--text);
	text-decoration: none;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-title:hover { color: var(--primary); text-decoration: none; }
.site-branding .custom-logo { max-height: 36px; width: auto; }

.site-nav { flex: 1; }
.nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-list a {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
}
.nav-list a:hover { color: var(--primary); background: var(--surface); text-decoration: none; }
.nav-list a[aria-current="page"] { color: var(--primary); }

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

.theme-toggle,
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface-elevated);
	color: var(--text);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.theme-toggle:hover,
.menu-toggle:hover { background: var(--surface); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.menu-toggle { display: none; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ----- Mobile nav ----- */
.mobile-nav {
	position: fixed;
	inset: var(--header-height) 0 auto 0;
	background: var(--background);
	border-block-end: 1px solid var(--border);
	padding: var(--space-4);
	z-index: 90;
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease), visibility 0s linear var(--duration);
}
.mobile-nav[data-open] {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.mobile-nav__list a {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
}
.mobile-nav__list a:hover { background: var(--surface); }

/* ----- Hero ----- */
.hero {
	background:
		radial-gradient(ellipse at top, color-mix(in srgb, var(--primary) 8%, transparent), transparent 60%),
		var(--background);
	padding-block: var(--space-16);
}
.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}
.hero__title { font-size: clamp(2rem, 5vw, 3rem); margin-block: var(--space-3) var(--space-4); }
.hero__sub { color: var(--text-muted); font-size: var(--fs-lg); max-width: 36ch; }
.hero__trust {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}
.trust-list__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-muted);
	font-size: var(--fs-sm);
}
.trust-list__item .icon { color: var(--success); width: 18px; height: 18px; }

/* ----- Trust strip ----- */
.trust-strip { background: var(--surface); border-block: 1px solid var(--border); }
.trust-strip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
.trust-strip__list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.trust-strip__list .icon {
	width: 28px;
	height: 28px;
	color: var(--primary);
	flex-shrink: 0;
}
.trust-strip__list strong { display: block; color: var(--text); font-weight: 600; }
.trust-strip__list span span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ----- How it works ----- */
.how-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.how-card {
	position: relative;
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: start;
}
.how-card__step {
	position: absolute;
	top: var(--space-4);
	inset-inline-end: var(--space-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary-tint);
	color: var(--primary);
	font-weight: 700;
	font-size: var(--fs-sm);
}
.how-card__icon {
	width: 32px;
	height: 32px;
	color: var(--primary);
	margin-block-end: var(--space-3);
}
.how-card__title { font-size: var(--fs-lg); margin-block-end: var(--space-2); }
.how-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ----- Feature card grid ----- */
.feature-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-5);
}
.feature-card { text-align: start; }
.feature-card__icon {
	width: 36px;
	height: 36px;
	color: var(--primary);
	margin-block-end: var(--space-3);
}
.feature-card__title { font-size: var(--fs-lg); margin-block-end: var(--space-2); }
.feature-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ----- Tool card grid ----- */
.tool-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
}
.tool-card { padding: 0; }
.tool-card__link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	color: var(--text);
	text-decoration: none;
	height: 100%;
}
.tool-card__link:hover { color: var(--text); text-decoration: none; }
.tool-card__link:hover .tool-card__title { color: var(--primary); }
.tool-card__link:hover .tool-card__arrow { color: var(--primary); transform: translateX(4px); }
.tool-card__icon {
	width: 40px;
	height: 40px;
	color: var(--primary);
	background: var(--primary-tint);
	border-radius: var(--radius);
	padding: var(--space-2);
	flex-shrink: 0;
}
.tool-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.tool-card__title { font-weight: 600; font-size: var(--fs-base); transition: color var(--duration-fast) var(--ease); }
.tool-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.tool-card__arrow {
	margin-inline-start: auto;
	color: var(--text-muted);
	transition: transform var(--duration) var(--ease), color var(--duration-fast) var(--ease);
}

/* ----- FAQ accordion ----- */
.faq { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	min-height: 44px;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover { background: var(--surface); }
.faq-item[open] .faq-item__summary { border-block-end: 1px solid var(--border); }
.faq-item__icon {
	width: 20px;
	height: 20px;
	color: var(--primary);
	flex-shrink: 0;
	transition: transform var(--duration) var(--ease);
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { padding: var(--space-4) var(--space-5); color: var(--text-muted); margin: 0; }

/* ----- Breadcrumbs ----- */
.breadcrumbs { font-size: var(--fs-sm); margin-block-end: var(--space-4); }
.breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.breadcrumbs__sep { color: var(--text-muted); opacity: 0.6; }
.breadcrumbs__link { color: var(--text-muted); }
.breadcrumbs__current { color: var(--text); font-weight: 600; }

/* ----- Related grid (guides / articles) ----- */
.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-5);
}
.related-card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.related-card__media { display: block; aspect-ratio: 3 / 2; background: var(--surface); overflow: hidden; }
.related-card__media img { width: 100%; height: 100%; object-fit: cover; }
.related-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.related-card__meta { display: flex; gap: var(--space-3); margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.related-card__title { margin: 0; font-size: var(--fs-lg); }
.related-card__title a { color: var(--text); }
.related-card__title a:hover { color: var(--primary); }
.related-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.related-card__more { font-weight: 600; color: var(--primary); font-size: var(--fs-sm); }

/* ----- Final CTA ----- */
.final-cta { background: var(--surface); text-align: center; }
.final-cta__inner { max-width: 700px; margin-inline: auto; }
.final-cta__title { margin-block-end: var(--space-3); }
.final-cta__desc { color: var(--text-muted); margin-block-end: var(--space-6); }

/* ----- Post meta ----- */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin-block: var(--space-3) 0;
}
.post-categories { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6); }
.post-tags__label { color: var(--text-muted); font-size: var(--fs-sm); margin-inline-end: var(--space-2); }

.post-featured { margin: 0; padding-block: var(--space-6) 0; }
.post-featured img { border-radius: var(--radius-lg); }

/* ----- Search form ----- */
.search-form__row { display: flex; gap: var(--space-2); }
.search-form__input { flex: 1; }

/* ----- Ad slots ----- */
.ad-slot {
	margin-block: var(--space-6);
	padding: var(--space-4);
	background: var(--surface);
	border: 1px dashed var(--border);
	border-radius: var(--radius);
	text-align: center;
	overflow: hidden;
	position: relative;
}
.ad-slot::before {
	content: "Ad";
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	opacity: 0.5;
}
.ad-slot--header { margin-block: 0 var(--space-6); }
.ad-slot--footer { margin-block: var(--space-8) 0; }

/* ----- 404 ----- */
.error-404__inner { text-align: center; max-width: 640px; margin-inline: auto; padding-block: var(--space-16); }
.error-404__code { font-size: clamp(4rem, 14vw, 7rem); font-weight: 800; color: var(--primary); margin: 0; line-height: 1; }
.error-404__title { margin-block: var(--space-3) var(--space-2); }
.error-404__desc { color: var(--text-muted); margin-block-end: var(--space-6); }
.error-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-block-end: var(--space-8); }
.error-404__search { max-width: 480px; margin-inline: auto; }

/* ----- Footer ----- */
.site-footer { background: var(--surface); border-block-start: 1px solid var(--border); padding-block-start: var(--space-12); }
.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-8);
	padding-block: 0 var(--space-10);
}
.site-footer__brand-name { font-weight: 700; font-size: var(--fs-lg); margin-block-end: var(--space-2); }
.site-footer__desc { color: var(--text-muted); font-size: var(--fs-sm); margin-block-end: var(--space-4); max-width: 36ch; }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.site-footer__social a { font-size: var(--fs-sm); color: var(--text-muted); }
.site-footer__social a:hover { color: var(--primary); }
.site-footer__heading { font-size: var(--fs-base); margin-block-end: var(--space-3); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a { color: var(--text-muted); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: var(--primary); text-decoration: none; }
.site-footer__legal { border-block-start: 1px solid var(--border); padding-block: var(--space-5); }
.site-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}
.site-footer__disclaimer { margin: 0; max-width: 50ch; }

/* ----- Alerts ----- */
.alert {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	border: 1px solid var(--border);
}
.alert__icon { width: 24px; height: 24px; flex-shrink: 0; }
.alert__title { font-weight: 600; margin: 0 0 var(--space-1); }
.alert__desc { color: var(--text-muted); margin: 0 0 var(--space-3); }
.alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.alert--error { background: color-mix(in srgb, var(--error) 8%, transparent); border-color: color-mix(in srgb, var(--error) 30%, var(--border)); }
.alert--error .alert__icon { color: var(--error); }

/* ----- Reading-time / categories pill ----- */
.badge-pill { font-weight: 500; }

/* ----- Sidebar widgets ----- */
.widget { margin-block-end: var(--space-6); }
.widget-title { font-size: var(--fs-lg); margin-block-end: var(--space-3); }

/* ----- SEO content ----- */
.seo-content__inner { max-width: var(--content-width); margin-inline: auto; }
.seo-content__body { max-width: 65ch; margin-inline: auto; color: var(--text); }
.seo-content__body p { color: var(--text-muted); }

/* ----- Section width helpers ----- */
.section--narrow .container { max-width: var(--content-width); }