@keyframes slideIn {
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#landing {
    /* =========================================================
       COLORS & BACKGROUNDS
    ========================================================= */

    background-color: var(--landing-page-bg-color-1);

    #content-container {
        background: linear-gradient(
            to bottom,
            var(--landing-page-bg-color-1),
            var(--landing-page-bg-color-2)
        );
        /* url("/wp-content/uploads/2026/04/flower-seamless-pattern-background-elegant-texture-wedding-day-classical-luxury-old-fashioned_525160-1853-1.avif"); */
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #content {
        #landing-text {
            color: var(--landing-page-text-color);
        }

        nav {
            background: var(--landing-page-menu-bg-color);

            a {
                color: var(--landing-page-link-color);
                /* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); */
            }

            ul#nav-links {
                line-height: 1;

                li {
                    a {
                        &:hover {
                            color: var(--landing-page-text-color);
                        }
                    }
                }
            }
        }
    }

    /* =========================================================
       PAGE STRUCTURE
    ========================================================= */

    --desktop-hero-width: 60dvw;
    --desktop-content-width: calc(100dvw - var(--desktop-hero-width));

    height: 100dvh;
    min-height: 600px;
    width: 100dvw;
    display: flex;
    overflow: hidden;

    #hero {
        height: 100%;
        width: var(--desktop-hero-width);
        overflow: hidden;

        div,
        ul,
        li,
        img {
            height: 100%;
        }

        img {
            object-fit: cover;
        }
    }

    #content-container {
        width: var(--desktop-content-width);

        #content {
            --content-max-width: 500px;
            --content-left-factor: -0.14;
            --content-left-position: calc(100% * var(--content-left-factor));

            height: 100%;
            max-width: var(--content-max-width);
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 2em; /* ✅ stays with flex */

            nav {
                min-height: 100px;
                width: 100dvw;
                font-weight: 500;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                z-index: 999;

                #nav-links-container {
                    width: var(--desktop-hero-width);
                }

                ul#nav-links {
                    max-width: 800px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    margin: auto;

                    &,
                    ul#icons {
                        gap: 0.5em 1.2em; /* ✅ stays here */
                    }

                    ul#icons {
                        a {
                            &:has(img) {
                                &:hover {
                                    box-shadow: 0 0 10px
                                        var(--landing-page-link-color);
                                }

                                &:has(img.social) {
                                    &:hover {
                                        box-shadow: 0 0 10px
                                            var(--landing-page-link-color);
                                    }
                                }
                            }
                        }
                    }

                    li {
                        a {
                            text-transform: uppercase;
                        }
                    }
                }

                #landing-text {
                    max-width: calc(
                        var(--content-max-width) *
                            (1 + var(--content-left-factor))
                    );
                    width: calc(
                        var(--desktop-content-width) *
                            (1 + var(--content-left-factor))
                    );
                }

                .rainbow-border {
                    width: 100%;
                    height: 10px;
                    background: white;

                    &.mobile-screen {
                        display: none;
                    }

                    background-image: linear-gradient(
                        to right,
                        #ff5c4d 0%,
                        #ff5c4d calc(100% * 1 / 14),
                        #ff985d calc(100% * 1 / 14),
                        #ff985d calc(100% * 2 / 14),
                        #f8de4b calc(100% * 2 / 14),
                        #f8de4b calc(100% * 3 / 14),
                        #c4e17f calc(100% * 3 / 14),
                        #c4e17f calc(100% * 4 / 14),
                        #61c2e4 calc(100% * 4 / 14),
                        #61c2e4 calc(100% * 5 / 14),
                        #6599e2 calc(100% * 5 / 14),
                        #6599e2 calc(100% * 6 / 14),
                        #c49cdf calc(100% * 6 / 14),
                        #c49cdf calc(100% * 7 / 14),
                        /* mirror second half to complete 14 steps */ #ff5c4d
                            calc(100% * 7 / 14),
                        #ff5c4d calc(100% * 8 / 14),
                        #ff985d calc(100% * 8 / 14),
                        #ff985d calc(100% * 9 / 14),
                        #f8de4b calc(100% * 9 / 14),
                        #f8de4b calc(100% * 10 / 14),
                        #c4e17f calc(100% * 10 / 14),
                        #c4e17f calc(100% * 11 / 14),
                        #61c2e4 calc(100% * 11 / 14),
                        #61c2e4 calc(100% * 12 / 14),
                        #6599e2 calc(100% * 12 / 14),
                        #6599e2 calc(100% * 13 / 14),
                        #c49cdf calc(100% * 13 / 14),
                        #c49cdf 100%
                    );

                    background-repeat: repeat-x;
                }
            }

            #landing-text-under-menu {
                width: 100dvw;
                background-color: var(--landing-page-sub-menu-bg-color);
                box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
                color: var(--landing-page-sub-menu-text-color);
                font-size: 1.6rem;
                margin-left: calc(-1 * var(--desktop-hero-width));
                padding: 1em 0.5em;
                /* position: absolute; */
                text-align: center;

                a {
                    color: var(--landing-page-sub-menu-link-color);
                }
            }
        }
    }

    /* =========================================================
       PADDING & MARGINS
    ========================================================= */

    #content {
        #landing-text {
            padding: 0.5em;

            p {
                margin: 0;
            }
        }

        nav {
            margin-left: calc(-1 * var(--desktop-hero-width));

            ul#nav-links {
                margin: 0;
                padding: 1em;
            }
        }
    }

    /* =========================================================
       TYPOGRAPHY
    ========================================================= */

    font-family: "Sofia Sans Condensed", Arial, Helvetica, sans-serif;

    #content {
        #landing-text {
            p {
                line-height: 1.4;
                position: relative;
                top: 3px;

                small {
                    position: relative;
                    top: -3px;
                }
            }
        }

        nav {
            font-size: clamp(24px, 2.2dvw, 1.8em);
        }
    }

    /* =========================================================
       ANIMATIONS
    ========================================================= */

    #content {
        #logo {
            opacity: 0;
            animation: fadeIn 1s linear forwards 0.25s;
        }

        #menu-wrapper {
            transform: translateY(100dvh);
            animation: slideIn 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.5s;
        }
    }

    /* =========================================================
       MISC
    ========================================================= */

    #content {
        #logo {
            width: 100%;
            position: relative;
            left: var(--content-left-position);
        }

        nav {
            ul#nav-links {
                list-style-type: none;
            }
        }
    }

    /* =========================================================
       RESPONSIVE (UNCHANGED PER RULE)
    ========================================================= */

    @media screen and (max-width: 700px) {
        flex-direction: column-reverse;

        #hero,
        #content-container {
            width: 100%;
        }

        #hero {
            border-right: 0;
        }

        #content-container {
            box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 0.9);

            #content {
                height: fit-content;
                max-width: 100%;
                align-items: center;
                gap: 1em;
                padding-top: 1em;

                #logo {
                    height: 100px;
                    width: auto;
                    left: 0;
                }

                nav {
                    flex-direction: column-reverse;
                    gap: 0.8em;
                    justify-content: center;
                    font-size: 1.2em;
                    margin-left: 0;
                    padding: 0.5em 1em;

                    .rainbow-border {
                        background-image: linear-gradient(
                            to right,
                            #ff5c4d 0%,
                            #ff5c4d calc(100% * 1 / 7),
                            #ff985d calc(100% * 1 / 7),
                            #ff985d calc(100% * 2 / 7),
                            #f8de4b calc(100% * 2 / 7),
                            #f8de4b calc(100% * 3 / 7),
                            #c4e17f calc(100% * 3 / 7),
                            #c4e17f calc(100% * 4 / 7),
                            #61c2e4 calc(100% * 4 / 7),
                            #61c2e4 calc(100% * 5 / 7),
                            #6599e2 calc(100% * 5 / 7),
                            #6599e2 calc(100% * 6 / 7),
                            #c49cdf calc(100% * 6 / 7),
                            #c49cdf calc(100% * 7 / 7)
                        );

                        &.desktop-screen {
                            display: none;
                        }

                        &.mobile-screen {
                            display: block;
                        }
                    }

                    #landing-text,
                    #nav-links-container {
                        max-width: 100%;
                        width: 100%;
                    }

                    #landing-text,
                    ul#nav-links {
                        padding: 0;
                    }

                    #landing-text p *:not(a) {
                        font-size: 1.2em;
                    }

                    ul#nav-links {
                        padding-top: 0;

                        ul#icons {
                            img {
                                height: 20px;

                                &.social {
                                    height: 20px;
                                    border-radius: 50%;
                                    filter: invert(1);
                                }
                            }
                        }
                    }
                }

                #landing-text-under-menu {
                    font-size: 1.2em;
                    margin-left: 0;
                    padding: 0.5em 1em;
                }
            }
        }
    }
}