/* Hallo, kijk gerust eens rond. Heb je vragen, contacteer mij dan via webdev [at] felixvandyck.be */

/* ---- Nav ---- */
.navbar {
	display: none;
}

@media (min-width: 600px) {
	.navbar+.docs-section {
		border-top-width: 0;
	}

	.navbar,
	.navbar-spacer {
		display: block;
		width: 100%;
		height: 5rem;
		background: var(--background-color);
		z-index: 99;
		border-top: 1px solid var(--border-color-softer);
		border-bottom: 1px solid var(--border-color-softer);
	}

	.navbar-spacer {
		display: none;
	}

	.navbar>.container {
		width: 100%;
	}

	.navbar-list {
		list-style: none;
		margin-bottom: 0;
	}

	.navbar-item {
		position: relative;
		float: left;
		margin-bottom: 0;
	}

	.navbar-link {
		text-transform: uppercase;
		font-size: 1.3rem;
		font-weight: 600;
		letter-spacing: .2rem;
		margin-right: 35px;
		text-decoration: none;
		line-height: 5rem;
		color: var(--text-color-normal);
	}

	.navbar-link.active {
		color: var(--accent-color);
	}

	.has-docked-nav .navbar {
		position: fixed;
		top: 0;
		left: 0;
	}

	.has-docked-nav .navbar-spacer {
		display: block;
	}

	/* Re-overiding the width 100% declaration to match size of % based container */
	.has-docked-nav .navbar>.container {
		width: 80%;
	}
}

/* ---- einde nav ---- */

/* ---- nodig voor theme switching, duplicaat van classes in barebones.css ---- */
html[data-theme="dark"] {
	--theme-hue: 0;
	--accent-hue: 194;

	--text-color-richer: hsl(var(--theme-hue), 0%, 95%);
	--text-color-normal: hsl(var(--theme-hue), 0%, 80%);
	--text-color-softer: hsl(var(--theme-hue), 0%, 67%);

	--accent-color: hsl(var(--accent-hue), 76%, 49%);
	--accent-color-hover: hsl(var(--accent-hue), 86%, 57%);

	--border-color: hsl(var(--theme-hue), 0%, 27%);
	--border-color-softer: hsl(var(--theme-hue), 0%, 20%);

	--background-color: hsl(var(--theme-hue), 0%, 12%);

	--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
	--code-background: hsl(var(--theme-hue), 0%, 5%);

	--button-primary-color: white;
}

html[data-theme="dark"] img.value-img {
	filter: invert(0.8);
}

html[data-theme="dark"] img {
	opacity: .90;
	transition: opacity .5s ease-in-out;
}

html[data-theme="dark"] .intro-image {
	background-image: url('../images/pexels-matej-716661.jpg');
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

html[data-theme="dark"] tbody tr:hover {
	background-color: hsl(var(--accent-hue), 76%, 15%);
	border-right: hsl(var(--theme-hue), 0%, 95%);
}

a {
	text-decoration: none;
}

html.transition-theme,
html.transition-theme *,
html.transition-theme *:before,
html.transition-theme *:after {
	transition: all 650ms !important;
	transition-delay: 0 !important;
}

/* ---- theme switching tot hier ---- */

.header {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 15px;
}

.footer {
	margin-left: 10px;
	margin-top: 15px;
	margin-right: 10px;
	margin-bottom: 15px;
	vertical-align: bottom;
	font-size: 1.6rem;
	line-height: 1.6;
}

.container {
	max-width: 800px;
	margin: 0 auto;
}

.section {
	padding: 5rem 0;
}

.intro-image {
	background-image: url('../images/pexels-adrien-olichon-3137052.jpg');
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

tbody tr:hover {
	background-color: hsl(var(--accent-hue), 76%, 85%);
	border-right: hsl(var(--theme-hue), 0%, 95%);
}

/* ---- Popovers ---- */
@media (min-width: 600px) {
	.popover.open {
		display: block;
	}

	.popover {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		background: var(--background-color);
		border: 1px solid var(--border-color-softer);
		border-radius: 4px;
		top: 92%;
		left: -50%;
		-webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, .1));
		-moz-filter: drop-shadow(0 0 6px rgba(0, 0, 0, .1));
		filter: drop-shadow(0 0 6px rgba(0, 0, 0, .1));
		z-index: 100;
	}

	.popover-item:first-child .popover-link:after,
	.popover-item:first-child .popover-link:before {
		bottom: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.popover-item:first-child .popover-link:after {
		border-color: rgba(255, 255, 255, 0);
		border-bottom-color: var(--background-color);
		border-width: 10px;
		margin-left: -10px;
	}

	.popover-item:first-child .popover-link:before {
		border-color: rgba(238, 238, 238, 0);
		border-bottom-color: var(--border-color-softer);
		border-width: 11px;
		margin-left: -11px;
	}

	.popover-list {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.popover-item {
		padding: 0;
		margin: 0;
	}

	.popover-link {
		position: relative;
		color: var(--text-color-normal);
		display: block;
		padding: 8px 20px;
		border-bottom: 1px solid var(--border-color-softer);
		text-decoration: none;
		text-transform: uppercase;
		font-size: 1.0rem;
		font-weight: 600;
		text-align: center;
		letter-spacing: .1rem;
	}

	.popover-item:first-child .popover-link {
		border-radius: 4px 4px 0 0;
	}

	.popover-item:last-child .popover-link {
		border-radius: 0 0 4px 4px;
		border-bottom-width: 0;
	}

	.popover-link:hover {
		color: var(--button-primary-color);
		background: var(--accent-color);
	}

	.popover-link:hover,
	.popover-item:first-child .popover-link:hover:after {
		border-bottom-color: var(--accent-color);
	}
}

@media (min-width: 400px) {
	.container {
		width: 85%;
	}
}