/* ============================================================
   Request a Quote — empty-cart state  (deploy: assets/css/empty-state.css)
   Every selector is scoped under .rq-empty or
   .page-template-page-request-list #about.rq-form-only — nothing
   here can leak into the rest of the site.
   Colors/type come from tokens.css custom properties with literal
   fallbacks, so the block survives even if tokens.css moves.
   ============================================================ */

.rq-empty {
	padding: 40px 0 72px;
	background: #fff;
	font-family: var(--ff-head, "Nunito Sans", sans-serif);
	color: var(--ink, #1f2a37);
}
.rq-empty__wrap { max-width: 1080px; margin: 0 auto; }

/* ---- header ---- */
.rq-empty__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.rq-empty__eyebrow {
	font-size: var(--fs-eyebrow, 13px);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow, .13em);
	text-transform: uppercase;
	color: var(--accent, #f05123);
	margin: 0 0 10px;
}
.rq-empty__title {
	font-size: var(--fs-h2, clamp(26px, 2.8vw, 36px));
	font-weight: var(--fw-head, 800);
	line-height: var(--lh-head, 1.2);
	letter-spacing: var(--ls-head, -.01em);
	color: var(--brand-navy, #263878);
	margin: 0 0 14px;
}
.rq-empty__lead {
	font-size: var(--fs-lead, 18px);
	line-height: var(--lh-body, 1.6);
	color: var(--muted, #5d6b7a);
	margin: 0;
}

/* ---- the 3 steps on a conveyor spine ---- */
.rq-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
/* the belt: a dashed line running through the step markers */
.rq-steps::before {
	content: "";
	position: absolute;
	top: 24px;                  /* centre of the 48px markers */
	left: 10%;
	right: 10%;
	border-top: 2px dashed #c9d2e0;
}
.rq-step { position: relative; text-align: center; z-index: 1; }
.rq-step__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-navy, #263878);
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	margin: 0 auto 18px;
	box-shadow: 0 0 0 6px #fff;  /* punches the marker out of the dashed belt */
}
.rq-step__art { display: block; width: 120px; height: 96px; margin: 0 auto 12px; }
.rq-step__title {
	font-size: var(--fs-h4, 17px);
	font-weight: 800;
	color: var(--brand-navy, #263878);
	margin: 0 0 8px;
}
.rq-step__copy {
	font-size: 15px;
	line-height: var(--lh-body, 1.6);
	color: var(--muted, #5d6b7a);
	margin: 0 auto;
	max-width: 300px;
}

/* illustration line-art: navy strokes, orange accents */
.rq-empty .rq-ln {
	stroke: var(--brand-navy, #263878);
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.rq-empty .rq-ln--soft { stroke: #c9d2e0; }
.rq-empty .rq-ln--dot  { fill: var(--brand-navy, #263878); stroke: none; }
.rq-empty .rq-ln--fill { fill: #fff; }
.rq-empty .rq-ac {
	stroke: var(--accent, #f05123);
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.rq-empty .rq-ac--thick { stroke-width: 3.5; }
.rq-empty .rq-ac--fill  { fill: #fff; }

/* ---- primary paths: browse / search / categories ---- */
.rq-go {
	margin: 48px auto 0;
	padding: 36px 28px 32px;
	background: var(--bg-alt, #f6f6f8);
	border: 1px solid var(--line, #e3e8ef);
	border-radius: 14px;
	text-align: center;
}
.rq-go__browse { min-width: 240px; }

.rq-go__search { max-width: 560px; margin: 26px auto 0; }
.rq-go__search-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink, #1f2a37);
	margin: 0 0 8px;
}
.rq-go__search-row { display: flex; }
.rq-go__search-row input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink, #1f2a37);
	background: #fff;
	border: 1px solid #d4dae6;
	border-right: 0;
	border-radius: var(--radius, 8px) 0 0 var(--radius, 8px);
}
.rq-go__search-row input[type="search"]::placeholder { color: var(--muted-light, #8a94a6); }
.rq-go__search-row input[type="search"]:focus {
	outline: none;
	border-color: var(--accent, #f05123);
	box-shadow: 0 0 0 3px rgba(240, 81, 35, .18);
}
.rq-empty .rq-go__search-btn {
	border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
	padding: 0 26px;
	height: 52px;
	box-shadow: none;
}
.rq-empty .rq-go__search-btn:hover { transform: none; }

.rq-cats { margin-top: 26px; }
.rq-cats__label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink, #1f2a37);
	margin: 0 0 12px;
}
.rq-cats__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.rq-empty .rq-cats__chip {
	display: inline-block;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid #d4dae6;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--brand-navy, #263878);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.rq-empty .rq-cats__chip:hover {
	background: #eef1f6;
	border-color: var(--brand-navy, #263878);
	color: var(--brand-navy, #263878);
	text-decoration: none;
}

/* ---- secondary path: reveal the existing form ---- */
.rq-alt { max-width: 620px; margin: 44px auto 0; text-align: center; }
.rq-alt__title {
	font-size: var(--fs-h3, 20px);
	font-weight: 800;
	color: var(--brand-navy, #263878);
	margin: 0 0 8px;
}
.rq-alt__copy {
	font-size: 15px;
	line-height: var(--lh-body, 1.6);
	color: var(--muted, #5d6b7a);
	margin: 0 0 18px;
}
.rq-alt__toggle[aria-expanded="true"] { opacity: .75; }

/* keyboard focus — visible on everything interactive in this block */
.rq-empty a:focus-visible,
.rq-empty button:focus-visible,
.rq-empty input:focus-visible {
	outline: 3px solid rgba(240, 81, 35, .55);
	outline-offset: 2px;
}

/* form-only view of the existing #about section, used when the visitor
   opens the form from the empty state: hide the empty "Items for Quote"
   column, centre the form column. Scoped to this page template's body class. */
.page-template-page-request-list #about.rq-form-only { scroll-margin-top: 120px; }
.page-template-page-request-list #about.rq-form-only .mob-col-6 { display: none; }
.page-template-page-request-list #about.rq-form-only .col-lg-6:not(.mob-col-6) {
	margin: 0 auto 48px;
	float: none;
	border-radius: 14px;
}

/* ---- mobile: vertical spine, steps stacked ---- */
@media only screen and (max-width: 820px) {
	.rq-empty { padding: 28px 0 56px; }
	.rq-empty__head { margin-bottom: 32px; }
	.rq-steps {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-left: 4px;
	}
	/* vertical spine: per-step segments so the line stops at marker 3 */
	.rq-steps::before { content: none; }
	.rq-step:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 23px;          /* runs through the 48px markers */
		top: 24px;
		bottom: -30px;       /* bridges the 30px grid gap */
		border-left: 2px dashed #c9d2e0;
	}
	.rq-step {
		display: grid;
		grid-template-columns: 48px 1fr;
		column-gap: 18px;
		text-align: left;
	}
	.rq-step__marker { grid-column: 1; margin: 0; }
	.rq-step__art,
	.rq-step__title,
	.rq-step__copy { grid-column: 2; }
	.rq-step__art { width: 96px; height: 77px; margin: 0 0 10px; }
	.rq-step__copy { max-width: none; margin: 0; }
	.rq-go { padding: 26px 18px 24px; }
	.rq-empty .rq-go__browse { width: 100%; min-width: 0; }
	.rq-go__search-row input[type="search"] { height: 48px; font-size: 16px; }
	.rq-empty .rq-go__search-btn { height: 48px; padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.rq-empty .rq-cats__chip,
	.rq-empty .mm-btn { transition: none; }
}