/*
================================================
Congress Theme Color Overrides
================================================
This file contains ONLY color and congress-specific customizations.
All structural styles should be in style.css.

HOW TO USE THIS COLOR SYSTEM:
1. Define base colors as RGB values in :root
2. Map them to semantic variables (--primary-color, etc.)
3. ALL rules below ONLY use semantic variables
4. To change the whole color scheme: just edit :root

To swap colors for a new congress:
- Change the base color RGB values, OR
- Remap semantic variables to different base colors
================================================
*/

/* ===== PRIMARY COLOR DEFINITIONS ===== */
:root {
	/* Base colors - KL 2027 congress colors */
	--color-navy: 62, 66, 140;         /* #3E428C */
	--color-blue: 59, 130, 191;        /* #3B82BF */
	--color-dark: 2, 28, 38;           /* #021C26 */
	--color-gold: 217, 152, 74;        /* #D9984A */

	/* Semantic color mappings — GOLD variant (gold top bar) */
	--primary-color: rgb(var(--color-gold));
	--primary-color-rgb: var(--color-gold);
	--primary-hover: #c4873f;

	--secondary-color: rgb(var(--color-navy));
	--secondary-color-rgb: var(--color-navy);

	--accent-color: rgb(var(--color-blue));
	--accent-color-rgb: var(--color-blue);

	--dark-color: rgb(var(--color-dark));
	--dark-color-rgb: var(--color-dark);

	--header-bg: var(--primary-color);
	--header-text: #fff;

	--banner-bg-rgb: var(--color-navy);
	--banner-text: var(--primary-color);

	--sidebar-bg: var(--accent-color);

	--caption-bg-rgb: var(--color-blue);

	--border-accent: var(--accent-color);
}

/* ===== HEADER & FOOTER ===== */
.header-top-bar,
footer.footer,
.footer-container {
	background: var(--header-bg);
	color: var(--header-text);
}

.header-top-bar a,
.header-top-bar a:visited,
footer.footer a,
footer.footer a:visited {
	color: #fff !important;
}

.header-top-bar a:hover,
footer.footer a:hover {
	color: #fff !important;
}

footer.footer ul a::after,
.header-top-bar-nav a:after {
	color: var(--secondary-color);
}

footer.footer .copy {
	color: var(--secondary-color);
}

/* ===== NAVIGATION ===== */

@media only screen and (min-width: 992px) {
	#masthead li.nav-item.dropdown {
		position: relative;
		overflow: visible;
	}
	/* Dropdown positioning handled by JS (dropdown-position.js) */
	#masthead .dropdown-menu {
		max-width: calc(100vw - 30px);
		white-space: normal;
	}
}

a.nav-link-regular {
	color: var(--secondary-color) !important;
}

a.nav-link-regular:hover,
.navbar a.nav-link:hover {
	color: var(--primary-color) !important;
}

.nav-link-spotlight {
	border-bottom-color: var(--secondary-color);
}

#masthead .dropdown-menu .dropdown-item {
	color: var(--primary-color) !important;
}

#masthead .dropdown-menu .dropdown-item:hover {
	color: var(--accent-color) !important;
}

#masthead .dropdown-menu a::after {
	color: var(--secondary-color);
}

/* Mobile Navigation */
@media only screen and (max-width: 992px) {
	li.nav-item {
		border-bottom: 1px solid var(--border-accent) !important;
	}
	li.nav-item:first-child {
		border-top: 1px solid var(--border-accent) !important;
	}
	.dropdown-menu .dropdown-item:active {
		background-color: rgba(var(--secondary-color-rgb), 0.2);
	}
	nav.navbar .navbar-collapse {
		background: #fff;
		padding: 0 15px;
	}
}

/* ===== GENERAL LINKS & BUTTONS ===== */
a,
a:visited {
	color: var(--secondary-color) !important;
}

a:hover,
a:focus,
a:active {
	color: var(--primary-color) !important;
}

.entry-content a {
	color: var(--primary-color);
	font-weight: bold;
	text-decoration: none;
}

.btn,
button.btn,
input[type="button"].btn,
input[type="reset"].btn,
input[type="submit"].btn {
	background-color: var(--primary-color);
}

.btn.btn-outline,
button.btn.btn-outline,
input[type="button"].btn.btn-outline,
input[type="reset"].btn.btn-outline,
input[type="submit"].btn.btn-outline {
	background-color: transparent;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}

/* ===== BANNERS & PANELS ===== */
.banner .banner-title {
	background: rgba(var(--banner-bg-rgb), 0.8);
}

.banner .banner-title.has-ribbon::after {
	background: url(inc/fw_assets/images/ribbon-pattern.png) 0 0 repeat rgba(var(--banner-bg-rgb), 0.8);
}

.banner .banner-title h1 {
	color: var(--banner-text);
}

.banner .banner-title .pre {
	color: white;
}

.banner .panel-login .btn:last-child {
	background-color: var(--primary-color);
	color: white !important;
	font-weight: 500;
}

/* ===== SIDEBAR ===== */
.side-links header {
	background: var(--primary-color);
}

.side-links ul li a {
	color: var(--secondary-color);
	border-bottom-color: rgba(var(--primary-color-rgb), 0.33);
}

.side-links ul li a.active {
	background-color: rgba(var(--primary-color-rgb), 0.45);
	color: white !important;
}

.sidebar-header {
	background-color: var(--sidebar-bg);
}

/* ===== SEARCH ===== */
.search-form {
	border-bottom: 1px solid var(--primary-color);
}

.search-form .search-submit {
	background-color: var(--secondary-color);
}

/* ===== CONTENT ELEMENTS ===== */
#content h1 {
	color: var(--secondary-color);
}

#content h2 {
	color: rgba(var(--primary-color-rgb), 0.85);
}

#content figure figcaption h1 {
	color: white;
}

.bg-blue-border-top {
	border-top-color: var(--dark-color);
}

/* ===== FIGURE CAPTIONS ===== */
figure figcaption.blue {
	background: rgba(var(--banner-bg-rgb), 0.81);
}

figure figcaption.blue.has-ribbon::after {
	background: url(inc/fw_assets/images/ribbon-pattern.png) 0 0 repeat rgba(var(--banner-bg-rgb), 0.81);
}

figure figcaption.green {
	background-color: rgba(var(--caption-bg-rgb), 0.9);
}

figure figcaption.green.has-ribbon::after {
	background-color: rgba(var(--caption-bg-rgb), 0.9);
}

/* ===== FOOTERLINKS ===== */
section.footerlinks ul li a {
	color: var(--secondary-color);
}

section.footerlinks ul li a::after {
	color: var(--accent-color);
}

.footerlinks h3 {
	color: var(--primary-color);
	border-bottom: 2px solid var(--secondary-color);
	padding-bottom: 8px;
}

/* ===== SOCIAL MEDIA ===== */
.social a .fa {
	color: var(--primary-color);
}

/* ===== HOMEPAGE SPECIFIC ===== */
.home .entry-content h3 {
	color: var(--secondary-color);
}

.home h4 {
	color: var(--dark-color);
	font-weight: bold;
	border-bottom: 2px dotted var(--dark-color);
}

.home .home-topic-letter {
	background-color: var(--secondary-color);
	color: var(--accent-color);
	border-radius: 50%;
	padding: 2px 6px;
}

.homepage-topic-header {
	color: var(--accent-color);
	font-weight: bold;
	border-bottom: 2px dotted var(--accent-color);
	margin-bottom: 10px;
	padding-bottom: 5px;
}

.homepage-topic-title {
	color: var(--primary-color) !important;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 0.5em;
}

/* ===== CONGRESS SESSIONS ===== */
.congress-session-organisation {
	color: var(--accent-color);
}

/* ===== NEWS ===== */
.side-news a span.title {
	color: var(--secondary-color);
}

.news .btn {
	background-color: var(--secondary-color);
	color: #fff !important;
	font-weight: 500;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
.navbar-brand {
	padding: 0 !important;
	margin-top: -64px;
}

.navbar-logo-img {
	max-height: 100px;
	margin-top: 75px;
}

@media only screen and (max-width: 1024px) {
	.navbar-brand {
		margin-top: -39px;
	}
	.navbar-toggler {
		margin-top: 0.5em;
	}
}

@media only screen and (max-width: 768px) {
	.navbar-brand {
		margin-top: 0;
		padding: 5px 0 !important;
	}
	.navbar-logo-img {
		max-height: 60px;
		margin-top: 0;
	}
	nav.navbar > .container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.navbar-brand {
		flex: 0 1 auto;
	}
	.navbar-toggler {
		flex-shrink: 0;
		margin-left: auto;
	}
	nav.navbar .navbar-collapse {
		flex-basis: 100%;
	}
	#masthead {
		height: auto;
		margin-bottom: 10px;
		position: relative;
		z-index: 10;
		overflow: visible;
	}
	section.footerlinks figure {
		margin-bottom: 0;
	}
	section.footerlinks figure figcaption {
		position: static;
		transform: none;
		padding-top: 20px;
	}
	section.footerlinks h3 {
		margin-top: 25px;
	}
}

/* Reduce footerlinks figure spacing when image is hidden */
section.footerlinks figure img[style*="display:none"] + figcaption {
	position: relative;
	padding-top: 20px;
}

section.footerlinks figure img[style*="display:none"] + figcaption.has-ribbon::after {
	display: none;
}

/* ===== NAVIGATION EXTRAS ===== */

.navbar-light .navbar-nav .show > .nav-link:hover {
	color: var(--primary-color) !important;
}

@media only screen and (max-width: 1024px) {
	.dropdown-menu a.dropdown-item:hover,
	.dropdown-item:focus .dropdown-item {
		color: var(--accent-color) !important;
	}
	.dropdown-menu .dropdown-item:active {
		background-color: rgba(var(--secondary-color-rgb), 0.2);
	}
}

/* ===== BANNER EXTRAS ===== */

.banner .banner-title h2 {
	color: color-mix(in srgb, var(--secondary-color) 20%, white);
}

.countdown-message {
	background-color: var(--accent-color) !important;
}

/* ===== CONTENT EXTRAS ===== */

.entry-content h3 {
	color: var(--primary-color);
}

h2::after {
	background: var(--secondary-color) !important;
	height: 4px;
}

/* ===== EVENTS & WEBINARS COLORS ===== */

.content-info.webinars .info .date span {
	color: var(--primary-color);
}

.content-info .info div .readmore,
.content-info .info p .readmore {
	color: var(--accent-color);
}

.events a {
	color: var(--secondary-color);
	text-decoration: none;
}

/* ===== TABS COLORS ===== */

.faq-accordion .ccard .fa-angle-down {
	color: var(--secondary-color);
}

.tab-bar .tab-item.active:before {
	background: var(--secondary-color);
}

.tabs-wr .tabs li.active:before {
	background: var(--secondary-color);
}

@media only screen and (max-width: 620px) {
	.tab-bar .tab-item span:after {
		color: var(--secondary-color);
	}
}

/* ===== CONGRESS SESSIONS COLORS ===== */

.speakers__name {
	color: var(--dark-color);
}

.congress-session-programme table td {
	border-top-color: rgba(var(--primary-color-rgb), 0.4);
}

/* ===== WORDPRESS BLOCKS COLORS ===== */

.wp-block-buttons .wp-block-button__link:hover {
	color: var(--accent-color) !important;
	background-color: var(--secondary-color) !important;
}

hr.wp-block-seperator {
	border-top: 1px solid var(--secondary-color) !important;
}

figure.wp-block-table.is-style-stripes table {
	border-color: rgba(var(--primary-color-rgb), 0.2) !important;
}

figure.wp-block-table.is-style-stripes table tr {
	border-color: var(--secondary-color);
}

/* ===== FOOTERLINKS COLORS ===== */

.footerlinks figure figcaption.blue {
	background: rgba(var(--caption-bg-rgb), 0.9);
}

.footerlinks figure figcaption.blue.has-ribbon::after {
	background-color: rgba(var(--caption-bg-rgb), 1);
}

section.footerlinks .blue a,
section.footerlinks .blue a:hover,
section.footerlinks .blue a:visited {
	color: #fff !important;
	font-size: inherit;
}