/* AFENET additions on top of the Builtup theme (custom.css). Uses the theme's colour variables. */

/* The brand colours come from the AFENET logo (set in custom.css :root).
   On dark backgrounds the logo blue is too dark to read, so a lighter tint is used there. */
:root {
	--accent-light-color: #A9BEF7;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus,
.main-menu ul li a.nav-link.active,
.hero .section-title h3,
.cta-box .section-title h3,
.page-header-box ol li.breadcrumb-item.active,
.post-single-meta ol li i,
.footer-links h3,
.footer-links ul li:hover a {
	color: var(--accent-light-color);
}

.slicknav_nav li a.nav-link.active {
	color: var(--white-color);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Icons that sit on dark panels are shown in white */
.main-footer .icon-box img,
.footer-links ul li:before,
.contact-sidebar .contact-info .icon-box img {
	filter: brightness(0) invert(1);
}

.footer-copyright .footer-social-links ul li a {
	color: var(--white-color);
	border-color: var(--accent-light-color);
}

.footer-copyright .footer-social-links ul li a:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
}

/* Buttons on dark backgrounds get a light border so they stand out */
.cta-box .btn-default,
.hero .btn-default:not(.btn-highlighted) {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.navbar-brand img {
	max-height: 64px;
	width: auto;
}

.footer-logo img {
	max-width: 230px;
	height: auto;
}

#loading-icon img {
	width: 20px;
}

/* Event cards */
.project-item .project-image {
	position: relative;
}

.event-date-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	background: var(--accent-color);
	color: var(--white-color);
	font-family: var(--accent-font);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.1;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
}

.event-date-badge span {
	display: block;
	font-size: 26px;
}

.event-meta {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.event-meta li {
	margin-bottom: 6px;
}

.event-meta i {
	color: var(--accent-color);
	width: 18px;
	margin-right: 4px;
}

.post-item-meta {
	color: var(--text-color);
	font-size: 14px;
	margin-bottom: 10px;
}

.post-item-meta i {
	color: var(--accent-color);
	margin-right: 4px;
}

/* Event filter tabs */
.event-filter {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 50px;
}

.event-filter a.active {
	background: var(--primary-color);
	color: var(--white-color);
}

/* Event details box */
.event-info-box {
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
	margin-bottom: 40px;
}

.event-info-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 50px;
}

.event-info-box li {
	font-family: var(--accent-font);
	color: var(--primary-color);
	font-weight: 600;
}

.event-info-box li span {
	display: block;
	font-family: var(--default-font);
	font-weight: 400;
	color: var(--text-color);
	font-size: 14px;
	text-transform: uppercase;
}

.event-info-box .btn-default {
	margin-top: 25px;
}

/* What we do / focus areas */
.what-we-do-list {
	padding: 100px 0 70px;
}

.focus-area-item {
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 18px 20px;
	margin-bottom: 20px;
	height: calc(100% - 20px);
	display: flex;
	gap: 14px;
	align-items: flex-start;
	transition: all 0.3s ease-in-out;
}

.focus-area-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(18, 34, 59, 0.08);
}

.focus-area-number {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-family: var(--accent-font);
	font-weight: 800;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.focus-area-item h3 {
	font-size: 16px;
	line-height: 1.45em;
	align-self: center;
	margin: 0;
	text-transform: none;
}

/* Who we are paragraphs */
.about-us-content .about-us-body p {
	margin-bottom: 20px;
	text-align: justify;
}

/* Team */
.team-category-title {
	margin: 20px 0 40px;
	text-align: center;
}

.team-content h3 a {
	color: inherit;
}

.team-single-image img {
	width: 100%;
	border-radius: 30px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.team-single-content h2 {
	font-size: 40px;
	margin-bottom: 5px;
}

.team-single-content .team-position {
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 25px;
}

.team-single-content .team-social-icon ul {
	justify-content: flex-start;
}

/* Generic */
.empty-state {
	text-align: center;
	padding: 40px 0 80px;
	color: var(--text-color);
}

.page-single-post .post-entry img {
	max-width: 100%;
	height: auto;
	border-radius: 20px;
	margin: 20px 0;
}

.google-map-iframe iframe {
	width: 100%;
}

@media only screen and (max-width: 767px) {
	.focus-area-item {
		padding: 20px;
	}

	.team-single-content {
		margin-top: 30px;
	}
}

/* ---------- Compact cards ---------- */

/* Team: 4 per row, centred text, social icons appear over the photo on hover */
.team-member-item {
	border-radius: 24px;
	margin-bottom: 24px;
	height: calc(100% - 24px);
}

.team-member-item .team-image {
	position: relative;
	overflow: hidden;
}

.team-member-item .team-image figure,
.team-member-item .team-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px 24px 0 0;
}

.team-member-item .team-body {
	padding: 16px 14px 18px;
	text-align: center;
}

.team-member-item .team-content {
	margin: 0;
}

.team-member-item .team-content h3 {
	font-size: 18px;
	margin-bottom: 4px;
}

.team-member-item .team-content p {
	font-size: 14px;
}

.team-social-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.3s ease-in-out;
}

.team-member-item:hover .team-social-overlay,
.team-member-item:focus-within .team-social-overlay {
	opacity: 1;
	transform: none;
}

.team-social-overlay ul {
	display: flex;
	gap: 8px;
}

.team-social-overlay ul li {
	margin: 0;
}

.team-social-overlay ul li a {
	background: var(--white-color);
	border-color: var(--white-color);
	color: var(--primary-color);
}

.team-social-overlay ul li a:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* Touch screens have no hover, so keep the icons visible there */
@media (hover: none) {
	.team-social-overlay {
		opacity: 1;
		transform: none;
	}
}

/* Statistics: smaller, all the same height */
.what-we-do {
	padding: 60px 0;
}

.company-counter-item {
	padding: 24px 16px;
	border-radius: 24px;
	height: calc(100% - 20px);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.company-counter-item .company-counter-content h3 {
	font-size: 38px;
	margin-bottom: 6px;
}

.company-counter-item .company-counter-content p {
	font-size: 14px;
	line-height: 1.4em;
}

/* Contact page info boxes */
.contact-info-item {
	border-radius: 24px;
	padding: 22px 24px;
	margin-bottom: 24px;
	height: calc(100% - 24px);
}

.contact-info-item .icon-box {
	margin-bottom: 14px;
}

.contact-info-item .icon-box img {
	max-width: 36px;
}

.contact-info-body h3 {
	font-size: 19px;
	margin-bottom: 8px;
}

/* Event cards and event page photo: 4:5 */
.project-image,
.project-image img,
.project-item .project-image a::before {
	border-radius: 24px;
}

.project-image img {
	aspect-ratio: 4 / 5;
}

.project-body {
	left: 24px;
	right: 24px;
}

.project-body-title h3 {
	font-size: 20px;
}

.event-date-badge {
	top: 16px;
	left: 16px;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 12px;
}

.event-date-badge span {
	font-size: 22px;
}

.event-cover {
	margin-bottom: 30px;
}

.event-cover figure,
.event-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
}

.event-info-box {
	border-radius: 24px;
	padding: 24px;
}

/* News cards */
.blog-item {
	border-radius: 24px;
}

.post-featured-image img,
.post-featured-image figure {
	border-radius: 24px 24px 0 0;
}

.post-item-content {
	padding: 20px 22px 24px;
}

.post-item-body {
	margin-bottom: 14px;
}

.post-item-body h2 {
	font-size: 19px;
	line-height: 1.35em;
}

/* Privacy policy / terms pages */
.legal-updated {
	color: var(--text-color);
	font-size: 14px;
	margin-bottom: 24px;
}

.legal-content .post-entry h2 {
	font-size: 26px;
	margin: 30px 0 12px;
}

/* Keep "Terms of Use" as written (the theme capitalises every word in footer links) */
.footer-links ul.legal-links li {
	text-transform: none;
}

/* Contact boxes (home page and Contact Us page): the image always fills the same 5:7 space,
   so uploading a different picture doesn't change the height of the box */
.contact-sidebar {
	overflow: hidden;
}

.contact-sidebar .contact-info-image figure {
	margin: 0;
}

.contact-sidebar .contact-info-image img,
.contact-sidebar.page-contact-sidebar .contact-info-image img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	object-position: center top;
	border-radius: 20px 20px 0 0;
}