.container:has(.truck) { gap: 2rem; }
.truck { max-width: 500px; }
.not-found { display: none; }
.not-found:not(:has(~ .truck)) {
	display: block;
	align-content: center;
	min-height: 295px;
}

#schedule-dates {
	margin-top: -1.2rem;
}

.hours-link {

	&:is(:hover, :focus, :focus-within, :focus-visible) {
		border: none !important;
		scale: 1.1;
		cursor: pointer;
	}

	&[inert] {
		opacity: 0;
	}

	& > * {
		pointer-events: none;
	}
}

/* Address cut-off bug in Safari */
@supports (appearance: -apple-pay-button) {
	#foodtruck-schedule {
		transform: translateZ(0);
	}
}

@scope (.foodtruck-container) {
	:scope.card { display: none; background-color: white;}

	:scope {
		--arc-color-primary: #C00000;
		height: 154px;
		width: 249px;
		padding: 0;
		background: transparent;
		border-radius: 12px;
		font-family: inherit;
		scale: 0.9;
	}

	.grid {
		display: grid;
		grid-template-columns: 0.25fr 1fr;
		justify-content: center;
		padding: 0.5rem;
		column-gap: 1rem;
		height: inherit;
		min-height: fit-content;
		background: white;
		border-radius: 10px;
	}

	.date-container {
		--date-size: 2rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		row-gap: 0.25rem;
		max-width: 51px;
		margin-inline: auto;
		margin-right: 0.5rem;
		padding-right: 0.5rem;
		border-right: solid rgb(0 0 0 / 0.75) 1px;
		width: 100%;
	}

	.date {
		text-box-edge: cap alphabetic;
		text-box-trim: trim-both;
		text-transform: uppercase;
		font-weight: 800;

		&.month { font-size: calc(var(--date-size) / 2); }

		&.day { font-size: var(--date-size); }

		&.day-abbr {
			font-size: calc((var(--date-size) / 2) - 2px);
			text-box-trim: none;
			opacity: 0.55;
		}
	}

	@supports (column-rule: solid black 1px) {
		.grid { column-rule: solid rgb(0 0 0 / 0.75) 1px; }

		.date-container {
			border: none;
			padding-right: 0;
			margin-right: 0;
		}
	}

	:scope .gcalendar:link {
		font-size: 10px;
		color: var(--arc-color-primary);
	}

	.bold { font-weight: 700;}

	.truck-location, .gcalender {
		font-size: 10px;
		align-items: start;
	}

	.icon {
		width:0.9rem;
		aspect-ratio: 1 / 1;
		background: transparent !important; 
		padding:0; 
		border:0; 
		margin-right: 2px; 
		margin-left: -1px;
		align-self: start;
	
		&.calendar { opacity: 0.5; }
	}

	dd {
		display: flex;
		justify-content: start;
		margin-bottom: 0;

		&:last-child {
			margin-bottom: 9px;
		}
	}

	.truck-name {
		font-size: 1.2rem;
		color: var(--arc-color-primary);
		text-box-edge: cap alphabetic;
		text-box-trim: trim-both;
		margin-bottom: 0.25rem;
		line-height: 1;
	}

	.truck-location {
		border-top: solid rgb(0 0 0 / 0.15) 1px;
		margin-bottom: 0.25rem;
	}

	.cuisine-type, .truck-time, .truck-location {
		font-size: 0.875rem;
		color: black;
		align-items: center;
	}

	.truck-name:only-child {
		margin-bottom: 10px;
	}

	dl dd :is(small, span) {
		line-height: normal;
	}

	/* Safari Fixes */
	@supports (appearance: -apple-pay-button) {
		
		:scope.truck { z-index: -1; }

		.grid { gap: 0;}

		.date-container {
			border-right: solid rgb(0 0 0 / .75) 1px;
			padding-right: 0.5rem;
			margin-right: 0.5rem;
		}

		.date.day-abbr {
			all: initial;
			font-size: 0.875rem;
			font-weight: 800;
			color: rgb(0 0 0 / .55);
			text-align: center;
			text-transform: uppercase;
		}

		.icon.calendar {
			all: initial;
			width: 0.9rem;
			aspect-ratio: 1 / 1;
			margin-right: 2px;
			margin-left: -1px;

			/* Don't apply to safari because of layout bug */
			@supports not (appearance: -apple-pay-button) {
				opacity: 0.55;
				translate: 17px 24px;
			}
		}

		:scope.card .icon.calendar {
			translate: none;
			scale: 0.75;
		}

		.date-container {
			border-right: solid rgb(0 0 0 / .75) 1px;
			padding-right: 0.5rem;
			margin-right: 0.5rem;
		}

		:scope.card .date-container + div { margin-left: 0.5rem; }
	}

	/* Firefox Fixes */
	@supports (width: -moz-available) {
		.grid { gap: 0; }

		.date-container {
			padding-right: 0.5rem;
			margin-right: 0.9rem;
			border-right: solid rgb(0 0 0 / 0.75) 1px;
			max-height: 92%;
		}

		.foodtruck-container.card .date-container + div { margin-left: 0.5rem; }

		:scope { translate: 21px; }

	}
}

@media (width < 992px) {
	svg.truck { display: none; }

	#foodtruck-nav h2 {
		flex-basis: 100%;
	}

	.hours-link {
		order: 2;

		&:last-of-type {
			order: 3;
		}
	}

	#schedule-dates {
		margin: auto;
	}

	@scope (.foodtruck-container) {
		:scope.card {
			display: block;
			width: 100%;
			border: solid lightgray 1px;
			scale: 1;
			height: auto;
		}

		.truck-name { font-size: 1.35rem; }
		:scope .gcalendar:link, .truck-location { font-size: 1rem; }
		.cuisine-type { font-size: 0.8rem; }

		.date-container {
			--date-size: 3rem;
			max-width: unset;

			& .month { margin-bottom: 0.5rem; }
		}

		:scope .icon { width: 1.5rem; }

		:scope .grid { padding: 1rem; }


		@supports (width: -moz-available) {
			.date-container { 
				max-width: 90%;
				max-height: unset;
			}
		}
	}
}

.container:has(.truck) {
	translate: -100%;
	opacity: 0;
	transition: 
		opacity 0.3s ease-out,
		translate 0.3s ease-out;

	&.in {
		translate: 0;
		opacity: 1;
	}

	&.out {
		translate: 100%;
		opacity: 0;
	}

	@media (width >= 992px) and (width < 1200px) {
		row-gap: 4rem;
	}

	@media (width < 992px) {
		--adjusted-margin-top: 0 !important;
	}


}


@supports (appearance: -apple-pay-button) {
	foreignObject.foodtruck-truck {
		background: transparent !important;
	}
	.foodtruck-container > .d-flex {
		background-color: white;
		border-radius: 10px;
	}
}



@scope (foreignObject.foodtruck-container) {
	.grid {
		--grid-padding: 0.5;

		background: white;
		outline: solid #D6D6D6 10px;
		border-radius: 12px;
		/* height: auto !important; */
		/* width: stretch; */
		padding: calc(var(--grid-padding) * 1rem);
	}
	:scope > .d-flex {
		flex-direction: column;
		justify-content: end;
		max-width: inherit;
		height: 100%;
	}
	:scope {
		--content-padding-bottom: 85;
		--arc-color-primary: #C00000;

		/* padding-bottom: calc(var(--content-padding-bottom) * 1px); */
		padding-left: 21px;
		border-radius: 12px;
		font-family: inherit;
		box-sizing: content-box;
		overflow: visible;
		background: transparent;

		scale: 1 !important;

		max-width: 225px !important;
		width: 100% !important;
		height: 100%; 

		

		x: 0 !important;
		y: 0 !important;
	}

}

svg.truck {
	overflow: visible;
	width: 100%;
}

.container:has(.truck) {
	--adjusted-margin-top: 0;
	margin-top: var(--adjusted-margin-top, 0);
}

.truck-name:only-child,
.truck-details :is(dt, dd):nth-last-child(1 of :not([hidden])) {
	margin-bottom: 0;
}
.truck-details {
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
}

div:has(> .base-location) {
	border-top: solid rgb(0 0 0 / 0.15) 1px;
	padding-top: 6px;

	& .truck-location {
		border: none;
		padding: 0 !important;
	}
}

.truck-details {
	border-bottom: solid rgb(0 0 0 / 0.15) 1px;
	margin-bottom: 5px;
	padding-bottom: 5px;
}

div:has(> .base-location) {
	border: none;
	padding: 0;
}

.html-container {
    width: inherit;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: end;
	padding-bottom: calc(var(--content-padding-bottom) * 1px);

	@supports (appearance: -apple-pay-button) {
		justify-content: flex-end;
	}


	& > .d-flex {
		max-width: 249px;
	}
}