/**
 * Theme Name: Overfreunde
 * Template:   Divi
 */

/* Fonts */

@supports (font-variation-settings: normal) {
	@font-face {
		font-family: 'Open Sans';
		src:
			url('assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf') format('woff2 supports variations'),
			url('assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf') format('woff2-variations');
		font-weight: 400 500 600 700 800;
		font-display: swap;
		font-style: normal;
	}

	@font-face {
		font-family: 'Open Sans';
		src:
			url('assets/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth\,wght.ttf') format('woff2 supports variations'),
			url('assets/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth\,wght.ttf') format('woff2-variations');
		font-weight: 400 500 600 700 800;
		font-display: swap;
		font-style: italic;
	}
}

/* Variables */

:root {
	--brand-primary: #0069b4;
	--brand-secondary: #ffed00;
	--color-bodytext: #666;
	--table-border: 2px solid var(--brand-primary);
	--font-family: Open Sans, Arial, sans-serif;
	--font-family-headings: var(--font-family);
}

/* Typography */

body {
	font-synthesis: none;
	font-weight: 400;
}

h1 {
	color: var(--brand-primary);
	font: bold 1.5rem var(--font-family-headings);
	margin-bottom: 1rem;
	padding-bottom: 0;
}

h1:has(+ h2) {
	margin-bottom: 0.5rem;
}

.home h1 {
	font-size: 1.875rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.3;
}

/* Menu */

.mobile_menu_bar:before {
	color: #ddd;
}

/* Tables */

#main-content table {
	border: none;
	--spacing-y: 0.8rem;

	& a {
		color: var(--brand-primary);
	}

	& tr {
		height: auto !important;

		&:has(th) {
			border-top: var(--table-border);
		}

		&:last-child {
			border-bottom: var(--table-border);
		}
	}

	& th,
	& td {
		border: none;
		height: auto !important;
		padding: calc(var(--spacing-y) / 2) 0;
		vertical-align: top;
	}

	& th,
	& td:not(:last-child) {
		padding-right: 1.875rem;
	}

	& th,
	& th ~ td {
		padding-top: var(--spacing-y);
	}

	& th {
		padding-bottom: 0;
	}

	& tr:has(+ tr th) td,
	& tr:last-child th,
	& tr:last-child td {
		padding-bottom: var(--spacing-y);
	}

	& th,
	& th > :first-child,
	& td > :first-child {
		color: var(--brand-primary);
		font-size: 1.125rem;
	}

	& a {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	& time {
		font-weight: bold;
	}

	& strong em {
		font-weight: normal;
	}

	@media (max-width: 550px) {
		& tr {
			display: grid;
			grid-template-columns: min-content 1fr;
		}

		& th {
			grid-column: 1 / span 2;
			padding-inline: 0;
		}

		& td:not(:last-child) {
			padding-right: 0.5rem;
		}
	}
}