:root {
    --background: #325b91;
    --header: #1280c6;
    --footer: #4f7013;
    --highlight: #80fffa;
    --content: #DCDDDD;
    --text: #E5E4E6;
    /*--dark-text: #333;*/

    --form-button: #2399e4;
    --form-button-hover: #1280c6;

    --link: #325b91;
    --link-hover: #688e21;

    --hanging-text: #525252;
    --glass-text: #525252;
    --glass-colour-1: rgba(255,255,255,0.5);
    --glass-colour-2: rgba(255,255,255,0.3);

    --moon: #FFFFDCFF;
    --mountains: #688e21;
    --high-sky: #2399e4;
    --low-sky: #F8FBFF;

    --grass-green: #688e21;
    --purple-water: #E7E7EB;
    --pale-skin: #EAE5E3;
    --white-grey: #DCDDDD;
    --dough: #FBFAF5;
    --white-plum: #E5E4E6;
    --warning-red: #ff3c3c;

    --sans-font: Arial, sans-serif;
}

body.night {
    --high-sky: #2C1E3F;
    --low-sky: #FF6F61;
    --mountains: #061b29;

    --footer: #081525;
    --header: #021929;

    --form-button: #7c3c6a;
    --form-button-hover: #64336a;
    /*ffa680*/
    --highlight: #cbb3ff;
    --glass-text: #081525;
    --hanging-text: #E5E4E6;

    --link: #351683;
    --link-hover: #ffa96a;
    /*--link-hover: #a31e93;*/

    --glass-colour-1: rgba(225, 143, 143, 0.27);
    --glass-colour-2: rgba(211, 160, 128, 0.42);
}
body.sunset {
    --header: #8469ca;        /* warm, fading golden-brown */
    --footer: #42281d;        /* darker, muted green for base */
    --content: #E8E5E2;       /* soft off-white, warmer than day */
    --text: #F0EDEB;          /* light text with slight warmth */
    --highlight: #ffe180;

    --form-button: #8469ca;   /* sunset orange */
    --form-button-hover: #8b56a8; /* lighter, glowing hover */

    --link: #713a30;          /* earthy orange-brown links */
    --link-hover: #aa5647;    /* brighter, glowing hover */

    --hanging-text: #ffebeb;  /* neutral gray for readability */
    --glass-text: #412651;    /* matches hanging text */

    --moon: #fff0cc;          /* pale yellow, like early moonlight */
    --mountains: #472e24;     /* greenish shadows of mountains */
    /*--high-sky: #FF6F61;      !* bright sunset orange-pink at top *!*/
    /*--low-sky: #ffd899;       !* pale peach near horizon *!*/
    --high-sky: #9491f6;      /* bright sunset orange-pink at top */
    --low-sky: #ff8f3f;       /* pale peach near horizon */

    --glass-colour-1: rgba(229, 255, 253, 0.34);
    --glass-colour-2: rgba(224, 209, 255, 0.34);
}
body.midnight {
    --high-sky: #000000;       /* Deep midnight blue */
    --low-sky: #071040;        /* Slightly lighter horizon */
    --mountains: #010513;      /* Dark muted hills */

    --footer: #000000;         /* Almost black footer */
    --header: #010513;         /* Dark navy accent */

    --form-button: #313b6e;    /* Deep violet button */
    --form-button-hover: #273165; /* Hover darker */

    --highlight: rgba(136, 96, 255, 0.75);
    --glass-text: #000;     /* Light text for contrast */
    --hanging-text: rgba(255, 255, 255, 0.75);   /* Muted gray-blue text */

    /*--link: #1c2455;           !* Cool night links *!*/
    /*--link-hover: #073d6e;     !* Subtle luminous hover *!*/
    --link: #000;           /* Cool night links */
    --link-hover: rgba(221, 163, 255, 0.75);     /* Subtle luminous hover */

    --glass-colour-1: rgba(100, 98, 149, 0.9);
    --glass-colour-2: rgba(71, 101, 112, 0.71);
}
body.pink-sunset {
    --high-sky: #fdbfde;       /* Soft morning sky */
    --low-sky: #ffcb9a;        /* Warm sunrise horizon */
    --mountains: #fc9077;      /* Soft brown hills touched by sun */

    --footer: #fe9e7b;         /* Gentle light footer */
    --header: #fe9e7b;         /* Sunrise orange accent */

    --form-button: #fc9077;    /* Soft pink-purple button */
    --form-button-hover: #C1548B; /* Slightly deeper hover */

    --glass-text: #C1548B;     /* Dark text for contrast */
    --hanging-text: #ff516b;   /* Muted gray-blue text */

    --link: #FF6F91;           /* Morning pink links */
    --link-hover: #FF3E6C;     /* Vibrant hover */
}
body.purple-sunset {
    --high-sky: #A893CE;       /* Pale morning blue */
    --low-sky: #FE9FB8;        /* Gentle warm horizon */
    --mountains: #5C5BA5;      /* Soft brown hills in morning light */

    --footer: #4F4D9D;         /* Very light muted footer */
    --header: #917AD3;         /* Warm, soft orange accent */

    --form-button: #FFB3C6;    /* Soft pink button */
    --form-button-hover: #FF8FA3; /* Slightly deeper hover */

    --glass-text: #2C2C2C;     /* Dark text for contrast */
    --hanging-text: #5A6B72;   /* Muted gray-blue text */

    --link: #6CA0FF;           /* Morning blue links */
    --link-hover: #FF6F61;     /* Gentle warm hover */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(var(--high-sky), var(--low-sky));
    color: var(--hanging-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;


    font-family: Verdana, Helvetica, Arial, sans-serif;
    /*font-family: "Dongle", sans-serif;*/
    /*font-size: 1.5rem;*/
}

#mountains {
    position: fixed;
    pointer-events: none;
    z-index: -1;
}
#stars {
    position: fixed;
    opacity: 0;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to bottom, #000428, #004e92, #00aaff);*/
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.6s;
 }
body.sunset #stars, body.night #stars, body.midnight #stars {
    opacity: 1;
}

blockquote {
    border-left: 3px solid var(--header);
    padding-left: 1rem;
    margin: 0.5rem 0;
}


header {
    background-color: var(--header);
    color: var(--text);
    padding: 10px 20px;
}

.flash {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /*backdrop-filter: blur(5px);*/
    /*-webkit-backdrop-filter: blur(5px);*/
    /*background-color: var(--white-plum);*/
    /*opacity: 0.8;*/
    /*color: var(--warning-red);*/
    padding: 1rem;
    margin: 1rem;
    color: var(--glass-text);


    backdrop-filter: blur(5rem) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Dongle", sans-serif;
    font-size: 2rem;
}
nav .logo {
    color: var(--text);
    font-weight: bold;
    font-size: 2.5rem;
}
nav .logo a {
    color: #fff;
}
nav .logo a:hover {
    color: var(--text);
}
nav .nav-links, nav .user-links {
    list-style: none;
    display: flex;
    gap: 15px;
}
nav .nav-links li a,  nav .user-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
nav .nav-links li a:hover, nav .user-links a:hover {
    color: var(--highlight);
}
.burger {
    display: none;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: var(--link-hover);
}

main {
    flex: 1;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Dongle", sans-serif;
}

/*.glass {*/
/*    background: rgba(255, 255, 255, 0.4);*/
/*    border-radius: 16px;*/
/*    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
/*    backdrop-filter: blur(5px);*/
/*    -webkit-backdrop-filter: blur(5rem);*/
/*    padding: 1rem;*/
/*}*/

.glass {
    color: var(--glass-text);
    /*background: linear-gradient(*/
    /*        135deg,*/
    /*        rgba(255,255,255,0.5),*/
    /*        rgba(255,255,255,0.3)*/
    /*);*/

    background: linear-gradient(135deg, var(--glass-colour-1), var(--glass-colour-2));


    border-radius: 16px;

    /* depth */
    box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);

    /* glass edge highlight */
    border: 1px solid rgba(255, 255, 255, 0.25);

    /* blur + saturation = real glass look */
    backdrop-filter: blur(5rem) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    padding: 1rem;

}

.title-text {
    font-family: "Libre Barcode 128 Text", system-ui;
}

.columns {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 1rem;
    /*width: 100%;*/
}
.column {
    flex: 1;
    /*width: 100%;*/
    /*width: 50%;*/
}
.column.is-empty {
    display: none;
}

button {
    font-size: 1rem;
}
button:hover {
    opacity: 0.8;
}
.toggle {
    padding: 1rem;
    border-radius: 1rem;
    color: var(--hanging-text);
    background: var(--mountains);
    border: none;
    cursor: pointer;
    /*border: rgba(255, 255, 255, 0.25) solid 1px;*/

}
.buttons {
    /*margin-top: 2rem;*/
    margin: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.page-buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.button {
    /*font-family: "Dongle", sans-serif;*/
    /*background-color: var(--content);*/
    padding: 1rem;
    color: var(--glass-text);
    border: none;

    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /*backdrop-filter: blur(15px);*/
    /*-webkit-backdrop-filter: blur(5px);*/

    backdrop-filter: blur(5rem) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.clickable:active {
    transform: translateY(1px) !important;
}

/* more css for the equid icon on breeding slot manager page is inline in html*/
.equid-icon {
    background-image: url("../assets/mountains.png");
    background-size: contain;   /* scales image down to fit */
    background-repeat: no-repeat;
    background-position: center;

    border-radius: 0.2rem;
    border: 2px solid var(--header);
}

.recent-equids li {
    /*background-color: var(--content);*/
    /*border: 1px solid var(--dark-text);*/
    list-style: none;
    margin: 0.6rem;
    padding: 0.4rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;

    /*height: 40px;*/
}
.recent-equids li a {
    /*margin: 0.6rem;*/
    display: flex;
    /*justify-content: center; !* horizontal *!*/
    align-items: center;    /* vertical */
    gap: 0.4rem;
}
.recent-equids li img {
    background-image: url("../assets/mountains.png");
    background-size: contain;   /* scales image down to fit */
    background-repeat: no-repeat;
    background-position: center;

    width: 50px;
    border-radius: 0.2rem;
    border: 2px solid var(--header);
}
.recent-equids li:hover {
    background: var(--highlight);
}

.equid-page {
    width: 100%;
    /*max-width: 50%;*/
    /*display: flex;*/
    /*flex-direction: column;*/
}
.equid-page span {
    /*width: 100%;*/
}
.equid-page img {
    width: 100%;
    max-width: 900px;
    margin: 1rem auto;
}
.equid-page p {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.3rem;
}
.equid-page ul {
    display: inline-flex;
    flex-direction: row;    /* Make the list inline with the text */
    padding-left: 0;       /* Remove default padding */
    margin: 0;
}
.equid-page ul li {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;   /* Remove default margin */
    list-style: none;     /* Keep items on the same line */
}
.equid-page ul li:not(:last-child)::after {
    content: ", ";         /* Add comma after each item except the last */
}
.equid-page ol {
    margin-left: 2rem;
}

.equid-bio {
    width: 100%;
}
.equid-bio ul, ol {
    margin-left: 2rem;
}
.equid-bio p {
    margin-bottom: 1rem; /* paragraph spacing */
 }
.equid-bio br {
    /*content: "";*/
    /*display: block; !* forces line break to behave like block *!*/
    /*line-height: 1.5; !* optional spacing *!*/
}
.equid-bio img {
    max-width: 100%;
    max-height: 600px;
    /*float: right;*/
    margin: 0.5rem auto;
    display: block;
    /*width: 100%;*/
    /*max-width: 600px;*/
    /*margin: 1rem auto;*/
}
/* this is for a pagedoll i removed from equid pages bc i cldnt make it work*/
.pagedoll-container {
    /*position: relative;*/
    margin-bottom: 1rem;
}
.pagedoll {
    /*position: fixed;*/
    display: block;
    margin: 0 auto;
    /*background-color: blue;*/
    /*width: 50%;*/
    /*height: auto;*/
    bottom: 0;
    right: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}
/*.pagedoll:hover {*/
/*    opacity: 0.1;*/
/*}*/
.pagedoll img {
    max-width: 300px;
    max-height: 300px;
    filter: drop-shadow(0 0 12px var(--highlight));
}



.form-wrapper {
    max-width: 600px;
}
.form {
    /*width: 100%;*/
    /*display: flex;*/
    /*flex-direction: column;*/

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    /*max-width: 300px;*/

}
.form input {
    /*font-size: 1rem;*/
    padding: 0.5rem;
    border-radius: 1rem;
    border: none;
}
.form select {
    border: 1px solid #d1d5db;
    border-radius: 1rem;
}
.form input[type="checkbox"] {
    transform: scale(2);
    margin: 0.3rem;
}
.form .note {
    /*font-size: 1.2rem;*/
    margin: 0;
    padding: 0.3rem;
    color: var(--hanging-text);
    background-color: var(--low-sky);
    border-radius: 0.5rem;
}
.form button {
    /*font-size: 1rem;*/
    border: none;
    background-color: var(--form-button);
}
.form button:hover {
    background-color: var(--form-button-hover);
}
.form button:active {
    transform: translateY(2px);
}
.form textarea {
    padding: 0.5rem;
    width: 100%;
    font-size: 1rem;
    grid-column: 1 / -1;
    resize: vertical;
    min-height: 300px;
    color: var(--glass-text);
    background-color: var(--glass-colour-1);
}

.equid-grid {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    /*gap: 1rem;*/
}
.equid-grid a {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    border-radius: 0.5rem;
    padding: 0 1rem 1rem 1rem;
}
.equid-grid a:hover {
    transform: scale(1.01);
}
.equid-grid img {
    max-width: 150px;
    height: auto;
}

.edit-equid {
    display: flex;
    flex-direction: column;
}
.edit-equid input {
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 1rem;
    border: none;
}
.edit-equid input[type="checkbox"] {
    transform: scale(2);
    margin: 0.5rem;
}
.edit-equid .selector {
    display: flex;
    gap: 1rem;
    margin: 0.5rem;
    flex-wrap: wrap;
}
.edit-equid .selector-item {
    /*border: 1px solid var(--hanging-text);*/
}
.edit-equid ol {
    margin-left: 2rem;
}

/*.left-column {*/
/*    transform: translate(-50%);*/
/*}*/
/*.right-column {*/
/*    transform: translate(50%);*/
/*}*/
/*.fixed {*/
/*    position: fixed;*/
/*}*/

details > summary {
    cursor: pointer;
    font-weight: 600;
    /*list-style: none;*/
}
details[open] summary {
    margin-bottom: 10px;
}

.slot-manager {
    margin-left: 3rem;
}
.slot-manager input {
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 1rem;
    border: none;
}
.slot-table {
    border-spacing: 0.3rem;
    /*width: 100%;           !* full width of container *!*/
    /*border-collapse: collapse; !* merge borders *!*/
    /*text-align: left;*/
    /*font-family: Arial, sans-serif;*/
}
.slot-table thead {
    background: unset;
    padding: 1rem;
    margin: 1rem;
}
.slot-table th {
    padding: 0.5rem;
}
.slot-table th, td {
    /*border: 1px solid #ccc;  !* thin border around cells *!*/
    /*padding: 8px 12px;       !* spacing inside cells *!*/
}

.quip-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    margin: 1rem;
    gap: 1rem;
}
.quip-list h1 {
    text-transform: capitalize;
}
.quip-list li {
    max-width: 30%;
    list-style: none;
}
.quip-list li:hover {
    transform: scale(1.01);
}
.quip-list img {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
}

.quip-viewer {
    position: fixed;
    inset: 0;
    /*background: var(--glass-colour-2);*/
    color: #fff;
    display: none;
    z-index: 9999;
}
.quip-viewer.active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.quip-viewer .content {
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    text-align: center;
}
.quip-viewer h1 {
    text-transform: capitalize;
}
.quip-viewer img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin: 1rem auto;
    object-fit: contain;
}


footer {
    background-color: var(--footer);
    color: #fff;
    text-align: left;
    padding: 10px;
}

/*!* Mobile *!*/
@media (max-width: 1500px) {
    .left-column {
        all: unset;
    }
    .right-column {
        all: unset;
    }
    .fixed {
        /*all: unset;*/
    }
    .columns {
        flex-direction: column;
    }
}
@media (max-width: 800px) {
    .form {
        grid-template-columns: 1fr;
    }
    .columns {
        flex-direction: column;
    }
    .equid-page {
        max-width: 100%;
        margin: 0 auto;
    }
    #mountains {
        display: none;
    }
    #stars {
        display: none;
    }
}
/* 1. Logo scaling for mobile */
@media (max-width: 850px) {
    nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 1.5rem;
        position: relative; /* for absolutely positioned menu */
    }

    nav .logo {
        font-size: 1.8rem;
        margin: 0; /* remove bottom margin */
    }

    /* Burger button stays on right */
    .burger {
        display: block;
        font-size: 2rem;
        cursor: pointer;
        background: none;
        border: none;
        color: #fff;
        order: 2;
        margin: 0; /* remove bottom margin */
        z-index: 10; /* above menu */
    }

    /* Stack nav links below nav bar without moving burger */
    nav .nav-links,
    nav .user-links {
        position: absolute;
        top: 100%; /* just below nav bar */
        right: 0;
        /*width: 100%;*/
        flex-direction: column;
        align-items: flex-end;
        display: none;
        gap: 10px;
        background: var(--header); /* or match your nav background */
        padding: 1rem;
        z-index: 1;
    }

    /* Show menu when toggled */
    nav .nav-links.show,
    nav .user-links.show {
        display: flex;
    }
}