/**
 * Site-wide chrome: top bar, header/nav, footer.
 * Loaded after Bootstrap so these rules win the cascade without !important.
 */

:root {
	--bizkaia-red: #e2321d;
	--bizkaia-black: #111111;
	--bizkaia-gray-text: #a8a8a8;
	--bizkaia-divider: rgba(255, 255, 255, 0.14);

	/* Retint Bootstrap's "primary" color to the site's red instead of its default blue. */
	--bs-primary: var(--bizkaia-red);
	--bs-primary-rgb: 226, 50, 29;
}

/* Bootstrap 5.3 sets .btn-primary/.btn-danger's colors as their own local
   custom properties (not derived from --bs-primary above), so they need
   their own override to actually change the rendered button. */
.btn-primary,
.btn-danger {
	--bs-btn-bg: var(--bizkaia-red);
	--bs-btn-border-color: var(--bizkaia-red);
	--bs-btn-hover-bg: #c02b19;
	--bs-btn-hover-border-color: #c02b19;
	--bs-btn-active-bg: #9e2314;
	--bs-btn-active-border-color: #9e2314;
	--bs-btn-disabled-bg: var(--bizkaia-red);
	--bs-btn-disabled-border-color: var(--bizkaia-red);
	--bs-btn-focus-shadow-rgb: 226, 50, 29;
}

.btn-secondary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #6b6b6b;
	--bs-btn-border-color: #6b6b6b;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #5b5b5b;
	--bs-btn-hover-border-color: #5b5b5b;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #4b4b4b;
	--bs-btn-active-border-color: #4b4b4b;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #6b6b6b;
	--bs-btn-disabled-border-color: #6b6b6b;
	--bs-btn-focus-shadow-rgb: 107, 107, 107;
}

body {
	background-color: #000;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

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

a:hover,
a:focus {
	color: var(--bizkaia-red);
}

/* Top bar
--------------------------------------------- */
.top-bar {
	background-color: var(--bizkaia-red);
	padding: 6px 20px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.top-bar a {
	color: #fff;
}

.top-bar-institution a {
	font-weight: 700;
}

.top-bar-lang ul {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-bar {
	background-color: var(--bizkaia-black);
	padding: 6px 20px;
}

.social-links {
	display: flex;
	gap: 12px;
	margin: 0;
}

.social-links a {
	color: #fff;
	font-size: 16px;
}

/* Header / nav
--------------------------------------------- */
.site-header {
	background-color: var(--bizkaia-black);
	padding: 14px 20px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-branding img {
    display: block;
    width:180px;
    height:120px; color: #fff;
    text-indent: -10000px;
}

@media all and (min-width:550px) {
    .site-branding img{
        background-position:center;
        width: 280px;
    }
}

.site-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
}

.site-title a {
	color: #fff;
}

.site-description {
	margin: 0;
	font-size: 12px;
	font-style: italic;
	color: var(--bizkaia-red);
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.main-navigation a {
	display: inline-block;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #d9d9d9;
	border-radius: 2px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-parent > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_parent > a,
.main-navigation .current_page_ancestor > a {
	background-color: #3a3a3a;
	color: #fff;
}

.menu-toggle {
	display: none;
}

@media (max-width: 767px) {
	.menu-toggle {
		display: inline-block;
		margin-top: 10px;
		background: transparent;
		border: 1px solid var(--bizkaia-divider);
		color: #fff;
		padding: 6px 12px;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.main-navigation.toggled ul {
		display: flex;
	}
}

/* Footer
--------------------------------------------- */
.site-footer {
	background-color: #000;
	border-top: 1px solid var(--bizkaia-divider);
	padding: 30px 20px;
	font-size: 13px;
	color: var(--bizkaia-gray-text);
}

.site-footer p {
	margin: 0 0 4px;
}

.site-footer a {
	color: var(--bizkaia-gray-text);
}

.site-footer__copyright a {
	color: #fff;
	text-decoration: underline;
}

.site-footer__name {
	color: #fff;
	font-weight: 700;
	margin-top: 12px !important;
}

.site-footer__legal {
	text-align: right;
}

.site-footer__legal-list {
	margin: 0;
	padding: 0;
}

.site-footer__legal-list li {
	margin-bottom: 4px;
}

@media (max-width: 991px) {
	.site-footer__legal {
		text-align: left;
		margin-top: 16px;
	}
}

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bizkaia-red);
	color: #fff;
	z-index: 100;
}

.back-to-top:hover {
	color: #fff;
	opacity: 0.85;
}

/* Single / page content + section nav
--------------------------------------------- */
.site-main {
	display: block;
	padding: 40px 0;
}

.section-nav {
	margin-bottom: 30px;
}

.section-nav__header {
	background-color: var(--bizkaia-red);
	padding: 10px 16px;
	margin-bottom: 6px;
}

.section-nav__header h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.section-nav__list {
	margin: 0;
	padding: 0;
}

.section-nav__list li {
	border-bottom: 1px solid var(--bizkaia-divider);
}

.section-nav__list a {
	display: block;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 700;
	color: #d9d9d9;
}

.section-nav__list a:hover {
	color: #fff;
}

.section-nav__list li.current_page_item > a,
.section-nav__list li.current_page_ancestor > a {
	background-color: #3a3a3a;
	color: #fff;
}

.section-nav__parent > a {

}

.section-nav__list ul {
	list-style: none;
	margin: 0 0 0 16px;
	padding: 0;
}