:root, .e-con {
	--font-size-base: 14px;

	--spacing: 20px;
	--spacing-large: 40px;
	--spacing-x-large: 60px;
	--spacing-small: 10px;

	--hero-padding:
		clamp(
			var(--spacing),
			8vw,
			120px
		);
	--hero-margin:
		clamp(
			calc(var(--spacing) * 3),
			12vw,
			200px
		);
	--hero-outer-margin: 15%;
	
	--outer-margin:
		clamp(
			var(--spacing),
			6vw,
			calc(var(--spacing) * 3)
		);
	--inner-margin:
		clamp(
			var(--spacing-small),
			4vw,
			calc(var(--spacing-small) * 3)
		);

	--gap-wide:
		max(
			var(--spacing),
			5vw
		);
}

body,
div.page {
	display: block;
	min-height: calc(100vh - 180px);

	font-size: var(--font-size-base);
}

h1 {
	font-size: 4.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1.15rem;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--green);
	font-family: var(--font-gothic) !important;
	margin: 0.25em 0 0.625em;
	line-height:1.1em !important;
}

hr {
	color: var(--grey-lite);
	border: none;
	/*border-top: 1px solid;*/
	background-image: url("/wp-content/uploads/sahtu/horizontal-rule.png");
	background-position: center center;
	background-repeat: no-repeat;

	box-shadow: inset 0 0 16px var(--off-white);

	height: 15px;
	margin: var(--spacing-small) var(--spacing-small) !important;
}

.card hr {
	box-shadow: inset 0 0 16px white;
}

label, p, span,
input, textarea, li,
kbd, pre, code {
	letter-spacing: 0.5px !important;
}

p {
	margin: var(--spacing) 0;
}

a:hover {
	color:var(--interactive);
	/* text-decoration: underline; */
}

a.elementor-button {
	padding: var(--spacing-small) var(--spacing) !important;
}

a.elementor-button,
button {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: stretch;

	cursor: pointer;
	
	color: white;
	background-color: var(--green);
	background-image: url("/wp-content/uploads/sahtu/cta-texture.png");
	background-size: cover;
	border: 3px solid var(--green);
	border-radius: var(--spacing-small);

	font-family: var(--font-gothic);
	font-size: 2rem !important;
	text-align: center;

	transition: none;
	line-height: 1em;
	padding:
		calc(0.75 * var(--spacing))
		var(--spacing)
		var(--spacing-small)
		!important;
}

a.elementor-button
span.elementor-button-text {
	position: relative;
	top: 0.0125em !important;
}

/* Alternate PLUS overrides */
.elementor-element-2d1af6a8
.elementor-button,

.elementor-element-4cc4e4a
.elementor-button,

.elementor-element-bde96ab
.elementor-button,

a.elementor-button.alternate,
button.alternate {
	background-color: var(--off-white-darker) !important;
	background-image:
		url("/wp-content/uploads/sahtu/cta-texture-light.png")
		!important;
	/*background-blend-mode: color-dodge;*/
	color: var(--green);
}

a.elementor-button:hover,
button:hover {
	color: white;
	background-color: var(--green-hilite);
}

.elementor-element-2d1af6a8
.elementor-button:hover,

.elementor-element-4cc4e4a
.elementor-button:hover,

.elementor-element-bde96ab
.elementor-button:hover,
a.elementor-button.alternate:hover,
button.alternate:hover {
	color: var(--green);
	background-color: white !important;
}

button:focus {
	background-color: var(--green-hilite);
}

.card {
	background-color: white;
	border: 3px solid var(--green);
	border-radius: var(--spacing);	
	font-size: 0.85rem;
}

.card h2 {
	color: var(--green);
	font-family: var(--font-gothic);
}

article.card.tour {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: stretch;
	align-items: stretch;
}

article.card.tour > section,
article.card.tour > footer,
form.card.tours-controls {
	padding: var(--spacing-small);
}

article.card.tour > header {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	height: 200px;
	overflow: hidden;
	border-top-left-radius: calc(var(--spacing) - 4px);
	border-top-right-radius: calc(var(--spacing) - 4px);
}

article.card.tour > header::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--spacing);
	background: linear-gradient(to bottom, #ffffff00, #fff);
}

article.card.tour > header h1 {
	display: none;
}

article.card.tour > header img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

article.card.tour > header span.spots_left {
	position: absolute;
	right: 0;
	bottom: var(--spacing);

	color: var(--off-white);
	background: var(--interactive);
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	box-shadow: -4px 0 12px #00000044;

	padding: calc(0.75 * var(--spacing-small)) var(--spacing-small);
}

article.card.tour > section {
	flex-grow: 2;
}

article.card.tour p {
	color: var(--grey);
	margin: 0 0;
	/* var(--spacing-small); */
}

article.card.tour p > span:last-child {
	color: #888;
}

article.card.tour time {
	color: var(--green-lite);
}

article.card.tour > footer {
	flex-grow: 0;

	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-end;
	
	gap: var(--spacing-small);
}

article.card.tour > footer > span {
	flex-basis: calc(50% - var(--spacing-small));
}

article.card.tour > footer > span.location {
	color: var(--green-lite);
	font-size: 1rem;
	font-weight: bold;
}

article.card.tour > footer > span.location > span {
	font-size: 0.785em;
}

article.card.tour > footer > span.location > span,
article.card.tour > footer > span.price > span {
	color: var(--grey);
}

article.card.tour > footer > span.price > span {
	font-family: var(--font-spirit);
	font-size: 0.7rem;
}

article.card.tour > footer > span.price {
	text-align: right;
	font-family: var(--font-gothic);
	font-size: 2.285rem;
	line-height: 0.87125;
}

article.card.tour > footer > span.group_price {
	position: absolute;
	bottom: calc(-1.2 * var(--spacing-x-large));
	right: var(--spacing-small);
	
	color: var(--grey-green);
	font-family: var(--font-gothic);
	font-size: 1.5rem;
	text-align: right;
}

article.card.tour > footer > span.group_price > span {
	display: block;
	font-family: var(--font-spirit);
	font-size: 0.5em;
}

/* *TODO* THIS NEEDS TO BE MORE GENERIC */
article.card.tour > footer > button {
	flex-basis: 100%;
	flex-shrink: 0;
}

ul.tours-list {
	flex-basis: 66%;
	flex-grow: 1;
	flex-shrink: 1;
	
	position: relative;

	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;

	gap: var(--spacing-x-large);

	min-height: 530px;
	
	margin: 0;
	padding: 0;

	list-style: none;
}

.tours-view ul.tours-list,
.calendar-view ul.tours-list {
	min-height: 1000px;
}

ul.tours-list li.tour-item {
	--basis: calc(50% - var(--spacing-x-large) * 0.5);
	flex-basis: var(--basis);
	flex-grow: 1;
	flex-shrink: 1;
	
	max-width: var(--basis);
	max-height: 550px;
	
	display: flex;
	justify-content: center;
	align-items: stretch;
}

ul.tours-list > li#no-matches-message {
	display: none;
}

ul.tours-list > li.tour-item > .card {
	min-height: 480px;
	width:100%;
}

body.home
ul.tours-list {
	flex-basis: 100%;
	flex-shrink: 0;
	flex-wrap: nowrap;
	gap: var(--spacing-large);
	width: 100%;

	transition: transform 250ms ease 0s;
}

body.home
ul.tours-list li.tour-item {
	--basis: calc(33% - var(--spacing-large) * 0.33);
	min-width: 300px;
	max-width: 310px;
	height: 100%;
	flex-shrink: 0;
	opacity: 0;
}

@media screen and (max-width: 1140px) {
	body.home ul.tours-list,
	ul.tours-list {
		gap: var(--spacing-large);
	}

	ul.tours-list li.tour-item {
		--basis: calc(50% - var(--spacing-large) / 2);
	}
}

@media screen and (max-width: 1024px) {
	body.home ul.tours-list,
	ul.tours-list {
		gap: var(--spacing);
	}

	ul.tours-list li.tour-item {
		--basis: calc(50% - var(--spacing) / 2);
	}
}

@media screen and (max-width: 880px) {
	a.elementor-button,
	button {
		font-size: 1.75rem !important;
		/* padding: var(--spacing) !important; */
	}

	ul.tours-list {
		justify-content: space-between;
	}


	ul.tours-list li.tour-item {
		--basis: calc(50% - var(--spacing) / 2);
	}
}

@media screen and (max-width: 680px) {
	a.elementor-button,
	button {
		font-size: 1.5rem !important;
		padding: calc(0.75 * var(--spacing)) !important;
	}

	ul.tours-list {
		justify-content: space-between;
	}


	ul.tours-list li.tour-item {
		--basis: calc(50% - var(--spacing) / 2);
	}
}

@media screen and (max-width: 640px) {
	[data-widget_type="button.default"] {
	/*button {*/
		flex-basis: 100% !important;
		flex-shrink: 0;
	}

	[data-widget_type="button.default"]
	a.elementor-button,
	button {
		font-size:1.37125rem !important;
		padding: var(--spacing-small) !important;
	}
}

@media screen and (min-width: 600px) {
	.calendar-view ul.tours-list
	li.tour-item.first-child {
		flex-basis: 100%;
		flex-shrink: 0;
		max-width: 100%;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour {
		flex-flow: row wrap;
		min-height: unset;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	header {
		flex-basis: 100%;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	section {
		flex-basis: calc(50% - var(--spacing));
		padding-bottom: calc(var(--spacing) + 50px);
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	footer {
		/* position: relative; */
		flex-basis: calc(50% - var(--spacing));
		align-items: flex-start;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	.location {
		transform: translate(calc(100% + var(--spacing-small)), 0);
		text-align: right;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	.location > span {
		display: none;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	.price {
		align-self: center;
		font-size: 56px;
		padding-top: var(--spacing-large);
		line-height: 0.5;
	}

	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	button {
		position: absolute;
		left: var(--spacing-small);
		bottom: var(--spacing-small);
		width: calc(50% - (var(--spacing-x-large) / 2) - var(--spacing));
	}
}
@media screen and (min-width: 600px) and (max-width: 1139px) {
	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	button {
		width: calc(50% - (var(--spacing-large) / 2) - var(--spacing));
	}
}
@media screen and (min-width: 600px) and (max-width: 1023px) {
	.calendar-view ul.tours-list
	li.tour-item.first-child
	article.card.tour
	button {
		width: calc(50% - (var(--spacing) / 2) - var(--spacing));
	}
}

@media screen and (max-width: 576px) {
	ul.tours-list li.tour-item {
		--basis: 100%;
	}
}
