/**** common.css ****/

/* Common styling shared across entire site. */
/* Includes themeing, destyling, flexbox utilities, and the shared navbar. */

/* Website (C) 2025 Narayana "Kat" Adisasmito-Smith */
/* Text and images from this site may not be used as training data for AI. */

:root {
    /**** color palette and theming ****/

    --background-nav: #461220;
    --text-nav: #ffd994;
    --border-nav: #64182c;

    --background-nav-selected: #6b4226;
    --background-nav-unselected: #eac8a2;

    --background-light: #f2e3d3;
    --background-inset: #dbb78f; /* vibrant */
    --background-medium: #bfa07e; /* muted */
    --background-dark: #ad8e6c; /* fractionally darker than medium */
    --text-dark: #4f3a09;
    --text-medium: #806d46;
    --text-light: #fdf7ea;

    --border-dark: #4f3a09;
    --border-medium: #75544b;
    --border-light: #bfa07e;

    --popout-shadow: 0 0 10px #00000038;

    /**** positioning ****/

    --layer-background: -1; /* static backgrounds */
    --layer-front: 2; /* elems that hover over content */
    --layer-nav: 3; /* nav elements, and elements that hang from navbar */
    --layer-overlay: 5; /* modals and overlays */

    --thumbnail-position: center center / cover no-repeat;

    /**** responsive layout and fluid typography ****/

    /* dynamic units calculated mobile-first; see media queries for desktop layout */
    --fluid-font-size: max(2.5vh, calc(1rem + 1.0vw));
    --nav-pad: 0.25em;
    --content-pad: 0.6rem;
    --title-font-size: calc(1.17 * var(--fluid-font-size));
    --nav-height: calc(2 * var(--content-pad) + var(--title-font-size)); /* anchor for hanging content */
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman';
}
body {
    background-color: var(--background-nav);
    font-size: var(--fluid-font-size);
    overflow-x: hidden; /* 100vw overflows horizontally only on chrome; chrome scrollbars contribute to viewport size, but position themselves outside it, forcing it to expand */
}
button {
    color: var(--text-dark);
    background-color: transparent;
    border: none;
    outline: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}



/**** FLEXBOX UTILITY ****/

.flex-sep {
    width: 0;
    flex-grow: 1;
}
.flex-row {
    display: flex;
    flex-direction: row !important;
    align-items: start;
}
.flex-col {
    display: flex;
    flex-direction: column !important;
}
.flex-adapt {
    /* column on mobile, row on desktop */
    display: flex;
    flex-direction: column !important;
    align-items: center;
}
.flex-adapt-reverse {
    /* row on mobile, column on desktop */
    display: flex;
    flex-direction: row !important;
    align-items: normal;
    justify-content: center;
}
.flex-centered {
    align-items: center;
    justify-content: center;
}


/**** BEHAVIOR ****/

.no-scrollbar {
    overflow: scroll;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for Chrome, Safari, and Opera */
.desktop-only {
    /* visibility: hidden; */
    /* display: none; */
}
.no-wrap {
    white-space: nowrap;
}



/**** NAV BAR ****/

#nav-bar {
    color: var(--text-nav);
    background-color: var(--background-nav);
    border-bottom: 1px solid var(--border-nav);
    z-index: var(--layer-nav);

    position: sticky;
    top: 0;
    width: 100%;
    font-size: var(--title-font-size);

    align-items: center;
    justify-content: space-between;
}
#nav-title {
    margin-left: var(--content-pad);
    /* unstyle <h1> */
    font-size: var(--title-font-size);
    line-height: var(--title-font-size);
}
#nav-menu {
    /* https://www.sliderrevolution.com/resources/css-dropdown-menu/ */
    cursor: pointer;
    display: inline-block;
}
#nav-target {
    /* always-visible click/hover target to trigger menu dropdown */
    font-size: 0.8em;
    align-items: center;
    gap: 0.2em;
    padding: 0 0.2em; /* provide larger click target for touchscreens */
}

#nav-icon {
    pointer-events: none;
    width: var(--nav-height);
    height: var(--nav-height);
}

#nav-dropdown {
    background-color: var(--background-nav-unselected);
    border-bottom: 1px solid var(--border-light);

    /* initially hidden, revealed on hover/tap */
    visibility: hidden;

    position: absolute;
    top: var(--nav-height);
    /* left: 0px; */
    right: 0;
    width: 100vw;
    padding: 0.25em;

    align-items: stretch;
    /* justify-content: end; */
}
#nav-dropdown > ul {
    text-align: left;
    list-style: none;
}
#nav-dropdown > ul + ul {
    border-left: none;
    border-top: 1px solid var(--text-dark);
}
#nav-dropdown > ul > li {
    cursor: pointer;
    color: var(--text-dark);
    font-size: 0.8em;
}
#nav-dropdown > ul > li:hover {
    color: var(--text-nav);
    background-color: var(--background-nav-selected);
}
#nav-dropdown > ul > li > a, #nav-dropdown > ul > li > p {
    color: inherit;
    display: inline-block;
    width: 100%;
    padding: 0.15em 0.75em;
    text-decoration: inherit;

}
.nav-greyed-out {
    cursor: default;
    color: var(--text-dark);
    padding: 0.15em 0.75em;
    font-size: 0.8em;
    opacity: 50%;
}

.nav-arrow {
    display: flex;
    width: calc(0.5 * var(--nav-height));
    height: var(--nav-height);

    align-items: center;
    justify-content: center;
}
.nav-arrow > div {
    --thickness: 0.11em;
    --border: var(--thickness) solid var(--text-nav);
    border-top: var(--border);
    border-right: var(--border);
    transform: translate(0,-25%) rotate(135deg);
    transform-origin: center;

    display: inline-block;
    width: calc(4 * var(--thickness));
    height: calc(4 * var(--thickness));
}



/**** MEDIA QUERIES ****/

@media (max-aspect-ratio: 5/4) { /* mobile mode */
    /* all styling is mobile-first, but if an element requires specific overrides, those go here */
    .desktop-only {
        display: none;
    }
}
@media (min-aspect-ratio: 5/4) { /* desktop mode */
    :root {
        --title-font-size: 1.0em;
        --nav-height: calc(1.5 * var(--fluid-font-size)); /* ref height for content anchors; 1.0em text + 2*0.25em padding */
    }
    .flex-adapt {
        display: flex;
        flex-direction: row !important;
        align-items: normal;
        justify-content: center;
    }
    .flex-adapt-reverse {
        display: flex;
        flex-direction: column !important;
        align-items: center;
    }
    .desktop-only {
        /* visibility: visible; */
        /* display: ''; */
    }

    #nav-title {
        margin-left: calc(2 * var(--content-pad));
    }
    #nav-dropdown {
        width: auto;
        height: calc(100vh - var(--nav-height));
    }
    /* #nav-dropdown > ul + ul {
        border-left: 1px solid var(--text-dark);
        border-top: none;
    } */
}