@font-face {
    font-family: Avenir;
    src: url('./fonts/Avenir_Roman.ttf');
}

@font-face {
    font-family: Avenir;
    src: url('./fonts/Avenir_Oblique.ttf');
    font-style: italic;
}

@font-face {
    font-family: Avenir;
    src: url('./fonts/Avenir_Medium.ttf');
    font-weight: 500;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior: none;
    scroll-behavior: smooth;
    background-color: #EBEBEB;
}

body {
    font-family: Avenir, serif;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: 100%;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    resize: none;
    overflow-x: hidden;
    font-size: 26px;
    min-width: 770px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: grid;
    place-items: center;
}

/* MARK: Div Classes */

div.site-container {
    --row-side-padding: 50px; /* Left/right padding used by rows like Title, TextBody and ButtonsRow */
    --image-line-color: color-mix(in srgb, var(--sectionrow-color), black 10%); /* Lines drawn on images: ImageMarqueeRow's dividers and SmallImage's border */
    --sectionrow-color: #F2F2F2; /* Background color of SectionRow cards. ImageMarqueeRow's lines are a darker shade of it. */
    width: 770px;
    min-height: 100vh;
    background-color: white;
    /* A box-shadow rather than a filter: a filter has to be redrawn whenever anything inside the column moves,
       which makes the marquee animations stutter in some browsers */
    box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.1);
}

.row { 
    position: relative;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.spacer { 
    height: 30px;
}

/* MARK: Div IDs */

#title { 
    margin: 0px; /* Headings have a default margin; rows handle their own spacing */
    font-family: Avenir, serif;
    font-weight: 500;
    font-size: 17px;
    text-align: left;
    padding-left: var(--row-side-padding);
    padding-right: var(--row-side-padding);
}

div#footer { 
    font-family: Avenir, serif;
    font-size: 13px;
    text-align: left;
    padding-left: var(--row-side-padding);
    padding-right: var(--row-side-padding);
    color: #B9B9B9;
}

div#textbody { 
    font-family: Avenir, serif;
    font-size: 15px;
    text-align: left;
    padding-left: var(--row-side-padding);
    padding-right: var(--row-side-padding);
}

div#buttonsrow {
    display: flex;
    gap: 14px;
    padding-left: var(--row-side-padding);
    padding-right: var(--row-side-padding);
}

div#sectionrow {
    padding-left: var(--row-side-padding);
    padding-right: var(--row-side-padding);
}

/* Consecutive SectionRows sit snugly, with a 7px gap between them. Same for consecutive ButtonsRows and Buttons (a lone Button renders as a ButtonsRow). */
div#sectionrow:has(+ div#sectionrow), div#buttonsrow:has(+ div#buttonsrow) {
    padding-bottom: 0px;
}

div#sectionrow + div#sectionrow, div#buttonsrow + div#buttonsrow {
    padding-top: 7px;
}

/* No padding so the image runs edge to edge across its parent */
div#imagerow {
    padding: 0px;
}

/* object-fit only matters when a manual height is set: the image is cropped to fill it instead of being stretched */
div#imagerow img {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* Like ImageRow, no padding so the gallery runs edge to edge across its parent */
div#imagegalleryrow {
    padding: 0px;
}

/* Centered in its parent. Any padding shows as white space around the image, inside its border. */
div#smallimage {
    display: flex;
    justify-content: center;
}

div#smallimage img {
    display: block;
    height: auto; /* Keeps the image's shape when a width is set */
    max-width: 100%;
    background-color: white;
    border: 1px solid var(--image-line-color);
}

/* Like ImageRow, no padding so the marquee runs edge to edge across its parent. Images sliding past its edges are hidden.
   The top and bottom lines are drawn outside the given height (content-box), so the images keep exactly that height. */
div#imagemarqueerow {
    display: flex;
    box-sizing: content-box;
    padding: 0px;
    overflow: hidden;
    touch-action: pan-y pinch-zoom; /* Sideways finger drags go to main.js; vertical swipes and zooming still work normally */
    border-top: 1px solid var(--image-line-color);
    border-bottom: 1px solid var(--image-line-color);
}

/* MARK: Buttons */

a.button {
    position: relative;
    flex: 1;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid var(--button-color);
    background-color: white;
    padding-right: 8px;
    color: var(--button-color);
    font-family: Avenir, serif;
    font-size: 13px;
    line-height: 29px;
    text-align: right;
    text-decoration: none;
}

/* A filled copy of the button laid on top of it, clipped down to just the icon square until hovered.
   Its border and padding match the button's so the white text lines up exactly with the colored text. */
div.button-fill {
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: inherit;
    padding-right: inherit;
    background-color: var(--button-color);
    color: white;
    clip-path: inset(0px calc(100% - 30px) 0px 0px);
    transition: clip-path 0.165s ease-in-out;
}

a.button:hover div.button-fill {
    clip-path: inset(0px 0px 0px 0px);
}

div.button-fill img {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 14px;
    height: 14px;
}

/* MARK: Section Rows */

div.sectionrow-card {
    position: relative;
    background-color: var(--sectionrow-color);
}

/* The border is a separate layer drawn on top of the card, so it takes up no space and content like ImageRow can reach the card's edges */
div.sectionrow-card::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.165s ease-in-out;
}

/* Subtle border while hovering either clickable part (the header or the collapse button) */
div.sectionrow-card:has(button.sectionrow-header:hover, button.sectionrow-collapse:hover)::after {
    border-color: #C0C0C0;
}

/* The card's title is a heading (for search engines and screen readers) wrapped around the clickable header */
h3.sectionrow-heading {
    margin: 0px;
    font: inherit;
}

/* Clears the browser's default button look so both buttons blend into the card */
button.sectionrow-header, button.sectionrow-collapse {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0px;
    border: none;
    background: none;
    color: black;
    font-family: Avenir, serif;
    font-size: 13px;
    cursor: pointer;
}

button.sectionrow-header {
    justify-content: space-between;
    height: 48px;
    padding-left: 18px;
    padding-right: 18px;
}

span.sectionrow-subtitle {
    font-style: italic;
    color: #B9B9B9;
}

/* Expands/collapses smoothly by animating the grid row between 0 and the content's full height */
div.sectionrow-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.165s ease-in-out;
}

div.sectionrow-card.expanded div.sectionrow-body {
    grid-template-rows: 1fr;
}

/* Hidden while collapsed so its buttons can't be clicked or tabbed to. Stays visible until collapsing finishes. */
div.sectionrow-content {
    --row-side-padding: 25px; /* Rows inside a SectionRow sit closer to its edges */
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0.165s;
}

div.sectionrow-card.expanded div.sectionrow-content {
    visibility: visible;
}

button.sectionrow-collapse {
    justify-content: center;
    height: 54px;
}

button.sectionrow-collapse svg {
    fill: none;
    stroke: #919191;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* MARK: Image Galleries */

/* Horizontally scrolling strip of images that snaps to one image at a time. The scrollbar is hidden. */
div.imagegallery-track {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

div.imagegallery-track::-webkit-scrollbar {
    display: none;
}

/* Every image fills the gallery's frame. Images shaped differently from the first are cropped to fit. */
div.imagegallery-track img {
    flex: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Page indicator: a row of small dots along the bottom center. The current image's dot stretches into a brighter pill. */
div.imagegallery-dots {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

div.imagegallery-dots span {
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background-color: white;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
    opacity: 0.4;
    transition: width 0.165s ease-in-out, opacity 0.165s ease-in-out;
}

div.imagegallery-dots span.active {
    width: 14px;
    opacity: 0.95;
}

/* MARK: Image Marquees */

/* One copy of all the images side by side. main.js slides every copy left together and wraps around after one copy's width,
   so the strip loops seamlessly. will-change lets the browser move them smoothly without redrawing the images. */
div.imagemarquee-set {
    display: flex;
    flex: none;
    height: 100%;
    will-change: transform;
}

/* Each image (plus its padding) is scaled to the row's height and keeps its shape, so nothing is cropped.
   A 1px divider follows every image, including the last one in a copy, so it also separates one copy from the next. */
div.imagemarquee-set img {
    display: block;
    box-sizing: border-box; /* The padding fits inside the row's height */
    height: 100%;
    width: auto;
    padding: var(--marquee-padding);
    background-color: white; /* Color of the padding */
    border-right: 1px solid var(--image-line-color);
}

/* MARK: Mobile */

/* Phones and tablets show the page exactly as wide as the column (see the viewport tag in elements.py), so the column fills their screen.
   Everything around it turns white so the areas above and below the page blend in, and the column's shadow (which can't be seen) is dropped. */
@media (max-width: 770px) {
    html, body {
        background-color: white;
    }

    div.site-container {
        box-shadow: none;
    }
}