/* Organization Banner */
.organization-banner {
    width: 100%;
    background: linear-gradient(to right, rgb(20, 80, 120) 0%, rgb(50, 110, 130) 100%);
    color: rgb(255, 255, 255);
    box-sizing: border-box;
}

.banner-content {
    width: 100%;
    padding: 10px 4%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Fix header banner spacing on mobile */
.banner-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: rgb(255, 255, 255);
    line-height: 1.4;
    padding: 5px 0;
}

/* Mobile-specific banner fixes */
@media (max-width: 768px) {
    .banner-title {
        font-size: 1rem;
        line-height: 1.5;
        padding: 8px 0;
    }

    .banner-content {
        padding: 8px 4%;
    }
}

/* Logo */
.logo-image {
    width: 70%;
}

/* Navigation Toggle - Show only on mobile */
.navbar-toggler {
    display: none; /* Hidden by default */
}

.nav-toggle-icon {
    font-weight: bold;
    color: rgb(255, 0, 0);
    font-size: 18px;
    line-height: 1;
}

/* Show hamburger only on mobile */
@media (max-width: 768px) {
    .navbar-toggler {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        min-width: 44px;
        min-height: 44px;
    }

    .nav-toggle-icon {
        font-size: 24px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* iOS Safari specific fixes */
    @supports (-webkit-touch-callout: none) {
        .navbar-toggler {
            width: 48px;
            height: 48px;
            min-width: 48px;
            min-height: 48px;
        }

        .nav-toggle-icon {
            font-size: 26px;
        }
    }
}

/* Navigation Table */
.nav-table {
    width: 100%;
    background-color: #d1ecf1;
    color: rgb(0, 64, 133);
    border: none;
    border-collapse: collapse;
    display: none;
}

    .nav-table tr:nth-child(odd) {
        background-color: rgb(165, 216, 230);
    }

    .nav-table tr:nth-child(even) {
        background-color: rgb(209, 236, 241);
    }

    .nav-table td {
        padding: 15px;
        border: none;
    }

    .nav-table a {
        color: rgb(0, 64, 133);
        text-decoration: none;
        font-weight: bold;
        font-size: 1.1em;
    }

/* Navigation Items - Better spacing for multi-line buttons on PC */
.navbar-nav .nav-item {
    margin: 0 8px; /* Reduced side margin */
}

.navbar-nav .nav-link {
    padding: 10px 12px !important; /* Consistent padding */
    margin: 4px 0 !important; /* Small vertical spacing */
    line-height: 1.3; /* Better line height for multi-line text */
    text-align: center;
    min-height: 44px; /* Minimum touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal; /* Allow text to wrap */
    word-break: break-word; /* Break long words */
}

/* Team Images Section */
.row-images {
    width: 100%;
}

.image-container {
    width: 100%;
}

.image-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image-item {
    flex: 1 1 200px;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
}

.team-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* Copyright */
.copyright-text {
    font-size: 16px;
    color: #FFFFFF;
    margin-bottom: 0;
}

/* Fix main content area to prevent footer overlap */
.class {
    min-height: calc(100vh - 200px);
    position: relative;
    z-index: 1;
    padding-bottom: 80px !important;
    margin-bottom: 0;
}

/* Ensure footer doesn't overlap content */
.footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
}

/* Fix the useful links section spacing */
.fullink {
    margin-bottom: 40px !important;
    padding-bottom: 25px !important;
}

.infoma {
    padding-bottom: 30px !important;
}

/* PC - Better spacing for frequent buttons that wrap to multiple lines */
.fullink li {
    margin: 6px 8px !important; /* Balanced spacing */
}

.fullink a {
    padding: 10px 14px !important; /* Consistent padding */
    margin: 4px 0 !important; /* Small vertical spacing */
    line-height: 1.3; /* Better for multi-line */
    text-align: center;
    white-space: normal; /* Allow wrapping */
    word-break: break-word; /* Break long text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Minimum height */
}

/* Fix footer links to be one per row on mobile - FULL WIDTH with perfect alignment */
@media (max-width: 768px) {
    .fullink {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Stretch to full width */
        width: 100% !important;
        padding: 0 !important; /* Remove any container padding */
        margin: 0 !important; /* Remove any container margin */
    }

        .fullink li {
            margin: 6px 0 !important; /* Balanced spacing */
            width: 100% !important; /* Full width */
            flex: 1 1 100% !important; /* Ensure full width */
            padding: 0 !important; /* Remove any list item padding */
        }

        .fullink a {
            display: block !important;
            padding: 14px 20px !important; /* Consistent padding - increased left/right */
            margin: 2px 0 !important; /* Minimal vertical spacing */
            background-color: transparent !important; /* No background */
            border-radius: 6px;
            border: 1px solid rgba(0, 64, 133, 0.3); /* Deep blue border */
            text-align: left !important; /* Align text to left */
            font-size: 16px !important;
            font-weight: 600 !important; /* Make font bolder */
            color: rgb(0, 64, 133) !important; /* Deep blue text color */
            text-decoration: none !important;
            min-height: 48px !important; /* Consistent height */
            width: 100% !important; /* Full width */
            box-sizing: border-box !important; /* Include padding in width */
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important; /* Align content to left */
            transition: all 0.3s ease;
            /* Ensure perfect alignment by removing any positioning offsets */
            position: relative !important;
            left: 0 !important;
            right: 0 !important;
        }

            .fullink a:hover {
                background-color: rgba(0, 64, 133, 0.1) !important; /* Light blue background on hover */
                transform: translateY(-1px);
                color: rgb(0, 64, 133) !important;
            }

    /* Ensure the container also has no padding that could cause misalignment */
    .infoma {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* Fix any parent container padding that might cause misalignment */
    .row-images .col-md-9 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}

/* Extra small devices - more spacing for footer */
@media (max-width: 480px) {
    .fullink li {
        margin: 8px 0 !important; /* Slightly more space on very small screens */
    }

    .fullink a {
        padding: 15px 20px !important; /* Consistent horizontal padding */
        margin: 3px 0 !important;
        font-size: 16px !important;
        min-height: 50px !important;
    }
}

/* Ensure copyright stays properly positioned */
.copyright {
    position: relative;
    z-index: 5;
    margin-top: 20px;
}

.copyright-text {
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Force copyright text to be centered and properly aligned */
.copyright .d-flex.justify-content-end {
    justify-content: center !important;
    text-align: center;
}

.copyright-text {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}

/* Force copyright section to use full width */
.copyright .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.copyright .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.copyright .col-12 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.copyright-text {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
    word-break: break-word !important;
}

/* More aggressive mobile fixes */
@media (max-width: 768px) {
    .class {
        padding-bottom: 100px !important;
        min-height: calc(100vh - 150px);
    }

    .fullink {
        margin-bottom: 60px !important;
        padding-bottom: 35px !important;
    }

    .infoma {
        padding-bottom: 40px !important;
        margin-bottom: 30px !important;
    }

    .copyright {
        margin-top: 30px;
        padding: 15px 0;
    }

    .copyright-text {
        font-size: 12px;
        text-align: center !important;
        width: 100%;
    }

    /* Ensure all content is above footer */
    .row-images:last-of-type {
        margin-bottom: 50px !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .copyright-text {
        font-size: 11px;
        line-height: 1.5;
    }

    .fullink {
        margin-bottom: 80px !important;
    }

    .class {
        padding-bottom: 120px !important;
    }
}