/*
Theme Name: Veizla-ranking
Author: Mattias Englund
Version: 0.1
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	--color-bg: #0A0A0A;
	--color-dark-grey: #151515;
	--color-light-grey: #787878;
	--color-border-grey: #262626;
	--color-table-header-grey: #1D1D1D;
	--color-text-white: #FAFAFA;
	
	--color-green: #00D492;
	
	--color-gold: #C9B037;
	--color-silver: #B4B4B4;
	--color-bronze: #AD8A56;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text-white);
	
	font-family: "Barlow", sans-serif;
	padding-top: var(--wp-admin--admin-bar--height);
}

h1, h2, h3, h4, h5 {
	font-weight: 600;
	margin-bottom: 8px;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child {
	margin-bottom: 0;
}

a {
	color: var(--color-text-white);
	text-decoration: none;
}

p {
	margin-bottom: 20px;
}

p a, .info div a {
	text-decoration: underline;
}

#container {
	padding: 20px 5px;
}

@media screen and (min-width: 1100px){
	#container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 20px;
	}
}

#menu {
	padding: 10px;
	display: flex;
	gap: 20px;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-border-grey);
	flex-direction: column;
}

@media screen and (min-width: 800px){
	#menu {
		padding: 20px 30px;
		flex-direction: row;
		align-items: center;
	}
}

#menu-main-menu {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

#logo {
	display: grid;
	grid-template-columns: 160px auto;
	grid-template-rows: auto auto;
	align-items: center;
}

#logo img {
	width: 160px;
}

#logo i {
	grid-column: span 2;
	font-size: 14px;
}

#menu-main-menu li {
	list-style: none;
}

#menu-main-menu li a {
	text-decoration: none;
	color: white;
	padding: 8px 16px;
	border-radius: 10px;
	
	transition: background-color 125ms ease-in-out;
}

#menu-main-menu li a:hover {
	background-color: var(--color-border-grey);
}

.button {
	padding: 8px 16px;
	border-radius: 10px;
	background-color: var(--color-light-grey);
	
	border: none;
    color: var(--color-text-white);
	cursor: pointer;
	
	display: inline-block;
}

table {
	border-spacing: 0px;
}

table, .info {
	margin: 0 auto;
	background-color: var(--color-dark-grey);
	border: 1px solid var(--color-border-grey);
	padding: 10px;
	border-radius: 10px;
}

.info *:last-child {
	margin-bottom: 0;
}

.info ul {
	padding-inline-start: 15px;
}

.info div {
	line-height: 24px;
}

@media screen and (min-width: 800px){
	table, .info {
		padding: 20px;
		border-radius: 20px;
	}
}

tbody {
	display: block;
	border: 1px solid var(--color-border-grey);
}

th, td.header {
	font-weight: 600;
}

td, th {
	text-align: left;
	padding: 10px 15px;
	border-bottom: 1px solid var(--color-border-grey);
}

@media screen and (min-width: 800px){
	td, th {
		padding: 10px 20px;
	}
}

@media screen and (max-width: 799px){
	.rankingtable td:nth-child(1), .rankingtable th:nth-child(1) {
		padding-right: 0px;
	}
	
	.rankingtable td:nth-child(2), .rankingtable th:nth-child(2) {
		padding-left: 0px;
	}
}

tr.headerrow {
	background-color: var(--color-table-header-grey);
}

td.green {
	font-weight: 600;
	color: var(--color-green);
}

table {
	width: 100%;
	margin: 20px 0;
}

tbody {
	display: grid;
	grid-template-columns: auto 1fr auto;
}

table a {
	width: fit-content;
}

tr:has(td) {
	transition: background-color 50ms ease-in-out;
}

tr:has(td):not(:has(.fullwith)):hover {
	background-color: var(--color-border-grey);
}

.playertournamentstable tbody {
	grid-template-columns: 1fr auto auto auto;
}

.clubstable tbody {
	grid-template-columns: 1fr auto;
}

tr {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

th, td {
	display: grid;
	align-items: center;
}

td {
	align-items: center;
}

td.fullwith {
	grid-column: 1/-1;
}

td.date, th.points {
	white-space: nowrap;
}

th.center, td.center {
	justify-content: center;
}

form {
	
}

form p {
	margin-bottom: 4px;
}

form input{
	font-size: 18px;
	padding: 6px 10px;
	max-width: 320px;
    width: 100%;
	border-radius: 10px;
    border: none;
    margin-top: 4px;
}

form input[type=text] {
	width: 100%;
}

form input[type=file] {
	color: #FFFFFF;
	margin-bottom: 10px;
}

form input::placeholder {
	color: #DDDDDD;
}

input[type=submit], input::file-selector-button {
	display: block;
	margin-bottom: 20px;
	width: 100%;
	min-width: 100px;
	height: 40px;
    padding: 10px;
    border-radius: 10px;
    border: none;
	
	display: grid;
	align-items: center;
	
	color: var(--color-dark-grey);
	font-size: 16px;
	
	cursor: pointer;
}

input::file-selector-button {
	width: unset;
	display: initial;
	margin-right: 10px;
}

input.button {
	width: fit-content;
	font-size: 16px;
	justify-self: right;
}

input[type=number] {
	max-width: 100px;
}

.hidden-phone {
	display: none;
}

@media screen and (min-width: 1000px){
	.hidden-phone {
		display: inherit;
	}
}

.place-1 span, .place-2 span, .place-3 span {
	background-color: var(--color-gold);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    color: black;
    font-family: monospace;
    line-height: 20px;
}

.place-2 span {
	background-color: var(--color-silver);
}

.place-3 span {
	background-color: var(--color-bronze);
}

.badge {
	margin-top: 6px;
	position: relative;
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
}

.badge span {
	grid-column: 2;
}

.badge:before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: var(--color-gold);
}