@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;700&family=Nunito+Sans:wght@300;400;700&display=swap');

:root {
	--primary-red: #bb3931;
	--text-dark: #333;
	--text-light: #fff;
	--bg-light: #f9f9f9;
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--text-dark);
	margin: 0;
	padding: 0;
}

/* Container width */
.le-con {
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 15px;
}

/* Header */
.site-header {
	background-color: var(--primary-red);
	height: 80px;
	box-sizing: border-box;
	color: var(--text-light);
	padding-top: 10px;
}

.logo {
	color: var(--text-light);
	text-decoration: none;
	display: inline-block;
}

.nav-col {
	text-align: right;
	padding-top: 20px;
}

.nav-link {
	color: var(--text-light);
	text-decoration: none;
	font-size: 14px;
	text-transform: uppercase;
}

/* Footer */
.site-footer {
	background-color: var(--primary-red);
	color: var(--text-light);
	height: 207px;
	box-sizing: border-box;
	padding-top: 20px;
	margin-top: 40px;
	font-family: 'Nunito Sans', sans-serif;
}

.footer-top {
	margin-bottom: 25px;
}

.footer-logos {
	display: inline-flex;
	align-items: center;
	background: #fff;
	color: #333;
	padding: 2px 6px;
}

.footer-address {
	text-align: right;
}

.address-text {
	font-size: 15px;
	margin-top: 20px;
	line-height: 1.4;
}

.footer-bottom {
	border-top: 2px solid rgba(255, 255, 255, 0.5);
	padding-top: 20px;
	font-size: 17px;
}

.footer-bottom a {
	color: var(--text-light);
	text-decoration: none;
	margin-right: 30px;
}

/* Main Content */
.main-wrapper {
	min-height: 60vh;
}

/* Home Page */
.home-page {
	padding-top: 40px;
}

.section-title {
	font-weight: 300;
	font-size: 26px;
	color: #333;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.database-links {
	list-style: none;
	padding: 0;
	margin: 0 0 60px 0;
}

.database-links li {
	margin-bottom: 8px;
}

.database-links li {
	color: var(--primary-red);
	text-decoration: none;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 300;
}

.search-bar {
	background-color: #f2f2f2;
	padding: 15px 20px;
	margin-bottom: 40px;
	color: #999;
	font-size: 14px;
	font-weight: 400;
	border: none;
	width: 100%;
	max-width: 652px;
	box-sizing: border-box;
	outline: none;
	font-family: 'Inter', sans-serif;
}

/* Autocomplete Suggestions */
.fuzzy_search_suggestions .autocomplete {
	border: 1px solid #eaeaea;
	border-top: none;
	font-size: 14px;
	background-color: #fff;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	color: #666;
	z-index: 9999;
}

.fuzzy_search_suggestions .autocomplete div {
	padding: 12px 20px;
	cursor: pointer;
	border-bottom: 1px solid #f9f9f9;
}
.fuzzy_search_suggestions .autocomplete div:last-child {
	border-bottom: none;
}

.fuzzy_search_suggestions .autocomplete .selected {
	background-color: #f2f2f2;
	color: var(--primary-red);
}

/* Stats Boxes */
.right-sidebar {
	width: 213px;
	float: right;
	background-color: var(--primary-red);
	padding: 11px 8px;
	box-sizing: border-box;
}

.stats-box {
	background-color: #fff;
	border-radius: 8px;
	text-align: center;
	padding: 22px 0 14px 0;
	margin-bottom: 5px;
}

.stats-number {
	color: var(--primary-red);
	font-size: 56px;
	font-weight: 300;
	line-height: 1;
	margin-bottom: 5px;
}

.stats-label {
	color: var(--primary-red);
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 300;
	white-space: nowrap;
}

.stats-footer {
	background-color: transparent;
	color: #fff;
	text-align: center;
	padding: 15px 5px 5px 5px;
	font-size: 15px;
	font-weight: 300;
}

@media (max-width: 768px) {
	.right-sidebar {
		width: 140px;
		padding: 8px;
	}
	.stats-box {
		padding: 15px 5px;
		margin-bottom: 8px;
		border-radius: 5px;
	}
	.stats-number {
		font-size: 32px;
	}
	.stats-label {
		font-size: 10px;
	}
	.stats-footer {
		font-size: 10px;
		padding: 10px 2px 2px 2px;
	}
}

/* Table */
.data-table-wrapper {
	overflow-x: auto;
	margin-bottom: 20px;
}

.data-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 8px;
	background-color: #eaeaea;
}

.data-table th {
	background-color: var(--primary-red);
	color: #fff;
	padding: 15px 10px;
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	height: 56px;
	vertical-align: middle;
}

.data-table td {
	background-color: #fff;
	padding: 15px 10px;
	font-size: 11px;
	text-align: center;
	border: none;
	text-transform: uppercase;
	font-weight: 400;
	color: #000;
	height: 56px;
	vertical-align: middle;
}

.data-table td.highlight {
	background-color: #d08884;
	color: #fff;
	border-color: #d08884;
}

@media (max-width: 768px) {
	.data-table {
		border-spacing: 1px;
	}
}

/* Login Page */
.login-page-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 70vh;
	padding: 40px 15px;
}

.login-box {
	background-color: var(--primary-red);
	padding: 27px 95px 0 95px;
	width: 100%;
	max-width: 691px;
	color: #fff;
}

.login-box input[type="text"],
.login-box input[type="password"] {
	width: 100%;
	padding: 12px 15px;
	margin-bottom: 15px;
	border: none;
	font-size: 14px;
	color: var(--primary-red);
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
}

.login-box input::placeholder {
	color: var(--primary-red);
	opacity: 0.8;
}

.login-btn-container {
	text-align: right;
	margin-bottom: 30px;
}

.login-btn {
	background-color: #fff;
	color: var(--primary-red);
	border: none;
	padding: 12px 45px;
	font-size: 15px;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
}

.login-text {
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 20px;
	font-weight: 300;
}

/* Single Page Styles */
.single-page {
	padding-top: 40px;
	padding-bottom: 60px;
}

.single-page-title {
	font-size: 36px;
	font-weight: 100;
	text-transform: uppercase;
	margin-bottom: 30px;
	letter-spacing: -0.5px;
}

.single-section-title {
	font-size: 24px;
	font-weight: 300;
	margin-top: 40px;
	margin-bottom: 20px;
	color: #333;
}

.cf-list {
	margin-bottom: 0;
}

.cf-item {
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 1.4;
}

.cf-label {
	font-weight: 600;
	color: #000;
	display: block;
}

.cf-value {
	font-weight: 300;
	color: #666;
}
.cf-value a {
	color: #666;
	text-decoration: none;
}

.profilo-text {
	font-size: 14px;
	line-height: 1.6;
	font-weight: 300;
	color: #333;
	margin-bottom: 30px;
}

.red-box {
	display: block;
	background-color: var(--primary-red);
	color: #fff;
	text-align: center;
	padding: 15px 10px;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s;
	margin-bottom: 0;
}
.red-box:hover {
	color: #fff;
	opacity: 0.9;
}

.red-box .role {
	display: block;
	font-size: 10px;
	font-weight: 300;
	margin-bottom: 4px;
	text-transform: none;
}

.red-box .name {
	display: block;
	font-weight: 600;
}

.simple-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.simple-list li {
	margin-bottom: 8px;
}
.simple-list a {
	color: #666;
	font-size: 14px;
	font-weight: 300;
	text-decoration: none;
}

.albergo-meta {
	font-size: 14px;
	color: #666;
	line-height: 1.5;
	font-weight: 300;
	margin-top: 15px;
}

.external-card {
	display: block;
	text-decoration: none;
}
.external-card .thumb {
	background-color: #ccc;
	height: 160px;
	margin-bottom: 10px;
	background-size: cover;
	background-position: center;
}
.external-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.external-card .name {
	font-size: 14px;
	color: #666;
	font-weight: 300;
}

.featured-image-container {
	background-color: #eaeaea;
	text-align: center;
	color: #999;
	font-weight: 300;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 350px;
	margin-bottom: 10px;
}
.featured-image-container img {
	width: 100%;
	height: auto;
	display: block;
}

.video-desc {
	font-size: 11px;
	color: #666;
	font-weight: 300;
}

.mobile-featured-image {
	display: none;
}

.cards-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

.cards-container > .red-box,
.cards-container > .albergo-card,
.cards-container > .external-card {
	flex: 0 0 calc(33.333% - 14px);
	max-width: 280px;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.cards-container > .red-box,
	.cards-container > .albergo-card,
	.cards-container > .external-card {
		flex: 0 0 calc(50% - 10px);
	}
	.mobile-featured-image {
		display: block;
		margin: 20px 0;
	}
	.desktop-featured-image {
		display: none;
	}
}