/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* RTL and Background Color */
body, head {
    direction: rtl;
    background-color: rgba(237, 237, 237, 0.784);
}

/* Ensure full height on html and body */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Body styling without padding to avoid interference */
body {
    flex: 1;
    line-height: 1.6;
    font-family: 'Sahel', sans-serif;
    color: #333;
    background-color: #f5f5f5;
}

/* Main content takes available space */
.content {
    flex: 1;
    margin-top: 80px;
    width: 90%; 
    box-sizing: border-box;
}

/* Footer styling */
footer {
    background-color: #e6e6e6;
    color: #333;
    padding: 16px;
    text-align: center;
    width: 100%;
    margin-top: auto;
    box-shadow: none; /* Remove shadow to avoid border effect */
    border: none;     /* Ensure no border around footer */
}

/* Error messages styling */
.validation-error{
    color: red; /* Set text color to red */
    font-size: 14px; /* Optional: Adjust font size */
    margin-top: 5px; /* Optional: Add spacing above the error */
    margin-bottom: 10px; /* Optional: Add spacing below the error */
    font-weight: bold; /* Optional: Make it bold for emphasis */
}

/* Styling for form fields */

/* Styling for error messages */
.w3-text-red {
    font-size: 14px;
    margin-top: 5px;
}

/* Custom button styling */
.w3-button.w3-green {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    padding: 12px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

.w3-button.w3-green:hover {
    background-color: #45a049;
}

.w3-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin: 5px 0;
}

/* Dynamic container resizing */
.custom-registration-form {
    display: block; /* Allow the container to behave as a block */
    padding: 20px; /* Add inner spacing */
    margin: 0 auto; /* Center the container */
    background-color: #f1f1f1; /* Light background for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for visual depth */
    border-radius: 8px; /* Optional rounded corners */
    width: auto; /* Allow width to adjust based on content */
    max-width: 900px; /* Cap the maximum width for better readability */
}

/* Form elements naturally inherit container width */
.custom-registration-form form {
    width: 100%; /* Match the width of the container */
}





/* Font Face for Sahel */
@font-face {
    font-family: 'Sahel';
    src: url('font/Sahel.woff2') format('woff2'),
         url('font/Sahel.woff') format('woff'),
         url('font/Sahel.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Apply Sahel as the Default Font */
body, p, h1, h2, h3, h4, h5, a, .post-meta, .post-title, .back-link, .post-snippet {
    font-family: 'Sahel', sans-serif;
    color: #333;
}

/* General Body Styling */


/* Title Styling */
h1 {
    color: rgb(0, 187, 255);
}

/* ===== Navigation Bar Styling with RTL ===== */
#mobileMenu {
    display: flex;
    justify-content: flex-start; /* Align items starting from the right */
    width: 100%; /* Full width of the screen */
    background-color: #f5f5f5; /* Light grey background */
    padding: 10px 0; /* Optional: padding for visual space on top and bottom */
    margin-bottom: 15px; /* Add bottom margin to create space below the menu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#mobileMenu .w3-button {
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    text-align: center;
}

/* Hide toggle button on desktop */
.menu-toggle {
    display: none;
}

/* Responsive Menu for Mobile */
@media (max-width: 768px) {
    /* Show toggle button */
    .menu-toggle {
        display: block;
        cursor: pointer;
        padding: 10px;
        background-color: #e6e6e6;
        color: #333;
        text-align: right;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Hide the menu by default on mobile */
    #mobileMenu {
        display: none;
        flex-direction: column; /* Stack items vertically */
        width: 100%;
    }

    /* Show menu when toggle is active */
    #mobileMenu.open {
        display: flex;
    }

    #mobileMenu .w3-button {
        padding: 10px 15px;
        width: 100%;
        text-align: right;
        border-bottom: 1px solid #ddd; /* Optional divider between items */
    }

    /* Optional: Style the auth buttons separately on mobile */
    #mobileMenu .auth-button {
        margin-top: 5px;
        background-color: #0066cc;
        color: white;
    }
}


/* Fixed Header with RTL Alignment */
.w3-bar {
    position: fixed;
    top: 0;
    right: 0; /* Align to the right edge */
    width: 100%;
    direction: rtl; /* Set menu to RTL */
    background-color: #e6e6e6;
    z-index: 1000;
    padding: 0; /* No padding for edge alignment */
    margin: 0; /* No margin */
    text-align: right; /* Align items to the right */
}

.w3-bar .w3-button {
    display: inline-block; /* Allow inline layout for RTL */
    padding: 10px 15px;
    color: #333;
    text-align: center;
}


/* Auth Button Styling in Navigation */

/* Style for Authentication Container */
.auth-container {
    margin-left: auto; /* Pushes the auth container to the left */
    display: flex;
    gap: 10px; /* Space between the auth buttons */
}

/* Styling for the Authentication Buttons */
.auth-container .auth-button {
    background-color: #0066cc; 
    color: white !important;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/* Hover effect for the Authentication Buttons */
.auth-container .auth-button:hover {
    background-color: #004b99; /* Same hover color as .btn-consistent */
}



/* ===== Consistent Button Styling ===== */
.btn-consistent {
    background-color: #0066cc;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px; /* Spacing below the button */
}

.btn-consistent:hover {
    background-color: #004b99;
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .w3-bar {
        display: none;
    }
    .w3-bar.open {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .w3-bar .auth-button {
        margin: 10px 0;
        text-align: center;
    }
}

/* Menu Toggle for Mobile */
.menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        cursor: pointer;
        padding: 10px;
        background-color: #e6e6e6;
        color: #333;
        text-align: right;
    }
}

/* Footer Color */


/* Footer Columns */
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 16px;
}

.footer-columns div {
    flex: 1 1 300px;
}

/* Post List Page Styles */
.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    margin-top: 20px;
}

/* Individual Post Card */
.post-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 30%;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.post-card:hover {
    transform: translateY(-5px);
}

/* Thumbnail Styling in Post List */
.post-thumbnail {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Title Styling for Post List */
.post-card .post-title {
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 8px;
    color: #333;
}

.post-card a {
    text-decoration: none;
}

.post-card a:hover .post-title {
    color: #007bff;
}

/* Meta and Snippet Styling */
.post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 10px;
}

.post-snippet {
    font-size: 1em;
    color: #333;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .post-card {
        width: 100%;
    }
}

/* Post Detail Page Styles */
.post-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.post-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px;
}

.post-thumbnail {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.post-content {
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
}

/* Paragraph Spacing in Post Content */
.post-content p {
    margin-bottom: 1.5em;
}


/* Datasets list CSS */
.dataset-grid {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Space between each row */
}

.dataset-card {
    width: 100%; /* Full width of the container */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for distinction */
}

.dataset-thumbnail {
    max-width: 100%; /* Full width of the card */
    height: auto;
    border-radius: 5px;
}

.dataset-title {
    font-size: 1.5em; /* Increase font size slightly */
    margin: 10px 0;
}

.dataset-meta, .dataset-license {
    color: #555;
    font-size: 0.9em;
}

.download-button {
    padding: 10px 20px; /* Larger padding for prominence */
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 10px; /* Space above the button */
}

.download-button:hover {
    background-color: #45a049;
}











/* Back Link Styling */
.back-link {
    display: inline-block;
    margin-top: 20px;
    color: #007bff;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}




/* Define a custom class for the container */
.form-width {
    width: 100%; /* Full width for all devices */
    margin: 0 auto; /* Center the content */
    padding: 16px;
}

/* Apply constraints for larger devices */
@media (min-width: 568px) {
    .form-width {
        max-width: 900px; /* Set a maximum width for larger screens */
    }
}








.social-icon { width: 20px; height: 20px; margin: 0 3px; vertical-align: middle; }

/* These existed conceptually in your earlier templates; adding for completeness */
.member-section-title{margin:1.25rem 0 .5rem}
.member-grid{display:flex;flex-wrap:wrap;gap:1rem}
.member-card{width:280px;max-width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;text-align:center}
.member-avatar{width:100%;height:180px;object-fit:cover;border-radius:10px}
.member-name{margin:.5rem 0 0}
.member-title{margin:0;font-size:.92em;color:#555}
.member-affil{margin:.15rem 0 .35rem;font-size:.9em;color:#444}
.member-detail{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:start}
.detail-avatar{width:200px;height:200px;object-fit:cover;border-radius:12px}