/*=====================================================
  Custom Bootstrap Theme Overrides with Colour Variables
=====================================================*/

/* Body Styles */

body
{
	background-color: var(--body-bg) !important;
	color: var(--body-text) !important;
}

.bg-light
{
	background-color: var(--custom-bg-light) !important;
	color: var(--custom-text-light) !important;
}

.bg-dark
{
	background-color: var(--custom-bg-dark) !important;
	color: var(--custom-text-dark) !important;
}

.text-light
{
	color: var(--custom-text-light) !important;
}

/* Headers */

h1,
h2,
h3,
h4
{
	/*margin-top: 3rem !important;*/
	margin-bottom: 1rem;
}

header,
section
{
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

/* HACK: is there a better way? */
div.top-spacer
{
	height: 65px;
	/*background-color: #ff0;*/
}

header.hero
{
	margin-top: -65px;
}

/* Bullet lists */
li
{
	margin-top: 1rem !important;
}

/* Nav links */

.nav-item .nav-link,
.nav-item .nav-link:visited,
.nav-item .nav-link:hover,
.nav-item .nav-link:focus
{
	color: var(--body-text) !important;
}

	.nav-item .nav-link:hover,
	.nav-item .nav-link:focus
	{
		text-decoration: underline;
	}

/* Buttons */

.btn-primary
{
	background-color: var(--primary-bg) !important;
	border-color: var(--primary-border) !important;
	color: var(--primary-text) !important;
}

	.btn-primary:hover
	{
		background-color: var(--primary-hover-bg) !important;
		border-color: var(--primary-hover-border) !important;
	}

.btn-secondary
{
	background-color: var(--secondary-bg) !important;
	border-color: var(--secondary-border) !important;
	color: var(--secondary-text) !important;
}

	.btn-secondary:hover
	{
		background-color: var(--secondary-hover-bg) !important;
		border-color: var(--secondary-hover-border) !important;
	}

.btn-success
{
	background-color: var(--success-bg) !important;
	border-color: var(--success-border) !important;
	color: var(--success-text) !important;
}

	.btn-success:hover
	{
		background-color: var(--success-hover-bg) !important;
		border-color: var(--success-hover-border) !important;
	}

.btn-danger
{
	background-color: var(--danger-bg) !important;
	border-color: var(--danger-border) !important;
	color: var(--danger-text) !important;
}

	.btn-danger:hover
	{
		background-color: var(--danger-hover-bg) !important;
		border-color: var(--danger-hover-border) !important;
	}

.btn-warning
{
	background-color: var(--warning-bg) !important;
	border-color: var(--warning-border) !important;
	color: var(--warning-text) !important;
}

	.btn-warning:hover
	{
		background-color: var(--warning-hover-bg) !important;
		border-color: var(--warning-hover-border) !important;
	}

.btn-info
{
	background-color: var(--info-bg) !important;
	border-color: var(--info-border) !important;
	color: var(--info-text) !important;
}

	.btn-info:hover
	{
		background-color: var(--info-hover-bg) !important;
		border-color: var(--info-hover-border) !important;
	}

.btn-light
{
	background-color: var(--light-bg) !important;
	border-color: var(--light-border) !important;
	color: var(--light-text) !important;
}

	.btn-light:hover
	{
		background-color: var(--light-hover-bg) !important;
		border-color: var(--light-hover-border) !important;
	}

.btn-dark
{
	background-color: var(--dark-bg) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text) !important;
}

	.btn-dark:hover
	{
		background-color: var(--dark-hover-bg) !important;
		border-color: var(--dark-hover-border) !important;
	}

/* bootstrap extensions */

.btn-xl
{
	padding: 1rem 2rem;
	font-size: 1.5rem;
	border-radius: 0.5rem;
}

.py-6
{
	padding-top: 4rem !important;
	padding-bottom: 4rem !important;
}

.py-7
{
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

.py-8
{
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}

.py-9
{
	padding-top: 7rem !important;
	padding-bottom: 7rem !important;
}

.py-10
{
	padding-top: 8rem !important;
	padding-bottom: 8rem !important;
}

.pt-6
{
	padding-top: 4rem !important;
}

.pt-7
{
	padding-top: 5rem !important;
}

.pt-8
{
	padding-top: 6rem !important;
}

.pt-9
{
	padding-top: 7rem !important;
}

.pt-10
{
	padding-top: 8rem !important;
}