/* =====
   Fonts
   ===== */

@font-face {
    font-family: NotoSans-web;
    src: url(/fonts/NotoSans-VariableFont_wdth,wght.ttf) format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: NotoSans-web;
    src: url(/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf) format("truetype-variations");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: FiraCode-web;
    src: url(/fonts/FiraCode-Retina.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BitApple-web;
    src: url(/fonts/TOF_BitApple.otf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: ComputoMonospace-web;
    src: url(/fonts/ComputoMonospace-Regular.otf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========
   Universal
   ========= */

:root {
    --font-body: "Noto Sans", NotoSans-web, Verdana, sans-serif;
    --font-clock: "Computo Monospace", ComputoMonospace-web, monospace;
    --body-line-height: 1.5;
    --content-spacing: 1rem;
    --panel-border-width: 0.125rem;
    --panel-border-color: grey;
    --site-surface: whitesmoke;
    --interaction-highlight: lemonchiffon;
    --link-hover-bg: var(--interaction-highlight);
    --link-transition-duration: 0.15s;
}

html {
    /* 
    1rem = Never go below user's preferred font size (default: 16px)
    calc(0.5rem + 0.4vw) = Preferred size based on root font size and viewport width
    1.5rem = Never go above 1.5x the user's preferred font size
    */
    font-size: clamp(1rem, calc(0.5rem + 0.4vw), 1.5rem);
}

* {
    /* Include border and padding in element dimensions */
    box-sizing: border-box;
}

body {
    /* Default font */
    font-family: var(--font-body);

    margin: 0;
    padding: 0;
    color: black;
    line-height: var(--body-line-height);

    /* Fallback backgrounds */
    background-image: linear-gradient(#408040, #004000 55%, #002000 80%, #001000);
    background-color: #206020;
    /* Stretch gradient to fill viewport */
    background-attachment: fixed;
}

body img {
    max-width: 100%; /* Don't overflow the main container */
}

body a {
    transition: background-color var(--link-transition-duration) ease;
}

body a:not(.lift):hover {
    background-color: var(--link-hover-bg);
}

/* ==============
   Main container
   ============== */

#container {
    --container-width: 95%;
    --container-max-width: 60rem;
    --container-min-width: 20rem;
    --container-border-width: 0.25rem;

    width: var(--container-width);
    max-width: var(--container-max-width);
    min-width: var(--container-min-width);
    margin: var(--content-spacing) auto;
    background-color: var(--site-surface);
    border: var(--container-border-width) outset var(--site-surface);
    padding: var(--content-spacing);
}

/* ---------
   Site icon
   --------- */

#site-icon {
    --icon-hue-cycle-duration: 2s;

    height: 1.6em; /* Icon is 1.6x the title's font size */
    vertical-align: middle;
}

#site-icon:hover {
    animation: rainbow-hue var(--icon-hue-cycle-duration) linear infinite;
}

@keyframes rainbow-hue {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* -------------------
   Header & navigation
   ------------------- */

header {
    --header-bottom-padding: 0.625rem;

    text-align: center;
    border-bottom: var(--panel-border-width) solid var(--panel-border-color);
    margin-bottom: var(--content-spacing);
    padding-bottom: var(--header-bottom-padding);
}

h1 {
    --title-font-size: 2.5rem;

    font-size: var(--title-font-size);
    letter-spacing: 0.02em;
    margin: 0.75rem 0;
}

header > h1,
#page-heading {
    margin-top: 0;
}

nav {
    --nav-surface: lightgrey;
    --nav-font-size: 1.25rem;
    --nav-padding: 0.25rem;
    --nav-link-spacing: 1rem;

    background-color: var(--nav-surface);
    border: var(--panel-border-width) inset var(--nav-surface);
    font-size: var(--nav-font-size);
    text-align: center;
    padding: var(--nav-padding);
    margin-bottom: var(--content-spacing);
}

nav a {
    font-weight: bold;
    margin: 0 var(--nav-link-spacing);
}

/* Remove interactivity from disabled nav items */
nav a.disabled {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* -------
   Marquee
   ------- */

#marquee-container {
    background: #101010;
    color: springgreen;
    font-family: "Fira Code Retina", FiraCode-web, Consolas, "Courier New", Courier, monospace;
    padding: 0.5rem;
    margin-bottom: 0.25rem;

    overflow: hidden; /* Hide text outside the box */
    white-space: nowrap; /* Disable text wrap */
}

#marquee {
    --marquee-duration: 40s;
    --marquee-lead-in: 110%; /* Extra offscreen space to create a pause at the start and between cycles */

    display: inline-block; /* Use content width, not width of the parent container */
    padding-left: var(--marquee-lead-in);
    animation: marquee-scroll-left var(--marquee-duration) linear infinite;

    user-select: none; /* Make text un-selectable */
}

#marquee-container:hover #marquee {
    /* Pause marquee scroll on hover */
    animation-play-state: paused;
}

@keyframes marquee-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ---------------------
   Main layout (flexbox)
   --------------------- */

#main-content {
    --column-gap: 1.25rem;

    display: flex;
    gap: var(--column-gap);
}

/* -----
   Aside
   ----- */

aside {
    --sidebar-basis: 12rem;
    --sidebar-padding: 0.625rem;
    --sidebar-list-indent: 1.25rem;

    flex: 1 1 var(--sidebar-basis);
    min-width: 0; /* Let width shrink even if a word or child element is wider */
    border: var(--panel-border-width) solid var(--panel-border-color);
    padding: var(--sidebar-padding);
    background-color: #f0f0f0;
}

#aside-heading {
    margin: 0;
    text-align: center;
}

/* Superscript smiley face :) */
#aside-heading sup {
    font-family: "TOF Bit Apple", BitApple-web, var(--font-body);
    font-size: 0.5em;
}

.aside-link-heading {
    margin-bottom: 0;
}

.aside-links {
    padding-left: var(--sidebar-list-indent);
    font-weight: bold;
}

main {
    --main-basis: 25rem;

    flex: 3 1 var(--main-basis); /* Content gets 3 shares of spare width, aside gets 1 */
    min-width: 0;
    border: var(--panel-border-width) solid var(--panel-border-color);
    padding: var(--content-spacing);
}

/* -------------------------------
   Exhibits page + featured images
   ------------------------------- */

#exhibit-grid {
    --exhibit-card-min-width: 8.6rem; /* Smallest value that maxes out at 3 columns - programmatic solutions massively complicate grid-template-columns */
    --exhibit-grid-min-gap: 0.25rem;

    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--exhibit-card-min-width)), 1fr));
    gap: clamp(var(--exhibit-grid-min-gap), 2vw, var(--content-spacing));
    padding: 0;
}

.exhibit-card-img-container {
    aspect-ratio: 1 / 1;
}

.exhibit-card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill without stretching */
    display: block; /* Ignore text baseline and other text rules */
}

.exhibit-card-text {
    --exhibit-text-min-height: 4.5rem;

    min-height: var(--exhibit-text-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.exhibit-card-text h3 {
    --exhibit-title-max-lines: 2;

    margin: 0; /* Don't let heading margins inflate spacing */
    text-align: center;
    line-height: 1.25;

    /*
    Limit to two lines max
    Overflows with an ellipsis

    MDN note: "For legacy support, the vendor-prefixed -webkit-line-clamp
    property only works in combination with the display property set to
    -webkit-box or -webkit-inline-box and the -webkit-box-orient property
    set to vertical. Despite these prefixed properties being deprecated,
    the co-dependency of these three properties is a fully specified
    behavior and will continue to be supported."
    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp
    */
    display: -webkit-box;
    -webkit-line-clamp: var(--exhibit-title-max-lines);
    line-clamp: var(--exhibit-title-max-lines); /* For compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere; /* Very long words at the end break the layout - this forces them into the overflow */
}

/* ----------- 
   Lift effect
   ----------- */

/* Keep the clickable area stationary while lift-surface lifts */
.lift {
    --lift-hover-distance: 0.35rem;
    --lift-press-distance: 0.1rem;
    --lift-transition-duration: 0.2s;
    --lift-press-duration: 0.05s;
    --lift-border-width: 0.25rem;
    --lift-surface: #eee;
    --lift-hover-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
    --lift-press-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.15);

    display: block;
    position: relative;
}

/* Ensure the top edge is clickable even when the surface moves away */
.lift::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--lift-hover-distance)) 0 100%;
}

.lift-surface {
    border: var(--lift-border-width) outset var(--lift-surface);
    background-color: var(--lift-surface);
    transition:
        transform var(--lift-transition-duration) ease,
        box-shadow var(--lift-transition-duration) ease,
        border-color var(--lift-transition-duration) ease,
        background-color var(--lift-transition-duration) ease;
}

.lift:hover > .lift-surface {
    transform: translateY(calc(-1 * var(--lift-hover-distance)));
    box-shadow: var(--lift-hover-shadow);
    border-color: var(--interaction-highlight);
    background-color: var(--interaction-highlight);
}

.lift:active > .lift-surface {
    transform: translateY(var(--lift-press-distance));
    box-shadow: var(--lift-press-shadow);
    transition-duration: var(--lift-press-duration);
    transition-timing-function: ease-in;
}

/* ------
   Images
   ------ */

.featured-block {
    display: flow-root; /* Contain the floated image inside this block so the next block starts below it */
    margin: var(--content-spacing) 0; /* Use normal paragraph spacing */
}

/* Align accompanying text with the top of the image */
.featured-block > .lift + * {
    margin-top: 0;
}

/* Don't add internal spacing to next block's margin */
.featured-block > :last-child {
    margin-bottom: 0;
}

.featured {
    --featured-image-limit: 12rem;

    max-width: var(--featured-image-limit);
    max-height: var(--featured-image-limit);
    display: block; /* Ignore text baseline and other text rules */
}

.float-left,
.float-right {
    --featured-text-gap: 1rem;
    --featured-bottom-gap: 0.5rem;

    margin-bottom: var(--featured-bottom-gap);
}

.float-left {
    float: left;
    margin-right: var(--featured-text-gap);
}

.float-right {
    float: right;
    margin-left: var(--featured-text-gap);
}

/* ------
   Curios
   ------ */

#clock {
    --aside-clock-font-size: 2rem;

    font-family: var(--font-clock);
    font-size: var(--aside-clock-font-size);
    display: block;
    width: fit-content;

    margin: 0 auto;
    text-align: center;

    color: grey;
    text-decoration: none;
    padding: 0.25rem 0.5rem; /* Touch target padding */
}

/* --------
   Info bar
   -------- */

#info-bar {
    display: flex;
    justify-content: space-between;
}

#info-bar p {
    margin-bottom: 0;
}

/* =========
   Overrides
   ========= */

/* Stack at <45rem (usually 720px) */
/* Custom properties cannot be used in media-query conditions */
@media (max-width: 45rem) {
    /* Shrink the title */
    h1 {
        --title-font-size: 1.8rem;
    }

    /* Drop the aside below the content */
    #main-content {
        flex-direction: column-reverse;
    }
}

/* Hide the Eleventy credit at <25rem (when there's not enough room for it + the version and date) */
@media (max-width: 25rem) {
    #eleventy-credit {
        display: none;
    }
}