/* Custom Color Palette Implementation */
/* Dark to Light: #141d4fff, #2f3a80ff, #5867c3ff, #d5daf4ff */

/* Header Background */
#header {
    background-color: #141d4fff !important;
}

#header:after {
    background-image: linear-gradient(45deg, #2f3a80ff, #5867c3ff) !important;
}

/* Header Text */
#header h1 {
    color: #d5daf4ff !important;
}

#header p {
    color: #d5daf4ff !important;
}

/* Header Icon */
#header .icon.solid.major {
    color: #5867c3ff !important;
}

/* Navigation Buttons */
#header .button {
    background-color: #2f3a80ff !important;
    color: #d5daf4ff !important;
    border-color: #5867c3ff !important;
}

#header .button:hover {
    background-color: #5867c3ff !important;
    color: #d5daf4ff !important;
}

/* Main Sections - Style 1 (Research, Team) */
.main.style1 {
    background-color: #d5daf4ff !important;
    color: #141d4fff !important;
}

.main.style1 h2,
.main.style1 h3 {
    color: #2f3a80ff !important;
}

.main.style1 p {
    color: #141d4fff !important;
}

/* Main Sections - Style 2 (News, Join us) */
.main.style2 {
    background-color: #2f3a80ff !important;
    color: #d5daf4ff !important;
}

.main.style2 h2,
.main.style2 h3 {
    color: #d5daf4ff !important;
}

.main.style2 p {
    color: #d5daf4ff !important;
}

/* Icons in News Section */
.main.style2 .icon.solid.major {
    color: #5867c3ff !important;
}

/* Buttons in Content Sections */
.main .button {
    background-color: #5867c3ff !important;
    color: #d5daf4ff !important;
    border-color: #2f3a80ff !important;
}

.main .button:hover {
    background-color: #2f3a80ff !important;
    color: #d5daf4ff !important;
}

.main .button.primary {
    background-color: #2f3a80ff !important;
    color: #d5daf4ff !important;
    border-color: #141d4fff !important;
}

.main .button.primary:hover {
    background-color: #141d4fff !important;
    color: #d5daf4ff !important;
}

/* Footer */
#footer {
    background-color: #141d4fff !important;
    color: #d5daf4ff !important;
}

#footer a {
    color: #5867c3ff !important;
}

#footer a:hover {
    color: #d5daf4ff !important;
}

#footer .copyright {
    color: #d5daf4ff !important;
}

/* Footer Background Gradient */
#footer {
    background-image: linear-gradient(45deg, #141d4fff, #2f3a80ff 50%, #5867c3ff 95%) !important;
}

/* News Section Styling */
.news-item {
    position: relative;
    display: block;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.news-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    flex-shrink: 0;
}

.news-item:hover img {
    transform: scale(1.05);
}

/* Ensure news row aligns all items at the same height */
#news .row.gtr-150 {
    align-items: flex-start;
}

#news .col-4.col-12-medium {
    display: flex;
    flex-direction: column;
}

.news-overlay {
    position: relative;
    color: #d5daf4ff;
    padding: 20px;
    margin-top: 0;
}

.news-overlay h3 {
    margin: 0 0 10px 0;
    color: #d5daf4ff;
    font-size: 1.1em;
}

.news-overlay p {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.3;
}

/* Section Headers */
.main .major h2 {
    color: inherit !important;
}

/* Links */
a {
    color: #5867c3ff !important;
}

a:hover {
    color: #2f3a80ff !important;
}

/* Text Colors */
body {
    color: #141d4fff !important;
}

/* Override any existing color schemes */
.main.style1.special,
.main.style2.special {
    background-color: inherit !important;
}

/* Ensure proper contrast for readability */
.main.style1 .actions .button {
    background-color: #5867c3ff !important;
    color: #d5daf4ff !important;
}

.main.style2 .actions .button {
    background-color: #d5daf4ff !important;
    color: #141d4fff !important;
}

/* Header actions buttons specific styling */
#header .actions .button {
    background-color: #2f3a80ff !important;
    color: #d5daf4ff !important;
    border-color: #5867c3ff !important;
    position: relative;
    z-index: 4;
}

#header .actions .button:hover {
    background-color: #5867c3ff !important;
    color: #d5daf4ff !important;
}

/* Override any green/teal colors from main CSS with blue palette */
.main .icon.solid.major,
.main .icon.brands.major,
.main .icon.regular.major {
    color: #5867c3ff !important;
}

.main .icon.solid.major:hover,
.main .icon.brands.major:hover,
.main .icon.regular.major:hover {
    color: #2f3a80ff !important;
}

/* Override any remaining green colors */
.main .icon.solid,
.main .icon.brands,
.main .icon.regular {
    color: #5867c3ff !important;
}

.main .icon.solid:hover,
.main .icon.brands:hover,
.main .icon.regular:hover {
    color: #2f3a80ff !important;
}

/* Ensure all accent colors use blue palette */
.main .major-icons .icon.solid.major {
    color: #5867c3ff !important;
}

.main .major-icons .icon.solid.major:hover {
    color: #2f3a80ff !important;
}

/* Override any teal/green borders or accents */
.main .button,
.main input[type="submit"],
.main input[type="reset"] {
    border-color: #2f3a80ff !important;
}

.main .button:hover,
.main input[type="submit"]:hover,
.main input[type="reset"]:hover {
    border-color: #141d4fff !important;
}

/* Override any background images with green overlays */
#header {
    background-image: linear-gradient(45deg, #141d4fff, #2f3a80ff) !important;
}

.main.style1,
.main.style2 {
    background-image: none !important;
}

/* Ensure clean blue backgrounds without image overlays */
.main.style1 {
    background: #d5daf4ff !important;
}

.main.style2 {
    background: #2f3a80ff !important;
}

/* Join the Lab section - light blue background */
#join-us.main.style2 {
    background: #d5daf4ff !important;
    color: #141d4fff !important;
}

#join-us.main.style2 h2,
#join-us.main.style2 h3 {
    color: #2f3a80ff !important;
}

#join-us.main.style2 p {
    color: #141d4fff !important;
}

/* Global override for any remaining green/teal colors */
* {
    color: inherit !important;
}

/* Specific overrides for common green elements */
.main .icon,
.main .icon:before,
.main .icon:after {
    color: #5867c3ff !important;
}

.main .icon:hover,
.main .icon:hover:before,
.main .icon:hover:after {
    color: #2f3a80ff !important;
}

/* Override any accent colors in the theme */
.main .accent,
.main .highlight,
.main .emphasis {
    color: #5867c3ff !important;
}

.main .accent:hover,
.main .highlight:hover,
.main .emphasis:hover {
    color: #2f3a80ff !important;
}

/* Vertical centering for image-text sections */
.main .row.gtr-150 {
    align-items: center;
}

.main .col-6.col-12-medium.imp-medium {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .col-6.col-12-medium.imp-medium .image.fit {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make Camila González image smaller */
.main #team .image.fit img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}

/* Ensure proper spacing for centered alignment */
.main .row.gtr-150 > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fix section title alignment - make all titles left-aligned */
.main .major h2,
.main.special .major h2 {
    text-align: left !important;
}

.main .major,
.main.special .major {
    text-align: left !important;
}

/* Reduce top margin for section headers to bring them closer to the top */
.main header.major {
    margin-top: -2em !important;
}

/* Mobile responsive adjustments */
@media (max-width: 736px) {
    /* Restore normal margins for mobile devices */
    .main header.major {
        margin-top: 0 !important;
    }
    
    /* Hide navigation buttons on mobile devices */
    #header .actions {
        display: none !important;
    }
    
    /* Ensure proper order for Research section on mobile - title first, then image */
    #research .row.gtr-150 {
        flex-direction: column;
    }
    
    #research .col-6.col-12-medium:first-child {
        order: 1;
    }
    
    #research .col-6.col-12-medium.imp-medium {
        order: 2;
    }
    
    /* Make header take up full screen height on mobile */
    #header {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #header .inner {
        width: 100%;
    }
}