/* CSS is not exactly one of my strengths, so do not judge me please. */
/* Also I tend to stard very neat and organized but then it gets messy. */
/* General Styles */
body {
    font-family: "Inter", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: white;
    color: #333;
    transition: all 0.3s ease;
}

/* Dark Mode */
.dark-mode {
    background: #222; /* Dark background */
    color: white;
}

/* Apply Dark Mode to Sections */
.dark-mode section {
    background: #333 !important; 
    color: white;
}

.dark-mode #home { background: #444 !important; } 
.dark-mode #about { background: #555 !important; }
.dark-mode #research { background: #444 !important; }
.dark-mode #contact { background: #555 !important; }

.dark-mode .sidebar {
    background: #111 !important;
}

.dark-mode .menu-button {
    background: #444 !important;
}

.dark-mode a {
    color: #ffcc66; 
}

/* Accessibility Toolbar */
.accessibility-toolbar {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

.accessibility-toolbar button {
    border: none;
    background: none;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 8px;
}

.accessibility-toolbar button:hover {
    color: #ff6347;
}

/* Sidebar Menu Button */
.menu-button {
    position: fixed;
    top: 15px;
    left: 15px;
    background: #23558A;
    color: white;
    border: none;
    padding: 12px 15px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
    z-index: 1100;
}

.menu-button:hover {
    background: #ff6347;
}

/* Sidebar Navigation */
.sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    width: 250px;
    height: 100vh;
    background: #23558A;
    transition: left 0.3s ease;
    padding-top: 20px;
    z-index: 1050;
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.2);
}

.sidebar.active {
    left: 0;
}

/* Close Button */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover {
    color: #ff6347;
}

/* Sidebar Menu List */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.sidebar ul li {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar ul li:last-child {
    border-bottom: none;
}

.sidebar ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: color 0.3s ease;
}

.sidebar ul li a:hover {
    color: #ff6347;
}

/* Sidebar Icons */
.sidebar ul li a i {
    margin-right: 10px;
    font-size: 20px;
    width: 25px;
    text-align: center;
}

/* Main Profile Section */
.profile-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: auto;
}

/* Full-Screen Image (Occupies Full Left or Right Half) */
.profile-image,
.about-image {
    width: 50%;
    min-height: 100vh;
    object-fit: cover;
}

/* Text Section */
.intro-text {
    width: 50%;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Sections (Ensures Text Doesn't Overlap) */
/* I'll write this here not to forget */
/* I used min-height so that it occupies the whole screen but if font or contant on the left/right resize the section grow */
/* I've used the same in about-image and profile-image */
section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Background Colors */
#home { background: #A3C3E2; }
#about { background: white; }
#research { background: #E1C8A8; }
#contact { background: white; }

/* Links */
a {
    color: #ff6347;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .profile-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .profile-image,
    .about-image {
        width: 100%;
        height: 40vh;
        object-fit: cover;
        object-position: left top; 
    }

    .intro-text {
        width: 90%;
        padding: 20px;
        text-align: center;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 24px;
    }

    .sidebar {
        width: 100%;
        left: -100%;
    }

    .sidebar.active {
        left: 0;
    }
}

/* Accessibility Announcements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* Research Topics */
.research-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

.research-tags span {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 15px;
    border-radius: 15px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    transition: background 0.3s ease;
}

.research-tags span:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Publications List */
.publication-list {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.publication-item {
    background: rgba(0, 0, 0, 0.05);
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 16px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background 0.3s ease, transform 0.2s ease;
}

.publication-item:hover {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* About Site Section */
.about-site {
    background: #E07A5F;  
    color: white; 
    padding: 60px 20px;
    text-align: center;
}

.about-site .content {
    max-width: 800px;
    margin: auto;
}

.about-site h2 {
    color: #FFF5EE; 
    font-size: 28px;
    margin-bottom: 20px;
}

.about-site p {
    font-size: 18px;
    line-height: 1.6;
}

.about-site a {
    color: #FFD166; 
    font-weight: bold;
    text-decoration: none;
}

.about-site a:hover {
    text-decoration: underline;
}


/* 404 page */
.error-container {
    text-align: center;
    padding: 50px;
}

.error-container h1 {
    font-size: 36px;
    color: #ff6347;
}

.error-container p {
    font-size: 18px;
    margin-bottom: 20px;
}

.error-container a {
    display: inline-block;
    padding: 10px 20px;
    background: #23558A;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.error-container a:hover {
    background: #ff6347;
}