/* jenniferlyonsliteraryagency.com on sitebuilder: what the WordPress theme did beyond reset.css +
   design.css (both copied unchanged), plus the reworked cover slider and a mobile menu. */

/* the logo was an <h1>: same size and spacing, without being a second page heading */
#logo { font-size: 2.2rem; margin: 1em 0 1.5em; }

/* WordPress block styles the content relied on, as plain-element rules so new content matches */
#content hr { border: none; border-top: 2px solid; margin: 2rem auto; max-width: 50%; opacity: .5; }
#content > hr:last-child { display: none; }
#content img { max-width: 100%; height: auto; }
#content figure { margin: 0 0 1em; }

/* Cover slider. jl.js groups the covers into pages of eight (four across, two down, read left to
   right in their Sort order) and moves on a page every 10 seconds; it works for any number of
   covers, so adding one is just adding a snippet entry. Swipeable on phones, pauses while hovered or
   touched, stays still for visitors who ask for less motion. Without JavaScript the covers still
   show, as a scrollable strip two high. */
#outerbox.covers {
  width: 920px; max-width: 100%; margin: 15px auto;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#outerbox.covers::-webkit-scrollbar { display: none; }
.covers-track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 230px; }
.covers-track img { display: block; width: 200px; height: 300px; margin: 15px; object-fit: cover; scroll-snap-align: start; }
.covers-track.paged { display: flex; }
.covers-track.paged .cover-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; scroll-snap-align: start; }
.covers-track.paged img { scroll-snap-align: none; }

@media screen and (max-width: 969px) {
  #outerbox.covers { width: 440px; margin: 5px auto; }
  .covers-track { grid-auto-columns: 110px; }
  .covers-track img { width: 100px; height: 150px; margin: 5px; }
}
@media screen and (max-width: 479px) {
  #outerbox.covers { width: calc(100% - 10px); }
  .covers-track { grid-auto-columns: calc((100vw - 10px) / 4); }
  .covers-track img, .covers-track.paged img { width: calc(100% - 10px); height: auto; aspect-ratio: 2 / 3; }
}
@media (prefers-reduced-motion: reduce) { #outerbox.covers { scroll-behavior: auto; } }

/* mobile menu */
.menu-toggle { display: none; }
@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block; margin: 0 auto; padding: 14px 18px; border: 0; background: none; cursor: pointer;
    font: 18px 'Playfair Display', Serif; color: #006699; text-transform: lowercase;
  }
  .menu-toggle::before { content: "\2630\00a0\00a0"; }
  .menu-open .menu-toggle::before { content: "\2715\00a0\00a0"; }
  #nav ul { display: none; padding: 0 0 10px; }
  .no-js #nav ul, .menu-open #nav ul { display: block; }
  #nav ul li { display: block; padding: 10px 0; }
}