/*
================================================
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 (e.g., --color-light-blue: 113, 158, 217)
2. Use semantic mappings (e.g., --primary-color) for flexibility
3. Access colors in two ways:
   - Full color: rgb(var(--color-light-blue)) or var(--primary-color)
   - With alpha: rgba(var(--color-light-blue), 0.8) or rgba(var(--primary-color-rgb), 0.8)

To change colors for a new congress:
- Option 1: Update the RGB values in the base colors section
- Option 2: Remap the semantic colors to different base colors
- Option 3: Mix both approaches as needed

Example: To make primary color blue instead of purple:
  --primary-color: rgb(var(--color-blue));
  --primary-color-rgb: var(--color-blue);
================================================
*/

/* ===== PRIMARY COLOR DEFINITIONS ===== */
:root {
    /* Base colors - Define your colors here */
    --color-light-blue: 113, 158, 217;
    /* #719ED9 */
    --color-dark-blue: 2, 62, 115;
    /* #023E73 */
    --color-teal: 13, 96, 115;
    /* #0D6073 */
    --color-bright-cyan: 50, 200, 217;
    /* #32C8D9 */

    /* Additional supporting colors */
    --color-white: 255, 255, 255;
    /* #FFFFFF */
    --color-light-cyan: 209, 242, 247;
    /* #D1F2F7 */
    --color-dark-cyan: 8, 79, 89;
    /* #084F59 */

    /* Semantic color mappings - Change these to redefine which colors are used for what */
    --primary-color: rgb(var(--color-dark-blue));
    --primary-color-rgb: var(--color-dark-blue);
    --primary-hover: #01315A;

    --secondary-color: rgb(var(--color-bright-cyan));
    --secondary-color-rgb: var(--color-bright-cyan);

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

    --header-bg: rgb(var(--color-teal));
    --header-text: rgb(var(--color-light-cyan));
}

/* ===== 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: var(--header-text) !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: rgb(var(--color-dark-cyan));
}

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

/* ===== NAVIGATION ===== */
a.nav-link-regular {
    color: var(--accent-color) !important;
}

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

.nav-link-spotlight {
    border-bottom-color: rgb(var(--color-dark-blue));
}

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

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

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

/* Mobile Navigation */
@media only screen and (max-width: 992px) {
    li.nav-item {
        border-bottom: 1px solid rgb(var(--color-light-blue)) !important;
    }

    li.nav-item:first-child {
        border-top: 1px solid rgb(var(--color-light-blue)) !important;
    }

    .dropdown-menu .dropdown-item:active {
        background-color: rgb(var(--color-light-cyan));
    }
}

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

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

.entry-content a {
    color: rgb(var(--color-dark-blue));
    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);
    color: white !important;
}

.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) !important;
}

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

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

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

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

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

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

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

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

.sidebar-header {
    background-color: rgb(var(--color-bright-cyan));
}

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

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

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

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

#content figure figcaption h1 {
    color: white;
}

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

/* ===== FIGURE CAPTIONS ===== */
figure figcaption.blue {
    background: rgba(var(--color-bright-cyan), 0.81);
}

figure figcaption.blue.has-ribbon::after {
    background-color: rgba(var(--color-bright-cyan), 0.81);
}

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

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

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

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

.footerlinks h3 {
    color: var(--primary-color);
    border-bottom-color: var(--secondary-color);
}

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

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

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

.home .home-topic-letter {
    background-color: rgb(var(--color-light-blue));
    color: rgb(var(--color-light-cyan));
    border-radius: 50%;
    padding: 2px 6px;
}

.homepage-topic-header {
    color: rgb(var(--color-bright-cyan));
    font-weight: bold;
    border-bottom: 2px dotted rgb(var(--color-bright-cyan));
    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: rgb(var(--color-teal));
}

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

.news .btn {
    background-color: var(--secondary-color);
    color: var(--primary-color) !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;
    }
}

.navbar-logo-site-img {
    max-height: 100px;
        margin-top: 75px;
    height: 50%;

            max-height: 50px;
}

.banner .banner-title .pre {
    font-size: 3rem;
}

.content-img.header img {
  max-height: 300px;
  width: 100%;
}