/* Trip bar on city pages and trip block on school cards (spec 011). Colours come from the theme palette; sizes are rem. */
.ee-trip {
	--ee-trip-ink: var(--wp--preset--color--accent-4, #243b4a);
	--ee-trip-bg: var(--wp--preset--color--base, #fff);
	box-sizing: border-box;
	margin: 0 0 1.25rem;
}

/*
 * Desktop: only the controls row (.ee-trip__inline) is sticky under the site header, so it stays low (WCAG 1.4.4, 1.4.10).
 * The container disappears from the layout; the note and the status line scroll with the page. The sticky row ends with
 * the school list (its containing block is the list section). Short screens (laptops, zoom 125-200%): not sticky at all.
 */
@media (min-width: 783px) {
	.ee-trip {
		display: contents;
	}
	.ee-trip__inline {
		position: sticky;
		top: var(--ee-trip-top, 5.5rem);
		z-index: 20;
		box-sizing: border-box;
		padding: 0.75rem 1rem;
		background: var(--ee-trip-bg);
		border: 1px solid var(--ee-line, rgb(0 0 0 / 0.18));
		border-radius: var(--ee-radius, 8px);
		box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
	}
	.ee-trip__pill,
	.ee-trip__sheet {
		display: none !important;
	}
}

@media (min-width: 783px) and (max-height: 800px) {
	.ee-trip__inline {
		position: static;
		box-shadow: none;
	}
}
/* Sub-line under the section heading, directly before the bar: quiet, small, close to both. */
.ee-trip__lead {
	margin: -0.25rem 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--ee-muted, inherit);
}

.ee-trip__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1.25rem;
}

.ee-trip__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.ee-trip__form label:not(.ee-trip__chip label),
.ee-trip__acc legend {
	font-size: 0.85rem;
	font-weight: 600;
}

.ee-trip__form select {
	box-sizing: border-box;
	min-height: 2.5rem;
	max-width: 100%;
	padding: 0.35rem 0.6rem;
	font: inherit;
	color: inherit;
	background: var(--ee-trip-bg);
	border: 1px solid var(--ee-trip-ink);
	border-radius: 6px;
}

.ee-trip__acc {
	min-width: 0;
	/* The chips carry a 0.25rem bottom margin for wrapped rows; cancel it on the group so the chip row lines up with the selects (flex-end). */
	margin: 0 0 -0.25rem;
	padding: 0;
	border: 0;
}

.ee-trip__acc legend {
	padding: 0;
	margin-bottom: 0.25rem;
}

.ee-trip__chip {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0 0.35rem 0.25rem 0;
}

/* The radio stays in the accessibility tree and keeps the keyboard; the label is the visible chip (min 40 px high). */
.ee-trip__chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ee-trip__chip label {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2.5rem;
	padding: 0.25rem 0.9rem;
	overflow-wrap: anywhere;
	font-size: 0.95rem;
	line-height: 1.2;
	color: var(--ee-trip-ink);
	background: var(--ee-trip-bg);
	border: 1px solid var(--ee-trip-ink);
	border-radius: 999px;
	cursor: pointer;
}

.ee-trip__chip input:checked + label {
	color: #fff;
	background: var(--ee-trip-ink);
}

.ee-trip__chip input:focus-visible + label,
.ee-trip__pill:focus-visible,
.ee-trip__form select:focus-visible {
	outline: 3px solid var(--ee-trip-ink);
	outline-offset: 2px;
}

.ee-trip__chip input:checked:focus-visible + label {
	outline-color: var(--ee-trip-ink);
	box-shadow: 0 0 0 2px var(--ee-trip-bg), 0 0 0 5px var(--ee-trip-ink);
}

.ee-trip__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ee-trip__actions > button {
	min-height: 2.5rem;
	white-space: nowrap;
}

.ee-trip__note {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--ee-muted, inherit);
}

/* Reserved so the answer does not move the list (no layout shift). The "loading" text sits on the same grid cell, hidden from
   screen readers (trip.js), so only the final answer is announced. */
.ee-trip__statuswrap {
	display: grid;
	margin: 0.25rem 0 1.25rem;
}

.ee-trip__statuswrap > * {
	grid-area: 1 / 1;
}

.ee-trip__status,
.ee-trip__loading {
	min-height: 1.5em;
	margin: 0;
	font-size: 0.9rem;
}

.ee-trip__loading {
	visibility: hidden;
	background: var(--ee-trip-bg);
}

.ee-trip__loading[data-on] {
	visibility: visible;
}

.ee-trip__retry {
	margin-left: 0.5rem;
	min-height: 2rem;
}

/* Phones: a pill that stays under the header and opens the sheet. */
@media (max-width: 782px) {
	.ee-trip {
		display: contents;
	}
	.ee-trip__inline {
		display: none;
	}
	/* A full-width outlined button: icon, two lines (what to do / what you get), chevron. */
	.ee-trip__pill {
		position: sticky;
		top: var(--ee-trip-top, 4.5rem);
		z-index: 20;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 0.75rem;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 2.75rem;
		margin: 0 0 0.5rem;
		padding: 0.5rem 1rem;
		font: inherit;
		text-align: left;
		color: var(--ee-trip-ink);
		background: var(--ee-trip-bg);
		border: 2px solid var(--ee-trip-ink);
		border-radius: 12px;
		box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
		cursor: pointer;
	}
	.ee-trip__pill::after {
		content: "";
		grid-column: 3;
		grid-row: 1 / span 2;
		width: 0.55rem;
		height: 0.55rem;
		border: solid currentcolor;
		border-width: 0 2px 2px 0;
		transform: rotate(-45deg);
	}
	.ee-trip__pill-icon {
		display: inline-flex;
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.ee-trip__pill-icon[hidden] {
		display: none;
	}
	.ee-trip__pill-main,
	.ee-trip__pill-sub {
		grid-column: 2;
		overflow-wrap: anywhere;
	}
	.ee-trip__pill-main {
		font-weight: 600;
		line-height: 1.3;
	}
	.ee-trip__pill-sub {
		font-size: 0.85rem;
		line-height: 1.3;
	}
	.ee-trip__note {
		margin-top: 0;
	}
	.ee-trip__sheet[open] {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		max-height: 90vh;
		margin: auto 0 0;
		padding: 0;
		overflow: hidden;
		color: inherit;
		background: var(--ee-trip-bg);
		border: 0;
		border-radius: 16px 16px 0 0;
	}
	.ee-trip__sheet::backdrop {
		background: rgb(0 0 0 / 0.5);
	}
	.ee-trip__sheet-head,
	.ee-trip__sheet-foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
	}
	.ee-trip__sheet-head {
		border-bottom: 1px solid var(--ee-line, rgb(0 0 0 / 0.18));
	}
	.ee-trip__sheet-title {
		margin: 0;
		font-size: 1.1rem;
		font-weight: 700;
	}
	.ee-trip__close {
		min-height: 2.75rem;
		padding: 0.25rem 0.9rem;
		font: inherit;
		color: inherit;
		background: transparent;
		border: 1px solid var(--ee-trip-ink);
		border-radius: 6px;
		cursor: pointer;
	}
	.ee-trip__sheet-body {
		padding: 1rem;
		overflow-y: auto;
	}
	.ee-trip__sheet-body .ee-trip__form {
		flex-direction: column;
		align-items: stretch;
	}
	.ee-trip__sheet-body .ee-trip__field select {
		width: 100%;
	}
	.ee-trip__sheet-body .ee-trip__actions {
		display: none; /* the sheet has its own Show / Reset buttons */
	}
	.ee-trip__sheet-foot {
		border-top: 1px solid var(--ee-line, rgb(0 0 0 / 0.18));
	}
	.ee-trip__sheet-foot > button {
		min-height: 2.75rem;
	}
	.ee-trip__chip label {
		min-height: 2.75rem;
	}
}

/* Very short screens (400% zoom, landscape phones): nothing sticky, the whole dialog scrolls, foot buttons side by side. */
@media (max-width: 782px) and (max-height: 500px) {
	.ee-trip__pill {
		position: static;
	}
	.ee-trip__sheet[open] {
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
	}
	.ee-trip__sheet-body {
		overflow: visible;
	}
	.ee-trip__sheet-foot {
		flex-wrap: nowrap;
	}
	.ee-trip__sheet-foot > button {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 0.5rem;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: no-preference) {
	.ee-trip__sheet[open] {
		animation: ee-trip-up 0.2s ease-out;
	}
}

@keyframes ee-trip-up {
	from {
		transform: translateY(2rem);
		opacity: 0;
	}
}

/* Trip block on a school card (filled by trip.js). */
.ee-item__price[hidden],
.ee-trip-slot[hidden] {
	display: none;
}

.ee-trip-slot {
	flex-basis: 100%;
	max-width: 100%;
	font-size: 0.9rem;
	line-height: 1.35;
}

.ee-trip-slot p {
	margin: 0.15rem 0 0;
}

.ee-trip-slot .ee-trip-slot__total {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.ee-trip-slot .ee-trip-slot__na {
	font-size: 1rem;
}

.ee-trip-slot__sub,
.ee-trip-slot__seasonal,
.ee-trip-slot__fallback,
.ee-trip-slot__reason {
	color: var(--ee-muted, inherit);
}

.ee-trip-slot__course,
.ee-trip-slot__acc {
	overflow-wrap: anywhere;
}

/* "Your trip" box on a school page (filled by trip.js). */
.ee-trip-box {
	box-sizing: border-box;
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ee-line, rgb(0 0 0 / 0.18));
	border-radius: var(--ee-radius, 8px);
	line-height: 1.35;
}

.ee-trip-box[hidden] {
	display: none;
}

.ee-trip-box p {
	margin: 0.2rem 0 0;
}

.ee-trip-box .ee-trip-box__title {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
}

.ee-trip-box .ee-trip-box__change {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.25rem 0;
}

/* The course row that matches the trip (marked by trip.js): outline plus a visible "Your trip" tag, so it is not colour only. */
.ee-expand.ee-expand--trip {
	border-color: var(--ee-trip-ink, var(--wp--preset--color--accent-4, #243b4a));
	box-shadow: inset 4px 0 0 var(--ee-trip-ink, var(--wp--preset--color--accent-4, #243b4a));
}

.ee-trip-tag {
	display: inline-block;
	padding: 0.05rem 0.55rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--wp--preset--color--accent-4, #243b4a);
	border-radius: 999px;
}

.ee-trip-box .ee-trip-slot__total {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.ee-trip-box .ee-trip-slot__na {
	font-size: 1.1rem;
}

.ee-trip-box :is(.ee-trip-slot__sub, .ee-trip-slot__seasonal, .ee-trip-slot__fallback, .ee-trip-slot__reason) {
	color: var(--ee-muted, inherit);
}

.ee-trip-box .ee-trip-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	margin-top: 0.9rem;
}

@media (min-width: 700px) {
	.ee-trip-slot {
		flex-basis: auto;
		max-width: 20rem;
		text-align: right;
	}
}