/*
 * components.css — all .whb-* component styling.
 * Consumes --wh-* aliases ONLY (defined in brand.css). No hex/rgb literals
 * (the build gate, tests/gates.mjs, fails on any). Lean, no JS dependencies.
 */

/* ---- Layout primitives ------------------------------------------------ */
.whb-container { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.whb-content { max-width: 720px; margin-inline: auto; }
.whb-main { display: block; padding-block: var(--wh-space-section, 3rem); }

.whb-skip-link { position: absolute; left: -9999px; }
.whb-skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--wh-card); padding: 0.5rem 1rem; border: 2px solid var(--wh-primary); }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* ---- Header / footer / nav -------------------------------------------- */
.whb-site-header { border-bottom: 1px solid var(--wh-card-border); background: var(--wh-card); }
.whb-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.whb-site-title { margin: 0; font-family: var(--wh-font-heading); font-weight: 800; font-size: 1.25rem; }
.whb-site-title a { color: var(--wh-primary); text-decoration: none; }
.whb-nav__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.whb-nav__menu a { color: var(--wh-text); text-decoration: none; font-weight: 600; }
.whb-nav__menu a:hover { color: var(--wh-primary); }
.whb-site-footer { margin-top: var(--wh-space-section, 3rem); padding-block: 2rem; border-top: 1px solid var(--wh-card-border); background: var(--wh-card); }
.whb-site-footer__brand { font-family: var(--wh-font-heading); font-weight: 800; margin: 0 0 0.5rem; }
.whb-footer-menu { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.whb-footer-menu a { color: var(--wh-text-muted); text-decoration: none; font-size: 0.9375rem; }
.whb-site-footer__legal { color: var(--wh-text-muted); font-size: 0.875rem; margin: 0; }

/* ---- Breadcrumb ------------------------------------------------------- */
.whb-breadcrumb { font-size: 0.875rem; color: var(--wh-text-muted); margin-bottom: 1rem; }
.whb-breadcrumb a { color: var(--wh-text-muted); }

/* ---- Article scaffold ------------------------------------------------- */
.whb-article__title, .whb-page__title { margin: 0 0 1rem; }
.whb-content > * + * { margin-top: var(--wh-space-flow, 1.25rem); }
.whb-content img { border-radius: var(--wh-radius-card, 12px); }

/* ---- 1. FTC disclosure band ------------------------------------------ */
.whb-ftc-disclosure {
	background: var(--wh-takeaway);
	border: 1px solid var(--wh-takeaway-border);
	border-left: 4px solid var(--wh-primary);
	border-radius: var(--wh-radius-card, 12px);
	padding: 0.875rem 1.125rem;
	font-size: 0.9375rem;
	color: var(--wh-text);
}
.whb-ftc-disclosure p { margin: 0; }
.whb-amazon-associates, .whb-price-legend { color: var(--wh-text-muted); font-size: 0.875rem; }

/* ---- 2. Product pick / card ------------------------------------------ */
.whb-pick {
	border: 1px solid var(--wh-card-border);
	border-radius: var(--wh-radius-card, 12px);
	background: var(--wh-card);
	padding: 1.5rem;
	margin-block: var(--wh-space-flow, 1.25rem);
	scroll-margin-top: 1.5rem;
}
.whb-pick__name { margin: 0 0 0.75rem; }
.whb-pick ul { padding-left: 1.25rem; }

/* ---- 3. Comparison table --------------------------------------------- */
.whb-compare { overflow-x: auto; margin-block: var(--wh-space-flow, 1.25rem); }
.whb-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.whb-content th, .whb-content td { border: 1px solid var(--wh-card-border); padding: 0.625rem 0.75rem; text-align: left; vertical-align: top; }
.whb-content thead th { background: var(--wh-takeaway); color: var(--wh-text-heading); }

/* ---- 4. Award chip --------------------------------------------------- */
.whb-award-chip {
	display: inline-block;
	font-family: var(--wh-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wh-on-dark);
	background: var(--wh-award-overall);
	padding: 0.25rem 0.625rem;
	border-radius: var(--wh-radius-chip, 999px);
}
.whb-award--value  { background: var(--wh-award-value); }
.whb-award--budget { background: var(--wh-award-budget); }
.whb-award--forx   { background: var(--wh-award-forx); }

/* ---- 5. Price band --------------------------------------------------- */
.whb-price-band {
	display: inline-block;
	font-family: var(--wh-font-heading);
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: var(--wh-radius-chip, 999px);
	color: var(--wh-on-dark);
	background: var(--wh-price-mid);
}
.whb-price--budget  { background: var(--wh-price-budget); }
.whb-price--mid     { background: var(--wh-price-mid); }
.whb-price--premium { background: var(--wh-price-premium); }

/* ---- 6. Affiliate CTA ------------------------------------------------ */
.whb-where-to-buy { margin-block: 1rem; }
.whb-cta {
	display: inline-block;
	font-family: var(--wh-font-heading);
	font-weight: 700;
	color: var(--wh-on-dark);
	background: var(--wh-cta);
	box-shadow: var(--wh-cta-shadow);
	padding: 0.75rem 1.25rem;
	border-radius: var(--wh-radius-card, 12px);
	text-decoration: none;
	line-height: 1.2;
}
.whb-cta:hover { filter: brightness(0.95); color: var(--wh-on-dark); }
.whb-cta:focus-visible { outline: 3px solid var(--wh-primary); outline-offset: 2px; }

/* ---- 7. Answer-first summary box ------------------------------------- */
.whb-answer-first {
	background: var(--wh-takeaway);
	border: 1px solid var(--wh-takeaway-border);
	border-radius: var(--wh-radius-card, 12px);
	padding: 1.25rem 1.5rem;
}
.whb-answer-first > :first-child { margin-top: 0; }
.whb-answer-first > :last-child { margin-bottom: 0; }

/* ---- 8. FAQ ---------------------------------------------------------- */
.whb-faq__q { margin: 1.25rem 0 0.25rem; }
.whb-faq__a { color: var(--wh-text); }
.whb-faq__a > :first-child { margin-top: 0; }

/* ---- 9. How-To -------------------------------------------------------- */
.whb-howto__step {
	border-left: 3px solid var(--wh-primary);
	padding-left: 1rem;
	margin-block: var(--wh-space-flow, 1.25rem);
	scroll-margin-top: 1.5rem;
}
.whb-howto__name { margin: 0 0 0.25rem; }

/* ---- 10. Author box -------------------------------------------------- */
.whb-author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: var(--wh-space-section, 3rem);
	padding: 1.25rem;
	border: 1px solid var(--wh-card-border);
	border-radius: var(--wh-radius-card, 12px);
	background: var(--wh-card);
}
.whb-author__monogram {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3rem; height: 3rem;
	border-radius: 999px;
	background: var(--wh-primary);
	color: var(--wh-on-dark);
	font-family: var(--wh-font-heading);
	font-weight: 800;
}
.whb-author__eyebrow { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wh-eyebrow); }
.whb-author__name { margin: 0.125rem 0 0.5rem; font-size: 1.125rem; }
.whb-author__bio { margin: 0; color: var(--wh-text-muted); font-size: 0.9375rem; }