/* 
    TODO: Figure out vertical margins - flexbox seems to be making them stack rather than collapse?
*/
/* Root Styles          ---------------------- */

@font-face {
    font-family: 'Typewriter 215FP Web';
    src: url('/typewriter215fp-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, arial, helvetica, sans-serif;
    --serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --typewriter: "Typewriter 215FP Web", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    color-scheme: light dark;
    /* Light mode section */
    --background-color: antiquewhite;
    --text-color: #1C1B22;
    --link-color: rgb(0, 0, 238);
    --link-color-visited: #551A8B;
    --link-color-active: rgb(238, 0, 0);
    --nav-background: lavender;
    --heading-background: #ddf3fa;
    /*stop layout shift when switching between pages with and without scrollbars */
    scrollbar-gutter: stable;
    font-family: var(--sans-serif);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--background-color);
}

@media only screen and (prefers-color-scheme:dark) {
    :root {
        --background-color: #1C1B22;
        --text-color: rgb(251, 251, 254);
        --link-color: #8C8CFF;
        --link-color-visited: #FFADFF;
        --link-color-active: rgb(255, 102, 102);
        --nav-background: #f3fae6;
        --heading-background: #fadddd;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*html {
     background-image:
        linear-gradient(antiquewhite, antiquewhite),
        url(/img/paper-background.jpg);
        background-size: repeat;
        background-blend-mode: multiply; 
}*/

html,
body {
    height: 100%;
    margin: 0;
}

/* Basic Styles          ---------------------- */

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color-visited);
}

a:active {
    color: var(--link-color-visited);
}

/* body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
} */

.content-wrapper {
    max-inline-size: 70ch;
    margin-inline: auto;
    margin: 0 auto;
    padding: 15px;
}

@media (min-width: 768px) {
    .content-wrapper {
        min-inline-size: 70ch;
    }
}

h1,
footer {
    text-align: center;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

h1 {
    rotate: -0.5deg;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block-start: 1.1em;
    margin-block-end: 0.4em;
    line-height: 1.2;
    font-family: var(--typewriter);
    text-wrap: balance;
}

h1+*,
h2+*,
h3+*,
h4+*,
h5+*,
h6+*,
.info p {
    margin-block-start: 0;
}

ol > li + li {
    margin-block-start: .5rem;
}

.paper-strip {
    filter: drop-shadow(1px 1px 1px black);
    color: #1C1B22;
    padding: 5px;
    line-height: 1.6;
    background-image:
        linear-gradient(var(--heading-background), var(--heading-background)),
        url(/img/paper-background.jpg);
    background-repeat: repeat;
    background-blend-mode: multiply;
}

.skip-link {
    font-family: "Typewriter 215FP Web", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    left: 50%;
    padding: 5px;
    position: absolute;
    transform: translateY(-200%);
    color:#1C1B22;
    transition: transform 0.3s;
}

.skip-link:visited {
    color:#1C1B22;
}

.skip-link:focus {
    transform: translateY(0%);
}

.skip-link:focus-visible {
    filter: none;
}

.skip-link:active {
    color:#1C1B22;
}

article:nth-of-type(even) h2,
h2:nth-of-type(odd) {
    rotate: -1deg;
}

article:nth-of-type(odd) h2,
h2:nth-of-type(even) {
    rotate: 1deg;
}

.site-title {
    font-size: 2.5rem;
    letter-spacing: .1rem;
    text-align: center;
    line-height: 1;
    margin-block-end: 1rem;
}

.site-title a {
    text-decoration: none;
    color:var(--text-color);
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header nav li {
    font-family: "Typewriter 215FP Web", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-size: 1.2rem;
    display: inline-block;
    margin: 5px;
    background-image:
        linear-gradient(var(--nav-background), var(--nav-background)),
        url(/img/paper-background.jpg);
    background-repeat: repeat;
    background-blend-mode: multiply;
    color: #1C1B22;
    filter: drop-shadow(1px 1px 1px black);
}

header nav li a,
header nav li a:visited,
header nav li a:active,
header nav li span {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #1C1B22;
}

header nav li:active:has(a) {
    position: relative;
    top: 2px;
    filter: none;
}

header nav li:focus-within {
    filter: none;
}

header nav li:nth-of-type(even) {
    rotate: -1.5deg;
}

header nav li:nth-of-type(odd) {
    rotate: 0.75deg;
}

.bold-text {
    font-weight:600;
}

/* Zoho Form Styles     ----------------------  */

.zoho-form {
    width: 100%;
    min-height: 1150px;
    border: none;
    display: block;
}

@media (max-width: 600px) {
    .zoho-form {
        min-height: 1250px;
    }
}

/* Zine Styles          ----------------------  */

.cover,
.art {
    /* so the idea is that the image is never taller than the screen... but with smaller widths it overflows. hm. how did i manage this on other zines? */
    max-inline-size: 45ch;
    block-size: auto;
    border: 2px solid currentColor;
    margin-inline: auto;
}

aside figure {
    inline-size: 100%;
    margin: 0;
    margin-block-start: 2rem;
    margin-block-end: 2rem;
}

figcaption {
    text-align: center;
    font-size: 0.85rem;
}

nav ol,
ul.volunteers {
    column-count: auto;
    column-gap: 0.5rem;
    column-width: 10rem;
}

nav ol,
ul.volunteers,
article {
    margin-block-end: 2rem;
}

@media only screen and (min-width: 600px) {
    article {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 10px;
    }

    main article:nth-child(odd) {
        grid-template-areas:
            "picture heading"
            "picture info"
            "description description";
    }

    main article:nth-child(even) {
        grid-template-areas:
            "heading picture"
            "info picture"
            "description description";
    }

    article h2 {
        grid-area: heading;
    }

    article picture {
        grid-area: picture;
    }

    article .info {
        grid-area: info;
    }

    article .description {
        grid-area: description;
    }
}

article h2 {
    margin-block-start: 0;
}

img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

dl {
    margin-block: 0;
}

dl div {
    display: grid;
    grid-auto-columns: 11ch 1fr;
}

dd,
dt {
    display: inline;
    margin: 0;
}

dt {
    grid-column: 1 / 2;
    font-weight: 600;
    font-variant-caps: small-caps;
}

dd {
    grid-column: 2 / 3;
}

footer {
    font-size: 0.9rem;
}

*:focus {
    /* for browsers that don't support :focus-visible */
    text-decoration: none;
    outline-offset: 2px;
    outline: var(--text-color) 2px solid;
}

*:focus:not(:focus-visible) {
    /* disable :focus when :focus-visible is supported */
    outline: none;
}

*:focus-visible {
    text-decoration: none;
    outline-offset: 2px;
    outline: var(--text-color) 2px solid;
}

.video-embed {
    position: relative;
    overflow: hidden;
    inline-size: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    margin-block: 1rem;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    inline-size: 100%;
    height: 100%;
}

/* Utilities ------------------------------------ */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}