/*
* OVERRIDES FOR SJ HEADER/FOOTER
*/

/*
	Basics. Colors as per SJCRH style guide. "sjHeaderGray" added from Franz Amelang's info.
*/
:root {
	--sjRed:       #d11947;
	--sjDarkRed:   #8d0034;
	--sjLightGray: #dfe1df;
	--sjGray:      #c7c9c8;
	--sjDarkGray:  #474c55;
	--sjHeaderGray: #f6f6f6;
}

/* Systemic settings */
body {
	--headerHeight: 40px;
}

* {
	box-sizing: border-box;
}

/* Common to header and footer */
.sj-header, .sj-footer {
	display: flex;
	align-items: center;
	padding: 0 30px;
}

/* Header */
.sj-header {
	/*background-color: #f6f6f6;*/
	background-color: var(--sjHeaderGray);
	height: var(--headerHeight);
	justify-content: center;
}

.sj-header a {
	display: block;
}

.sj-header .sj-logo {
	width: 82.5px;
	height: 24px;
}

/* Footer */
.sj-footer {
	/*background-color: #474c55;*/
	background-color: var(--sjDarkGray);
	color: white;
	flex-direction: column;
	justify-content: center;
	font-size: 12px;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
}

.sj-footer p, ul {
	text-align: center;
}

.sj-footer p {
	margin: 0;
}

.sj-footer ul {
	display: flex;
	list-style: none;
	gap: .75rem 1.5rem;
	padding: 0;
	margin: 1rem 0 0;
	flex-wrap: wrap;
	justify-content: center;
}

.sj-footer a {
	color: white;
}

/* Modifications due to media size */
@media screen and (min-width: 600px) {
	body {
		--headerHeight: 50px;
	}
	.sj-header {
		justify-content: initial;
	}
	.sj-header .sj-logo {
		width: 103px;
		height: 30px;
	}
}