@font-face {
	font-family: 'HelveticaNeue5';
	src: url('fonts/HelveticaNeueMedium.otf');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'HelveticaNeue5';
	src: url('fonts/HelveticaNeueMediumItalic.otf');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'HelveticaNeue5';
	src: url('fonts/HelveticaNeueBold.otf');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

body
{
	background: linear-gradient(90deg, var(--surface-tonal-a0) 0%, #3d1642 50%, var(--surface-tonal-a0) 100%);
	margin-bottom: var(--nav-height);
	
	position: relative;
}

#toTopButton
{
	position: fixed;
	bottom: var(--spacing-base-half);
	right: var(--spacing-base-half);
	aspect-ratio: 1 / 1;
	z-index: 999;
}

#navOld
{
	color: var(--surface-tonal-a50);
}
	
nav a
{
	position: relative;

	notification
	{
		color: var(--body-color);
		@media screen and (max-width: 800px) 
		{
			position: relative;
			top: initial;
			left: initial;
			translate: initial;
			margin-left: 0.2rem;
		}
	}
}

a[target="_blank"]::after
{
	content: '';
	margin: 0;
}

burger
{
	position: relative;
}

notification
{
	display: inline-block;
	position: absolute;
	top: 90%;
	left: 50%;
	translate: -50%;
	background: var(--primary-a0);
	text-align: center;
	font-size: 0.7rem;
	font-weight: bold;
	width: 1.1rem;
	aspect-ratio: 1 / 1;
	border-radius: var(--border-radius);
	vertical-align: middle;
	
	&:empty
	{
		display: none;
	}
}

h1, h2, h3, h4, h5, h6
{
	margin-bottom: calc(var(--spacing-base) * 1.5);
}

button
{
	padding-top: var(--spacing-base-half);
	padding-bottom: var(--spacing-base-half);
	border-radius: var(--border-radius-full);
	min-width: 0;

	background: linear-gradient(135deg, var(--body-color) 0%, var(--primary-a50) 100%);
	color: var(--surface-a0);

	&.small
	{
		padding: 0.4rem;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
		font-weight: normal;
		font-size: 0.9rem;
	}

	&.outline
	{
		color: var(--body-color);
	}

	&.waiting
	{
		color: rgba(0, 0, 0, 0);
		
		&:before
		{
			position: absolute;
			content: '';
			--size: calc(var(--font-size-base) * 1.5);
			top: calc(50% - var(--size)/2);
			left: calc(50% - var(--size)/2);
	    background: url('../logo.svg');
	    background-size: 100%;
	    width: var(--size);
	    height: var(--size);
    	animation: spin 1s linear infinite;
	  }
	}

	&.danger
	{
		background: var(--body-bg);
		color: var(--danger);
		border: 1px solid var(--danger);
	}
}

[hidden], [auth-only]
{
	display: none
}

input[type]
{
	padding: var(--spacing-base-half);
	min-height: 0;
}

select
{
	padding: var(--spacing-base-half);
	padding-left: var(--spacing-base);
	background-position: right var(--spacing-base-half) center;
	text-align: inherit;
	
	&[disabled]
	{
		color: var(--surface-a40);
		cursor: not-allowed;
	}

	&.badge
	{
		font-size: 0.8rem;
		padding-left: 0.6rem;
		background-position: right 0 center;
	}
}

input.invalid
{
	--border-color: var(--danger);
}

[popover]
{
	background: none;
	border: none;
	color: inherit;
	transition: var(--transition-base);
}
[popover]:popover-open 
{
	opacity: 1;
	transform: scale(1, 1) translateY(0);
}
@starting-style 
{
	[popover]:popover-open 
	{
		opacity: 0;
		transform: scale(1, 0) translateY(-100%);
	}
}

.badge
{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--body-bg);
	padding: 0.2rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	border-radius: var(--border-radius);
	font-size: 0.8rem;
}

i.controller,
i[collapse-target]
{
	cursor: pointer;
	font-size: 1.2rem;
	&:hover
	{
		color: var(--primary-a50);
	}
}
			
info
{
	color: var(--info-a20);
	font-size: 0.8rem;
	&.warn
	{
		color: var(--warning-a20);
	}
}

[mobile-only]
{
	display: none;

	@media screen and (max-width: 800px) 
	{
		display: initial;
	}
}

[desktop-only]
{
	display: initial;

	@media screen and (max-width: 800px) 
	{
		display: none;
	}
}


group
{
	display: flex;
	flex-direction: row;

	margin-bottom: 0;

	& > * 
	{
		margin-bottom: 0;
	}
	
	& > :first-child
	{
		flex-grow: 1;
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;

		input[type]
		{
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
		}
	}

	& > :not(:first-child):not(:last-child)
	{
		border-radius: 0;
		
		input[type]
		{
			border-radius: 0;
		}
	}

	& > :last-child
	{
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		
		input[type]
		{
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}
	}

	button
	{
		height: 2.7rem;
		border-radius: var(--border-radius-md);
	}
}

alert-container
{
	position: fixed;
	bottom: var(--spacing-base);
	left: 0;
	z-index: 999;
	width: 100%;
} /* end alert-container */

alert
{
	display: block;
	text-align: left;
	margin: var(--spacing-base-half);
	padding: var(--spacing-base-half);
	padding-left: var(--spacing-base);
	width: var(--container-max-width);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--border-radius);
	shadow: var(--shadow);	
	
	&.danger
	{
		background: var(--danger-a20);
		color: var(--danger-a0);
		border-color: 1px solid var(--danger-a0);
	}
	&.warning
	{
		background: var(--warning-a20);
		color: var(--warning-a0);
		border-color: 1px solid var(--warning-a0);
	}
	&.success
	{
		background: var(--success-a20);
		color: var(--success-a0);
		border-color: 1px solid var(--success-a0);
	}

	button
	{
		min-width: 0;
		height: 1.5rem;
		aspect-ratio: 1 / 1;
		color: inherit;
		border: none;
		background: none;
		padding: 0;
		border-radius: var(--border-radius);
		float: right;
	}
} /* end alert */

spinner
{
	display: block;
	margin: auto;
	height: 4rem;
	aspect-ratio: 1 / 1;
	
  background: url('../logo.svg');
  background-size: 100%;
	animation: spin 1s linear infinite;
}

/* for some reason this isnt getting picked up from classless.min.css */
/* Input styling with icons */
/*
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
*/
input[type="search"] {
	padding-left: 2.5rem;
	background-repeat: no-repeat;
	background-position: 0.75rem center;
	background-size: 1rem;
	position: relative;
}

/*
input[type="url"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/%3E%3C/svg%3E");
}

input[type="email"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E");
}

input[type="password"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath transform='rotate(-45 8 8)' d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

input[type="tel"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke='%23989fab' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 5.5C3 14.06 9.94 21 18.5 21c.386 0 .77-.014 1.148-.042.435-.032.653-.048.851-.162a1.06 1.06 0 0 0 .42-.432c.11-.2.121-.418.145-.853l.17-3.072a1.517 1.517 0 0 0-.828-1.536l-2.546-1.273a1.517 1.517 0 0 0-1.784.307l-.89 1.04c-.34.398-.873.54-1.342.353a10.49 10.49 0 0 1-3.27-2.27 10.49 10.49 0 0 1-2.27-3.27 1.25 1.25 0 0 1 .353-1.342l1.04-.89a1.517 1.517 0 0 0 .307-1.784L8.68 3.67A1.517 1.517 0 0 0 7.144 2.84l-3.072.17c-.435.024-.653.036-.853.145a1.06 1.06 0 0 0-.432.42c-.114.198-.13.416-.162.851C3.014 4.73 3 5.114 3 5.5Z'/%3E%3C/svg%3E");
}

*/
input[type="search"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
}

input[type="search"] {
	border-radius: var(--border-radius-full);
}



@keyframes spin
{
	0% 
	{
		transform: rotate(0deg);
	}
	100% 
	{
		transform: rotate(360deg);
	}
}

@keyframes pulse
{
	0% 
	{
		transform: scale(1);
	}
	25% 
	{
		transform: scale(0.8);
	}
	100% 
	{
		transform: scale(1);
	}
}

.spin
{
	animation: spin 1s linear infinite;
}

.pulse
{
	animation: pulse 1s ease-in-out infinite;
}



intent-box-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-base);
	margin-top: calc(var(--spacing-base) + var(--spacing-base-half)) ;

	intent-box
	{
		width: calc(50% - var(--spacing-base)/2);
		
		@media screen and (max-width: 1000px) 
		{
			width: 100%;
		}
	}
}


#searchInput
{
	position: relative;
	max-width: calc(var(--container-max-width) * 0.4);
	margin-left: auto;
	margin-right: auto;
	z-index: 6; /* has to be greater than any intent-box */
	margin-bottom: calc(var(--spacing-base) * 2);

	& > input
	{
		display: block;
		text-align: center;
		font-size: 1.5rem;
		margin-bottom: 0;
	}
}


#searchResultsContainer
{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;

	[gallery-mode="true"] &
	{
		width: 80%vh;	
	}

	#searchResultsClose
	{
		position: absolute;
		top: var(--spacing-base-half);
		right: var(--spacing-base-half);
	}

	#searchResults > div
	{
		width: 100%;
	}
}