/* ╭────────────────────────╮
/  │  _                     │
/  │ | |__   __ _ ___  ___  │
/  │ | '_ \ / _` / __|/ _ \ │
/  │ | |_) | (_| \__ \  __/ │
/  │ |_.__/ \__,_|___/\___| │
/  ╰────────────────────────╯
/  base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */

:root {
    --pagefind-ui-font: var(--font-family);
    --pagefind-ui-primary: var(--foreground);
    --pagefind-ui-text: var(--foreground);
    --pagefind-ui-background: var(--background);
    --pagefind-ui-border: var(--accent);
    --pagefind-ui-tag: var(--background);
    --site-border: .1rem solid var(--border);
}

/*
custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha.
it's basically a mix and mash of the both of them together, and slightly modified.
it doesn't have a name, call it "synth.download color scheme official real"
*/

:root {
    /* base colors */
    --background: #fafafa;
    --foreground: #3d454d;
    --selection: #f0eee4;
    --comment: #abb0b6;
    --accent: #fd9e1a;

    /* original ayu colors */
    --orange: #ff9940;
    --green: #86b300;
    --blue: #4cbf99;
    --purple: #a37acc;
    --red: #ec3838;

    /* extended catppuccin based colors */
    --flamingo: #ff7d7d;
    --rosewater: #eca69a;
    --pink: #ff8adb;
    --mauve: #ba8aff;
    --maroon: #e06c75;
    --peach: #ffac6b;
    --yellow: #e5c07b;
    --teal: #2bbac5;
    --sky: #3eacce;
    --sapphire: #4db5d0;
    --lavender: #7881ce;

    /* ui accent colors */
    --ui-orange: #fa8d3e;
    --ui-green: #91b362;
    --ui-blue: #6994bf;
    --ui-purple: #7e57c2;
    --ui-teal: #56c2c0;
    --ui-lavender: #9d8cdb;

    /* misc. */
    --border: #e4e4e4;
    --shadow: rgba(0, 0, 0, 0.1);
    --hover: rgba(0, 0, 0, 0.05);
    --active: rgba(0, 0, 0, 0.1);
    --focus: #86b300;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* base colors */
        --background: #0a0e14;
        --foreground: #d8d6d2;
        --selection: #253340;
        --comment: #5c6773;
        --accent: #e6b450;

        /* original ayu colors */
        --orange: #ffb454;
        --green: #aad94c;
        --blue: #59c2ff;
        --purple: #d2a6ff;
        --red: #f0646b;

        /* extended catppuccin based colors */
        --flamingo: #f2cdcd;
        --rosewater: #f5e0dc;
        --pink: #ffc9e3;
        --mauve: #cba6f7;
        --maroon: #eba0ac;
        --peach: #ffcca8;
        --yellow: #f9e2af;
        --teal: #8ddedc;
        --sky: #89dceb;
        --sapphire: #74c7ec;
        --lavender: #b4befe;

        /* ui accent colors */
        --ui-orange: #e6b450;
        --ui-green: #aad94c;
        --ui-blue: #39bae6;
        --ui-purple: #a37acc;
        --ui-teal: #7adbd3;
        --ui-lavender: #ada0f3;

        /* misc. */
        --border: #1a1f29;
        --shadow: rgba(0, 0, 0, 0.4);
        --hover: rgba(255, 255, 255, 0.05);
        --active: rgba(255, 255, 255, 0.1);
        --focus: #ffb454;
    }
}

/* theme classes for manual theme selection */
html[data-theme="light"] {
    /* base colors */
    --background: #fafafa;
    --foreground: #3d454d;
    --selection: #f0eee4;
    --comment: #abb0b6;
    --accent: #ffaa33;

    /* original ayu colors */
    --orange: #ff9940;
    --green: #86b300;
    --blue: #4cbf99;
    --purple: #a37acc;
    --red: #ec3838;

    /* extended catppuccin based colors */
    --flamingo: #ff7d7d;
    --rosewater: #eca69a;
    --pink: #ff8adb;
    --mauve: #ba8aff;
    --maroon: #e06c75;
    --peach: #ffac6b;
    --yellow: #e5c07b;
    --teal: #2bbac5;
    --sky: #3eacce;
    --sapphire: #4db5d0;
    --lavender: #7881ce;

    /* ui accent colors */
    --ui-orange: #fa8d3e;
    --ui-green: #91b362;
    --ui-blue: #6994bf;
    --ui-purple: #7e57c2;
    --ui-teal: #56c2c0;
    --ui-lavender: #9d8cdb;

    /* misc. */
    --border: #e4e4e4;
    --shadow: rgba(0, 0, 0, 0.1);
    --hover: rgba(0, 0, 0, 0.05);
    --active: rgba(0, 0, 0, 0.1);
    --focus: #86b300;
}

html[data-theme="dark"] {
    /* base colors */
    --background: #0a0e14;
    --foreground: #d8d6d2;
    --selection: #253340;
    --comment: #5c6773;
    --accent: #e6b450;

    /* original ayu colors */
    --orange: #ffb454;
    --green: #aad94c;
    --blue: #59c2ff;
    --purple: #d2a6ff;
    --red: #f0646b;

    /* extended catppuccin based colors */
    --flamingo: #f2cdcd;
    --rosewater: #f5e0dc;
    --pink: #ffc9e3;
    --mauve: #cba6f7;
    --maroon: #eba0ac;
    --peach: #ffcca8;
    --yellow: #f9e2af;
    --teal: #8ddedc;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --lavender: #b4befe;

    /* ui accent colors */
    --ui-orange: #e6b450;
    --ui-green: #aad94c;
    --ui-blue: #39bae6;
    --ui-purple: #a37acc;
    --ui-teal: #7adbd3;
    --ui-lavender: #ada0f3;

    /* misc. */
    --border: #1a1f29;
    --shadow: rgba(0, 0, 0, 0.4);
    --hover: rgba(255, 255, 255, 0.05);
    --active: rgba(255, 255, 255, 0.1);
    --focus: #ffb454;
}

/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */

html {
    background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%);
    background-attachment: fixed;
}

body {
    background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
    min-height: calc(100vh - 4rem);
    font-family: var(--font-family);
    font-size: 1.125rem;
    text-transform: lowercase;
    margin: unset !important;
    /* idk why it does that */
}

/* text formatting and config stuff */

/* headings */
h1,
h1 a {
    color: var(--foreground);
    font-size: 2rem;
    text-decoration: none;
}

/* apparently having more than one h1 is against web standards
but i prefer how it looks so i just use the same styling again */
h2,
h2 a {
    color: var(--foreground);
    font-size: 2rem;
    text-decoration: none;
}

h3,
h3 a {
    font-size: 2rem;
}

/* text */
p,
li,
button {
    font-size: 1.125rem;

    [class^="tabler--"] {
        transform: scale(1.13);
    }
}

/* links should look good i think */
a {
    font-size: 1.125rem;
    color: var(--accent);
    transition: 0.2s;
}

a:hover {
    transition: 0.2s;
    text-shadow: 0em 0em 0.25em var(--accent);
}

/* smol text */
small,
small a {
    font-size: 0.875rem;
}

/* lists need some styling */
li {
    margin-left: -.7em;
    padding-bottom: .5rem;
}

/* gay ass text */
.rainbow {
    animation: 2s linear infinite rainbow;
    -webkit-animation: 2s linear infinite rainbow;
    -moz-animation: 2s linear infinite rainbow;
}

/* heading 1 is also clickable */
h1 a:hover {
    text-decoration: underline;
}

/* the tabler icons svgs styling */
.tabler-icon,
.icon .icon-tabler {
    width: 1.3rem;
    height: 1.3rem;
    padding-bottom: .2rem;
    vertical-align: middle !important;
    color: var(--foreground) !important;
}

/* code (enforced monospace) */
.code {
    font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
}

/* caption styled text */
.caption {
    font-size: small;
    opacity: .8;

    .section {
        font-size: smaller;
        opacity: .9;
    }
}

/* styled details elements */
details.styled {
    summary {
        span {
            padding-right: .6rem;
            transform: translateY(.1rem);
            vertical-align: middle;
        }
        .tabler--arrow-autofit-height:last-of-type {
            margin-left: auto;
        }
        background: linear-gradient(color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 50%, transparent));
        border-bottom: unset !important;
        cursor: pointer;
        padding: .5rem;
    }

    section {
        padding: 1.4rem;
        text-align: start !important;
    }

    .card {
        background-color: var(--background);
        border-radius: 1rem;
        border: .1rem solid var(--border);
        margin-bottom: 1.4rem;
        padding: 1rem;

        h2 {
            margin-top: 0rem !important;
            margin-bottom: .4rem !important;
        }

        .button {
            background-color: color-mix(in srgb, var(--accent) 30%, transparent);
            border-radius: 1rem;
            color: var(--foreground);
            padding: .4rem;
            text-decoration: none;
            text-shadow: none;
            transition: all .2s;
        }
        .button:hover {
            background-color: var(--accent);
            color: var(--background);
            transition: all .2s;
        }
    }
    .card.last {
        margin-bottom: unset !important;
    }

    .card.tilde-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
        margin-bottom: unset !important;
    }

    .card.question {
        p {
            margin: .6rem !important;
        }
    }

    .last {
        margin-bottom: .8rem;
    }

    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: .8rem .4rem .8rem .4rem;
    border: .1rem solid var(--border);
    margin-top: 1rem;
    overflow: clip;
}

/* Dashed border */
hr.dashed {
    border-top: .1rem dashed var(--border);
}

/* Dotted border */
hr.dotted {
    border-top: .1rem dotted var(--border);
}

/* Solid border */
hr.solid {
    border-top: .1rem solid var(--border);
}

/* Rounded border */
hr.rounded {
    border-top: .2rem solid var(--border);
    border-radius: 5px;
} 

/* audio */
audio {
    border-radius: 3rem;
}

/* summary styling */
summary {
    display: flex;
}

/* ---------------
- alt text popup -
--------------- */

.alt-popup {
    position: fixed;
    text-transform: none !important;
    background-color: color-mix(in srgb, var(--background) 85%, transparent);
    backdrop-filter: blur(.5rem);
    color: var(--foreground);
    padding: .5rem;
    border: solid .01rem var(--accent);
    border-radius: .5rem;
    font-size: 1rem;
    max-width: 30rem;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}

/* ╭────────────────────────────────────────╮
/  │    ____                     _ _        │
/  │   / __ \ _ __ ___   ___  __| (_) __ _  │
/  │  / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
/  │ | | (_| | | | | | |  __/ (_| | | (_| | │
/  │  \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
/  │   \____/                               │
/  ╰────────────────────────────────────────╯
/  @media / at-media - styling depending on browser configuration / settings 
/  other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */

/* disable certain animations if user has animations disabled on their system */

@media (prefers-reduced-motion: reduce) {
    body {
        background: var(--background) !important;
        animation: unset !important;
        -moz-animation: unset !important;
        -webkit-animation: unset !important;
    }

    /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
    * {
        transition: none !important;
        animation: unset !important;
        -moz-animation: unset !important;
        -webkit-animation: unset !important;
    }

    /* fedi icon on /me should keep its animation (temp, find a better solution later) */
    .fedi-icon {
        animation: opacity-blink 4s infinite !important;
    }
    .fedi-icon-2 {
        animation: opacity-blink-reverse 4s infinite !important;
    }
}

/* different styling for elements in dark mode 
   must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */

html:not([data-theme="light"]) {
    @media (prefers-color-scheme: dark) {
        .navbar {
            .nav-home:hover {
                background-color: var(--accent);
                color: var(--background);
            }
            .nav-notebook:hover {
                background-color: var(--purple);
                color: var(--background);
            }
            .nav-webmaster:hover {
                background-color: var(--green);
                color: var(--background);
            }
            .nav-donate:hover {
                background-color: var(--pink);
                color: var(--background);
            }
        }
    }
}

html[data-theme="dark"] {
    .navbar {
        .nav-home:hover {
            background-color: var(--accent);
            color: var(--background);
        }
        .nav-notebook:hover {
            background-color: var(--purple);
            color: var(--background);
        }
        .nav-webmaster:hover {
            background-color: var(--green);
            color: var(--background);
        }
        .nav-donate:hover {
            background-color: var(--pink);
            color: var(--background);
        }
    }
}

/* modify widths and spacing depending on the size of the display */

@media screen and (max-width: 1083px) {
    .navbar {
        .nav-desktop {
            display: none !important;
        }

        .nav-mobile-menu {
            display: inline-block !important;
            max-width: 3rem;
            min-width: 3rem;
            position: relative;

            input[type="checkbox"] {
                left: -100vw;
                position: absolute;
            }

            label {
                border-radius: 1rem;
                cursor: pointer;
                display: inline-block;
                left: -.5rem;
                margin-right: .1rem;
                max-height: 2rem;
                max-width: 3rem;
                min-height: 2rem;
                min-width: 3rem;
                overflow: hidden !important;
                padding-right: 1rem;
                position: relative;

                .synth-icon {
                    transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem);
                }
            }

            label:hover {
                .synth-icon {
                    transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg);
                }
            }

            ul {
                background-color: var(--background);
                border-radius: 1rem;
                border: var(--accent) solid .15rem;
                height: max-content;
                left: 0;
                margin-top: .4rem !important;
                position: absolute;
                visibility: hidden;
                width: max-content;

                /* inital "hidden" state, used for providing animation when activated */
                opacity: 0;
                scale: .5;
                transform-origin: top left;
                transition: opacity .3s, scale .3s, visibility .3s;

                li {
                    border-radius: 1rem;
                    list-style-type: none;
                    margin: .5rem .5rem .5rem -1.9rem;
                    overflow: clip;
                    padding: .7rem;
                    transition: .2s all;

                    a {
                        color: var(--foreground);
                        text-decoration: none;
                        text-shadow: unset;
                    }

                    [class^="tabler--"] {
                        padding-right: .3em;
                        transition: .2s all;
                    }
                }

                li:hover {
                    transition: .2s all;

                    [class^="tabler--"] {
                        transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
                        transition: .2s all;
                    }
                }

                .nav-home:hover {
                    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
                    a {
                        color: var(--foreground);
                    }
                }
                .nav-notebook:hover {
                    background-color: color-mix(in srgb, var(--purple) 20%, transparent);
                    a {
                        color: var(--foreground);
                    }
                }
                .nav-webmaster:hover {
                    background-color: color-mix(in srgb, var(--green) 20%, transparent);
                    a {
                        color: var(--foreground);
                    }
                }
                .nav-donate:hover {
                    background-color: color-mix(in srgb, var(--pink) 20%, transparent);
                    a {
                        color: var(--foreground);
                    }
                }
            }

            input[type="checkbox"]:checked ~ ul {
                /* makes the menu visibile when activated and makes it appear from the top right */
                opacity: 1;
                scale: 1;
                transition: opacity .3s, scale .3s, visibility .3s;
                visibility: visible;
            }
        }

        .nav-links {
            display: none !important;
        }

        .nav-settings {
            span {
                padding: 0 .4rem !important;
            }
        }
    }

    .window:not(#footer) {
        .header {
            .icon {
                padding: .3rem .4rem .3rem .4rem;
            }

            .window-buttons {
                display: none !important;
            }

            .close-button {
                margin-left: auto !important;
            }
        }

        main, section, article {
            padding: .5rem;
        }

        animation: unset !important;
        border-bottom: var(--accent) solid .15rem;
        border-left: unset !important;
        border-radius: unset !important;
        border-right: unset !important;
        border-top: var(--accent) solid .15rem;
        margin-bottom: .8em;
    }

    /* window when its the first one on the page */
    .window:first-child {
        margin-top: 3.4rem !important;
    }

    @media (prefers-color-scheme: dark) {
        html:not([data-theme="light"]) {
            .navbar .nav-mobile-menu ul {
                .nav-home:hover a {
                    color: var(--accent);
                }
                .nav-notebook:hover a {
                    color: var(--purple);
                }
                .nav-webmaster:hover a {
                    color: var(--green);
                }
                .nav-donate:hover a {
                    color: var(--pink);
                }
            }
        }
    }

    html[data-theme="dark"] {
        .navbar .nav-mobile-menu ul {
            .nav-home:hover a {
                color: var(--accent);
            }
            .nav-notebook:hover a {
                color: var(--purple);
            }
            .nav-webmaster:hover a {
                color: var(--green);
            }
            .nav-donate:hover a {
                color: var(--pink);
            }
        }
    }
}

@media screen and (max-width: 540px) {
    #footer {
        border-top: var(--accent) solid .15rem;
        border-bottom: var(--accent) solid .15rem;
        border-left: unset !important;
        border-right: unset !important;
        border-radius: unset !important;
        margin-bottom: .8em;
    }
}