/*

  Theme Name: Classic

*/
/*
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*	{
  box-sizing: border-box;
}

:root {
  --hvid: hsl( 0, 0%, 100% );
	--lys: hsl( 0, 0%, 97% );
	--mork: hsl( 0, 0%, 25% );
	--morkgraa: hsl( 0, 0%, 10% );
	--nav: hsla( 0, 0%, 0%, .65 );
	--graa: hsl( 0, 0%, 30% );
	--skygge: hsla( 0, 0%, 25%, .3 );
	--gron:  hsl( 120, 98%, 23% );
  --dgron: hsl( 161, 34%, 34% );
  --lgron: hsl( 162, 38%, 60% );
	--lila: hsl( 275, 67%, 46% );
	--rod: hsl( 12, 87%, 44% );
	--blaa: hsl( 240, 71%, 49% );
  --blaagraa: hsl( 267, 29%, 45% );
	--gul: hsl( 50, 100%, 50% );

  /* baggrunde */
	--mork-bg: repeating-linear-gradient( 114deg, hsl( 0, 0%, 25% ), hsl( 0, 0%, 25% ) 2px, hsla( 0, 0%, 40%, .2 ) 3px, hsla( 0, 0%, 40%, .8 ) .395rem),
  	linear-gradient( 217deg, rgb( 3 10 20 / 50% ), transparent 90% ),
  	linear-gradient( 127deg, rgb( 6 20 40 / 95% ), transparent 70% ),
		linear-gradient( 336deg, rgb( 9 30 60 / 80% ), transparent 70% );
	--body-bg: repeating-linear-gradient( 114deg, rgb( 225 225 225 ), rgb( 225 225 225 ) 2px, rgba( 250, 250, 250, .2 ) 3px, rgba( 250, 250, 250, .8 ) .395rem),
  	linear-gradient( 217deg, rgb( 3 10 20 / 1% ), transparent 90% ),
  	linear-gradient( 127deg, rgb( 6 20 40 / 50% ), transparent 70% ),
		linear-gradient( 336deg, rgb( 9 30 60 / 30% ), transparent 70% );
	--acco-bg: linear-gradient( 127deg, hsla( 240, 32%, 55%, .4 ) 10%, hsla( 240, 55%, 87%, .7 ) 90% );

	/* tekst skygge */
	--h3s: 2px 7px 0 hsla( 42, 82%, 56%, .5 );
	/* bg skygge */
	--box: 0 0 10px hsla( 0, 0%, 0%, .2 );

	/* accordion */
	--radius: .5rem;
  --gap: .8rem;
  --transition: 1.5s cubic-bezier( .25, .9, .25, 1 );
  --text: hsla( 240, 32%, 55%, 0.70 );
	--accent1: hsla( 240, 20%, 60%, .4 );
  --accent2: hsla( 240, 30%, 40%, .4 );
  --accent3: hsla( 240, 40%, 20%, .4 );
	--accent4: hsla( 240, 50%, 0%, .4 );

}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

@media ( min-width: 959px ) {
	html, body {
    background: var( --body-bg );
  }
}

body {
	font-family: 'Arimo', sans-serif;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

nav {
	position: fixed;
	top: 0;
	width: 100vw;
	max-height: 40px;
	z-index: 1;
  div
	{
		width: min( 960px, 100% );
		background-color: var( --nav );
		margin: 0 auto;
		color: var( --hvid );
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: 3remn;
		justify-content: space-between;
    h1 {
      font-family: 'Noto Sans', sans-serif;
      display: inline;
      text-transform: uppercase;
      font-weight: 800;
      padding-left: 1rem;
      background: none;
      max-height: 20px;
      margin-top: .3rem;
      span {
        color: var( --gul );
        background-color: transparent;
      }
    }
  }
}

#menu	{
	display: grid;
	grid-template-columns: 1fr 3fr;
	div	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		background-color: transparent;
		justify-items: center;
		align-items: center;
	}
	div > a	{
		color: var( --hvid );
		text-decoration: none;
		display: inline-block;
		font-weight: 500;
		text-transform: uppercase;
	}
}

#container {
  width: min( 960px, 100% );
  margin: 0 auto;
	margin-top: -30px;
	background: var( --lys );
  border-width: 0 .3rem;
	border-color: var( --mork );
	border-style: solid;
	#slide_da	{
		.hslider	{
			text-transform: uppercase;
		}
	}
	section	{
		text-align: left;
		.col3	{
			p	{
				column-count: 3;
				column-gap: 1.4rem;
			}
		}
		#om	{
			padding: 0 20px;
		}
		h1	{
			font-family: 'Roboto';
			text-align: center;
			margin: 2rem 0 .4rem 0;
			text-transform: uppercase;
			font-size: 2rem;
			font-weight: 100;
		}
		h3	{
			font-family: 'Roboto';
			text-align: center;
			font-weight: 300;
			margin: 0 0 2rem 0;
			span	{
				border-top: solid 2px var( --blaa );
				padding-top: .2rem;
			}
		}
		#sidst {
			padding: 1.5rem 1.5rem 0 1.5rem;
			.tx	> p	{
				margin: 0 1.4rem 1rem 1.4rem;
				background: var( --mork-bg );
				color: var( --hvid );
				border-radius: var( --radius );
				padding: .8rem 1.6rem;
				column-count: 3;
				column-gap: 25px;
				line-height: 1.4rem;
				text-shadow: 3px 3px 5px var( --mork );
			}
		}
	}
}

.drk	{
	background: var( --mork-bg );
	padding: .8rem;
	h1, h3	{
		color: var( --hvid );
	}
	h3	{
		span	{
			border-top: solid 2px var( --gul )!important;
			padding-top: .2rem;
		}
	}
	#acco	{
		display: grid;
		grid-template-columns: 4fr 13fr .7fr;
	}
}

.wp-block-ub-tabbed-content-tab-title,
.wp-block-ub-tabbed-content-tab-title-wrap	{
	display: none;
}

.wp-block-ub-tabbed-content-tabs-content {
	border: none;
	border-width: 0;
	padding: 0;
}

.wp-block-image size-full is-resized	{
	display: inline-block;
}

figure	{
	max-width: 240px;
	padding: 20px;
	float: left;
}

input[name="acco"]	{
	all: unset;
	display: block;
	margin-bottom: .8rem;
	&:checked	+ label	{
		border-left: solid 5px var( --gul );
		color: var( --hvid );
	}
}

.tb1, .tb2, .tb3, .tb4	{
	background-color: var( --lys );
	padding: 0 1rem 0 0;
	min-height: 290px;
	margin-top: -1rem;
	border-radius: .4rem;
	box-shadow: var( --box );
	h3	{
		display: inline-block;
		font-family: 'Arimo', sans-serif;
		margin: 20px 0!important;
		text-align: left;
		color: var( --morkgraa );
		font-weight: bold!important;
	}
}

.tb1 {
	display: block;
}

.tb2, .tb3, .tb4	{
	display: none;
}

.wp-block-ub-tabbed-content:not(.wp-block-ub-tabbed-content-pills):not(.wp-block-ub-tabbed-content-underline) .wp-block-ub-tabbed-content-tabs-content	{
	border: none;
}

input[name="acco"] + label	{
	cursor: pointer;
	padding: .5rem 1rem;
	margin: 1.5rem 0;
	color: var( --lys );
	&:hover	{
		color: var( --hvid );
	}
}

#skriv
{
	width: min( 960px, 100% );
	margin: 0 auto;
	background: var( --lys );
	text-align: center;
	padding: 1rem 0;
	button
	{
		all: unset;
		border: solid .2rem var( --mork );
		border-radius: 2rem;
		padding: .8rem 3rem;
		background: var( --mork-bg );
		font-weight: 700;
		transition: all .3s ease-in;
		color: var( --hvid );
		&:hover
		{
			background: var( --body-bg );
			color: var( --mork );
		}
	}
}

[popover]	{
	padding: 1.4rem;
	border: solid 0px var( --mork );
	border-top: 1.5rem;
	border-style: solid;
	border-color: var( --blaagraa );
	background-color: var( --hvid );
	border-radius: 0 0 12px 12px;
	margin-top: 8.3rem;
	animation: fadeOut 1.5s forwards;
	&:popover-open	{
		box-shadow: 0 2px 10px var( --skygge );
		animation: fadeIn 1.5s forwards;
	}
	&::backdrop	{
		background: var( --nav );
		backdrop-filter: blur( 1.5px );
	}
}

[popover]	{
	max-width: 460px;
	h1	{
		font-weight: 100;
		text-align: center;
		text-transform: uppercase;
		padding-bottom: .4rem;
	}
	.form-group	{
		line-height: 1.4rem;
		padding-bottom: 1.4rem;
		color: var( --mork );
		label	{
			font-size: 90%;
		}
		input[type='text'], input[type='email']	{
			font-size: 100%;
			line-height: 1.2rem;
			max-width: 180px;
			padding-top: .4rem;
			border: none;
			border-bottom: dashed 3px var( --skygge );
			&:focus	{
				outline: none;
				border-bottom-style: solid;
				border-bottom-color: var( --skygge );
			}
			&:valid	{
				border-bottom-color: var( --gron );
				border-bottom-style: solid;
			}
		}
	}
	.col1, .col2	{
		max-width: 200px;
		min-width: 200px;
		float: left;
		margin-bottom: .7rem;
	}
	.col1	{
		padding-right: 1rem;
	}
	.btn-group	{
		text-align: center;
		margin-bottom: 1.5rem;
		button	{
			all: unset;
			font-weight: 500;
			background: var( --mork-bg );
			padding: .6rem 1.8rem;
			margin: -2px;
			color: var( --hvid );
			transition: all .3s ease-in;
			&:hover	{
				background: var( --body-bg );
				color: var( --mork );
			}
		}
		.btn-hent	{
			border: solid 2px var( --mork );
			border-radius: 1.4rem 0 0 1.4rem;
		}
		.btn-annu	{
			border: solid 2px var( --mork );
			border-radius: 0 1.4rem 1.4rem 0;
		}
	}
}

#pop > a	{
	display: block;
	padding: .3rem;
}

footer {
	width: min( 960px, 100% );
  margin: 0 auto;
	background: var( --mork-bg );
	color: var( --hvid );
  text-align: center;
	padding: 1rem;
	border-bottom: solid .3rem var( --mork );
}

@media ( min-width: 751px ) and ( max-width: 900px ) {
	#container > section > .col3 > p, 
	#container > section > #sidst > .tx > p {
		column-count: 2;
	}
}

@media ( max-width: 750px ) {
	#container > section > .col3 > p, 
	#container > section > #sidst > .tx > p {
		column-count: 1;
	}
}