/* General body styling */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #f2f0ef;
    width: 80%;
    min-width: 400px;
    min-height: 200px;
    padding: 2em;
    margin: 4% 8%;
    border: solid black;
    border-radius: 5px;
    display: block;
}

/* Logo styling */
.logo {
    height: 100px;
    padding: 0.5em;
}

/* Header styling */
.header {
    padding: 1em;
    border: groove black;
    display: block;
    border-radius: 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    margin-bottom: 1em;
}

/* Flexbox to align title on left and logo on right */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures the title is on the left and logo on the right */
}

/* Make the title larger than a regular H1 */
.header-content h1 {
    color: #064169;
    margin: 0;
    font-size: 2.8em;
    font-weight: bold;
}

/* Navbar styles */
.navbar {
    background-color: #408cc4;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    margin-bottom: 1em;
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-start; /* Align the navbar items */
}

.navbar-nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.nav-item {
    margin: 0;
    padding: 14px 20px;
}

/* Links inside the navbar */
.nav-item a {
    text-decoration: none;
    color: white;
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    padding: 8px 15px; /* Added internal padding */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
    border-radius: 5px; /* Add slight rounding to nav items */
}

.nav-item:hover {
    background-color: #0056b3;
}

.nav-item a.visited {
    background-color: #330072;
    color: #ffffff;
    border-bottom: 3px solid #AE2573; /* Adds an underline to highlight active link */
}

/* Global link color (for all links except nav menu) */
a:link {
    color: #064169;
    text-decoration: none;
}

a:hover {
    color: #085A8F;
    text-decoration: underline;
}

/* Override link color for navbar links */
.navbar a:link,
.navbar a:visited {
    color: white;
    text-decoration: none;
}

.navbar a:hover,
.navbar a:focus {
    text-decoration: underline;
}

/* Image max width */
img {
    max-width: 65em;
    display: block;
    margin: 0 auto;
}

/* General text styling */
h1, h2, h3, h4, h5, h6 {
    color: #064169 !important;
}

.container {
    margin-top: 5em;
    display: block;
}

/* Footer Styling */
.custom-footer {
    background-color: #c0ced8;
    padding: 1em;
    border-radius: 10px;
    text-align: center;
    margin-top: 3em;
    color: white;
}

/* General link styling for all links within the footer */
.custom-footer a {
    color: #408cc4;
    text-decoration: none;
    margin: 0 1em;
    transition: color 0.3s ease;
}

.custom-footer a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Styling for the footer content */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    height: 80px;
}

/* Copyright text */
footer p {
    margin: 0.5em 0;
    font-size: 0.8em;
    color: #888;
}

footer a {
    font-size: 1em;
}

/* Styling for back and home buttons */
.navigation-buttons {
    margin: 20px 0;
    display: flex;
    gap: 10px;
}

.navigation-buttons button {
    background-color: #408cc4;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

.navigation-buttons button:hover {
    background-color: #0056b3;
}

/* Go to Top Button */
#goToTopBtn {
    display: none;              /* Hidden by default */
    position: fixed;            /* Fixed position */
    bottom: 8%;                /* Adjusted to be near the center of the page vertically */
    right: 50%;                 /* Center horizontally */
    transform: translate(50%, 50%); /* Center the button exactly */
    z-index: 99;                /* Ensure the button is above other content */
    background-color: #408cc4; /* Button background color */
    color: white;            /* Button text color */
    border: none;
    padding: 20px;              /* Increased padding for larger button */
    border-radius: 50%;         /* Makes the button circular */
    cursor: pointer;
    font-size: 22px;            /* Larger font for visibility */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* More prominent shadow */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover transition */
}

/* Hover effect */
#goToTopBtn:hover {
    background-color: #00386e;               /* Lighter shade on hover */
    transform: translate(50%, 50%) scale(1.1); /* Slightly enlarges on hover */
}

/* Table Styling */
table {
    width: 100%;                       
    border-collapse: collapse;        
    margin: 1em 0;                     
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Table header */
th {
    background-color: #66a2d1;         
    color: white;                      
    padding: 12px;                     
    text-align: center;  
    border: 1px solid #708090;          
}

/* Table cells */
td {
    border: 1px solid #708090;           
    padding: 12px;                    
    text-align: left;                  
}

/* Alternating row colors for better readability */
tr:nth-child(even) {
    background-color: #f2f2f2;         /* Light grey background for even rows */
}

/* Hover effect on rows */
tr:hover {
    background-color: #e0f7fa;   
}

/* Responsive table */
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;                 /* Stack table elements on small screens */
    }

    th {
        display: none;                  /* Hide the header on small screens */
    }

    tr {
        margin-bottom: 1em;             /* Add space between rows */
    }

    td {
        text-align: right;              /* Align text to the right for readability */
        position: relative;              /* Enable absolute positioning */
        padding-left: 50%;              /* Space for labels */
    }

    td:before {
        content: attr(data-label);      /* Use data-label attribute for header */
        position: absolute;              /* Positioning */
        left: 0;                        /* Align to left */
        width: 50%;                     /* Half width */
        padding-left: 10px;             /* Padding */
        text-align: left;               /* Align text to left */
        font-weight: bold;               /* Bold header text */
    }
}


/* Overriding predefined CSS classes from pelican */
a:-webkit-any-link {
    color: #064169;                       
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
}
a:-webkit-any-link:hover {
    transform: scale(1.05);                   /* Slightly enlarge on hover for emphasis */
    text-decoration: underline;
}