/* --- Configuração Geral --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1,
h2,
h3,
h4 {
    color: #333;
}

h2 {
    border-bottom: 3px solid #004a91;
    /* Cor inspirada no logo */
    padding-bottom: 10px;
    margin-top: 20px;
    /* Reduced margin-top for tabs */
}

h3 {
    color: #006fce;
    margin-top: 30px;
}

a {
    color: #006fce;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

/* --- Navigation Tabs (Updated) --- */
nav {
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: #34495e;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    flex-wrap: nowrap;
}

nav .logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
}

nav .logo-container a {
    display: flex;
    align-items: center;
    height: 100%;
}

nav .logo {
    height: auto;
    max-height: 40px;
    /* changed from height: 40px to retain proportions better if aspect ratio differs */
    width: auto;
    flex-shrink: 0;
}

nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

nav button {
    background-color: #34495e;
    border: none;
    color: white;
    padding: 20px 25px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    outline: none;
    white-space: nowrap;
}

nav button:hover,
.dropdown:hover .dropbtn {
    background-color: #4a6580;
}

nav button.active {
    background-color: #004a91;
}

/* --- Dropdown Styles --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    width: 100%;
    background-color: #f9f9f9;
}

.dropdown-content button:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Arrow styling */
.arrow {
    font-size: 0.8em;
    margin-left: 5px;
}

/* --- Tab Content --- */
.tab-content {
    display: none;
    padding: 20px 0;
    animation: fadeIn 0.5s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Seção do Banner --- */
.banner {
    background-image: url('../img/banner.jpeg');
    background-size: cover;
    background-position: center 30%;
    height: 450px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.banner-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.banner-content h1 {
    font-size: 3.5rem;
    margin: 0;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* --- Seção Home --- */
#home .logo-home {
    display: block;
    margin: 20px auto;
    max-width: 300px;
}

#home p {
    font-size: 1.1rem;
    text-align: justify;
}

/* --- Seção Committee --- */
.committee-member {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    align-items: flex-start;
}

.committee-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eee;
}

.committee-member .info {
    flex: 1;
    min-width: 300px;
}

.committee-member .info h4 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: #333;
}

.committee-member .info h5 {
    font-size: 1.1rem;
    color: #004a91;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-top: 20px;
}

.committee-member .info p {
    text-align: justify;
    margin-bottom: 0;
}

.committee-member .info ul {
    list-style: square;
    padding-left: 20px;
    margin-top: 10px;
}

/* --- Seções Placeholder --- */
.placeholder {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #888;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 20px;
}

/* --- Table Styles (for Team tab) --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* For rounded corners on shadow */
    border-radius: 8px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
}

th {
    background-color: #f4f4f4;
    color: #333;
    font-weight: 600;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f1f1f1;
}

/* --- Image Grid (for NeoMycologist) --- */
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns */
    gap: 15px;
    margin-top: 20px;
}

.grid-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.grid-item img:hover {
    transform: scale(1.03);
}

/* --- Footer --- */
footer {
    background-color: #34495e;
    color: #ccc;
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
}

.footer-banner {
    background-color: white;
    padding: 20px 40px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 20px;
    max-width: 90%;
}

.footer-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0;
    /* Reset margin since banner handles it */
}

.footer-logos img {
    width: auto;
    transition: opacity 0.3s;
}

.footer-logos img:hover {
    opacity: 1;
}

/* Row 1: Larger logos */
.footer-row:first-child img {
    max-height: 80px;
    margin: 0 15px;
}

/* Row 2: Largest logo (width base) */
.footer-row:last-child img {
    max-height: 120px;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* --- Language Switcher --- */
.lang-switch {
    margin-left: auto;
    display: flex;
    gap: 10px;
    color: white;
    font-weight: bold;
}

.lang-switch a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
}

.lang-switch a:hover,
.lang-switch a.active {
    color: white;
    text-decoration: underline;
}

/* --- Responsividade --- */
@media (max-width: 900px) {

    /* On medium screens, allow nav links to wrap */
    nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    nav .nav-links {
        flex-basis: 100%;
        order: 2;
        /* Put links below logo */
    }

    nav .logo {
        order: 1;
        /* Put logo first */
        margin-bottom: 10px;
    }

    .banner-content h1 {
        font-size: 2.5rem;
    }

    .lang-switch {
        order: 0;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {

    /* On small screens, stack logo and buttons */
    nav {
        flex-direction: column;
        align-items: center;
    }

    nav .logo {
        margin-bottom: 10px;
    }

    nav .nav-links {
        width: 100%;
        flex-direction: column;
        /* Stack links vertically */
    }

    nav button {
        width: 100%;
        /* Stack tabs */
        text-align: left;
    }

    .dropdown {
        display: block;
        width: 100%;
    }

    .dropbtn {
        width: 100%;
        text-align: left;
    }

    /* On mobile, standard hover is tricky. 
       Usually JS is better for toggling, but for simplicity here 
       we'll just show the content relative or on tap (if hover triggers).
       Ideally, we might want it always expanded or toggle on click.
       Let's adjust it to appear inline if possible or keep hover behavior. */
    .dropdown-content {
        position: relative;
        box-shadow: none;
    }

    .banner {
        height: 300px;
    }

    .committee-member {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .committee-member .info p {
        text-align: center;
    }
}

/* For tables and grids on small screens */
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
        /* Allow horizontal scrolling for tables */
        white-space: nowrap;
    }

    /* Stack the 2x2 grid into a single column */
    .image-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Institutions Infographic --- */
.infographic-dashboard {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 40px;
    gap: 20px;
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    flex: 1;
    min-width: 200px;
    border-top: 4px solid #004a91;
    transition: transform 0.3s ease;
}

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

.stat-card .number {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    color: #004a91;
    margin-bottom: 5px;
}

.stat-card .label {
    font-size: 1.1rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.region-container {
    margin-bottom: 50px;
}

.region-title {
    background-color: #004a91;
    color: white;
    padding: 15px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}

.region-title .icon {
    margin-right: 15px;
    font-size: 1.8rem;
}

.institution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.inst-card {
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    transition: all 0.3s ease;
}

.inst-card:hover {
    border-color: #006fce;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.inst-card h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
}

.inst-card .sub-info {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

.country-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.country-group {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.country-flag {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.country-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #004a91;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.country-inst-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.country-inst-list li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
}

.country-inst-list li:last-child {
    border-bottom: none;
}

/* --- Responsive Iframes --- */
iframe {
    max-width: 100%;
}

@media (max-width: 768px) {

    /* Ensure iframes scale down on mobile */
    iframe {
        width: 100% !important;
    }
}