/* Global styles */
body {
    margin: 0;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%); /* Start off-screen to the left */
    }
    to {
        transform: translateX(0); /* End at the original position */
    }
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -20vh;
}
main h3{
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.atleti-info {
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: horizontal;
    margin-top: -20vh;
}

.atleti-info h1 {
    color: black;
    font-size: 3rem;
}

.atleti-info hr {
    width: 100%;
    margin: 10px 0;
}

.atletska-sola img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50%;
}

.atletska-sola img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.description-main, .atletska-sola{
    display: flex;
    justify-content: center;
}

.description-main {
    width: 50%;
    flex-direction: column;
    padding-left: 10vw;
}

.atletska-sola {
    align-items: center;
    width: 50%;
}

.display-table {
    display: flex;
    background-image: url(../../assets/green-blue-gradient-top.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center contents of .display-table */
    width: 100%; /* Ensure it takes full width */
    padding-bottom: 5vh;
    border-bottom: 1px solid #cecece;
}

.display-accomplishments table {
    height: 50vh; /* Set the height to 10% of the viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    display: block; /* Ensure the table is treated as a block element for scrolling */
    width: 100%;
}

table {
    width: 60vw;
    border-collapse: collapse; /* Ensures no space between borders */
    margin: 10vh auto 2vh auto; /* Center the table using auto margins */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px !important;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    border: none !important; /* Remove table borders */
}

th, td {
    border: none !important;/* Remove cell borders */
}

/* Other existing styles remain unchanged */
th {
    background-color: #FF9914; /* Blue background for header */
    color: #fff; /* White text for header */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 12px 15px; /* Add padding inside the header */
    text-transform: uppercase; /* Uppercase for header titles */
}

td {
    padding: 12px 15px; /* Add padding inside cells */
    font-size: 14px;
    color: #333;
    text-align: left; /* Align text to the left */
}

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

/* Hover effect for table rows */
thead tr:hover {
    cursor: default;
}

tr:hover {
    background-color: rgba(161, 207, 107, 0.4); /* Light green with 80% opacity */
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Last row bottom border removed */
tr:last-child td {
    border-bottom: none; /* Optional if you want to keep it clean */
}

.pagination {
    display: flex;
    flex-direction: horizontal;
    align-items: center;
    justify-content: center;
}

/* Pagination button styles */
.pagination button {
    background-color: rgb(0, 0, 0, 0);
    border: none;
    border-radius: 50%;
    color: black;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.pagination button:hover {
    animation: moveButton 0.45s ease forwards;
}

@keyframes moveButton {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--shift));
    }
    100% {
        transform: translateX(0);
    }
}

#prev-page:hover {
    --shift: -10px;
}

#next-page:hover {
    --shift: 10px;
}


.subtitle {
    padding: 5vw;
    display: flex;
    flex-direction: row;
    background-image: url(../../assets/top-gradient-green-orange-left.svg);
    background-size: cover; /* Adjust as necessary */
    background-repeat: no-repeat; /* Prevents repeating */
    background-position: center; /* Centers the image */
    justify-content: center;
    align-items: center;
}

.subtitle div hr{
    width: 70%;
    float: left;
}

.subtitle-middle {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 10vh;
}

.description {
    width: 40vw;
}

.description h1{
    font-size: 2rem;
}

.nav-atleti {
    display: flex;
    flex-direction: row; /* Use 'row' instead of 'horizontal' */
    width: 100%;
    color: Black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    height: 8vh;
    align-items: center;
    position: sticky;
    top: 0; /* Make the element stick to the top */
    z-index: 1000; /* Ensure it appears above other content */
    background-color: #fff;
}

.nav-atleti ul {
    list-style: none;
}

.nav-atleti li{
    float: left;
    margin: 0 2vw 0 5vw;
}

.nav-atleti button {
    border: none;
    color: #507626;
    font-weight: bold;
    background: linear-gradient(135deg, rgb(161, 207, 107, 86%), hsl(208, 100%, 86%));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 1vh 2vw;
    border-radius: 20px;
    transition: transform 0.3s ease; /* Add transition for scaling */
    transform: scale(1); /* Set the initial scale */
}

.nav-atleti button:hover {
    transform: scale(1.1); /* Scale up to 1.1 on hover */
}


.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


@media (max-width: 768px) {
  main {
    padding: 5vw;
    width: 100vw;
    flex-direction: column;
    align-items: center;
  }

  .atleti-info {
    flex-direction: column;
    height: auto;
    padding: 0 5vw;
    align-items: center;
    text-align: center;
    margin-top: 20vh;
  }

  .description-main,
  .atletska-sola {
    width: 100%;
    padding: 0;
    justify-content: center;
  }

  .atletska-sola img {
    width: 80%;
    height: auto;
    margin: 0 auto;
  }

  .subtitle {
    flex-direction: column;
    text-align: center;
  }

  .subtitle-middle {
    flex-direction: column;
    margin-bottom: 5vh;
  }

  .description {
    width: 90vw;
  }

  .description h1 {
    font-size: 1.5rem;
  }

  /* ✅ FULL-WIDTH nav with full background */
  .nav-atleti {
    flex-direction: column;
    height: auto;
    padding: 10px;
    width: 100%; /* Force full viewport width */
    margin-left: calc(-1 * (100vw - 100%)/2); /* Fix for scrollbars/margins */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .nav-atleti li {
    float: none;
    margin: 10px 0;
    text-align: center;
  }

  .nav-atleti ul {
    padding: 0;
  }

  /* ✅ Horizontal scrolling for table */
  .display-accomplishments {
    width: 100%;
    overflow-x: auto;
  }

  .display-accomplishments table {
    width: max-content; /* Auto-expand table to fit content */
    min-width: 600px; /* Ensures scroll if too wide */
  }

  table {
    width: 100%;
    overflow-x: auto;
  }

  .pagination {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination button {
    margin: 5px;
  }
}