/* PROFILE DEFAULTS */
.profile {
    margin: 0 auto;
    max-width: 650px;
    min-height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .profile-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .headshot {
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
        border-radius: 50%;
        overflow: hidden;
        width: 200px;
        height: 200px;

        img {
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
        }

    }

    h1 {
        text-align: center;
        margin-bottom: 0;
    }

    h1+p {
        margin-top: 1em;
    }

    p {
        margin: 0;
        text-align: center;
        padding: 0 20px;
    }

    .socials {
        margin: 20px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;

        .social-icon {
            display: inline-block;
            /* flex: 0 0 auto; */
            width: 35px;
            height: 35px;
            position: relative;
            /* overflow: hidden; */
            vertical-align: middle;

            --social-background-color: var(--background-cream);
            --social-logo-color: unset;

            .circle-icon {
                display: none;
            }
        }
    }

    ul.links {
        list-style-type: none;
        padding: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 20px auto;
    }

    .links li {
        line-height: 1.3em;

        a {
            color: var(--linky-dark-blue);
            text-decoration: none;
            display: block;
            padding: 10px;
            border: 1px solid var(--linky-dark-blue);
            border-radius: 5px;
            text-align: center;
            max-width: 200px;
            margin: 5px auto;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .links li a:hover {
        background-color: var(--linky-red);
        color: white;
        border-color: var(--linky-red);
        transition: color 0.1s ease;
        transition: background-color 0.1s ease;
    }

    .profile-footer a.footerlink {
        text-decoration: none;
        display: block;
        padding: 5px;
        width: 100px;
        margin: auto;
        margin-bottom: calc(0px - var(--profile-container-padding));
        margin-top: 20px;

        svg {
            fill: var(--linky-red);
        }
    }
}

/* THEME VARIABLES */
/* These classes are set on the body on a profile page */
/* and on the fake phone div on the home, edit and admin pages */

/* Default/null theme */
.theme- {
    background-color: var(--background-cream);
}

/* Dark theme */
.theme-dark {
    /* Dark theme */
    background-color: rgb(30, 30, 30);
    color: white;

    .profile {
        font-family: 'Archivo Narrow', sans-serif;

        h1 {
            color: var(--linky-light-blue);
        }

        .social-icon {
            --social-background-color: white;
            --social-logo-color: unset;

            .basic-icon {
                display: none;
            }

            .circle-icon {
                display: block;
            }
        }

        .links li a {
            color: var(--linky-light-blue);
            border: 1px solid var(--linky-light-blue);
        }

        .links li a:hover {
            color: white;
            background-color: var(--linky-light-blue);
            border-color: var(--linky-light-blue);
        }
    }
}

/* Light theme */
.theme-light {
    background-color: #d9d9d9;
    color: black;

    background-image: radial-gradient(circle at center, #ffffff, #d0d0d0);

    .profile {
        background-color: transparent;
        color: var(--text-color);

        font-family: 'Gentium Book Basic', serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 1.2em;

        /* Align stuff to the top */
        .profile-content {
            justify-content: flex-start;
        }

        p:first-child {
            margin-top: 50px;
        }

        .headshot {
            border: 0;
            border-radius: 0;
            width: calc(100% + var(--profile-container-padding) * 2);
            height: auto;
            margin-top: calc(-1 * var(--profile-container-padding));
            margin-left: calc(-1 * var(--profile-container-padding));
            margin-right: calc(-2 * var(--profile-container-padding));
        }

        h1 {
            font-size: 2em;
            color: #006adc;
            margin: 1em auto;
        }

        p {
            margin-bottom: 50px;
        }

        .socials {
            margin: 50px 0;

            .social-icon {
                --social-background-color: rgba(0, 0, 0, 0.799);
                --social-logo-color: rgba(255, 255, 255, 0);

                .basic-icon {
                    display: none;
                }

                .circle-icon {
                    display: block;
                }
            }

            .social-icon:hover {
                --social-background-color: #505050;
            }
        }

        .links {
            --link-height: 0.7em;

            li a {
                text-decoration: underline;
                text-decoration-thickness: 1px;
                text-decoration-color: #282828;
                text-underline-offset: 1.5px;
                border: none;
                border-radius: 0;
                margin: 0 auto;
                padding: 0;
                position: relative;
                color: black;
            }

            li::after {
                /* content: '⟊'; */
                /* content: '∤'; */
                content: '§';
                transform: rotate(90deg);
                display: block;
                margin: calc(var(--link-height) / 2) auto;
                color: #7b7b7b;
                position: unset;
                font-size: var(--link-height);
                text-align: center;
                width: 1em;
                padding: 10px;
            }

            li:last-child::after {
                display: none;
            }

            li a:hover {
                color: #505050;
                background-color: transparent;
                border: none;
            }
        }

        .profile-footer a.footerlink svg {
            fill: rgb(255, 255, 255);
        }
    }
}

/* Crafty theme */
.theme-crafty {
    background-color: grey;
    color: #333;

    background-image: url('/-/public/images/canvas-texture.png');
    font-family: 'Satisfy', cursive;
    text-shadow: 0 0 1px rgba(176, 175, 175, 0.5);

    --border-width: 2.5px;

    .profile {
        .headshot {
            border: var(--border-width) solid rgba(255, 255, 255, 0.75);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }

        .title-and-bio {
            background-image: url('/-/public/images/paper-texture.png');
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            background-color: var(--linky-light-blue);
            border-radius: 15px;
            border: var(--border-width) solid rgba(255, 255, 255, 0.75);
            padding: 20px;

            h1 {
                color: #f9f9f9;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            }
        }

        .social-icon {
            --social-background-color: white;
            --social-logo-color: unset;

            padding: 8px;
            background-color: rgb(255, 255, 255);
            border: var(--border-width) solid rgba(0, 0, 0, 0.171);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);

            .basic-icon {
                display: block;
            }

            .circle-icon {
                display: none;
            }
        }

        .social-icon:hover {
            transition: border-color 0.1s ease;
            border-color: rgba(219, 62, 37, 0.65);
        }

        .links li {
            border: var(--border-width) solid rgba(219, 62, 37, 0.65);
            border-radius: 10px;
            margin: 5px auto;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            background-color: white;
            background-image: url('/-/public/images/paper-texture.png');
        }

        .links li:hover {
            transition: border-color 0.1s ease;
            border-color: var(--linky-red);
        }

        .links li a {
            color: var(--linky-red);
            font-weight: bold;
            border: none;
            min-width: 200px;
        }

        .links li a:hover {
            background-color: transparent;
        }

        .profile-footer a.footerlink svg {
            fill: rgb(193, 193, 193);
        }
    }
}

/* Colourful theme */
.theme-colorful {
    background-image: url('/-/public/images/colorful-background.jpeg');
    background-size: cover;
    background-position: center;
    backdrop-filter: brightness(0.9);
    background-color: #015a75;
    color: white;
    font-family: 'Montserrat', sans-serif;

    .profile {
        .headshot {
            border: 5px solid white;
        }

        .social-icon {
            --social-background-color: rgba(255, 255, 255, 0.865);
            --social-logo-color: unset;

            .basic-icon {
                display: none;
            }

            .circle-icon {
                display: block;
            }
        }

        .social-icon:hover {
            --social-background-color: rgb(255, 255, 255);
            --social-logo-color: unset;
        }

        .links li a {
            border: 2px solid white;
            border-radius: 25px;
            color: white;
            font-weight: bold;
        }

        .links li a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .profile-footer a.footerlink svg {
            fill: rgb(255, 255, 255);
        }
    }
}

/* Orange theme */
.theme-orange {
    background-color: rgba(242, 147, 106, 1);
    color: white;
    font-family: 'Comfortaa', sans-serif;
    background-image: url(/-/public/images/orange-background.svg);
    background-size: auto 300px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: fixed;

    .profile {
        .profile-content {
            .headshot {
                /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); */
                border: 1px solid white;
            }

            h1,
            .title-and-bio {
                margin-bottom: 50px;
            }
        }


        .socials {
            margin: 50px 0;

            .social-icon {
                width: 45px;
                height: 45px;
                --social-background-color: white;
                --social-logo-color: rgba(255, 255, 255, 0);

                .basic-icon {
                    display: none;
                }

                .circle-icon {
                    display: block;
                }
            }

            .social-icon:hover {
                border-radius: 50%;
                box-shadow: 0 0 0 3px rgba(242, 147, 106, 1), 0 0 0 6px white;
                transition: box-shadow 0.2s ease;
            }
        }

        .links li a {
            border: 1px solid white;
            border-radius: 25px;
            color: white;
            background-color: rgba(242, 147, 106, 0.7);
            max-width: 250px;
        }

        .links li a:hover {
            border-color: white;
            background-color: rgba(255, 255, 255, 0.1);
            transition: background-color 0.1s ease;
        }

        .profile-footer a.footerlink svg {
            fill: rgb(255, 255, 255);
        }
    }
}

@media (min-width: 1000px) {

    /* making this apply only to the body to exclude fake phones */
    body.theme-orange {
        background-size: 100%;
    }
}

/* Pixels theme */
.theme-pixels {
    background: #6af2ea;
    color: #3a807c;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    background-image: url('/-/public/images/pixels-background.svg');
    background-size: auto 300px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: fixed;

    .profile {
        .headshot {
            box-shadow: 5px 5px 0px 0px #3a807c;
        }

        h1 {
            text-shadow: 1.5px 1.5px #39b6af;
        }

        h1+p {
            margin-top: 2em;
        }

        .links li a {
            background: #39b6af;
            box-shadow: 5px 5px 0px 0px #3a807c;
            max-width: 250px;
            border-radius: 0;
            border: none;
            color: white;
            font-weight: bold;
            margin: 10px auto;
        }

        .links li a:hover {
            background-color: white;
            color: #3a807c;
            transition: background-color 0.1s ease;
        }

        .profile-footer a.footerlink svg {
            fill: #3a807c;
        }

        .social-icon:hover {
            --social-background-color: white;
            --social-logo-color: unset;
        }
    }
}

@media (min-width: 1000px) {

    /* making this apply only to the body to exclude fake phones */
    body.theme-pixels {
        background-size: 100%;
    }
}

/* Purple theme */
.theme-purple {
    background: url('/-/public/images/purple-background.png'), linear-gradient(110deg, #3965ff 5.2%, #f0538b 101.78%);
    background-blend-mode: screen;
    background-position: bottom center;
    background-size:
        auto 50%,
        100%;
    background-repeat: no-repeat;
    font-family: 'Comfortaa', sans-serif;
    color: white;

    .profile {
        .headshot {
            border: 5px solid white;
        }

        h1 {
            font-weight: 700;
        }

        .social-icon {
            --social-background-color: rgba(255, 255, 255, 0.85);
            --social-logo-color: unset;

            .basic-icon {
                display: none;
            }

            .circle-icon {
                display: block;
            }

            border-radius: 50%;
            box-shadow: 0 0 0 1px white;
            /* padding: 2px; */
        }

        .social-icon:hover {
            --social-background-color: rgb(255, 255, 255);
            --social-logo-color: unset;
        }

        .links li a {
            border: 1px solid white;
            border-radius: 9px;
            color: #58326e;
            font-weight: 600;
            letter-spacing: 1px;
            background-color: rgba(255, 255, 255, 0.85);
            max-width: 250px;
        }

        .links li a:hover {
            background-color: white;
            transition: background-color 0.1s ease;
        }

        .profile-footer a.footerlink svg {
            fill: white;
        }
    }
}

/* Sploosh theme */
.theme-sploosh {
    --profile-container-padding: 0px inherit;
    background-color: rgb(29, 29, 29);
    color: black;
    font-family: "Zain", sans-serif;
    font-size: 1.2em;

    .profile {
        width: 100%;
        max-width: 400px;

        .profile-content {
            justify-content: flex-start;
            background: linear-gradient(to bottom, white 335px, transparent 335px);

            .profile-center {
                background: url('/-/public/images/sploosh-background.png');
                background-position: top center;
                background-size: auto 222px;
                background-repeat: no-repeat;
                justify-content: flex-start;
            }

            .headshot {
                margin-top: 110px;
                box-shadow: 0 0 0 7px white, 0 0 0 9px black, 0 0 0 15px white;
            }

            h1 {
                font-weight: 700;
                /* font-family: "Zain", sans-serif; */
            }

            .title-and-bio {
                padding: 20px 0;
                background-color: white;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
            }

            /* Handle no headshot */
            .socials-and-links:first-child,
            .title-and-bio:first-child {
                margin-top: 240px;
                min-height: 120px;
            }

            /* Handle headshot with no title-and-bio and links exist */
            .headshot+.socials-and-links .links:last-child {
                margin-top: 0;
                padding-top: 20px;
                background-color: white;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
                min-height: 120px;
                width: 100%;
                padding-bottom: 20px;
            }

            /* Handle headshot with no title-and-bio and no links, just socials */
            .headshot+.socials-and-links .socials:last-child {
                margin: 0;
                background-color: white;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
                min-height: 120px;
                width: 100%;
                padding: 20px;
            }

            /* Handle socials-and-links as the first thing and links exist */
            .socials-and-links:first-child .links:last-child {
                padding: 20px 0;
                background-color: white;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
                min-height: 120px;
                width: 100%;
            }

            /* Handle socials-and-links as the first thing and there are no links, just socials */
            .socials-and-links:first-child .socials:last-child {
                background-color: white;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
                min-height: 120px;
                width: 100%;
                padding: 0 0 20px 0;
                margin: 0;
            }



            .socials-and-links {
                margin: 10px 0 0 0;
                display: flex;
                flex-direction: column-reverse;

                .socials {
                    margin: 20px;
                }

                .links {
                    width: 100%;
                    margin: 10px auto;

                    li {
                        margin: 10px;

                        a {
                            box-shadow: 0 0 0 5px black, 0 0 0 9px white;
                            color: black;
                            font-weight: bold;
                            font-size: 1.2em;
                            border: none;
                            transition: box-shadow 0.2s ease;
                        }

                        a:hover {
                            box-shadow: 0 0 0 5px black, 0 0 0 10px white;
                            transition: box-shadow 0.2s ease;
                        }
                    }
                }
            }

            .links li:nth-child(3n + 1) a {
                background: linear-gradient(to right, #7595ff, #ff3e73);
            }

            .links li:nth-child(3n + 2) a {
                background: linear-gradient(to right, color(srgb 0.9619 0.3215 0.2762), color(srgb 0.9321 0.7949 0.1875));
            }

            .links li:nth-child(3n + 3) a {
                background: linear-gradient(to left, color(srgb 0.2018 0.7278 0.8497), color(srgb 0.7589 0.9265 0.2913));
            }

            .social-icon {
                --social-background-color: unset;
                --social-logo-color: white;

                border-radius: 50%;
                box-shadow: 0 0 0 5px black, 0 0 0 9px white, 0 0 0 14px black;

                width: 45px;
                height: 45px;

                .basic-icon {
                    display: none;
                }

                .circle-icon {
                    display: block;
                }
            }

            .social-icon:hover {
                /* box-shadow: 0 0 0 5px black, 0 0 0 10px white, 0 0 0 15px black;
                transition: box-shadow 0.2s ease; */
                --social-background-color: white;
                --social-logo-color: unset;
            }
        }
    }

    /* Don't change top padding on mobile so that the headshot will stay aligned */
    @media (max-width: 600px) {
        main {
            padding-top: 0px;
        }
    }
}