/*!
 * Zinn Answer Box — [zh_answer_box]
 * Asset version 1-0-0 (ZAB_ASSET_VER). Bump the filename when this file changes.
 *
 * Cream token set, BUILD-CONTRACT §3. #b8860b is STRUCTURE ONLY (borders, focus rings);
 * every piece of gold TEXT is #8a6410 (~5.4:1 on #fdfcf5 — #b8860b is only ~3.0:1 and
 * fails WCAG AA).
 *
 * The !important flags are the documented Botiga / host-page defence: each SEO tree
 * carries its own scoped "nuclear" text rule (e.g. `.zh-sell-seo h2{color:var(--zh-text)}`,
 * specificity 0,1,1) which would otherwise beat our 0,1,0 class selectors and grey out the
 * question. They are applied to colour/weight/size only — never to layout.
 */

.zh-abx {
	position: relative;
	background: #ffffff;
	border: 1px solid #ecd9a0;
	border-radius: 12px;
	padding: 34px 28px 26px;
	margin: 32px auto;
	box-sizing: border-box;
	max-width: 880px;
}

.zh-abx * {
	box-sizing: border-box;
}

/* Botiga-proof text default, scoped to the wrapper (BUILD-CONTRACT §3, rule 2). */
.zh-abx p,
.zh-abx span,
.zh-abx div,
.zh-abx li,
.zh-abx h2,
.zh-abx h3 {
	color: #3d3d3d;
}

/* ---- notched pill --------------------------------------------------------- */

.zh-abx__tag {
	position: absolute;
	top: -12px;
	left: 24px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fef3d4;
	color: #8a6410 !important;
	border: 1px solid #ecd9a0;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1.4;
}

.zh-abx__icon {
	width: 13px;
	height: 13px;
	display: block;
	flex: none;
}

/* ---- question ------------------------------------------------------------- */

.zh-abx__q {
	font-size: 20px !important;
	line-height: 1.3;
	font-weight: 700 !important;
	color: #8a6410 !important;
	margin: 0 0 12px;
	min-height: 1.2em;
}

/* ---- answer --------------------------------------------------------------- */

.zh-abx__a {
	font-size: 16px;
	line-height: 1.7;
	color: #3d3d3d !important;
}

.zh-abx__a p {
	margin: 0 0 12px;
	font-size: 16px !important;
	line-height: 1.7;
	color: #3d3d3d !important;
}

.zh-abx__a p:last-child {
	margin: 0;
}

.zh-abx__a ul,
.zh-abx__a ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

.zh-abx__a li {
	margin: 0 0 6px;
	color: #3d3d3d !important;
}

.zh-abx__a strong {
	color: #1a1a1a !important;
	font-weight: 700 !important;
}

.zh-abx__a a:link,
.zh-abx__a a:visited,
.zh-abx__a a:hover,
.zh-abx__a a:focus,
.zh-abx__a a:active {
	color: #8a6410 !important;
	text-decoration: underline !important;
}

/* ---- note ----------------------------------------------------------------- */

.zh-abx__note {
	margin: 14px 0 0;
	font-size: 13px !important;
	line-height: 1.6;
	color: #6a6a6a !important;
}

/* ---- chips ---------------------------------------------------------------- */

.zh-abx__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.zh-abx__chip {
	background: #fef3d4;
	color: #8a6410 !important;
	border: 1px solid #ecd9a0;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.5;
}

/* ---- CTA ------------------------------------------------------------------ */

.zh-abx__cta {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(184, 134, 11, .2);
	font-size: 15px !important;
}

.zh-abx__cta-lead {
	color: #6a6a6a !important;
}

.zh-abx__cta a:link,
.zh-abx__cta a:visited,
.zh-abx__cta a:hover,
.zh-abx__cta a:focus,
.zh-abx__cta a:active {
	color: #8a6410 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.zh-abx__cta a:hover,
.zh-abx__cta a:focus {
	text-decoration: underline !important;
}

/* ---- focus ---------------------------------------------------------------- */

.zh-abx a:focus-visible {
	outline: 2px solid #b8860b;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- responsive ----------------------------------------------------------- */

@media (max-width: 560px) {

	.zh-abx {
		padding: 30px 20px 22px;
		margin: 24px auto;
	}

	.zh-abx__q {
		font-size: 18px !important;
	}

	.zh-abx__tag {
		left: 16px;
	}
}

/* ---- high contrast --------------------------------------------------------
 * Nothing in this component conveys meaning through colour alone: the pill, the
 * chips and the note are all plain text, so a forced-colours repaint loses nothing.
 */

@media (forced-colors: active) {

	.zh-abx {
		border: 1px solid CanvasText !important;
		background: Canvas;
	}

	.zh-abx__tag,
	.zh-abx__chip {
		border: 1px solid CanvasText !important;
		background: Canvas;
		color: CanvasText !important;
	}

	.zh-abx__q,
	.zh-abx__a,
	.zh-abx__a p,
	.zh-abx__a li,
	.zh-abx__a strong,
	.zh-abx__note,
	.zh-abx__cta-lead {
		color: CanvasText !important;
	}

	.zh-abx__cta {
		border-top-color: CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {

	.zh-abx,
	.zh-abx * {
		transition: none !important;
		animation: none !important;
	}
}

/* ===========================================================================
 * 1-1-0 — PRESENCE + THE CENTRED VARIANT
 *
 * Why this exists: on /switch-from/ the whole page is centre-aligned (hero,
 * sub, badge, every section heading) while the box rendered flush-left with a
 * small pill orphaned in the top-left corner, so it read as a different design
 * language dropped into the page. Reported on /switch-from/vlance/.
 *
 * The default (left) presentation is UNCHANGED — /buyer-guides/ and
 * /sell-services/ are left-aligned trees and were verified good as-is.
 * =========================================================================== */

/* ---- global polish: lift + a gold top accent ------------------------------ */

.zh-abx {
	background: linear-gradient(180deg, #fffdf7 0%, #ffffff 42%);
	box-shadow: 0 2px 14px rgba(138, 100, 16, .07);
}

/*
 * The accent bar clips ITSELF to the card's top corners via its own border-radius.
 *
 * Do NOT put `overflow: hidden` on .zh-abx to achieve this. The notched pill is
 * `position: absolute; top: -12px` and deliberately overhangs the top edge, so
 * `overflow: hidden` decapitates it — shipped briefly in 1-1-0 and caught on
 * /marketplaces/packaging-design-marketplace/. It is invisible on the centred
 * (.sf-wrap / --center) variant because the pill is static there, so it only
 * shows on the left-aligned trees: guides, sell and marketplaces.
 */
.zh-abx::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(90deg, #b8860b, #e8c766 55%, #b8860b);
}

/* ---- centred variant ------------------------------------------------------
 * Applied by `align="center"` on the shortcode, AND automatically inside
 * `.sf-wrap` (the /switch-from/ tree wrapper) so the live switch pages are
 * corrected without touching a single page's Elementor payload.
 */

.zh-abx--center,
.sf-wrap .zh-abx {
	text-align: center;
	padding-top: 26px;
}

/* the pill leaves the corner and sits centred above the question */
.zh-abx--center .zh-abx__tag,
.sf-wrap .zh-abx .zh-abx__tag {
	position: static;
	top: auto;
	left: auto;
	margin: 0 auto 14px;
	justify-content: center;
}

.zh-abx--center .zh-abx__q,
.sf-wrap .zh-abx .zh-abx__q {
	font-size: 23px !important;
	line-height: 1.28;
	margin: 0 auto 14px;
	max-width: 30ch;
}

/* keep the measure short so centred prose still reads as balanced, not ragged */
.zh-abx--center .zh-abx__a,
.sf-wrap .zh-abx .zh-abx__a {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

.zh-abx--center .zh-abx__note,
.sf-wrap .zh-abx .zh-abx__note {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

.zh-abx--center .zh-abx__chips,
.sf-wrap .zh-abx .zh-abx__chips {
	justify-content: center;
	margin-top: 18px;
}

/* ---- CTA becomes a real button, not a bare underlined link ---------------- */

.zh-abx--center .zh-abx__cta,
.sf-wrap .zh-abx .zh-abx__cta {
	border-top: 0;
	padding-top: 18px;
	margin-top: 18px;
}

/*
 * HARD RULE, CLAUDE.md §3: a coloured CTA must lock its text colour on EVERY
 * link state in ONE combined selector. The theme ships a global `a:hover{color}`
 * that beats a plain `.myclass:hover{color:#fff}`, which turns the white label
 * gold-on-gold and makes it vanish. Only `background` changes on hover.
 */
.zh-abx--center .zh-abx__cta a:link,
.zh-abx--center .zh-abx__cta a:visited,
.zh-abx--center .zh-abx__cta a:hover,
.zh-abx--center .zh-abx__cta a:focus,
.zh-abx--center .zh-abx__cta a:active,
.sf-wrap .zh-abx .zh-abx__cta a:link,
.sf-wrap .zh-abx .zh-abx__cta a:visited,
.sf-wrap .zh-abx .zh-abx__cta a:hover,
.sf-wrap .zh-abx .zh-abx__cta a:focus,
.sf-wrap .zh-abx .zh-abx__cta a:active {
	display: inline-block;
	background: #b8860b;
	color: #ffffff !important;
	border-radius: 999px;
	padding: 11px 26px;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.zh-abx--center .zh-abx__cta a:hover,
.zh-abx--center .zh-abx__cta a:focus,
.sf-wrap .zh-abx .zh-abx__cta a:hover,
.sf-wrap .zh-abx .zh-abx__cta a:focus {
	background: #8a6410;
}

.zh-abx--center .zh-abx__cta-lead,
.sf-wrap .zh-abx .zh-abx__cta-lead {
	display: block;
	margin-bottom: 10px;
}

@media (max-width: 560px) {

	.zh-abx--center .zh-abx__q,
	.sf-wrap .zh-abx .zh-abx__q {
		font-size: 19px !important;
	}
}

@media (forced-colors: active) {

	.zh-abx::before {
		display: none;
	}

	.zh-abx--center .zh-abx__cta a,
	.sf-wrap .zh-abx .zh-abx__cta a {
		border: 1px solid CanvasText !important;
		background: Canvas;
		color: CanvasText !important;
	}
}