/* Theme Name: Bakgårdsfestivalen */

:root
{
	--colour-white:#fff;
	--colour-black:#000;
	--colour-green-light:#a8e0af;
	--colour-green-mid:#85ae68;
	--colour-green-dark:#00572e;
	--colour-yellow:#ffce00; 
	--colour-red:#ff5b4f;
	
	--font:"montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html
{
	background:var(--colour-green-light);
	font-size:125%;
	
	-webkit-tap-highlight-color:transparent;
	-webkit-text-size-adjust:100%;
}

body, body *
{
	box-sizing:border-box;
	margin:0;
	padding:0;
	border:0;
	vertical-align:top;
	list-style:none;
	font-size:1rem;
	text-decoration:none;
}

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

body
{
	display:flex;
	flex-direction:column;
	min-height:100vh;
	font:normal 500 1rem/1.5 var(--font);
}

body, a
{
	color:var(--colour-black);
}

h1, h2, h3, h4, h5, h6
{
	font-weight:800;
}

img
{
	width:100%;
	height:auto;
}

.reader
{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.header
{
	z-index:300;
	position:relative;
	width:100%;
	height:5rem;
	background:var(--colour-green-dark);
}

	.header-content
	{
		display:flex;
		align-items:center;
		justify-content:flex-end;
		height:100%;
	}

		.header-logo
		{
			display:block;
			position:absolute;
			top:0;
			left:1rem;
			width:7rem;
		}
		
	.header-menu
	{
		margin:0 0 0 auto;
		display:flex;
		align-items:center;
	}
	
		.header-menu-toggle
		{
			display:none;
			align-items:center;
			
			text-transform:uppercase;
			font-weight:bolder;
			text-align:right;
			color:var(--colour-white);
		}
		
			.header-menu-toggle img
			{
				width:auto;
				height:20px;
				margin:0 0 0 1rem;
			}
				
		.menu-menu-container
		{
		}
		
			.menu
			{
				display:flex;
				align-self:center;
			}
		
				.menu-item
				{
					padding:0 0 0 1.5rem;
				}
				
					.menu-item a
					{
						text-transform:uppercase;
						font-weight:bolder;
						text-align:right;
						color:var(--colour-white);
					}

.header-content,
.contain,
.footer-content
{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:0 1rem;
	max-width:55rem;
}

.contain
{
	padding-bottom:4rem;
}

.contain + .contain .title
{
	padding-top:0;
}

main
{
	flex:1;
}

	.columns
	{
		display:grid;
		grid-gap:2rem;
		grid-template-columns:1fr 1fr;
	}
	
		.column + .column
		{
			padding:2rem 0 0;
		}
		
		.column h1
		{
			padding-top:4rem;
		}
		
		.column img
		{
			margin:6rem 0 0;
		}

	.billboard
	{
		margin-bottom:2rem;
	}

	.title
	{
		padding:6rem 0 1rem;
		font-weight:800;
		font-size:2rem;
		text-transform:uppercase;
	}
	
	.billboard + .contain .title
	{
		padding:0 0 1rem;
	}
	
	.intro
	{
		padding:0 0 1rem;
		font-size:1.25rem;
	}
	
		.intro>p
		{
			font-size:inherit;
		}
	
	.content
	{
		
	}
		
		.content p
		{
			padding:0 0 1rem;
		}
	
		.content ul
		{
			padding:0 0 1rem 1rem;
		}
	
			.content li
			{
				list-style-type:disc;
				list-style-position:outside;
				padding-bottom:0.5rem;
			}
		
		.content>*:last-child
		{
			padding-bottom:0;
		}
	
	.facts
	{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		grid-gap:2rem;
		background:var(--colour-yellow);
		font-weight:bold;
		padding:0.5rem;
		margin:2rem 0 0;
	}
	
		.facts>div
		{
			display:flex;
			justify-content:center;
			text-align:center;
		}
		
		.facts p
		{
			display:block;
		}
		
		.facts div>span
		{
			padding-right:0.4rem;
		}
		
			.facts p:first-letter
			{
				text-transform:uppercase;
			}
		
	.slider-container
	{
		position:relative;
		padding:0 2rem;
	}
		
		.slider
		{
			width:100%;
			overflow:hidden;
			margin-top:0.5rem;
		}
		
			.slider-list
			{
				display:flex;
				transition:all 333ms ease-in-out;
			}
			
				.slide
				{
					flex:1 0 100%;
					display:grid;
					grid-template-columns:1fr;
					background:var(--colour-red);
				}
				
				.slide.slide-image-container
				{
					grid-template-columns:4fr 2fr;
				}
				
					.slide-info
					{
						padding:1rem 1rem 3rem;
					}
					
						.slide-title
						{
							display:flex;
							align-items:center;
							padding:0 0 1rem;
						}
						
							.slide-title-icon
							{
								width:2.5rem;
								height:auto;
								margin:0 1rem 0 0;
							}
							
							.slide-title-label
							{
								font-size:2rem;
								font-weight:800;
								text-transform:uppercase;
							}
							
						.slide-intro
						{
							padding:0 0 1rem;
						}
						
							.slide-intro p
							{
								
								font-size:1.25rem;
							}
						
						.slide-content
						{
							
						}
					
					.slide-image
					{
						background-size:cover;
						background-position:50% 0;
					}
					
		.slider-dots
		{
			position:absolute;
			bottom:0.75rem;
			left:50%;
			display:flex;
			transform:translateX(-50%);
		}
		
			.slider-dot
			{
				width:0.75rem;
				height:0.75rem;
				margin:0 0.5rem;
				border-radius:50%;
				background:rgba(255,255,255,0.66);
			}
			
			.slider-dot.current
			{
				background:rgba(255,255,255,1);
			}
			
		.slider-arrow-left,
		.slider-arrow-right
		{
			position:absolute;
			top:50%;
			left:0rem;
			width:1rem;
			margin-top:-1.1rem;
		}
		
		.slider-arrow-right
		{
			left:auto;
			right:0rem;
		}
		
		.slider-arrow-left.disabled,
		.slider-arrow-right.disabled
		{
			pointer-events:none;
			opacity:0.5;
		}
		
	.items
	{
		position:relative;
		padding:0 2rem;
	}
	
	.items-grid-container
	{
		padding:0;
	}
	
		.items-slider
		{
			width:100%;
			overflow:hidden;
		}
		
		.items-grid
		{
			
		}
		
			.items-slider-list
			{
				display:flex;
				margin:0 -0.5rem;
				transition:all 333ms ease-in-out;
			}
			
			.items-grid-list
			{
				display:grid;
				grid-template-columns:repeat(3, 1fr);
				grid-gap:2rem;
			}
			
				.item
				{
					flex:0 0 33.333333333%;
					padding:0 0.5rem;
				}
				
				.items-grid .item
				{
					flex:auto;
					padding:0;
				}
				
					.item-link
					{
						display:block;
						padding:0 0 1rem;
						width:100%;
						height:100%;
						background:var(--colour-yellow);
					}
					
					.item:nth-child(3n+2) .item-link
					{
						background:var(--colour-green-mid);
					}
					
					.item:nth-child(3n+3) .item-link
					{
						background:var(--colour-red);
					}
					
						.item-link img
						{
							aspect-ratio:3/3;
							object-fit:cover;
						}
						
						.item-title
						{
							padding:1rem 1rem 0;
							font-size:1rem;
							line-height:1.25;
						}
						
						.item-content
						{
							padding:1rem;
						}
						
							.item-content *
							{
								display:inline;
								font-size:0.75rem;
							}
						
						.item-more
						{
							padding:0 1rem;
							font-size:0.75rem;
							font-weight:800;
							text-decoration:underline;
						}
						
		.items-arrow-left,
		.items-arrow-right
		{
			position:absolute;
			top:50%;
			left:0rem;
			width:1rem;
			margin-top:-1.1rem;
		}
		
		.items-arrow-right
		{
			left:auto;
			right:0rem;
		}
		
		.items-arrow-left.disabled,
		.items-arrow-right.disabled
		{
			pointer-events:none;
			opacity:0.5;
		}
		
	.item-button-group
	{
		display:flex;
		align-items:center;
		justify-content:center;
		padding:2rem 0;
	}
		
		.items-button
		{
			dispay:block;
			padding:0.5rem 1rem;
			background:var(--colour-red);
			font-size:1.25rem;
			font-weight:900;
		}
		
	.tabs
	{
		
	}
	
		.tab-buttons
		{
			display:flex;
			flex-wrap:wrap;
			padding:0 0 1rem;
		}
		
			.tab-button
			{
				margin:0 0.25rem 0.25rem 0;
				padding:0.5rem 1rem;
				background:var(--colour-red);
				font-size:1.25rem;
				font-weight:800;
			}
			
			.tab-button:first-letter
			{
				text-transform:uppercase;
			}
			
			.tab-button.current
			{
				background:var(--colour-green-mid);
			}
			
		.tab-content
		{
			padding:1rem 0;
			background:var(--colour-yellow);
		}
		
			.tab
			{
				display:none;
			}
			
			.tab.current
			{
				display:block;
			}
			
				.tab-header,
				.tab-item-link
				{
					display:grid;
					grid-template-columns:10% 50% 20% 20%;
				}
				
					.tab-header span
					{
						position:relative;
						display:block;
						padding:0.5rem 1rem;
						font-size:1.25rem;
						font-weight:800;
					}
					
					.tab-header span:after,
					.tab-item-link span:after
					{
						content:"";
						position:absolute;
						top:0;
						right:0;
						border-right:1px solid var(--colour-black);
						height:100%;
					}
					
					.tab-header span:last-child:after,
					.tab-item-link span:last-child:after
					{
						display:none;
					}
					
				.tab-item
				{
					
				}
				
				.tab-item:nth-child(2n+1)
				{
					background:rgba(255,255,255,0.33);
				}
				
					.tab-item-link span
					{
						position:relative;
						display:block;
						padding:0.5rem 1rem;
					}
					
					.tab-item-link span:nth-child(2)
					{
						font-weight:800;
					}

.footer
{
	margin:2rem 0 0;
	background:var(--colour-green-dark);
}

	.footer-title
	{
		padding:4rem 0 1rem;
		font-size:2rem;
		color:var(--colour-white);
		text-transform:uppercase;
	}
	
	/*
		
	.sponsors
	{
		display:grid;
		grid-template-columns:repeat(5, 1fr);
		grid-gap:2rem;
		padding:2rem 0;
	}
	
		.sponsor
		{
			display:flex;
			align-items:center;
			justify-content:center;
		}
	
			.sponsor-img
			{
				margin-bottom:0.5rem;
			}
		
			.sponsor-label
			{
				text-align:center;
				color:var(--colour-white);
				font-weight:800;
			}
			
	*/
	
	.sponsors
	{
		display:flex;
		flex-wrap:wrap;
	}
	
		.sponsor
		{
			
		}
		
			.sponsor-label
			{
				display:block;
				color:var(--colour-white);
				font-weight:800;
			}
		
			.sponsor-label:after
			{
				content:",";
				padding:0 0.5rem 0 0;
			}
			
			.sponsor:last-child .sponsor-label:after
			{
				content:"";
			}
	
	.footer-branding
	{
		display:flex;
		margin:1rem 0 0;
		padding:1rem 0 2rem;
		border-top:2px solid var(--colour-white);
	}
	
		.footer-branding img
		{
			align-self:flex-start;
			width:7rem;
			margin:0 2rem 0 0;
		}
		
		.footer-branding-text
		{
			padding:1.5rem 0;
			max-width:20rem;
			color:var(--colour-white);
		}
		
		.footer-branding-networks
		{
			display:flex;
			flex-direction:column;
			align-items:flex-start;
			gap:10px;
			padding:1.5rem 0 1.5rem 1rem;
			margin:0 0 0 auto;
		}
		
			.footer-branding-networks a
			{
				display:flex;
				gap:10px;
				color:#fff;
			}
			
				.footer-branding-networks a svg
				{
					width:1rem;
					height:auto;
					fill:white;
				}

@media screen and (max-width:9000px) {
	
	.header
	{
		height:auto;
	}
	
		.header-content
		{
			min-height:5rem;
			text-align:right;
		}
		
			.header-menu
			{
				flex-direction: column;
				align-items: flex-end;
				padding-top:2rem;
				padding-bottom:2rem;
			}
	
				.header-menu-toggle
				{
					display:flex;
				}
				
				.menu-menu-container
				{
					display:none;
				}
			
					.menu
					{
						flex-direction:column;
						padding:1rem 0 0.5rem;
					}
					
						.menu-item
						{
							padding:0 0 0.5rem;
						}
						
		.open .menu-menu-container
		{
			display:block;
		}
	
	.tab-item-link span:nth-child(1),
	.tab-item-link span:nth-child(3),
	.tab-item-link span:nth-child(4)
	{
		font-size:0.75rem;
	}
	
}

@media screen and (max-width:800px) {

	.items
	{
		margin:0 -1rem;
		padding:0;
	}
	
	.items-grid-container
	{
		margin:0;
	}
	
		.items-slider
		{
			overflow-x:auto;
			padding-bottom:1rem;
		}
	
			.items-slider-list
			{
				padding:0 0 0 1rem;
				transform:translateX(0) !important;
			}
			
				.item
				{
					flex:0 0 60%;
				}
				
				.item:last-child
				{
					padding-right:1rem;
				}
				
				.items-grid .item
				{
					padding:0 !important;
				}
	
		.items-arrow-left,
		.items-arrow-right
		{
			display:none;
		}
		
	.items-grid-list
	{
		grid-template-columns:repeat(2, 1fr);
	}
	
	.title
	{
		padding-top:3rem;
		font-size:1.5rem;
	}
			
	.footer-title
	{
		font-size:1.25rem;
	}
			
	.sponsors
	{
		/* grid-template-columns:repeat(3, 1fr); */
	}
	
		.sponsor-label
		{
			font-size:0.8rem;
			line-height:1.75;
		}
	
	.tab-button
	{
		font-size:0.8rem;
	}
	
	.tab-header
	{
		display:none;
	}
	
		.tab-item-link
		{
			grid-template-columns:repeat(5, 1fr);
		}
		
			.tab-item-link span:nth-child(1)
			{
				grid-column:1/2;
				grid-row:1/span 2;
			}
			
			.tab-item-link span:nth-child(2)
			{
				grid-column:2/span 4;
				grid-row:1/2;
				padding-bottom:0;
			}
			
			.tab-item-link span:nth-child(3)
			{
				grid-column:2/span 2;
				grid-row:2/3;
				margin-left:-1px;
			}
			
			.tab-item-link span:nth-child(4)
			{
				grid-column:4/span 2;
				grid-row:2/3;
			}
			
			.tab-item-link span:nth-child(2):after,
			.tab-item-link span:nth-child(3):after,
			.tab-item-link span:nth-child(4):after
			{
				border:none !important;
			}
			
	.slider-container
	{
		padding:0;
	}
						
	.slide.slide-image-container
	{
		grid-template-columns:1fr;
		grid-template-rows:auto auto;
	}
	
		.slide.slide-image-container .slide-image
		{
			min-height:10rem;
			grid-row:1/2;
		}
		
		.slide.slide-image-container .slide-info
		{
			grid-row:2/3;
			padding-bottom:1rem;
		}
		
	.slider-arrow-left,
	.slider-arrow-right
	{
		top:100%;
		margin-top:1rem;
	}
	
	.slider-dots
	{
		bottom:auto;
		top:100%;
		margin-top:1.75rem;
	}
	
	.columns
	{
		grid-template-columns:1fr;
	}
	
		.column
		{
			padding-top:0 !important;
		}
	
		.column img
		{
			margin:0;
		}
		
		.column h1
		{
			padding-top:1rem;
		}
		
	.facts
	{
		padding-top:1rem;
		padding-bottom:1rem;
		grid-template-columns:1fr;
	}
	
}

@media screen and (max-width:600px) {
	
	.header-logo
	{
		width:4.5rem;
	}
		
	.items-grid-list
	{
		grid-template-columns:repeat(1, 1fr);
	}
	
	.footer-branding
	{
		flex-wrap:wrap;
	}
	
	.footer-branding img
	{
		width:4.5rem;
		height:auto;
	}
	
	.footer-branding-networks
	{
		width:100%;
		padding-left:0;
	}

	.tab-item-link
	{
		
	}
	
		.tab-item-link span:nth-child(1)
		{
			grid-row:span 3;
		}
		
		.tab-item-link span:nth-child(3)
		{
			grid-column:2/span 4;
			padding-top:10px;
			padding-bottom:5px;
		}
		
		.tab-item-link span:nth-child(4)
		{
			grid-column:2/span 4;
			grid-row:3/4;
			padding-top:0;
		}
	
}