/* =============================================================================
 * 50-components.css -- buttons, cards, the search form, trust cues.
 *
 * BYTE-IDENTICAL across both sites.
 *
 * Every class here is a qt- class on markup THIS THEME emits. Nothing in this
 * file may select a plugin's markup: Elementor's own button/card widgets are
 * reconciled in 70-elementor-bridge.css, and form controls live in 60-forms.css.
 * ========================================================================== */

/* ---- buttons -------------------------------------------------------------
 * Minimum target 24x24 measured UNIONED WITH THE LABEL (WCAG 2.2 SC 2.5.8).
 * 44px is Apple HIG comfort -- report it, never fail on it; --qt-control-h is
 * 40px on AT and 32px on GF, so min-height uses the LARGER of that and the
 * WCAG floor via the explicit min-height below.
 *
 * MEASURED CTA baselines, for provenance:
 *   AT  a.ptp-button  #FFFFFF on #C2431C, 5.11:1, weight 700, padding 12px/13px
 *   GF  input[type=submit]  #fff on #F1592A, 1px solid #F1592A, padding 6px 7px
 * Both are the same shape with different tokens. Note that a.ptp-button is
 * Easy Pricing Tables markup, NOT theme markup -- the theme does not render it
 * and does not restyle it. It is quoted here only as the measured brand CTA. */
.qt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--qt-space-1);
	min-height: var(--qt-control-h);
	padding: var(--qt-control-pad);
	font-family: var(--qt-font-body);
	font-size: var(--qt-fs-base);
	font-weight: var(--qt-fw-heading);
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	border: var(--qt-border-w) solid transparent;
	border-radius: var(--qt-radius);
	transition: var(--qt-transition);
	cursor: pointer;
	text-decoration: none;
}

.qt-btn--primary {
	background-color: var(--qt-accent);
	border-color: var(--qt-accent);
	color: var(--qt-accent-contrast);
}

/* MEASURED on BOTH sites: the CTA hover does not change colour. GF heritage is
 * literally `input:hover[type=submit] { background:#F1592A; border:1px solid
 * #F1592A }` -- the same values as the resting state. So --qt-accent-dark
 * equals --qt-accent on both sites today, and the hover affordance is the
 * UNDERLINE, which does not depend on colour. That is deliberate: it keeps the
 * affordance real for the ~8% of men with colour-vision deficiency, and it
 * means neither site ships an invented hover shade. */
.qt-btn--primary:hover,
.qt-btn--primary:focus-visible {
	background-color: var(--qt-accent-dark);
	border-color: var(--qt-accent-dark);
	color: var(--qt-accent-contrast);
	text-decoration: underline;
}

.qt-btn--primary:active {
	background-color: var(--qt-accent-deep);
	border-color: var(--qt-accent-deep);
}

/* GlobeFreight has a genuine secondary (#5397B4, the heritage LINK colour --
 * not the orange; reversing that pair inverts the brand). AutoTransport's
 * secondary is #045CB4, its current-menu-item colour. Both sites supply the
 * token, so this class is never an unstyled box on either. */
.qt-btn--secondary {
	background-color: var(--qt-secondary);
	border-color: var(--qt-secondary);
	color: var(--qt-ink-inverse);
}

.qt-btn--secondary:hover,
.qt-btn--secondary:focus-visible {
	color: var(--qt-ink-inverse);
	text-decoration: underline;
}

.qt-btn--ghost {
	background-color: transparent;
	border-color: var(--qt-rule);
	color: var(--qt-link);
}

.qt-btn--ghost:hover,
.qt-btn--ghost:focus-visible {
	border-color: var(--qt-link);
	text-decoration: underline;
}

/* ---- search form ---------------------------------------------------------
 * Markup from searchform.php. Reaches AutoTransport's search results page --
 * one of the five surfaces that had no chrome at all before this theme.
 *
 * MEASURED DEFECT this fixes: at-target-404-1366x900.json records the only
 * genuine AT contrast failure in the whole harvest --
 *   button.search-submit.ast-search-submit  #FFFFFF on #FFFFFF  ratio 1.0
 * Astra's search submit is white-on-white on the 404 page. The theme's own
 * search form does not have that failure because .qt-searchform__submit
 * composes .qt-btn--primary's tokens. */
.qt-searchform {
	display: flex;
	align-items: stretch;
	gap: var(--qt-space-2);
	margin-block: var(--qt-space-3);
}

.qt-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--qt-control-h);
	padding: var(--qt-control-pad);
	border: var(--qt-border-w) solid var(--qt-input-border);
	border-radius: var(--qt-radius);
	font-family: var(--qt-font-body);
	font-size: var(--qt-fs-input);
	color: var(--qt-input-ink);
	background-color: var(--qt-input-bg);
}

/* Composed, not duplicated -- duplicated values drift. The submit button
 * reads the SAME tokens .qt-btn--primary reads, in one place. */
.qt-searchform__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--qt-control-h);
	min-width: var(--qt-control-min);
	padding: var(--qt-control-pad);
	background-color: var(--qt-accent);
	border: var(--qt-border-w) solid var(--qt-accent);
	border-radius: var(--qt-radius);
	color: var(--qt-accent-contrast);
	font-family: var(--qt-font-body);
	font-size: var(--qt-fs-base);
	font-weight: var(--qt-fw-heading);
	line-height: 1.2;
	cursor: pointer;
	transition: var(--qt-transition);
}

.qt-searchform__submit:hover,
.qt-searchform__submit:focus-visible {
	background-color: var(--qt-accent-dark);
	border-color: var(--qt-accent-dark);
	text-decoration: underline;
}

/* ---- cards ---------------------------------------------------------------
 * MEASURED GF (.ptp-item-container, all three widths): 1px solid rgb(221,221,221)
 * on every edge -- the #ddd card border the plan confirms is ALREADY correct on
 * the live site. The heritage stylesheet's own card family
 * (blockquote/.author-box/.sticky/.taxonomy-description/.wp-caption) is
 * `background-color:#f5f5f5; border:1px solid #ddd`, the same border.
 * MEASURED AT: no card component in the census -- AT's tokens give a neutral
 * #EAEAEA rule, matching its header border. */
.qt-card {
	background-color: var(--qt-card-bg);
	border: var(--qt-border-w) solid var(--qt-card-border);
	border-radius: var(--qt-card-radius);
	padding: var(--qt-gutter);
	box-shadow: none;
}

.qt-card__title {
	font-size: var(--qt-fs-h4);
	font-weight: var(--qt-fw-heading);
	color: var(--qt-ink-heading);
	margin-block: 0 var(--qt-space-2);
}

.qt-card__body {
	color: var(--qt-ink);
	margin-block-end: 0;
}

/* ---- trust cues ----------------------------------------------------------
 * From the 14-competitor teardown. brand.php carries the values
 * (response_promise, phone_display, whatsapp_e164) and every one of them is
 * EMPTY pending owner confirmation, so none of these render on either site
 * today. The classes are real so WS2/WS3 have somewhere to land instead of
 * inventing new ones under deadline.
 *
 * Evidenced patterns, for whoever implements them:
 *   response-time promise      present in 7/14 competitors
 *   phone beside the form      9/14 (64%)
 *   "free, no obligation"      7/14
 *   WhatsApp float, prefilled  the dominant SA pattern; NEITHER of our sites has one
 */
.qt-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qt-space-2) var(--qt-space-3);
	margin-block: var(--qt-space-3);
	font-size: var(--qt-fs-small);
	color: var(--qt-ink-muted);
}

.qt-trust__promise {
	font-weight: var(--qt-fw-heading);
	color: var(--qt-ink-heading);
}

.qt-trust__phone {
	display: inline-flex;
	align-items: center;
	min-height: var(--qt-control-min);
	font-weight: var(--qt-fw-heading);
	color: var(--qt-accent);
	text-decoration: none;
	white-space: nowrap;
}

/* Renders only when brand.php['whatsapp_e164'] is set. Bottom-LEFT on purpose:
 * every measured submit button on both sites is bottom-right of its form at
 * 390, and a float that covers a submit trades a conversion gain for a
 * conversion loss. */
.qt-whatsapp-float {
	position: fixed;
	inset-block-end: var(--qt-gutter);
	inset-inline-start: var(--qt-gutter);
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--qt-accent);
	color: var(--qt-accent-contrast);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	text-decoration: none;
}

@media print {
	.qt-whatsapp-float {
		display: none;
	}
}

/* ---- deferred widget slot -----------------------------------------------
 * .qt-slot exists ONLY when the chatbot is enabled. While D6 holds, this
 * selector matches nothing at all -- widget-slot.php emits no element, no
 * script and not even an empty div. The rule is the landing pad for whoever
 * turns it on, so the slot cannot ship unstyled. */
.qt-slot--chatbot {
	position: fixed;
	inset-block-end: var(--qt-gutter);
	inset-inline-end: var(--qt-gutter);
	z-index: 40;
}

/* ---- skip link -----------------------------------------------------------
 * The visible-on-focus values live in 10-reset.css on .screen-reader-text:focus
 * (one home). This adds only the stacking context the skip link needs to sit
 * above a sticky header. */
.skip-link:focus {
	position: fixed;
	z-index: 100001;
}

/* ---------------------------------------------------------------------------
 * Easy Pricing Tables (.ptp-*) -- ONE rule, and the reason it is only one.
 *
 * The colours are NOT settable from here and an earlier revision of this file
 * wrongly tried. Easy Pricing Tables emits a per-table INLINE <style> block:
 *
 *     #ptp-93 a.ptp-button { background-color: ...; color: ... }      (1,1,1)
 *
 * regenerated from the table's own settings and printed after every enqueued
 * stylesheet. No class selector in this file can reach it, so `.ptp-button
 * { background-color: ... }` was dead bytes that LOOKED applied in review.
 * W1 was closed where it actually lives -- the table's `button-color` setting,
 * #3498db -> #c2431c, MEASURED white-on-colour 3.15 -> 5.11.
 *
 * The one rule below IS needed and does win. `pricingtable.min.css` sets
 * `div.ptp-bullet-item { text-align: center }` at (0,1,1); our old
 * `.ptp-bullet-item` was (0,1,0) and lost on specificity, then would have lost
 * again on source order. Qualifying with the table wrapper takes it to (0,2,1),
 * which beats it -- and the inline #ptp-93 block sets colour and background on
 * this element but NOT text-align, so nothing higher contests it.
 *
 * Why bother: GlobeFreight's Sea Freight column is 13 bullets. Centred, every
 * tick starts at a different x and the eye has no column to run down.
 * ------------------------------------------------------------------------- */

/* --- .qt-btn--cta : the AA-COMPLIANT button ---------------------------------
 * .qt-btn--primary pairs --qt-accent-contrast with --qt-accent. On GlobeFreight
 * that is #FFFFFF on #F1592A = 3.39:1 and FAILS AA -- brand.php records it as
 * DOCUMENTED EXCEPTION 1, and darkening the brand orange is a BRAND decision
 * nobody has taken. So --qt-accent stays exactly as it is.
 *
 * This variant exists for the places where a button MUST clear AA and cannot
 * wait for that decision -- starting with the payment page, where the only
 * route to the gateway had no accessible name and a 0px-wide hit area.
 * --qt-cta-bg is the compliant step, MEASURED 5.11:1, and is already what the
 * pricing-table CTAs resolve to.
 * -------------------------------------------------------------------------- */

.qt-btn--cta {
	display: inline-block;
	background-color: var(--qt-cta-bg);
	color: var(--qt-cta-ink);
	border: var(--qt-border-w) solid var(--qt-cta-bg);
	border-radius: var(--qt-radius);
	padding: var(--qt-space-2) var(--qt-space-4);
	font-weight: var(--qt-fw-heading);
	text-decoration: none;
	/* WCAG 2.2 SC 2.5.8 -- a payment CTA is the last place to ship a small target */
	min-height: var(--qt-control-min);
	transition: var(--qt-transition);
}

.qt-btn--cta:hover,
.qt-btn--cta:focus-visible {
	background-color: var(--qt-cta-bg);
	color: var(--qt-cta-ink);
	text-decoration: underline;
}

.ptp-pricing-table div.ptp-bullet-item {
	text-align: left;
}

/* --- pricing-table cards: depth, breathing room, and a hover that lifts ------
 * WHAT IS AND IS NOT REACHABLE FROM HERE, measured against the rendered page
 * rather than assumed -- the plugin's per-table inline block is ID-scoped and
 * beats every selector in this file:
 *
 *   ID-LOCKED, so NOT set here:
 *     border-radius on .ptp-item-container   <- #ptp-93 div.ptp-item-container
 *     padding/margin on the table wrapper    <- #ptp-93
 *     colours on .ptp-plan                   <- #ptp-93 div.ptp-plan
 *   The corner radius is a plugin SETTING (`rounded-corners`, 0px -> 10px,
 *   matching --qt-sheet-radius so the cards share the page's rounding rather
 *   than introducing a second one). Trying to set it here would be dead bytes.
 *
 *   FREE -- the plugin sets these NOWHERE, at any specificity:
 *     box-shadow, transform, and the padding on the inner regions.
 *   That is the whole reason this block can exist.
 *
 * overflow:hidden is load-bearing, not decoration: the card's children paint
 * their own square backgrounds (image, .ptp-plan, .ptp-cta), so without it they
 * poke through the 10px corners and the rounding only appears on the outline.
 * -------------------------------------------------------------------------- */

.ptp-pricing-table div.ptp-item-container {
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform .18s ease, box-shadow .18s ease;
}

/* :focus-within, not just :hover. A card whose only affordance is hover is
 * invisible to anyone arriving by keyboard -- and the CTA inside it is the
 * conversion path on a lead-generation site. */
.ptp-pricing-table div.ptp-item-container:hover,
.ptp-pricing-table div.ptp-item-container:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

/* NO PADDING RULES HERE, and both omissions are deliberate -- I tried each and
 * measured the result:
 *
 *   .ptp-bullet-item -- the inline block sets `padding: 0.9375em 0.5em` as a
 *     SHORTHAND at (1,1,1). Longhand padding-left/right at (0,2,1) loses to it,
 *     so the rule was dead bytes that read as applied. There is no plugin
 *     setting for it either. The rendered result is fine: left-aligned rows
 *     clear the card edge comfortably at 13px type.
 *
 *   .ptp-cta -- this one DID apply, and it was a REGRESSION. 20px each side
 *     narrowed the button from 159px to 129px and wrapped "Complete for a
 *     Quote" onto two lines at 1366. The CTA band is already padded vertically
 *     and the button is centred; horizontal padding there only squeezes it.
 *     Caught by measuring button width, not by looking at the card.
 */

/* The button carries the card's own rounding, one step down. border-radius is
 * ID-locked on the CONTAINER but not on the button, so this one does land. */
.ptp-pricing-table a.ptp-button {
	border-radius: var(--qt-radius);
}

/* Honour a stated OS preference. transform-based motion is exactly what
 * prefers-reduced-motion exists for; the depth cue stays, the movement goes. */
@media (prefers-reduced-motion: reduce) {
	.ptp-pricing-table div.ptp-item-container,
	.ptp-pricing-table div.ptp-item-container:hover,
	.ptp-pricing-table div.ptp-item-container:focus-within {
		transform: none;
		transition: box-shadow .18s ease;
	}
}