@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --jumbotron-padding-y: 3rem;
	--fr-val: rgb( 255, 255, 255 );
	--fr-ee: rgb( 238, 238, 238 );
	--fr-lys: rgba( 255, 255, 255, .3 );
	--fr-ora: rgb( 210, 67, 0 );
	--fr-pun: rgb( 187, 0, 0 );
	--fr-mus: rgb( 0, 0, 0 );
	--fr-per: rgb(46, 56, 65);
	--fr-vaa: rgb(82, 109, 136);
	--fr-ru02: rgba( 210, 67, 0, .02 );
	--fr-gra: rgb( 120, 130, 140 );
	--fr-har5: rgba( 0, 0, 0, .5 );
	--fr-har2: rgba( 0, 0, 0, .2 );
	--gr-rus: linear-gradient( to left, 
		rgba( 210, 67, 0, .02 ), 
		rgba( 210, 67, 0, .02 ), 
		rgba( 210, 67, 0, .3 ), 
		rgba( 210, 67, 0, 1 ) );
	--gr-ru1: linear-gradient( to left, rgba( 205, 205, 205, 0.8 ) 73.7%, rgba( 210, 67, 0, 1 ) 73.7% 100% );
	--lg-bg: linear-gradient( 25deg, rgb(87, 93, 104) 50%, rgb(129, 132, 143) 90% );
	--gr-bg: linear-gradient( 25deg, rgba(217, 217, 217, 0.7) 50%, rgb(255, 255, 255) 90% );
	--lg-nm: linear-gradient( to top,
			rgb( 120, 130, 140 ) 40%,
			rgb( 230, 240, 250 ) 40% 100%
		);
	--lg-km: linear-gradient( to top,
			rgb( 46, 56, 65 ) 71%,
			rgb( 120, 130, 140 ) 71% 100%
		);
}

body {
	background-color: var( --fr-gra );
}

header.collapse	{
	background-color: var( --fr-pun );
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-image: url( ../images/tuulenhaltijatar768.jpg );
  background-position: center;
  background-size: cover;
  background-color: bg-light;
}

.grid {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 1rem;
	margin: auto;
	padding-bottom: 1rem;
}

.teos {
	aspect-ratio: 1;
}

.jumbotron p	{
	color: var( --fr-val );
	font-size: 1.5rem;
}

.tx {
	text-shadow: 2px 2px 4px var( --fr-mus );
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 700;
  color: var( --fr-val );
  font-size: 5rem;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { 
	box-shadow: 0 .25rem .75rem var( --fr-har5 ); 
}

.bg-mila	{
	background-color: var( --fr-ora );
}
.text-mila		{
	color: var( --fr-ora );
}
.text-mila-light		{
	color: rgba( 210, 67, 0, .6 );
}
.text-mila-dark		{
	color: var( --fr-per );
}
.bg-mila-dark	{
	background-color: var( --fr-per );
}
.bg-mila-dark a, .bg-mila-dark a:hover	{
	background-color: var( --fr-per );
	color: var( --fr-val );
}
.bg-top		{
	height: 100%;
	background-color: var( --fr-ru02 );
	background-image: var( --gr-ru1 );
	border-top: solid 1px var( --fr-ru02 );
	border-bottom: solid 1px var( --fr-ru02 );
}
.nav-item a.nav-link	{
	color: var( --fr-val );
}

.nav-item a.nav-link:hover	{
	font-weight: 600;
	text-decoration: underline;
}

.active		{
	font-weight: 600;
}

.cv		{
	font-size: 4rem;
	text-align: center;
	min-width: 100%;
	font-weight: 400;
	padding: 10px;
}
.btn-mila		{
	color: var( --fr-ora );
	font-weight: 600;
	background-color: transparent;
}
.btn-mila:hover	{
	text-decoration: underline;
}
.ml12	{
	margin-left: 12px;
	color: var( --fr-ora );
}
.ark-img	{
	width: 100%;
	background-color: var( --fr-val );
	height: 100px;
}
.ei-saatavissa	{
	text-decoration: line-through;
}

.btn-group {
	margin: .5rem auto 1rem auto !important;
}

.btn-group > .btn-mila {
	background-color: var( --fr-per );
	border: 2px solid var( --fr-per );
	color: var( --fr-val );
	text-decoration: none;
	&:hover {
		background-color: var( --fr-vaa );
		text-decoration: none;
	}
}

/**** kuvat *****/
section > #data-grid {
	max-height: calc( 100dvh - 263px );
	min-height: calc( 100dvh - 263px );
	background: var(--lg-bg );
	overflow: scroll;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	grid-template-rows: auto;
	gap: 20px;
	overflow-x: hidden;
	justify-content: space-evenly;
	margin: 0 auto;
	/*border: solid 1px red;*/
}
.nimi, .tekn, .koko, .nami {
	font-size: .8rem;
	text-align: center;
	margin-top: .3rem;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.nimi, .nami {
	font-weight: 600;
	max-width: 170px;
	align-self: center;
	justify-self: center;/*   */
}

.nami {
	text-decoration-line: line-through;
	text-decoration-color: var( --fr-pun );
	text-decoration-thickness: 2px;
}

.teos {
	margin: 10px;
	display: grid;
	align-self: center;
	justify-self: center;
	grid-template-rows: 45px auto 16px 30px;
	/*border: 10px solid var( --fr-val );*/
	background-color: var( --fr-lys );
	color: var( --fr-val );
	border-radius: .4rem;
	img {
		border: 6px solid var( --fr-val );
	}
	&:hover {
		cursor: pointer;
	}
}
.kuva {
	margin: 0 auto;
	margin-top: .3rem;
}
.napit {
	/*margin-left: calc( 50dvw - 310px );*/
	text-align: center;
	margin-bottom: -20px;
}
.filter-buttons > button {
	background-color: rgb( 230, 240, 250 );
	color: var( --fr-per );
	border: solid 1px var( --fr-gra );
	&.active {
		background-color: var( --fr-gra );
		color: var( --fr-val );
	}
	&:hover {
		background-color: var( --fr-gra );
		color: var( --fr-val );
	}
}

.sort-buttons > button {
	background-color: var( --fr-gra );
	color: var( --fr-val );
	border: solid 1px var( --fr-per );
	&.active {
		background-color: var( --fr-per );
	}
	&:hover {
		background-color: var( --fr-per );
	}
}

#kavi {
	font-weight: 100;
	background: var(--lg-nm );
}

.sort {
	margin-top: -33px;
}

.km {
	background: var( --lg-km );
}

.ac	{
	text-align: center;
}

dialog#billedeDialog {
  all: unset; /* Nulstiller browserens standarddialog-styling */
  box-sizing: border-box;
  
  /* Centrering på skærmen */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  /* Kontrollerede dimensioner */
  width: 90vw !important;
  height: 90vh !important;
  max-width: 1200px !important; /* Valgfrit: så det ikke bliver absurd stort på 4K skærme */
  
  /* Flexbox sikrer at indholdet (billedet) indretter sig efter dialogen */
  display: none; /* jQuery styrer visningen, ELLER brug :modal pseudo-klassen nedenfor */
  justify-content: center;
  align-items: center;
  
  z-index: 999999 !important;
}

/* Når dialogen er åben via .showModal(), skal den vises som flex */
dialog#billedeDialog[open] {
  display: flex !important;
}

#stortBillede {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important; /* Tvinger billedet til at blive inden for rammen uden at strække */
	animation: zoomInd 0.3s ease-out forwards;
}

@keyframes zoomInd {
  from {
    opacity: 0;
    transform: scale(0.7); /* Starter en lille smule mindre */
  }
  to {
    opacity: 1;
    transform: scale(1);    /* Slutter i fuld størrelse */
  }
}

/* Baggrunden (skal styles separat for [open]) */
dialog#billedeDialog::backdrop {
  background: rgba(0, 0, 0, 0.9) !important;
}

/* Lukkeknap */
#lukKnap {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  font-size: 30px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  z-index: 1000000 !important;
  line-height: 45px !important;
  text-align: center !important;
}

.cv {
	display: grid;
	padding: 0;
	grid-template-columns: 300px auto;
}

.hed {
	color: var( --fr-val );
	text-align: left;
	padding-left: 2rem;
	grid-column: span 2;
}

.men {
	padding: 1rem 0 .2rem 1rem;
	background-color: var( --fr-ee );
}

.cv-nimi {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2rem;
	text-align: left;
	color: var( --fr-mus );
	border-top: solid 2px var( --fr-ru02 );
	border-bottom: solid 2px var( --fr-ru02 );
	cursor: pointer;
}

.cv-nimi:hover {
	color: var( --fr-gra )!important;
}

#data-bg1, #data-bg2, #data-bg3, #data-bg4, #data-bg5, #data-bg6, #data-bg7, #data-bg8, #data-bg9 {
	background-color: var( --fr-val );
	width: 100%;
	display: none;
}

.cv-data-ots {
	font-size: 1.2rem; 
	font-weight: 600;
	color: var( --fr-val );
	background-color: var( --fr-ora );
	border: var( --fr-val );
	text-align: left;
	padding-left: 1rem;
}

.cv-data-tx {
	color: #000;
	font-size: 1rem;
	text-align: left;
	font-weight: 300;
	padding: 5px;
}

@media ( max-width: 576px ) {
	h1, .jumbotron-heading	{ 
		font-size: 2.5rem;
	}
	.jumbotron	{
		font-size: 0.25rem;
		font-weight: 600;
	}
	#leve {
		display: none;
	}
	.grid {
		grid-template-columns: 1fr;
	}
	.napit {
		margin-left: 10px;
	}
	.filter-buttons > button {
		max-width: 50px;
		overflow: hidden;
	}
	.card {
		max-width: 100%;
	}
	.hed {
		background: linear-gradient( to left, 
		rgb( 210, 67, 0 ) 58.3%, 
		rgb( 210, 67, 0 ) 58.3% 100% );
	}
	.men, .nim2 {
		grid-column: span 2;
	}
}
@media ( min-width: 577px ) and ( max-width: 768px ) {
	h1, .jumbotron-heading	{ 
		font-size: 4rem;
	}
	.jumbotron	{
		font-size: 0.75rem;
	}
	#leve {
		display: none;
	}
	.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.card {
		max-width: 100%;
	}
	.hed {
		background: linear-gradient( to left, 
		rgb( 210, 67, 0 ) 58.3%, 
		rgb( 210, 67, 0 ) 58.3% 100% );
	}
	.men, .nim2 {
		grid-column: span 2;
	}
}

@media ( min-width: 769px ) and ( max-width: 992px ) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
    background-image: url( ../images/tuulenhaltijatar1024.jpg );
  }
	#kape1, #kape2 {
		display: none;
	}
	.grid {
		grid-template-columns: repeat( 4, 1fr );
	}
	.hed {
		background: linear-gradient( to left, 
		rgb( 205, 205, 205 ) 58.3%, 
		rgb( 210, 67, 0 ) 58.3% 100% );
	}
}

@media ( min-width: 992px ) and ( max-width: 1199px ) {
  .jumbotron {
    background-image: url( ../images/tuulenhaltijatar_w.jpg );
  }
	#kape1, #kape2 {
		display: none;
	}
	.grid {
		grid-template-columns: repeat( 5, 1fr );
	}
	.card {
		max-width: 33%;
	}
	.hed {
		background: linear-gradient( to left, 
		rgb( 205, 205, 205 ) 68.7%, 
		rgb( 210, 67, 0 ) 68.7% 100% );
	}
}

@media ( min-width: 1200px ) {
	.jumbotron {
    background-image: url( ../images/tuulenhaltijatar_w.jpg );
  }
	#kape1, #kape2 {
		display: none;
	}
	.grid {
		grid-template-columns: repeat( 5, 1fr );
	}
	.card {
		max-width: 33%;
	}
	.hed {
		background: linear-gradient( to left, 
		rgb( 205, 205, 205 ) 73.7%, 
		rgb( 210, 67, 0 ) 73.7% 100% );
	}
}

/*
@element '.hed' and ( width: 1140px ) {
  $this {
    
  }
}*/