/* Template specific overrides on top of Bootstrap 5 */

/* Club colors: red and black */
:root {
	--stv-red: #c8102e;
	--stv-black: #111111;
	--bs-primary: var(--stv-red);
	--bs-primary-rgb: 200, 16, 46;
	--bs-link-color: var(--stv-red);
	--bs-link-color-rgb: 200, 16, 46;
	--bs-link-hover-color: #9e0d24;
	--bs-link-hover-color-rgb: 158, 13, 36;
}

.btn-primary {
	--bs-btn-bg: var(--stv-red);
	--bs-btn-border-color: var(--stv-red);
	--bs-btn-hover-bg: #9e0d24;
	--bs-btn-hover-border-color: #9e0d24;
	--bs-btn-active-bg: #9e0d24;
	--bs-btn-active-border-color: #9e0d24;
}

.site-header {
	background-color: var(--stv-red);
	border-bottom: 2px solid var(--stv-black);
}

/* Top navbar menu */
.site-navbar {
	background-color: var(--stv-black);
	border-bottom: 4px solid var(--stv-red);
	padding: 0;
}

#nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

#nav a {
	display: block;
	padding: .85rem 1rem;
	border-bottom: 4px solid transparent;
	margin-bottom: -4px;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s, border-color .15s, background-color .15s;
}

#nav a:hover,
#nav a:focus-visible {
	background-color: rgba(255, 255, 255, .08);
	color: #ff4d62;
}

#nav li.menu-current > a,
#nav li.menu-parent > a {
	border-bottom-color: var(--stv-red);
	background-color: rgba(200, 16, 46, .35);
	color: #fff;
}

@media (max-width: 767.98px) {
	#nav ul {
		flex-direction: column;
	}

	#nav a {
		border-bottom: 0;
		border-left: 4px solid transparent;
		margin-bottom: 0;
	}

	#nav li.menu-current > a,
	#nav li.menu-parent > a {
		border-left-color: var(--stv-red);
	}
}


/* Full-screen background image (same as yaml_and_jquery) */
body {
	background: url('../background.jpg') center / cover fixed no-repeat;
}

.content-wrapper {
	background-color: rgba(255, 255, 255, .92);
}

/* Footer */
.site-footer {
	background-color: var(--stv-black);
	border-top: 4px solid var(--stv-red);
	color: #adb5bd;
	font-size: .9rem;
}

.site-footer strong {
	color: #fff;
}

.site-footer a {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #ff4d62;
	text-decoration: underline;
}

/* Mobile safeguards for editor content */
#main section img {
	max-width: 100%;
	height: auto;
}

#main section {
	overflow-wrap: anywhere;
}

#main section iframe,
#main section video {
	max-width: 100%;
}

@media (max-width: 767.98px) {
	#main section table {
		display: block;
		overflow-x: auto;
	}
}

/* Calendar iframe: fixed height instead of a square ratio */
.calendar-frame iframe {
	width: 100%;
	height: 600px;
	border: 0;
}

/* Clear heading hierarchy: page title (h1) > content headings */
#main section h2 { font-size: 1.5rem; margin-top: 1.5rem; }
#main section h3 { font-size: 1.25rem; }
#main section h4 { font-size: 1.1rem; }

/* Tables from the WYSIWYG editor come without classes */
#main section table {
	border-collapse: collapse;
	margin-bottom: 1rem;
}

#main section table td,
#main section table th {
	padding: .5rem .75rem;
	vertical-align: top;
	border-bottom: 1px solid #dee2e6;
}

#main section table th {
	text-align: left;
	border-bottom: 2px solid var(--stv-red);
}

#main section table tbody tr:hover {
	background-color: rgba(200, 16, 46, .06);
}