/*
Theme Name: Live
Text Domain: td-design
Author: TD Design
Version: 10.0
*/

:root{
	--fs: .9rem;
	--fs-min: .8rem;
	--primary : #ff7647;
}

body{
	font-family: 'Open Sans', sans-serif;
	font-size: clamp(var(--fs-min), 1vw, var(--fs));
	font-weight: 400;
	color: #fff;
	background: #212121;
}


header{
	position: sticky;
	top: 0;
	padding: 1rem;
	align-items: center;
	gap: 1rem;
	width: 100%;
	translate: 0 0;
	transition: translate 0.1s;
	background: #252b31;
}

header .fields{
	gap: 5px;
}

@media(min-width: 1025px){
	header{
		top: var(--wp-admin--admin-bar--height, 0);
	}
}


@media(min-width: 980px){
	header #trigger{
		display: none;
	}
}

header #trigger{
	font-size: 1.4rem;
	cursor: pointer;
}
header #trigger.open{
	rotate: 180deg;
}
header .reset{
	margin-left: 0.5rem;
	font-size: 1.2rem;
	cursor: pointer;
}
header svg:hover{
	color: var(--primary);
}

header a.admin{
	gap: 5px;
	color: #fff;
	text-decoration: none;
	padding: 1em 2em;
	background: #084470;
	border-radius: 6px;
	font-weight: bold;
	margin-left: auto;
}
header a.admin:hover{
	background: #154c75;
}


@media (max-width: 767px) {
    header.move-up {
        translate: 0 0;
    }
    header.move-down {
        translate: 0 -47px;
    }
}

section{
	padding: 1rem;
}

article:not(.placeholder){
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	background: #34393e;
}
/*
@media(min-width: 980px){
	article{
		max-width: 686px;
	}
}
@media(min-width: 2124px){
	section.grid[data-visible-items="2"] article.placeholder{
		grid-column: span 2;
	}
}
*/
article > div.flex{
	align-items: center;
	gap: 0 1rem;
	
	justify-content: space-between;
	border-bottom: 1px solid #ffffff17;
	padding-bottom: 10px;
}
article h3{
	align-items: center;
	gap: 8px;
	font-weight: bold;
	font-size: inherit;
	margin-bottom: 5px;
	color: var(--primary);
}
article ul.support{
	margin-bottom: 10px;
	font-size: 0.8rem;
}

article img{
	height: 14px;
	width: auto;
}
article span.flex{
	flex-wrap: nowrap;
	gap: 5px;
}
article .comment{
	margin-top: auto;
	padding: 10px;
	border-radius: 6px;
	background: #2a2f33;
	color: #ccc;
	font-size: 0.75rem;
}

@media(max-width: 800px){
	header:has( > div.hasFilter) + #content h2{
		display: none;
	}
}
@media(min-width: 801px){
	h2[data-year]{
		display: none;
	}
}

/*
.grid{
	--min-column-size: 200px;
	--column-count: 4;
	--gap: 1rem;
	
	--breakpoint: calc(var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1)) );
	--column-size: calc((100% / var(--column-count)) - var(--gap));
	
	display: grid;
	gap: var(--gap);
	
	grid-template-columns: repeat(auto-fit, minmax(
			min(max(var(--column-size), (100% - var(--breakpoint)) * -999 ), 100%), 
			1fr));
}
.grid[data-columns="2"]{
	--column-count: 2;
}
.grid[data-columns="3"]{
	--column-count: 3;
}

@media(max-width: 1768px){
	.grid{
		--column-count: 3;
	}
}
@media(max-width: 1200px){
	.grid{
		--column-count: 2;
	}
}
@media(max-width: 800px){
	.grid{
		--column-count: 1;
	}
}
*/
.grid{
    --n: 4;
    --gap: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(360px, calc((100% - calc(var(--n) - 1) * var(--gap)) / var(--n))), 1fr));
    gap: var(--gap);
}
.flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

ul.headline{
	color: #409eff;
	font-weight: bold;
}
ul.support li::before{
	content: '# ';
}

ul{
	list-style: none;
}

@media(min-width: 500px){
	ul.support:has(li:nth-child(6)){
		columns: 2;
	}
}

input, select{
	height: 40px;
	width: auto;
	border: 0;
	border-radius: 6px;
	outline: none;
	padding-left: 8px;
	font: inherit;
	background: #e2e2e2;
	transition: background .2s;
}
input:focus, select:focus{
	background: #fff;
}


@media(max-width: 980px){
	header{
		padding-block: .5rem;
	}

	header #trigger{
		order: 1;
	}
	header .results{
		margin-left: auto;
		order: 2;
	}
	header .fields{
		position: relative;
		display: none;
		order: 3;
	}
	header #trigger.open + .fields{
		display: flex;
	}
	header input, header select{
		width: 100%;
	}
	header .reset{
		position: absolute;
		top: -2.8rem;
		left: 3rem;
	}

	header a.admin{
		order: 4;
		padding: 0.6em;
		border-radius: 50rem;
	}
	header a.admin span{
		display: none;
	}


	article > div.flex{
		flex-direction: column;
		align-items: flex-start;
	}
	article img{
		max-width: 16px;
	}
}
@media(max-width: 1414px){
	article.placeholder{
		display: none;
	}
}