/* =====
   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
   ========= */

html {
    /*
    Scale fonts proportionally for 4K+ displays
    1rem = 16px minimum for mobile readability
    0.8vw is the default scaling factor
    calc(0.8vh * 16 / 9) caps ultrawide scaling, switching to the smaller axis
    */
    font-size: max(1rem, min(0.8vw, calc(0.8vh * 16 / 9)));
}

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

body {
    /* Default font */
    font-family: "Noto Sans", NotoSans-web, Verdana, sans-serif;

    /* Temp - caution stripe background */
    background: repeating-linear-gradient(-45deg, darkgoldenrod, darkgoldenrod 3rem, #202020 3rem, #202020 6rem);
    background-attachment: fixed;

    margin: 0;
    padding: 0;
    color: black;
    line-height: 1.5;
}

body a {
    display: inline-block;
    transform-origin: center;

    scale: 1;
    transition: scale 0.1s ease;
}

body a:hover {
    scale: 1.1;
}

body a:active {
    scale: 1;
}

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

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

.container {
    width: 95%;
    max-width: 56rem; /* 896px */
    min-width: 24rem; /* 384px - prevent site from breaking at miniscule widths */
    margin: 1rem auto;
    background-color: whitesmoke;
    border: 0.25rem outset whitesmoke;
    padding: 1rem;
}

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

header {
    text-align: center;
    border-bottom: 0.125rem solid grey;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
}

h1 {
    margin: 0.75rem 0;
    font-size: 2.5rem;
}

nav {
    background-color: lightgrey;
    border: 0.125rem inset lightgrey;
    padding: 0.25rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    text-align: center;
}

nav a {
    font-weight: bold;
    margin: 0 1rem;
}

/* -------
   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 {
    display: inline-block; /* Use content width, not width of the parent container */
    padding-left: 110%; /* Start off-screen on the right - a little more than 100% so there's a pause at the start + between cycles */
    animation: marquee-scroll-left 40s 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 {
    display: flex;
    gap: 1.25rem;
}

aside {
    flex: 1 1 12rem;
    border: 0.125rem solid grey;
    padding: 0.625rem;
    background-color: #f0f0f0;
}

main {
    flex: 3 1 25rem;
    border: 0.125rem solid grey;
    padding: 1rem;
}

/* -------------
   Exhibits page
   ------------- */

#exhibit-grid {
    list-style: none; /* No bullet point */
    display: grid;
    /*
    Fill each row with as many columns as possible
    Each column is at least 9rem wide but grows to fill 1 fraction of available space
    */
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));

    gap: 1rem;
    padding: 0;
}

.exhibit-card {
    background: #eee;
    border: 0.25rem outset #eee;

    scale: 1;
    transition: scale 0.1s ease;
}

.exhibit-card:hover,
.featured:hover {
    /* Subtle lift effect */
    transform: translateY(-0.25rem);
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);
    scale: 1.05;
}

.exhibit-card:active {
    scale: 1;
}

/* 
Prevent layout collapse before images load.
By default, 'body a' is inline-block, which shrinks to the width of its content.
Since an unloaded image has no width, the aspect-ratio calculation 
fails and the container collapses to 0 width. Making this 'block' ensures 
it fills the grid cell, providing the necessary width for aspect-ratio.
 */
.exhibit-card a {
    display: block;
}

/* Disable body a:hover behavior */
.exhibit-card a:hover {
    scale: 1;
}

.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 {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.5rem;
}

.exhibit-card-text h3 {
    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: 2;
    line-clamp: 2; /* 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 */
}

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

.featured {
    max-width: 12rem;
    display: block; /* Ignore text baseline and other text rules */
    border: 0.25rem outset #eee;
    margin-bottom: 0.5rem;
}

.float-left {
    float: left;
    margin-right: 1rem;
}

.float-right {
    float: right;
    margin-left: 1rem;
}

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

#clock {
    font-family: "Computo Monospace", ComputoMonospace-web, monospace;
    font-size: 2rem;
    display: block; /* Make the element only as wide as its content, so it centers correctly */
    text-align: center;

    color: grey;
    text-decoration: none;
}

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

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

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

/* ======
   Footer
   ====== */

footer {
    text-align: center;
    font-size: 1rem;
}

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

/* Adjustments for mobile (width <720px) */
@media (max-width: 45rem) {
    h1 {
        font-size: 1.8rem;
    } /* Shrink the title */
    #main-content {
        flex-direction: column-reverse;
    } /* Drop the aside below the content */
}