/* FONT */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');

body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 700;
}

/* Navbar */

.navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.navbar-brand {
    position: relative; /* Avoid conflicts */
}       

.navbar-brand span {
    display: none !important; /* Hide only the text */
}    

.navbar-brand img {
    height: 80px !important; /* Increase size */
    width: auto !important; /* Keep aspect ratio */
    max-height: none !important; /* Override Bootstrap constraints */
}

.navbar-nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}    

.navbar-nav .nav-link {
    color: #712119 !important; 
    text-transform: uppercase;
    font-weight: bold;
}    

.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link:focus {
    color: darkgray !important; /* Change on hover */
}    

/* Style the dropdown menu */
.navbar-nav .dropdown-menu {
    background-color: #712119; /* Change background color */
    border: none; /* Remove borders */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    min-width: 180px; /* Ensure enough width */
}

/* Style the dropdown links */
.navbar-nav .dropdown-menu a {
    color: #EDEDF5; /* Light text color */
    padding: 10px 15px; /* Comfortable spacing */
    border-radius: 10px;
    font-size: 1rem; /* Adjust text size */
    display: block;
    text-decoration: none; /* Remove underline */
    transition: background 0.3s ease-in-out;
}

/* Hover effect */
.navbar-nav .dropdown-menu a:hover {
    background-color: #9A2E33; /* Slightly lighter red on hover */
    color: white; /* Ensure contrast */
}

/* Ensure dropdown opens smoothly */
.navbar-nav .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show dropdown when hovering */
.navbar-nav .dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Category elements */

.quarto-categories {
    display: flex;
    justify-content: center; /* Centers the buttons horizontally */
    flex-wrap: wrap; /* Allows wrapping if there are multiple buttons */
    gap: 10px; /* Adds spacing between buttons */
}

/* Style individual category buttons */
.quarto-category {
    background-color: #712119;  /* Change background */
    color: #EDEDF5 !important;  /* Change text color */
    border-radius: 10px; /* Rounded corners */
    padding: 5px 12px;
    text-align: center;
}

.quarto-category:hover {
    background-color: #a83232;  /* Change color on hover */
}


.listing-categories .listing-category {
    background-color: #712119;  /* Your preferred color */
    color: #EDEDF5 !important;    /* Text color */
    text-transform: uppercase;  /* Optional: Make text uppercase */
    font-weight: bold;          /* Optional: Make text bold */
}


.listing-categories .listing-category:hover {
    background-color: #a83232;  /* Brighter shade on hover */
}


.listing-categories .listing-category a {
    text-decoration: none;
    color: inherit; /* Ensures it follows the main text color */
}

/* Title block banner */

.title {
    color: #555555 !important;
    font-size: 2.5rem;  /* Adjust size */
    font-weight: bold;
    text-align: center; /* Center title */
}

.description {
    color: #555555;
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
}

/* Personal research tags */
.person-tags {
    margin-top: 10px;
  }
  
.person-tags .tag {
    display: inline-block;
    background: #a37371;
    border-radius: 4px;
    padding: 4px 10px;
    margin: 4px 6px 4px 0;
    font-size: 0.85rem;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s ease-in-out;
  }
  
.person-tags .tag:hover {
    background: #c47d80;
    color: #fff;
  }

/* Timeline */

.timeline {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
    padding-left: 20px;
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.timeline-date {
    flex: 1;
    font-weight: bold;
    color: #712119;
    font-size: 18px;
}

.timeline-content {
    flex: 2;
    background: #EDEDF5;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.timeline-content h3 {
    margin: 0;
    color: black;
    font-size: 20px;
}

.timeline-content p {
    color: black;
    font-size: 18px;
}

.timeline-item::before {
    position: absolute;
    left: -10px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: #712119;
    border-radius: 50%;
}


.cv-toggle {
    cursor: pointer;
    font-size: 20px;
    margin-left: 10px;
    transition: transform 0.3s ease;
    display: inline-block; /* Prevents weird spacing issues */
}

.cv-toggle[aria-expanded="true"]::before {
    content: "▼"; /* Downward when expanded */
}

.cv-toggle[aria-expanded="false"]::before,
.cv-toggle:not([aria-expanded])::before {
    content: "▶"; /* Right when collapsed */
}

/* Profile Container */
.profile-container {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 30px; /* Space between image and text */
    max-width: 800px;
    margin: 0 auto; /* Centering the block */
}

/* Ensure image + social icons stay on one side */
.profile-image-container {
    flex: 0 0 300px; /* Fixed width */
    text-align: center;
    border-radius: 50%;
}

/* Profile Image */
.profile-image {
    width: 100%;
    max-width: 300px;
    border-radius: 50%;
    display: block;
    margin-bottom: 10px;
    margin-top: 50px;
}

/* Bio Content */
.bio-content {
    flex: 1; /* Takes up remaining space */
    text-align: justify;
}

/* Responsive Design for small screens */
@media (max-width: 700px) {  /* Adjusted breakpoint */
    .profile-container {
        flex-direction: column;
        align-items: center; /* Center everything */
        text-align: center;
    }

    .bio-content {
        text-align: left;
        width: 100%; /* Use full width */
    }
}

/* Override for full-width sections like Research */
.full-width main {
    justify-content: flex-start; /* Allow normal positioning */
    align-items: stretch; /* Allow full width */
    text-align: left; /* Ensure text aligns properly */
}


/* -- Ensure the research section spans full width -- */
.full-width {
    width: 100vw; /* Full viewport width */
    margin: 0 auto;
    padding: 40px 0;
    position: relative;
    left: 0;
}

/* -- Row to arrange elements properly -- */
.research-row {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: space-evenly; /* Spread items evenly */
    width: 100%; /* Ensure full width */
    max-width: 100vw; /* Prevent unintentional shrinking */
    margin: 0 auto;
    padding: 40px 5vw; /* Adds spacing */
}

/* -- Research blocks evenly distributed -- */
.research-feature {
    background: #EDEDF5;
    border-radius: 26px;
    padding: 50px;
    text-align: center;
    flex: 1 1 calc(33.333% - 40px); /* Three per row on large screens */
    margin: 20px; /* Spacing between items */
    min-width: 300px; /* Prevent shrinking too much */
}

.research-image {
    width: 100%; /* Make the image take full width */
    height: 200px; /* Adjust as needed */
    object-fit: cover; /* Ensures the image covers the whole area */
    border-radius: 26px; /* Match parent border radius */
    transition: transform 0.3s ease-in-out ;
    display: block;
}

.research-image:hover {
    transform: scale(1.1); /* Slight zoom effect */
}

/* -- Responsive adjustments -- */
@media (max-width: 992px) {
    .research-feature {
        flex: 1 1 calc(50% - 40px); /* Two per row on medium screens */
    }
}

@media (max-width: 768px) {
    .research-feature {
        flex: 1 1 100%; /* One per row on small screens */
    }
}


/* Team Section */
.team-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.team-member {
    text-align: center;
    max-width: 200px;
}

.team-member img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.team-member img:hover {
    transform: scale(1.1);
}

.team-member h3 {
    font-size: 1.2rem;
    margin: 10px 0 5px;
}

.team-member p {
    color: gray;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* Social Icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.social-icons a {
    display: inline-flex;
    width: 35px;
    height: 35px;
    background-color: black;
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
}

.social-icons a:hover {
    background-color: #712119;
}


/* Grid layout for publications */
.publications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}


/* Individual publication card */
.publication-card {
    background: #EDEDF5;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease-in-out;
    font-size: 18px;
    cursor: pointer; /* Show pointer on hover */
}

/* Wrap the card in an <a> to make it clickable */
.publication-card a {
    display: block;
    text-decoration: none;
    color: inherit; /* Keep inherited text colour */
    height: 100%;
    width: 100%;
}

/* Heading inside card */
.publication-card h3 {
    font-size: 20px;
    font-weight: bold;
}

/* Paragraph inside card */
.publication-card p {
    font-size: 18px;
}

/* Hover effect */
.publication-card:hover {
    transform: scale(1.01);
}


/* Contact Section Styling */
.contact-container {
    width: 600px;
    margin: 30px auto;
    padding: 20px;
    background: #f9f9f9;
    border-left: 5px solid #712119;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 1.1rem;
}

.contact-container a {
    color: #712119;
    font-weight: bold;
    text-decoration: none;
}

.contact-container a:hover {
    text-decoration: underline;
}

.contact-container i {
    color: #712119;
    margin-right: 5px;
}