/*   
	Theme Name:        Studio Campo Theme
	Theme URI:         https://studiocampo.nl
	Description:       Studio Campo theme.
	Author:            Studio Campo
	Author URI:        https://studiocampo.nl
	License:           GNU General Public License v3 or later.
	License URI:       https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain:       sc-theme
*/

:root {

	--text:#1a1a1a;
	--accent:#16b1ea;
	--wit:#ffffff;
	--grijs:#cecece;
	--grijsLicht:#f2f2f2;
	--zwart:#000000;
}

/* Font */
@font-face {
	font-family: 'Raleway';
	src: url('assets/fonts/Raleway-Medium.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('assets/fonts/Raleway-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('assets/fonts/Raleway-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rajdhani';
	src: url('assets/fonts/Rajdhani-SemiBold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Algemeen */
html,
body {
	padding: 0;
	margin: 0;
	font-family: 'Raleway', sans-serif;
	line-height: 1.7;
	color:var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.sc-font {
	font-family: 'Rajdhani', sans-serif;
}

header {

	color:var(--blauw);

	a {

		color: var(--blauw);
		font-weight: 700;

		&:hover {

			color:var(--oranje);
		}
	}
}

main {

	a {

		color: var(--accent);
		text-decoration: underline;
		text-underline-offset: 4px;

		&:hover {

			color:var(--text);
		}
	}
}

footer {

	color:var(--text);

	a {

		color: var(--text);

		&:hover {

			color:var(--accent);
		}
	}
}

.sc-trainingen {

	h3 {

		margin-top:6px;
	}
}

.sc-rooster,
.sc-av-table {

	@media(max-width:767px) {

		overflow-x: scroll;
	}

	@media(min-width:768px) {

		width: 100%;
	}

	table {

		border-top:1px solid var(--grijs);
		border-right:1px solid var(--grijs);
		border-collapse: collapse;
	}

	text-align: center;

	thead {

		color:var(--accent);
		background-color: var(--grijsLicht);
	}

	th,
	td {

		padding:4px 10px;
		border-left:1px solid var(--grijs);
		border-bottom:1px solid var(--grijs);
		border-collapse: collapse;
	}

	tbody {

		tr:nth-of-type(2n+2) {

			background-color: var(--grijsLicht);
		}
	}
}

.sc-av-table {

	border-top:1px solid var(--grijs);
	border-right:1px solid var(--grijs);
	border-collapse: collapse;
	min-width: 500px;
}