:root {
    --page-max-width: 1920px;
}

@font-face {
    font-family: "CatShop";
    src: url("/static/assets/fonts/CatShop.woff2") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Redaction";
    src: url("/static/assets/fonts/Redaction-Regular.otf") format("opentype");
    font-display: swap;
}



body, html {
    padding: 0.5em 1em;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    background: #E5A2C0 linear-gradient(#F19EC3, #FFE900);
    font-size: 20px;
    min-height: 100vh;
}

.Content {
    max-width: var(--page-max-width);
    margin: 0 auto;
    transition: opacity 1s ease-in;
    opacity: 1;
}

.Content.htmx-settling {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in;
    transition-delay: 1s;
}

p {
    font-family: "Charis SIL";
}

.Hero {
    background: #D086A8;
    font-family: "Charis SIL";
    padding: 1.5em 1.5em;
    margin-bottom: 2em;
    font-size: 1.2em;
    border-radius: 5px;
}


h1,h2,h3,h4,h5,h6 {
    font-family: "Charis SIL", "CatShop", "Redaction", sans-serif;
}


.PageDetails {
    border-top: 2px solid #00000030;
    border-bottom: 2px solid #00000030;
    padding: 1em 0;
    font-family: "Redaction";
}

.PageDetails li {
    list-style: none;
    padding-left: 0;
    height: fit-content;
}
.Gallery {
    width: 100%;
    margin: 1em 0;
}

.PhotoCredits {
    margin: 2em 0;
}

.masonry-item {
    width: calc(33.333% - 15px);
    margin-bottom: 15px;
    box-sizing: border-box;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
}

.masonry-item img {
    width: 100%;
}


.Panel {
    margin: 2em 0;
}

.TagGallery {
    display: flex;
    gap: 1em;
    margin: 2em 0 0em;
}

.TagGallery a:link, .TagGallery a:visited {
    color: #000000;
    text-decoration: none;
}

.TagGallery--Wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.TagGallery--Wide a:hover, .EntityCard:hover .EntityCard__Body {
    background-color: #FBEB59;
    background-position: right 1em center;
    background-repeat: no-repeat;
    position: relative;
    background-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.0378 6.34317L13.6269 7.76069L16.8972 11.0157L3.29211 11.0293L3.29413 13.0293L16.8619 13.0157L13.6467 16.2459L15.0643 17.6568L20.7079 11.9868L15.0378 6.34317Z" fill="currentColor"/></svg>');
}


.TagGallery__Tag {
    border-radius: 5px;
    background-color: #FBEB5970;
    font-family: "CatShop";
    padding: 0.5em 0.8em;
}

.TagGallery__Tag:hover {
    background-color: #FBEB59;
}

.Footer {
    margin-top: 2em;
    font-family: "Redaction";
    max-width: var(--page-max-width);
    margin: 0 auto;
}

.EntityGallery {
    display: flex;
    flex-wrap: wrap; 
    position: relative;

}

.EntityCard {
    margin: 0 1em 1em 0;
    background-color: #FBEB59;
    width: 30%;
    max-height: fit-content;
}

.EntityCard img {
    max-width: 100%;
}


.EntityCard a:link, .EntityCard a:visited {
    color: #000000;
    text-decoration: none;
}

.EntityCard__Body {
    padding: 0 2em;
}

.EntityCard__Footer {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    gap: 0.5em;
    padding: 0 2em;
}

.EntityCard__Footer svg {
    width: 16px;
    height: 16px;
}

.MainHeader {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-family: "Redaction";
    max-width: var(--page-max-width);
    margin: 0 auto;
}

.MainHeader__Logo {
    grid-column: 2;
    justify-self: center;
}

.MainHeader__Item {
    display: flex;
    gap: 1em;
}

.MainHeader__Item:first-of-type {
    justify-self: start;
}

.MainHeader__Item:last-of-type {
    justify-self: end;
}

.MainHeader__Item svg {
    width: 16px;
    height: 16px;
}

.MainHeader a:link, .MainHeader a:visited {
    color: #000000;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    font-weight: bold;
}

.MainHeader a:hover {
    opacity: 0.4;
}
.MainHeader .Logo {
    width: 64px;
}

.MainHeader .Logo:hover {
    opacity: 0.8;
}


.Form {
        max-width: 800px;
        margin: 0 auto;
}

.Form__Group {
    margin-bottom: 1em;
}

.Form label {
    font-weight: 500;
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 5px;
}

.Form__Actions {
    display: flex;
    gap: 1em;
    margin: 1em 0;
    align-items: center;
}

.Form input[type="text"],
.Form input[type="number"],
.Form input[type="url"],
.Form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

.Form input[type="checkbox"] {
    height: 24px;
    width: 24px;
    appearance: none;
    background-color: #fff;
    position: relative;
}

.Form input[type="checkbox"]:hover {
    outline: 1px solid #00000030;
}

.Form input[type="checkbox"]::after {
    position: absolute;
    top:8px;
    left:8px;
    width: 8px;
    height: 8px;
    background-color: #000;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s ease-in, transform 0.1s ease-in;
    content: "";
}
Form input[type="checkbox"]:checked {
    font-weight:900;
}
Form input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: scale(1);
}

.Form__HelpText {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 4px;
}

.Form__Errors {
    color: red;
    margin-bottom: 15px;
}

.Button:hover {
    box-shadow: 1px 1px 10px 0px #00000030;
}

.Button {
    padding: 0.5em 1em;
    border-radius: 5px;
    background-color: #D086A8;
    font-family: "CatShop";
    font-size: 1em;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    display: inline-block;
}


.Kingdom {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 2em;
    position: relative;
}


.Wizard__TagFilter {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.Wizard__TagFilter .TagGallery__Tag {
    font-family: "Redaction";
    font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
}

.Wizard__Range {
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

.Wizard__Range::-webkit-slider-runnable-track {
    height: 4px;
    background: #000;
}

.Wizard__Range::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -16px; /* Centers thumb on the track */
    background-color: #FBEB59;
    height: 2rem;
    width: 1rem;    
 }

.Wizard__Range::-webkit-slider-thumb:focus {
    background-color: #D086A8;
}
.Wizard__Range::-moz-range-track {
    height: 4px;
    background: #000;
}

.Wizard__TagFilter .TagGallery__Tag input[type="checkbox"] {
    display: none;
}

.Wizard__Range__Display {
    margin-top: 1em;
    font-family: "CatShop";
}

.Wizard__Title:first-of-type {
    margin-top: 0;
}

input[type="checkbox"]:checked + label.TagGallery__Tag,
label.TagGallery__Tag:has(input[type="checkbox"]:checked) {
    border: 2px solid black;
}


@media (max-width: 768px) {
    .masonry-item {
        width: calc(50% - 15px);
    }

    .TagGallery  {
        flex-wrap: wrap;
    }

    
    .EntityGallery {
        display: grid;
        grid-template-columns: 1fr;
    }

    .Kingdom {
        grid-template-columns: 1fr;
    }

    .Kingdom .masonry-item {
        width: calc(100% - 15px);
    }
    body, html {
        padding: 0.2em 0.4em;
    }

    /* Mobile header adjustments */
    .MainHeader {
        grid-template-columns: auto 1fr;
        justify-content: start;
    }

    .MainHeader__Logo {
        grid-column: 1;
        justify-self: start;
        order: 1;
    }

    .MainHeader__Item:first-of-type {
        display: none; /* Hide HOME button */
    }

    .MainHeader__Item:last-of-type {
        grid-column: 2;
        justify-self: end;
        order: 2;
    }
}

.heroToggle__Close {
    position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; padding: 5px; border-radius: 3px; opacity: 0.7; transition: opacity 0.3s;
}

.heroToggle__Close:hover {
    opacity: 0.7;   
    background-color: #fff;

}