/* ==========================================================================
   Clubdechecs - modelled on clubdechecs.ca, without its clock/weather
   line, marquee and QR code: a small logo (the cover image), the title in
   bold Helvetica capitals, the intro and a sticky "/ link / link /" bar in
   Courier Prime, then each post below an <hr> in a 720px column - bold
   title, "› date", text, pictures one under the other at full column width.

   Courier Prime: SIL Open Font License 1.1 (Alan Dague-Greene / Quote-
   Unquote Apps), latin subset vendored at static/fonts like TT2020.
   Links use var(--accent), falling back to the original's plain blue.
   ========================================================================== */

@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Regular.ddb0efd5d81c.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Courier Prime", "Courier New", Courier, monospace;
  --bold: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --widthPost: 720px;
}

body { margin: 0; overflow-x: hidden; background: #fff; color: #000; }

a { color: var(--accent, blue); }

#logo {
  display: block;
  width: calc(75px * var(--cover-scale, 1));
  max-width: calc(100vw - 50px);
  margin: 40px 40px 40px 10px;
}

#titre {
  font-family: var(--bold);
  font-weight: bold;
  font-size: 30px;
  line-height: 30px;
  margin: 0;
  padding: 10px 0 3px 10px;
}
#logo + #titre, a + #titre { padding-top: 0; }

#about {
  font-family: var(--font);
  font-size: 18px;
  margin: 0;
  max-width: 97vw;
  padding-left: 10px;
}

.social-links {
  position: sticky;
  top: 0;
  z-index: 4;
  font-family: var(--font);
  font-size: 18px;
  background: #fff;
  margin: 2em 0 0;
  padding: 5px 0 5px 10px;
}
.navSpan::after { content: " /"; }

#posts { padding-top: 2em; }

hr { width: var(--widthPost); margin-left: 0; }

.titlePost {
  font-family: var(--bold);
  font-weight: bold;
  font-size: 25px;
  margin: 0;
  padding: 10px 0 0 10px;
}

.timePost {
  font-family: var(--font);
  font-size: 15px;
  margin: 0;
  padding-left: 10px;
}
.timePost::before { content: "› "; }

.descText {
  font-family: var(--font);
  font-size: 18px;
  width: var(--widthPost);
  padding: 1em 0 6px 10px;
}
.descText p { margin: 0; }
.descText .post-embed { margin: 10px 0; }

.imagePost { padding: 0 0 30px 10px; }
.imagePost img, .imagePost .post-video { display: block; width: var(--widthPost); max-width: 100%; }

@media screen and (max-width: 740px) {
  hr, .descText, .imagePost img, .imagePost .post-video { width: calc(100vw - 20px); }
  .descText { box-sizing: border-box; padding-right: 0; }
}

/* Audio (the block player, embeds.css): on the same 720px column as the
   pictures and rules, a little shorter, in the typewriter face, with the
   same gap above and below it. When the player ends the post (its include
   leaves a <script> as the last thing in .imagePost), the 30px under the
   pictures is dropped so that gap stays even down to the next rule. */
.imagePost .audio-block {
  width: var(--widthPost);
  max-width: 100%;
  height: 36px;
  margin: 10px 0;
  font-family: var(--font);
  font-size: 15px;
}
.imagePost .audio-block-play { width: 36px; }
.imagePost:has(> script:last-child) { padding-bottom: 0; }

@media screen and (max-width: 740px) {
  .imagePost .audio-block { width: calc(100vw - 20px); }
}