/*!
 * GuyBet Logistics · site presentation  v1.6.1
 * Loaded on every page with atl-motion.css: the logo mark, step marks, the steps route, line breaks,
 * FAQ accordions and the signed-in header.
 * Driven by CSS classes set in Elementor (Advanced → CSS Classes). Spec: docs/design-system.md.
 */

/* Logo: the GuyBet mark before the wordmark, inside its link so both go home. */
.atl-logo .elementor-heading-title a {
	position: relative;
	display: inline-block;
	padding-left: 1.48em;
}
.atl-logo .elementor-heading-title a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.2em;
	height: 1.2em;
	transform: translateY(-50%);
	background: url("../brand/mark.svg") center / contain no-repeat;
}

/* Phones under 414 px: the header logo shortens to the mark and "GuyBet", so the Track button and
   menu stay on one row. " Logistics" stays in the markup for screen readers. The link selector
   outranks Elementor's ".elementor-widget-heading .elementor-heading-title[class*=elementor-size-] > a". */
@media (max-width: 413px) {
	.elementor-widget.atl-logo--compact .elementor-heading-title[class*="elementor-size-"] > a {
		padding-left: 29px;
		font-size: 0;
		line-height: 0;
	}
	.atl-logo--compact .elementor-heading-title a::before {
		width: 24px;
		height: 24px;
	}
	/* The visible word gets its own 20 px line box, so the mark centres on it. */
	.atl-logo--compact .elementor-heading-title .atl-mark {
		display: inline-block;
		font-size: 20px;
		line-height: 20px;
		vertical-align: middle;
	}
}


/* ------------------------------------------------------------------ */
/* Step marks: a line drawing at the right of each step's number       */
/* ------------------------------------------------------------------ */

.atl-step[class*="atl-step--"] > .elementor-widget-heading:first-child::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	background: var(--e-global-color-deep, #087A00);
	-webkit-mask: var(--atl-mark) center / contain no-repeat;
	mask: var(--atl-mark) center / contain no-repeat;
	transition: opacity var(--atl-dur-2) ease calc(var(--atl-delay, 0s) + 260ms), transform 520ms var(--atl-ease-pop) calc(var(--atl-delay, 0s) + 260ms);
}
.atl-motion .atl-step[class*="atl-step--"]:not(.is-in) > .elementor-widget-heading:first-child::after { opacity: 0; transform: scale(.6); }

.atl-step--account { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5c1.2-3.6 3.9-5.4 7-5.4s5.8 1.8 7 5.4'/%3E%3C/svg%3E"); }
.atl-step--address { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-10.6a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.4' r='2.4'/%3E%3C/svg%3E"); }
.atl-step--shop { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5h14l-1.2 12H6.2z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E"); }
.atl-step--warehouse { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10 12 4.5l8.5 5.5V20h-17z'/%3E%3Cpath d='M8 20v-6h8v6M8 17h8'/%3E%3C/svg%3E"); }
.atl-step--ship { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4.5' cy='17.5' r='2'/%3E%3Cpath d='M6.4 15.6C9 9.5 14.5 7.4 18.2 10.4' stroke-dasharray='2.4 2.7'/%3E%3Ccircle cx='19.3' cy='12.6' r='2.3' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.atl-step--customs { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7.5L19 8v12.5H7z'/%3E%3Cpath d='M14.5 3.5V8H19'/%3E%3Cpath d='m10 14.2 2 2 3.6-3.8'/%3E%3C/svg%3E"); }
.atl-step--collect { --atl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h16V20H4z'/%3E%3Cpath d='M3 6h18v3.5H3z'/%3E%3Cpath d='m9.2 14.6 2 2 3.6-3.8'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ */
/* Steps route: one journey through the step cards                     */
/* ------------------------------------------------------------------ */

/* Cards in a row (Home), desktop: each card's dashed line reaches its left edge and across the
   20 px gap, so the four lines read as one route; then a packet travels it once, card by card. */
@media (min-width: 1025px) {
	.atl-steps-route:not(.atl-steps-route--timeline) .atl-step { --atl-l: 0px; --atl-r: 0px; }
	.atl-steps-route:not(.atl-steps-route--timeline) .atl-step + .atl-step { --atl-l: calc(var(--padding-left, 26px) + 1px); }
	.atl-steps-route:not(.atl-steps-route--timeline) .atl-step:not(:last-child) { --atl-r: calc(var(--padding-right, 26px) + 21px); }
	.atl-steps-route:not(.atl-steps-route--timeline) .atl-step > .elementor-widget-divider {
		width: calc(100% + var(--atl-l) + var(--atl-r)) !important;
		max-width: none !important;
		margin-left: calc(-1 * var(--atl-l));
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	.atl-steps-route:not(.atl-steps-route--timeline) .atl-step .elementor-divider::after {
		content: "";
		position: absolute;
		inset: 50% 0 auto 0;
		height: 24px;
		margin-top: -12px;
		pointer-events: none;
		opacity: 0;
		background: radial-gradient(circle at calc(100% - 5px) 50%, var(--e-global-color-signal, #0DC600) 0 4px, rgba(var(--atl-signal-rgb), .35) 5px, rgba(var(--atl-signal-rgb), 0) 12px);
	}
	.atl-motion .atl-steps-route.is-in .atl-step .elementor-divider::after {
		animation: atl-route-leg 800ms linear calc(1500ms + var(--atl-i, 0) * 800ms) 1 both;
	}
	.atl-motion .atl-steps-route.is-in .atl-step:last-child .elementor-divider::after { animation-name: atl-route-end; }
}

@keyframes atl-route-leg { 0% { transform: translateX(-100%); opacity: 1; } 99% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes atl-route-end { from { transform: translateX(-100%); opacity: 1; } to { transform: translateX(0); opacity: 1; } }

/* Cards in a column (How it works): a timeline runs down the left, with a node beside each step. */
.atl-steps-route--timeline {
	--atl-gutter: 48px;
	position: relative;
	padding-left: var(--atl-gutter) !important;
}
/* The line runs from each step's node to the next one (card height + the 16 px gap), so it ends at
   the last step and draws in step by step as the cards appear. Its centre sits gutter/2 − 8 px in. */
.atl-steps-route--timeline > .atl-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--padding-top, 28px) + 12px);
	left: calc(-1 * var(--atl-gutter) / 2 - 10px);
	height: calc(100% + 16px);
	border-left: 2px dashed var(--e-global-color-signal, #0DC600);
	pointer-events: none;
}
.atl-motion .atl-steps-route--timeline > .atl-step:not(:last-child)::after {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 900ms var(--atl-ease-in-out) calc(var(--atl-delay, 0s) + 300ms);
}
.atl-motion .atl-steps-route--timeline > .atl-step.is-in::after { clip-path: inset(0); }
.atl-steps-route--timeline > .atl-step > .elementor-widget-heading:first-child::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	/* Centred on the line: the card's 1 px border, its padding, half the gutter and the 14 px node. */
	left: calc(-1 * (var(--padding-left, 28px) + var(--atl-gutter) / 2 + 16px));
	width: 14px;
	height: 14px;
	margin-top: -7px;
	box-sizing: border-box;
	border: 2px solid var(--e-global-color-signal, #0DC600);
	border-radius: 50%;
	background: var(--e-global-color-paper, #F6F8F6);
}
@media (max-width: 767px) {
	.atl-steps-route--timeline { --atl-gutter: 32px; }
	.atl-steps-route--timeline > .atl-step > .elementor-widget-heading:first-child::after { width: 22px; height: 22px; margin-top: -11px; }
}

@media (prefers-reduced-motion: reduce) {
	.atl-step > .elementor-widget-heading:first-child::after { transition: none !important; }
	.atl-steps-route--timeline > .atl-step::after { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Line breaks                                                         */
/* ------------------------------------------------------------------ */

/* Headings break into balanced lines and paragraphs avoid a lone last word. Browsers without
   text-wrap support keep their usual breaks. */
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p,
.elementor-tab-content p { text-wrap: pretty; }

/* Banner intros stay about 62 characters a line (this selector outranks Elementor's
   ".elementor.elementor .e-con > .elementor-widget { max-width: 100% }"). */
.e-con.atl-grid .elementor-element.elementor-widget-text-editor.elementor-widget { max-width: 62ch; }
.e-con.atl-grid--center .elementor-element.elementor-widget-text-editor.elementor-widget { margin-inline: auto; }

/* ------------------------------------------------------------------ */
/* FAQ accordions (atl-faq on Elementor's Accordion widget)            */
/* ------------------------------------------------------------------ */

/* A drawn plus that folds into a minus, a green rule on the open question, and a clear focus ring. */
.atl-faq .elementor-accordion-icon-closed,
.atl-faq .elementor-accordion-icon-opened { display: none !important; }
.atl-faq .elementor-tab-title .elementor-accordion-icon {
	position: relative;
	width: 16px;
	height: 1.25em;
	height: 1lh;
}
.atl-faq .elementor-accordion-icon::before,
.atl-faq .elementor-accordion-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: var(--e-global-color-primary, #07100C);
	transition: transform var(--atl-dur-2, 420ms) var(--atl-ease-out, ease-out), background-color var(--atl-dur-1, 160ms) ease;
}
.atl-faq .elementor-accordion-icon::after { transform: rotate(90deg); }
.atl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::before,
.atl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after { background: var(--e-global-color-deep, #087A00); }
.atl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after { transform: rotate(90deg) scaleX(0); }
/* On the title and the answer (their own backgrounds would cover a rule on the item). */
.atl-faq .elementor-tab-title.elementor-active,
.atl-faq .elementor-tab-title.elementor-active + .elementor-tab-content {
	box-shadow: inset 3px 0 0 var(--e-global-color-signal, #0DC600);
}
.atl-faq .elementor-accordion-title:focus-visible { outline: none; }
.atl-faq .elementor-tab-title:has(.elementor-accordion-title:focus-visible) {
	outline: 2px solid var(--e-global-color-signal, #0DC600);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Signed in or not (WordPress adds body.logged-in)                    */
/* ------------------------------------------------------------------ */

body:not(.logged-in) .atl-members-only,
body.logged-in .atl-guests-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.atl-faq .elementor-accordion-icon::before,
	.atl-faq .elementor-accordion-icon::after { transition: none !important; }
}