/* ==========================================================================
   Trade show landing pages — reference design match
   --------------------------------------------------------------------------
   Ports the typography, colours, buttons and card treatments from the trade
   show reference design onto the blocks the builder assembles.

   Scoped to `body.shipshow-tradeshow` throughout (the class comes from
   ShipShow\TradeShowWizard\add_body_class()). That scoping is deliberate and
   load-bearing: this restyles shared, theme-level things — `.btn`,
   `.eyebrow`, `.card`, `.ss-icon`, cards-v2 internals — which are used by
   every block on every page. Nothing here may leak off a trade show page.

   Several rules carry `[class*="wp-block-shipstation-"]` purely for
   specificity: the equivalent rules in includes/shared-styles.css are written
   that way, so matching them is the only way to win without !important.

   Plain CSS on purpose — build-css.js only compiles each block's own style.css
   plus includes/shared-styles.css, so there is no Tailwind pass over this file.
   (Careful writing that glob out in a comment: a `**` followed by a slash ends
   the CSS comment early and turns the rest of this block into a stray
   selector, which silently swallows the custom properties below.)
   ========================================================================== */

body.shipshow-tradeshow {
	/* Reference palette, verbatim. */
	--ts-green: #00e664;
	--ts-green-secondary: #00b750;
	--ts-green-tint: #e5fcef;
	--ts-indigo: #11003a;
	--ts-indigo-accent: #5c50ff;
	--ts-indigo-tint: #efebff;
	--ts-marigold: #ffb400;
	--ts-marigold-tint: #fff3d9;
	--ts-marigold-text: #8a5c00;
	--ts-cyan: #4ea8ff;
	--ts-white: #fff;
	--ts-light-bg: #f7f8f6;
	--ts-text-dark: #171426;
	--ts-text-muted: #5b5770;
	--ts-border: #e7e5ef;
	--ts-radius: 16px;

	--shipshow-tradeshow-font: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	color: var(--ts-text-dark);
}

/* --------------------------------------------------------------------------
   Anchor navigation behaviour

   The nav block supplies its own appearance; these two rules are page-level
   because they concern how the page responds to a jump, not how the bar looks.
   -------------------------------------------------------------------------- */

/* Viewport scrolling takes scroll-behavior from the ROOT element, not from
   body — declaring it on body is inert. Reach the root while staying scoped to
   this page with :has(). Browsers without :has() simply jump instead of
   gliding, which is a fine degradation. */
html:has(body.shipshow-tradeshow) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.shipshow-tradeshow) {
		scroll-behavior: auto;
	}
}

/* Without this a jump lands with the section's heading tucked underneath the
   sticky bar. Roughly the bar's height (16px padding x2 + a 28px logo) plus a
   little breathing room. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"][id] {
	scroll-margin-top: 88px;
}

/* --------------------------------------------------------------------------
   Typography
   Headings are listed explicitly rather than inherited from body, because
   themes set font-family on them directly and that beats inheritance.
   -------------------------------------------------------------------------- */

body.shipshow-tradeshow,
body.shipshow-tradeshow h1,
body.shipshow-tradeshow h2,
body.shipshow-tradeshow h3,
body.shipshow-tradeshow h4,
body.shipshow-tradeshow h5,
body.shipshow-tradeshow h6,
body.shipshow-tradeshow p,
body.shipshow-tradeshow a,
body.shipshow-tradeshow li,
body.shipshow-tradeshow span,
body.shipshow-tradeshow strong,
body.shipshow-tradeshow em,
body.shipshow-tradeshow label,
body.shipshow-tradeshow .btn,
body.shipshow-tradeshow button,
body.shipshow-tradeshow input,
body.shipshow-tradeshow select,
body.shipshow-tradeshow textarea {
	font-family: var(--shipshow-tradeshow-font);
}

body.shipshow-tradeshow {
	line-height: 1.5;
}

/* Reference: h1,h2,h3 { font-weight:800; letter-spacing:-0.01em } */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] h1,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] h2,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] h3,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content h1,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content h2,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content h3 {
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Section headings: clamp(1.7rem, 3vw, 2.3rem) */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content h2,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content h3 {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	line-height: 1.2;
	margin-top: 10px;
}

/* Eyebrow: 13px / 700 / .12em / uppercase, secondary green on light bands. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .eyebrow,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content .eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ts-green-secondary);
}

/* ...and primary green on dark ones. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content-theme--dark .eyebrow,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content-theme--dark .content .eyebrow,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-deep-indigo .eyebrow,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-deep-indigo .content .eyebrow {
	color: var(--ts-green);
}

/* Lead copy on light bands. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content .lead {
	font-size: 16px;
	color: var(--ts-text-muted);
}

/* --------------------------------------------------------------------------
   Light section bands
   The builder asks for `grey-lightest` (#F8F8F8); the reference band is
   #F7F8F6. Same intent, so retint rather than introduce a new colour slug.
   -------------------------------------------------------------------------- */

body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-grey-lightest {
	background-color: var(--ts-light-bg);
}

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

   Reference has three variants. Mapping onto what the blocks emit:
     .btn                     -> .btn-primary  (green fill, indigo label)
     .btn.outline (on dark)   -> .btn-ghost    (translucent white hairline)
     .btn inside .bg-green    -> .btn-dark     (indigo fill, white label)

   That last one matters: the closing CTA sits on a green band, and a green
   button on green is invisible.
   -------------------------------------------------------------------------- */

body.shipshow-tradeshow [class*="wp-block-shipstation-"] .btn,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .btn-group .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	padding: 16px 30px;
	border-radius: 999px;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease;
	background: var(--ts-green);
	color: var(--ts-indigo);
}

body.shipshow-tradeshow [class*="wp-block-shipstation-"] .btn:hover {
	transform: translateY(-2px);
	background: var(--ts-green);
	color: var(--ts-indigo);
}

/* Ghost: only legible on a dark band, which is where the reference uses it. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content-theme--dark .btn.outline,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-deep-indigo .btn.outline {
	background: transparent;
	color: var(--ts-white);
	border-color: rgba(255, 255, 255, 0.5);
}

body.shipshow-tradeshow [class*="wp-block-shipstation-"] .content-theme--dark .btn.outline:hover,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-deep-indigo .btn.outline:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--ts-white);
}

/* Outline on a light band — the reference has no such variant, so this is the
   consistent equivalent: indigo hairline, indigo label. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .btn.outline {
	background: transparent;
	color: var(--ts-indigo);
	border-color: var(--ts-indigo);
}

/* The closing band is a gradient in the reference, not a flat fill. The shared
   `bg-green` is already the right green (#00E664), so this only layers the
   gradient over it — a plain-colour fallback stays underneath. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green {
	background-image: linear-gradient(135deg, var(--ts-green) 0%, var(--ts-green-secondary) 100%);
}

/* Dark button, for the green closing band. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green .btn,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green .btn:hover {
	background: var(--ts-indigo);
	color: var(--ts-white);
	border-color: transparent;
}

/* The closing band's own type. */
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green .content h2 {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	color: var(--ts-indigo);
}

body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green .content .lead,
body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green .content p {
	font-size: 17px;
	color: rgba(17, 0, 58, 0.75);
}

body.shipshow-tradeshow [class*="wp-block-shipstation-"] .bg-green .content .eyebrow {
	color: var(--ts-indigo);
}

/* --------------------------------------------------------------------------
   Cards (cards-v2 powers the offer, onsite team and resources sections)
   -------------------------------------------------------------------------- */

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card {
	background: var(--ts-white);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card .h5,
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card h3 {
	color: var(--ts-text-dark);
	font-weight: 800;
	letter-spacing: -0.01em;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card .body {
	color: var(--ts-text-muted);
}

/* --- The offer: numbered step cards -------------------------------------- */
/* The builder emits the step number as the card's eyebrow, so the badge is
   built from that rather than from extra markup. Reset the uppercase eyebrow
   treatment above — a number shouldn't be letter-spaced. */
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-default {
	padding: 32px 28px;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-default .eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 20px;
	border-radius: 50%;
	background: var(--ts-indigo);
	color: var(--ts-green);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-default .h5 {
	font-size: 19px;
	margin-bottom: 8px;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-default .body {
	font-size: 15px;
}

/* --- Onsite team: avatar cards ------------------------------------------- */
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user {
	padding: 22px;
	text-align: center;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .thumbnail {
	display: flex;
	justify-content: center;
	margin: 0 auto 16px;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .thumbnail img,
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .thumbnail.user-initials {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ts-green);
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .thumbnail.user-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ts-indigo);
	color: var(--ts-green);
	font-weight: 800;
	font-size: 24px;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .h5 {
	font-size: 16px;
	margin-bottom: 2px;
}

/* Role sits in .user-subtitle, not .eyebrow — reference has it sentence case. */
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .user-subtitle {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ts-green-secondary);
	margin-bottom: 8px;
	text-transform: none;
	letter-spacing: normal;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-user .body {
	font-size: 13px;
}

/* --- Resources: icon tile + arrow link ----------------------------------- */
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-icon {
	padding: 26px;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-icon .ss-icon {
	width: 44px;
	height: 44px;
	padding: 9px;
	border-radius: 12px;
	background: var(--ts-indigo);
	--ss-icon-primary: var(--ts-green);
	--ss-icon-accent: var(--ts-green);
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-icon .h5 {
	font-size: 16px;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-icon .card-content,
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-icon .card-text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Reference gives the body `flex:1` so the arrow links sit on a common
   baseline across cards of unequal copy length. */
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card-icon .body {
	font-size: 14px;
	flex: 1;
}

body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card .card-cta .link-arrow,
body.shipshow-tradeshow .wp-block-shipstation-cards-v2 .card .card-cta .link-btn {
	font-size: 14px;
	font-weight: 700;
	color: var(--ts-green-secondary);
	background: none;
	border: 0;
	padding: 0;
}