/* ==========================================================================
   2. Font Faces
   ========================================================================== */

@font-face {
  font-family: "Singlex";
  src: url("/static/fonts/Singlex.woff2") format("woff2");
  descent-override: 0%;
  ascent-override: 100%;
}

/* ==========================================================================
   3. Reset
   ========================================================================== */

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

html, body {
  margin: 0;
  height: 100%;
  font-size: 24px;
}

img, picture, video, canvas, svg { max-width: 100%; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ==========================================================================
   4. Typography
   ========================================================================== */

body {
  text-overflow: ellipsis;
  color: black;
  background:#f6f6ef;
  font-family: "Bookish", serif;
  font-synthesis: none;
}

p {
  margin-block: 0;
  line-height: 1.4;
}

/* Language-specific hyphenation */

*[lang|="fi"] {
  hyphenate-limit-chars: 5 3 3;
  quotes: "»" "»" "'" "'";
}

*[lang|="en"] {
  hyphenate-limit-chars: auto;
}

/* Headings */

h1 {
  font-size: 2rem;
  line-height: 1;
  margin-block: 0;
  letter-spacing: -1px;
}

h2 {
  font-family:"Singlex";
  font-size: 1rem;
  -webkit-text-stroke:0.05em black;
  letter-spacing:0.1em;
  line-height: 1;
  margin-block-start: 1.6rem;
  margin-block-end: 1rem;
}
h3, h4, h5, h5 {
  font-size: 1rem;
}

/* Inline elements */

sup {
  vertical-align: baseline;
  font-variant-position: super;
  font-size: 1em;
}

sub {
  vertical-align: baseline;
  font-variant-position: sub;
  font-size: 1em;
}

small {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  display: block;
}
dt {
}
dd {
  margin-bottom:1rem;
  font-size:0.85rem;
}

/* article p+p {
  text-indent: calc(2 * var(--leading)) each-line;
} */


/* ==========================================================================
   5. Spacing System
   ========================================================================== */

* {
  --mt: 0;
  --mb: 0;
  --mr: 0;
  --ml: 0;
  margin-top: calc(var(--mt) * 1rem);
  margin-bottom: calc(var(--mb) * 1rem);
  margin-left: calc(var(--ml) * 1rem);
  margin-right: calc(var(--mr) * 1rem);

  --pt: 0;
  --pb: 0;
  --pr: 0;
  --pl: 0;
  padding-top: calc(var(--pt) * 1rem);
  padding-bottom: calc(var(--pb) * 1rem);
  padding-left: calc(var(--pl) * 1rem);
  padding-right: calc(var(--pr) * 1rem);

  height:calc(var(--h) * 1rem);
  width:calc(var(--w) * 1rem);

}

/* ==========================================================================
   6. Layout
   ========================================================================== */

/* Stacks */

.hstack {
  display: flex;
  gap: 0.5rem;
}

.vstack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Posts grid */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  margin-bottom: 1rem;
  gap: 0.5rem;
  padding: 0.5rem;
  font-family:"Singlex", sans-serif;
  article {
    padding: 1rem;
    border: 1px solid black;
    img {
      max-height: 10rem;
    }
    small {
      font-size:0.6em;
    }
    a:has(h2) {
      text-decoration:none;
      color:black;
    }
    h2 {
      margin:0 0 0.5rem 0;
      word-spacing:1.5ch;
      letter-spacing:0.09em;
      -webkit-text-stroke: 1px red;
      &:hover {
        -webkit-text-stroke: 1px yellow;
      }
    }
    p {
      font-size:0.8em;
      letter-spacing:0.05em;
    }
  }
}

.posts-list {
  display: flex;
  flex-direction:column;
  margin-bottom: 1rem;
  gap: 0.5rem;
  article {
    padding: 0.5rem;
    border: 1px solid black;
    img {
      max-width: 20rem;
    }
    small {
      font-size:0.6em;
    }
    a {
      text-decoration:none;
      color:black;
    }
    h2 {
      font-family:"Singlex", sans-serif;
      margin:0.5rem 0 1rem;
      letter-spacing:0.1em;
    }
    p {
      font-size:0.8em;
      margin:0;
    }
  }
}


/* ==========================================================================
   7. Components
   ========================================================================== */

/* Navigation */

header nav a {
  width: fit-content;
}

nav {
  width: 100%;
  font-size: 0.8rem;
  margin-block:0.25rem;
  ul {
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap:1ch;
    width: 100%;
    justify-content:center;
    li {
      text-align: center;
      a {
        text-decoration:none;
        color: black;
        padding:0 5px;
        &:hover {
          outline:1px dashed blue;
        }
      }
    }
  }
}

lang-toggle {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  button {
    border:none;
    padding:0;
    background:none;
    font-size: 0.8rem;
    font-family:"Bookish";
    letter-spacing:0.05em;
    cursor:pointer;
    &:hover {
      outline:1px dashed blue;
    }
  }
}

/* ==========================================================================
   8. Article / Main Content
   ========================================================================== */

main {
  padding: 1rem 1ch;
  & > article {
    max-inline-size:54ch;
    margin-inline: auto;
    p {
      margin: 1rem auto;
    }
    ul {
      padding-left:1rem;
    }
  }
  h1 {
    font-family:"Singlex", sans-serif;
    letter-spacing:0.1em;
    text-align: center;
    margin: 1rem auto;
    font-size: 4em;
  }

  post-it {
    --w: 30rem;
    max-width: min(var(--w), 100%);
    margin-inline: auto;
    display: block;
    height: auto;
    padding: 1rem;
    font-size: 0.7em;
    line-height: 1.3;
  }
}

.body-text {
  h2, h3, h4, h5, h6, p, ol, ul, details, .center, figcaption, blockquote, dl, address {
    --w: 40rem;
    max-width: min(var(--w), 100%);
    margin-inline: auto;
    display: block;
    height: auto;
  }

  p + p {
    margin-top: 1rem;
  }

  blockquote {
    --w: 50rem;
    font-size: 1.2em;
    color: var(--color-6);
    font-style: italic;
  }

  textarea,
  pre {
    font-family: "FontWithASyntaxHighlighter", monospace;
    padding: 8px;
    font-size: 12px;
    border: 0;
    overflow: auto;
    outline: none;
    background-color: #000;
    color: white;
    width: 100%;
  }

  img, video {
    --w: 70rem;
    display: block;
    max-width: min(var(--w), 100%);
    margin-inline: auto;
  }

  iframe {
    --w: 100rem;
    --aspect: 16/9;
    width: 100%;
    max-width: min(var(--w), 100%);
    border: 1px solid black;
    aspect-ratio: var(--aspect);
    margin-inline: auto;
    display: block;
  }

  .float-left {
    float: left;
    margin-right: 2rem;
    max-width: calc(50vw - 20rem);
    margin-left: max(calc(25vw - 10rem), 0%);
    min-width: max(25%, min(20rem, 50%));
  }

  code, kbd {
    background: #333;
    color: #f1f1f1;
    font-size: 0.85em;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: FontWithASyntaxHighlighter, monospace;
    word-break: break-word;
  }
}

/* Frontpage logo */

.frontpage-logo, .header-logo {
  text-align: center;
  font-family: "Singlex", sans-serif;
  p {
    font-size: min(25px, 2cqw);
    line-height: 1;
  }
}
.header-logo {
  p {
    font-size: 0.75rem;
    letter-spacing:0.05em;
  }
  a {
    text-decoration:none;
    color:black;
  }
}


/* Archive table */

#archive-table {
  padding: 0 1rem;
  summary,
  .arch-header,
  .arch-detail {
    display: grid;
    grid-template-areas:
      "plus year languages title links made_by tags";
    grid-template-columns: 40px 80px 80px 4fr 1fr 1fr 1fr;
    gap: 5px;
    cursor: pointer;
    list-style: none;
  }

  .arch-header {
    border-bottom: 2px solid var(--color-blue);
    user-select: none;
    .arch-col {
      display: grid;
      align-items: end;
    }
    .arch-title {
      font-size: inherit;
    }
  }

  .arch-row {
    font-size: 0.6em;
    padding: 5px 0;
    border-bottom: 1px dotted var(--color-1);
    &:hover {
      background: var(--color-yellow);
    }
  }

  .arch-col {
    display: grid;
    align-items: center;
  }

  .arch-year { grid-area: year; }
  .arch-title, .arch-description { grid-area: title; }
  .arch-links { grid-area: links; }
  .arch-made_by, .arch-namelist { grid-area: made_by; }
  .arch-tags { grid-area: tags; }
  .arch-languages { grid-area: languages; }

  .arch-title {
    font-size: 1rem;
  }

  details.expandable > summary::before {
    content: '+';
    grid-area: plus;
    background: var(--color-1);
    border-radius: 5px;
    display: grid;
    place-content: center;
  }

  details.expandable[open] > summary::before {
    content: '−';
  }

  .icon {
    height: 1lh;
  }
}
@media (max-width: 800px) {
  #archive-table {
    padding: 5px;
    summary,
    .arch-header,
    .arch-detail {
      grid-template-columns: 40px 40px 60px 4fr 1fr 1fr 1fr;
    }
  }
}
@media (max-width: 600px) {
  #archive-table {
    padding: 5px;
    .arch-header {
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      .arch-col {
        border:1px solid black;
        padding:5px;
      }
    }
    summary {
      grid-template-areas:
        "title title title title title plus"
        "year languages links tags made_by made_by"
      ;
      grid-template-columns: 1fr 1fr 2fr 2fr 2fr 40px;
      grid-template-rows:auto;
      color: #828282;
    }
    .arch-detail {
      grid-template-areas:
        "title"
        "links"
        "made_by"
      ;
      grid-template-columns: 1fr;
      grid-template-rows:auto;
    }
    .arch-row {
      font-size:0.7em;
    }
    .arch-title {
      color:#000000;
      font-family: Verdana, Geneva, sans-serif;
      font-size:1em;
    }

  }
}


/* Footer */

footer.site-footer {
  padding: 1rem 0.5rem;
  font-size: 0.6em;
  .footer-items {
    max-width:1024px;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
    margin: 1rem auto;
    gap: 0.5rem;
  }
  p + p {
    margin-top:1em;
  }
  .logos{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
    img {
      max-width:200px;
      margin-bottom:1rem;
    }
  }
}

/* Back to top */
#back-to-top {
  font-family: monospace;
  position: fixed;
  bottom: 5px;
  right: 1rem;
  a {
    color: black;
    text-decoration: none;
    &:hover {
      outline:1px dashed blue;
    }
  }
}


/* ==========================================================================
   9. Utilities
   ========================================================================== */


.singlex {
  font-family: "Singlex", sans-serif;
  letter-spacing: 0.05em;
}