/**
 * Styles for the plugin's server-rendered blocks.
 *
 * Structure only, and every colour reaches for a theme token with a fallback,
 * so the theme can restyle all of this without the plugin being touched. It is
 * a file rather than an inline string because it is now long enough to want
 * caching and syntax highlighting.
 */

/* ---------- shared ---------- */

.gst-price--request {
	font-family: inherit;
	font-size: 0.85em;
	font-weight: 500;
	font-variant-numeric: normal;
	white-space: normal;
	color: var(--wp--preset--color--ink-2, #565C6E);
}

/* ---------- price table (route page) ---------- */

.gst-prices__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.gst-prices__table th,
.gst-prices__table td {
	padding: 0.85rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--line, #E2E2DF);
}

.gst-prices__table thead th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3, #6B7181);
	background: color-mix(in srgb, currentColor 4%, transparent);
	white-space: nowrap;
}

.gst-prices__table tbody tr:last-child th,
.gst-prices__table tbody tr:last-child td {
	border-bottom: 0;
}

.gst-prices__table .gst-num {
	text-align: right;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gst-prices__table .gst-price {
	font-size: 1.06em;
}

.gst-prices__note {
	margin: 0.85rem 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-2, #565C6E);
}

/* ---------- route facts strip ---------- */

.gst-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0;
	margin: 0;
}

.gst-facts__item {
	padding: 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.gst-facts__item:last-child {
	border-right: 0;
}

.gst-facts__item dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3, #6B7181);
}

.gst-facts__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 1.35rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.gst-facts__value.is-brand { color: var(--wp--preset--color--brand-deep, #2F3A72); }
.gst-facts__value.is-go    { color: var(--wp--preset--color--go, #14654A); }

.gst-facts__value.is-ink {
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 600;
}

/* ---------- destinations table (front page) ---------- */

.gst-routes__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: var(--wp--preset--color--surface, #fff);
}

.gst-routes__table th,
.gst-routes__table td {
	padding: 0.8rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--line, #E2E2DF);
}

.gst-routes__table thead th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3, #6B7181);
	white-space: nowrap;
}

.gst-routes__table tbody th {
	font-weight: 500;
}

.gst-routes__table tbody th a {
	text-decoration: none;
}

.gst-routes__table tbody th a:hover,
.gst-routes__table tbody th a:focus-visible {
	text-decoration: underline;
}

.gst-routes__table .gst-num {
	text-align: right;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gst-routes__table .gst-price {
	color: var(--wp--preset--color--go, #14654A);
	font-weight: 500;
}

/* A row waiting on a price recedes rather than disappearing. */
.gst-routes__table tr.is-unpriced th a,
.gst-routes__table tr.is-unpriced td {
	color: var(--wp--preset--color--ink-3, #6B7181);
}

.gst-routes__table tbody tr:last-child th,
.gst-routes__table tbody tr:last-child td {
	border-bottom: 0;
}

.gst-routes__note {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-2, #565C6E);
}

/* The table is the one place horizontal scroll is acceptable on a phone. */
@media (max-width: 640px) {
	.gst-routes {
		overflow-x: auto;
	}

	.gst-routes__table {
		min-width: 34rem;
	}
}

/* ---------- routes index (transfers page) ---------- */

.gst-index__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0;
	margin: 0 0 var(--wp--preset--spacing--40, 2rem);
	border: 1px solid var(--wp--preset--color--line, #E2E2DF);
	border-radius: var(--wp--custom--radius, 6px);
	background: var(--wp--preset--color--surface, #fff);
}

.gst-index__fact {
	padding: 1.1rem 1.3rem;
	border-right: 1px solid var(--wp--preset--color--line, #E2E2DF);
}

.gst-index__fact:last-child {
	border-right: 0;
}

.gst-index__fact dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3, #6B7181);
	margin: 0 0 0.2rem;
}

.gst-index__fact dd {
	margin: 0;
	font-weight: 500;
}

.gst-index__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--40, 2rem);
}

.gst-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wp--preset--color--line-strong, #CFCFCB);
	border-radius: 999px;
	font-size: 0.9rem;
	text-decoration: none;
	background: var(--wp--preset--color--surface, #fff);
}

.gst-chip:hover,
.gst-chip:focus-visible {
	border-color: var(--wp--preset--color--brand, #4C5BA3);
}

.gst-chip__count {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-3, #6B7181);
}

.gst-index__group {
	margin: 0 0 var(--wp--preset--spacing--50, 2.5rem);
	/* Clears the sticky header when a filter link jumps here. */
	scroll-margin-top: 5rem;
}

.gst-index__region {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line-strong, #CFCFCB);
}

.gst-index__region-count {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink-3, #6B7181);
}

.gst-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 0.5rem;
}

.gst-index__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.15rem 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--line, #E2E2DF);
	border-radius: var(--wp--custom--radius, 6px);
	background: var(--wp--preset--color--surface, #fff);
	text-decoration: none;
}

.gst-index__link:hover,
.gst-index__link:focus-visible {
	border-color: var(--wp--preset--color--brand, #4C5BA3);
}

.gst-index__name {
	font-weight: 500;
}

.gst-index__meta {
	grid-column: 1;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-2, #565C6E);
	font-variant-numeric: tabular-nums;
}

.gst-index__price {
	grid-row: 1 / span 2;
	grid-column: 2;
	align-self: center;
	color: var(--wp--preset--color--go, #14654A);
	font-weight: 500;
	white-space: nowrap;
}

/* ---------- quick quote widget (hero) ---------- */

.gst-quick {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line-strong, #CFCFCB);
	border-radius: var(--wp--custom--radius, 6px);
	padding: 1.35rem 1.4rem 1.4rem;
	box-shadow: 0 8px 28px rgba(23, 26, 36, 0.08);
}

.gst-quick *,
.gst-quick *::before,
.gst-quick *::after {
	box-sizing: border-box;
}

.gst-quick__config {
	display: none;
}

.gst-quick__heading {
	margin: 0 0 0.9rem;
	font-weight: 600;
}

.gst-quick__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.gst-quick__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	flex: 1 1 7rem;
	min-width: 0;
}

.gst-quick__field--wide {
	flex: 1 1 100%;
}

.gst-quick__field > label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3, #6B7181);
}

.gst-quick select,
.gst-quick input[type="date"] {
	font: inherit;
	color: inherit;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line-strong, #CFCFCB);
	border-radius: var(--wp--custom--radius-small, 4px);
	padding: 0.55rem 0.6rem;
	width: 100%;
	max-width: 100%;
}

.gst-quick__directions {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
}

.gst-quick__directions label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
}

.gst-quick__badge {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.1rem 0.35rem;
	border-radius: var(--wp--custom--radius-small, 4px);
	color: var(--wp--preset--color--go, #14654A);
	background: var(--wp--preset--color--go-tint, #E7F1EC);
}

.gst-quick__result {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-height: 3.4rem;
	justify-content: center;
	padding: 0.75rem 0.9rem;
	margin: 0 0 1rem;
	border-radius: var(--wp--custom--radius-small, 4px);
	background: var(--wp--preset--color--brand-tint, #ECEFF8);
}

.gst-quick__amount {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 1.75rem;
	line-height: 1.1;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--go, #14654A);
}

.gst-quick__request {
	font-size: 1.05rem;
	font-weight: 600;
}

.gst-quick__prompt,
.gst-quick__loading,
.gst-quick__note,
.gst-quick__error {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-2, #565C6E);
}

.gst-quick__error {
	color: var(--wp--preset--color--amber, #7C5417);
	font-weight: 500;
}

.gst-quick__submit {
	font: inherit;
	font-weight: 600;
	width: 100%;
	color: var(--wp--preset--color--surface, #fff);
	background: var(--wp--preset--color--go, #14654A);
	border: 0;
	border-radius: var(--wp--custom--radius, 6px);
	padding: 0.85rem 1.5rem;
	cursor: pointer;
}

.gst-quick__submit:hover,
.gst-quick__submit:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--go, #14654A) 88%, #000);
}

.gst-quick__reassure {
	margin: 0.7rem 0 0;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--wp--preset--color--ink-3, #6B7181);
}
