/* ---------------------------------------------------------------------------
   Zoon Naturals tracking page

   Loaded only on /track, because the page is the only place it applies.
   Tokens first, hard fallbacks second, so it survives a theme swap.
   --------------------------------------------------------------------------- */

.saffron-track {
	--st-base: var(--wp--preset--color--base, #FDFBF6);
	--st-base-alt: var(--wp--preset--color--base-alt, #F2E8D7);
	--st-contrast: var(--wp--preset--color--contrast, #333333);
	--st-soft: var(--wp--preset--color--contrast-soft, #5A5A5A);
	--st-accent: var(--wp--preset--color--accent, #2E4A2E);
	--st-line: var(--wp--preset--color--line, #E7DAC3);
	--st-warning: var(--wp--preset--color--warning, #8A6A2B);

	margin-top: var(--wp--preset--spacing--60, 32px);
	max-width: 46rem;
}

/* --- Lookup form --------------------------------------------------------- */

.saffron-track__form {
	border-top: 1px solid var(--st-line);
	padding-top: var(--wp--preset--spacing--50, 24px);
}

.saffron-track__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--wp--preset--spacing--40, 16px);
}

.saffron-track__field label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
}

.saffron-track__field input {
	border: 1px solid var(--st-line);
	font: inherit;
	max-width: 22rem;
	padding: 0.6em 0.8em;
}

.saffron-track__field input:focus-visible {
	outline: 2px solid var(--st-accent);
	outline-offset: 1px;
}

.saffron-track__hint {
	color: var(--st-soft);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	max-width: 44ch;
}

/* No accent bar. The rest of this theme states things with hairlines and ink
   colour, and a chunky rule down one edge would be the only one on the site. */
.saffron-track__error {
	border-bottom: 1px solid var(--st-warning);
	color: var(--st-warning);
	margin: 0 0 var(--wp--preset--spacing--40, 16px);
	max-width: 52ch;
	padding-bottom: var(--wp--preset--spacing--30, 12px);
}

/* --- Result -------------------------------------------------------------- */

.saffron-track__order {
	color: var(--st-soft);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0;
}

.saffron-track__number,
.saffron-track__awb {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}

.saffron-track__status {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	line-height: 1.15;
	margin: 4px 0 0;
}

.saffron-track__note {
	color: var(--st-soft);
	margin: var(--wp--preset--spacing--30, 12px) 0 0;
	max-width: 56ch;
}

.saffron-track__facts {
	border-top: 1px solid var(--st-line);
	display: grid;
	gap: var(--wp--preset--spacing--40, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	margin: var(--wp--preset--spacing--50, 24px) 0 0;
	padding-top: var(--wp--preset--spacing--40, 16px);
}

.saffron-track__facts dt {
	color: var(--st-soft);
	font-size: var(--wp--preset--font-size--eyebrow, 0.6875rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.saffron-track__facts dd {
	margin: 4px 0 0;
}

/* --- Timeline ------------------------------------------------------------ */

/* A rule down the left with a marker per step. Newest first, because the
   question the page answers is "where is it now", and the history is context
   underneath that rather than a story to read from the beginning. */
.saffron-track__timeline {
	border-inline-start: 1px solid var(--st-line);
	list-style: none;
	margin: var(--wp--preset--spacing--50, 24px) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--50, 24px);
}

.saffron-track__step {
	padding-bottom: var(--wp--preset--spacing--40, 16px);
	position: relative;
}

.saffron-track__step::before {
	background: var(--st-base);
	border: 1px solid var(--st-line);
	border-radius: 50%;
	content: "";
	height: 9px;
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--50, 24px) - 5px);
	position: absolute;
	top: 6px;
	width: 9px;
}

.saffron-track__step.is-current::before {
	background: var(--st-accent);
	border-color: var(--st-accent);
}

.saffron-track__step-label {
	display: block;
	font-weight: 500;
}

.saffron-track__step.is-current .saffron-track__step-label {
	color: var(--st-accent);
}

.saffron-track__step-time {
	color: var(--st-soft);
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.saffron-track__aside {
	border-top: 1px solid var(--st-line);
	color: var(--st-soft);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: var(--wp--preset--spacing--50, 24px) 0 0;
	padding-top: var(--wp--preset--spacing--40, 16px);
}