:root {
    /* ===== Sizes ===== */
    --nav-height: 3.5rem;
    --footer-height: 8rem;
    --max-content-width: 80rem;

    /* ===== Breakpoints ===== */
    --nav-breakpoint: 1200px;
    --two-columns-breakpoint: 80rem;
}

body {
    overflow-x: clip;

    > nav {
        height: var(--nav-height);
        z-index: 3000 !important;

        .container-fluid {
            height: 100%;

            @media (width >= 1200px /* var(--nav-breakpoint) */) {
                padding: 0 1.5rem;
                max-width: var(--max-content-width);
            }

            .navbar-brand {
                padding: 0;
                height: 100%;
                width: fit-content;
                display: flex;
                align-items: center;
                gap: 0.5rem;

                img {
                    height: 100%;
                    width: fit-content;
                    object-fit: contain;
                    aspect-ratio: 1;
                }

                > span {
                    font-size: 1rem;
                    line-height: 1.25;
                    font-weight: 400;
                    color: var(--color-black);
                }
            }

            .offcanvas {
                > hr {
                    border-top: 2px solid var(--color-gray-darker);
                }

                .offcanvas-header {
                    .offcanvas-title {
                        color: var(--color-gray-darker);
                        font-weight: 600 !important;
                    }
                }

                .offcanvas-body {
                    align-items: center;

                    ul {
                        font-size: 1.25rem;

                        @media (width >= 1200px /* var(--nav-breakpoint) */) {
                            font-size: 0.9rem;
                        }

                        li.nav-item {
                            &.dropdown {
                                &:hover {
                                    > .nav-link {
                                        color: var(--color-gray-darker);
                                    }
                                }

                                > .dropdown-toggle.show {
                                    color: var(--color-gray-darker);

                                    &:after {
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                        }

                        li.active {
                            > .nav-link {
                                color: var(--color-primary) !important;
                            }
                        }

                        .nav-link {
                            color: var(--color-gray-normal);
                            font-weight: 500 !important;
                            display: flex;
                            align-items: center;
                            gap: 0.75rem;

                            @media (width >= 1200px /* var(--nav-breakpoint) */) {
                                gap: 0.25rem;
                            }

                            &:focus {
                                box-shadow: none;
                            }

                            &:hover {
                                color: var(--color-gray-darker) !important;
                            }

                            &:has(.user-avatar) {
                                @media (width >= 1200px /* var(--nav-breakpoint) */) {
                                    --bs-nav-link-padding-y: 0.25rem;
                                }

                                .user-avatar {
                                    --avatar-size: calc(var(--nav-height) - 2 * var(--bs-navbar-padding-y) - 2 * var(--bs-nav-link-padding-y) - 2px);
                                    height: var(--avatar-size);
                                    width: var(--avatar-size);
                                    object-fit: cover;
                                    margin-right: 0.25rem;
                                }
                            }

                            svg {
                                font-size: 1.1em;
                            }
                        }

                        .dropdown-menu {
                            border: 0;
                            margin: 0 0 1rem;
                            padding: 0 0 0 2.5rem;
                            white-space: nowrap;
                            width: fit-content;
                            min-width: unset;

                            @media (width >= 1200px /* var(--nav-breakpoint) */) {
                                margin: 0.75rem 0 0;
                                padding: 0.2rem 0.4rem;
                                box-shadow: var(--shadow-sm);

                                &.dropdown-menu-lg-center {
                                    left: 50%;
                                    transform: translateX(-50%);
                                }
                            }

                            .dropdown-divider {
                                --bs-dropdown-divider-bg: var(--color-gray-light);
                                display: none;

                                @media (width >= 1200px /* var(--nav-breakpoint) */) {
                                    display: block;
                                }
                            }

                            button.dropdown-item {
                                padding: 0.5rem 0;

                                @media (width >= 1200px /* var(--nav-breakpoint) */) {
                                    padding: 0.5rem;
                                }

                                &:hover {
                                    background-color: unset;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    > main {
        margin: 0 auto;
        max-width: var(--max-content-width);
        min-height: calc(100vh - var(--footer-height));
        padding: calc(1rem + var(--nav-height)) 0.5rem 2rem;

        @media (width >= 1200px /* var(--nav-breakpoint) */) {
            padding: calc(3rem + var(--nav-height)) 1.5rem 3rem;
        }

        > h1 {
            color: var(--color-primary);
            margin-bottom: 2rem;
        }

        > h2 {
            color: var(--color-secondary);
            font-size: 1.5rem;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
        }

        > p, ul {
            a {
                color: var(--color-secondary);
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        > hr {
            border: 0;
            border-top: 2px solid var(--color-gray-darker);
            margin: 3rem auto;
            width: 100%;
        }
    }

    > footer {
        height: var(--footer-height);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        box-shadow: var(--shadow-footer);

        > div {
            max-width: var(--max-content-width);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.025rem;
            text-wrap: nowrap;

            .footer-authors {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.125rem;

                h4 {
                    font-size: 0.9rem;
                    margin-bottom: 0.125rem;
                }

                p {
                    color: var(--color-gray-dark);
                    font-size: 0.75rem;
                    margin: 0;

                    a {
                        color: inherit;
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }

            .footer-social {
                display: flex;
                gap: 0.5rem;

                > a {
                    width: 1.25rem;
                    height: 1.25rem;
                    border-radius: 0.25rem;
                    box-shadow: var(--shadow-sm);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition-property: scale;
                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    transition-duration: 150ms;
                    font-size: 1.25em;
                    line-height: calc(1.25 / 0.875);

                    &:hover {
                        scale: 1.25;
                    }
                }
            }

            .footer-contact {
                p {
                    font-size: 0.875rem;
                    line-height: calc(1.25 / 0.875);
                    margin: 0;

                    > a {
                        color: var(--color-primary);

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

.sigac-two-column-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;

    @media (width >= 80rem) {
        grid-template-columns: 320px 1fr;
        gap: 3rem;
    }

    .sigac-side-column {
        min-width: 0;
    }

    .sigac-main-content {
        min-width: 0;
        order: -1;

        @media (width >= 80rem) {
            order: 1;
        }
    }
}