/* ==========================================================================
   Scroller - an interactive scrolling index of post titles, ported from the
   static mockup (sitesu/scroller/scroller.html). Each title is a big line
   of text, greyed out by default; the one scrolled near the top quarter of
   the screen (.active, set by static/js/scroller.js) or hovered turns
   black. Clicking one slides a side panel in from the right with that
   post's text and pictures - everything stays on this one page.

   Every color that was plain grey reads var(--accent, <that grey>) instead
   (titles, social links, the empty state). The black of an active/hovered
   title stays plain black - that's the "selected" state, not a grey one.
   --accent is set by a <style> block in this template's <head>, only when
   the site has one (Site.accent_color).
   ========================================================================== */

/* One text size for everything - title, description, links, post titles
   and the open post's text: the post titles' size. */
:root { --size: 5vw; --lh: 4vw; --ls: -0.3vw; }

/* A word wider than the screen (CLUBDECHECS.CA at phone size) breaks onto
   the next line instead of running off the edge; others wrap as usual. */
span[data-panel],
.site-title,
.site-description {
  overflow-wrap: anywhere;
}

span[data-panel] {
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  color: var(--accent, #d2d2d2);
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  cursor: pointer;
}

span[data-panel].active {
  color: black;
}

@media (hover: hover) {
  span[data-panel]:hover {
    color: black;
  }
}

/* Cover, then the site's title and description, above the list. At
   least as tall as the cover's tallest (222px, times the site's cover
   size) plus a gap, so the titles start at the same height whether or
   not there's a cover. */
.site-header {
  min-height: calc(38px + 222px * var(--cover-scale, 1));
  padding-top: 20px;
  box-sizing: border-box;
}

.site-cover {
  display: block;
  max-width: min(calc(300px * var(--cover-scale, 1)), 100%);
  max-height: calc(222px * var(--cover-scale, 1));
  margin-bottom: 2vw;
}

/* The title in the list's own type, in black; the description in the
   links' smaller type. */
.site-title {
  margin: 0 0 1vw;
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  color: black;
}
.site-description {
  margin: 0 0 2vw;
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

.bottom-spacer {
  height: 75vh;
}

/* Same type as the titles, just smaller: bold, tight, accent grey, black
   on hover - reads as part of the list, not a separate widget. */
.social-links {
  display: block;
  margin: 0 0 2vw;
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
}
.social-links a {
  color: var(--accent, #d2d2d2);
  text-decoration: none;
  margin-right: 1.2vw;
}
@media (hover: hover) {
  .social-links a:hover {
    color: black;
  }
}

.empty-state {
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  color: var(--accent, #888);
  text-align: center;
  padding: 0 5vw;
}

/* --- Side panel ------------------------------------------------------------ */

#panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 10;
}

#panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  background: white;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 11;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 40px;
  font-family: arial, Helvetica, sans-serif;
}

#panel-content {
  font-weight: bold;
  color: black;
  font-size: var(--size);  /* lists and anything else in a post too */
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

#panel-content .panel-date {
  margin: 0 0 1vw;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  color: var(--accent, #9a9a9a);
}

#panel-content h2 {
  margin: 0 0 2vw;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

#panel-content h3 {
  margin: 2.5vw 0 0.8vw;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

#panel-content p {
  margin: 0 0 1.5vw;
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

#panel-content a {
  color: inherit;
}

/* Not audio: embeds.css sizes it, and hides the browser's own player once
   the block player takes over (this id rule would show it again). */
#panel-content img,
#panel-content video,
#panel-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5vw;
  border: 0;
}

#panel-content hr {
  border: 0;
  border-top: 2px solid black;
  margin: 2vw 0;
}

body.panel-open #panel {
  transform: translateX(0);
}

/* The tint only: clicks and scrolling go through to the titles, so the
   list stays usable beside an open post (scroller.js closes it on a
   click on empty space). */
body.panel-open #panel-backdrop {
  opacity: 1;
}

@media screen and (max-width: 500px) {
  :root { --size: 12vw; --lh: 10vw; --ls: -0.8vw; }

  .site-title {
    margin-bottom: 3vw;
  }
  .site-description {
    margin-bottom: 5vw;
  }

  .social-links {
    margin-bottom: 5vw;
  }
  .social-links a { margin-right: 3vw; }

  #panel {
    width: 90vw;
    padding: 32px 20px;
  }

  #panel-content .panel-date {
    margin-bottom: 2vw;
  }

  #panel-content h2 {
    margin-bottom: 5vw;
  }

  #panel-content h3 {
    margin: 7vw 0 2vw;
  }

  #panel-content p {
    margin-bottom: 4vw;
  }
}