/*
Theme Name: Comic Sans Relief
Description: One theme for every app's blog. Each blog wears its app's site: the look of guide.html, with the app's nav, icon and footer.
Version: 1.0
Requires at least: 6.5
Requires PHP: 8.0
*/

/* The page: copied from the static site (guide.html). Keep the two in step. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fbf8f1; color: #2a2622; }
a { color: inherit; text-decoration: none; }
a:hover { color: #c0392b; }
a:focus-visible { outline: 2px solid #c0392b; outline-offset: 4px; border-radius: 6px; }
img { display: block; }

.sans { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; }
.round { font-family: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.nav { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 72px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.nav-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; color: #4d463f; }
/* Six links fit to 700px, where the text links hide, if they sit closer below 900px. */
@media (max-width: 900px) { .nav-links { gap: 20px; } }
.pill { padding: 9px 18px; border-radius: 999px; background: #2a2622; color: #fbf8f1; }
.pill:hover { color: #fbf8f1; background: #000; }

.wrap { padding: 40px 24px 96px; display: flex; justify-content: center; }
.prose { width: 720px; max-width: 100%; }
h1 { margin: 0; font-size: clamp(38px, 5vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.updated { margin: 16px 0 0; font-size: 15px; color: #8a8178; }
.lede { margin: 28px 0 0; font-size: 20px; line-height: 32px; color: #4d463f; text-wrap: pretty; }
.lede p { margin: 0; font-size: inherit; line-height: inherit; }
h2 { margin: 52px 0 0; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
p { margin: 14px 0 0; font-size: 17px; line-height: 29px; color: #4d463f; text-wrap: pretty; }
ul, ol { margin: 14px 0 0; padding-left: 22px; }
li { margin: 8px 0 0; font-size: 17px; line-height: 29px; color: #4d463f; }
.prose a:not(.plain) { color: #c0392b; font-weight: 600; }

.footer { padding: 36px 72px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(60,40,20,.1); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 36px; height: 36px; border-radius: 8px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font-size: 15px; font-weight: 500; color: #4d463f; }

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

/* The list of posts. */
.entries { margin-top: 44px; }
.entry { padding: 36px 0; border-top: 1px solid rgba(60,40,20,.1); }
.entry .updated { margin: 0; }
.entry h2 { margin: 8px 0 0; }
.entry h2 a:hover { color: #c0392b; }
.entry .more { margin-top: 12px; }
.navigation.posts-navigation { margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(60,40,20,.1); font-size: 15px; font-weight: 600; }
.posts-navigation .nav-links { display: flex; justify-content: space-between; gap: 24px; color: #c0392b; font-size: inherit; }
.posts-navigation .nav-next { margin-left: auto; }

/* One post: what the block editor can produce, in the guide's voice. */
.post-body > :first-child { margin-top: 36px; }
.post-body h3 { margin: 36px 0 0; font-size: 20px; line-height: 1.3; font-weight: 800; }
.post-body h2, .post-body h3 { font-family: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* A captioned image arrives with an inline width (the size picked in the
   editor, often 1024px), so the figure is held to the column. */
.post-body figure { margin: 26px 0 0; max-width: 100%; }
.post-body img { max-width: 100%; height: auto; border-radius: 14px; }
.post-body figcaption { margin: 10px 0 0; font-size: 14px; line-height: 21px; color: #8a8178; text-align: center; }
.post-body blockquote { margin: 26px 0 0; padding: 22px 26px; background: #fff48a; border-radius: 6px; transform: rotate(-.6deg); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 4px 12px rgba(60,40,20,.14); }
.post-body blockquote p { margin: 0; color: #2a2622; }
.post-body blockquote p + p { margin-top: 12px; }
.post-body blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: #6b6259; }
.post-body hr { margin: 44px auto 0; width: 80px; border: 0; border-top: 2px solid rgba(60,40,20,.15); }
.post-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: rgba(60,40,20,.07); padding: 2px 5px; border-radius: 4px; }
.post-body pre { margin: 20px 0 0; padding: 18px 20px; overflow-x: auto; background: #f1ebdf; border-radius: 10px; font-size: 14px; line-height: 22px; }
.post-body pre code { background: none; padding: 0; }
.post-body .wp-block-embed { margin: 26px 0 0; }
.post-body .wp-block-embed iframe { max-width: 100%; }

/* Pinned prints. A post's picture hangs the way a card hangs on a wall: a
   white border, a pushpin at the top, and a slight tilt that alternates down
   the post (red pin, then blue). Under the pointer it levels off on its pin,
   as the landing page's cards do. The tilt swings from the pin, so the pin
   never moves. A captioned image is a figure, which carries the pin and
   keeps its caption on the print; an uncaptioned one is a bare <img>, which
   can't hold a pin, so it gets the print and the tilt alone. */
.post-body figure.wp-caption,
.post-body figure.wp-block-image,
.post-body p > img[class*="wp-image-"],
.entry-print {
  --tilt: -.7deg;
  position: relative;
  display: block;
  margin: 34px auto 0;
  padding: 10px 10px 12px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 4px 12px rgba(60,40,20,.14);
  transform-origin: 50% 0;
  transform: translateY(var(--lift, 0px)) rotate(var(--rot, var(--tilt)));
  transition: transform .62s cubic-bezier(.22,.78,.3,1), box-shadow .3s ease;
}
.post-body figure.wp-caption:nth-of-type(even),
.post-body figure.wp-block-image:nth-of-type(even),
.post-body p:nth-of-type(even) > img[class*="wp-image-"] { --tilt: .6deg; }
.post-body figure.wp-caption:hover,
.post-body figure.wp-block-image:hover,
.post-body p > img[class*="wp-image-"]:hover,
.post-body figure.wp-caption:focus-within,
.post-body figure.wp-block-image:focus-within,
.entry:hover .entry-print,
.entry:focus-within .entry-print {
  --rot: 0deg; --lift: -3px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 10px 22px rgba(60,40,20,.2);
}
.post-body figure.wp-caption img,
.post-body figure.wp-block-image img,
.post-body p > img[class*="wp-image-"],
.entry-print img { border-radius: 2px; }
.post-body figure.wp-caption::before,
.post-body figure.wp-block-image::before,
.entry-print::before {
  content: ""; position: absolute; left: 50%; top: -8px; z-index: 1;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0685b 0%, #c0392b 55%, #8a2a20 100%);
  box-shadow: 0 1.5px 3px rgba(0,0,0,.3), 0 0 2px rgba(192,57,43,.4);
}
.post-body figure.wp-caption:nth-of-type(even)::before,
.post-body figure.wp-block-image:nth-of-type(even)::before,
.entry:nth-of-type(even) .entry-print::before {
  background: radial-gradient(circle at 35% 30%, #4f7cc0 0%, #1a4a8a 55%, #113260 100%);
  box-shadow: 0 1.5px 3px rgba(0,0,0,.3);
}
/* The glint on the pin's head. */
.post-body figure.wp-caption::after,
.post-body figure.wp-block-image::after,
.entry-print::after {
  content: ""; position: absolute; left: 50%; top: -4.5px; z-index: 2;
  width: 4px; height: 3px; margin-left: -5px; border-radius: 50%;
  background: rgba(255,255,255,.6); filter: blur(.5px);
}
.post-body figure.wp-caption figcaption,
.post-body figure.wp-block-image figcaption {
  margin: 10px 4px 0; font-family: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 21px; color: #5a524a;
}
@media (prefers-reduced-motion: reduce) {
  .post-body figure.wp-caption,
  .post-body figure.wp-block-image,
  .post-body p > img[class*="wp-image-"],
  .entry-print { transition: none; }
}

/* On the blog's list, a post with a featured image hangs it beside the
   text as a small print. The whole entry is the hover target, so pointing
   anywhere at a post levels its print. It tilts further than a post's
   print, since it's smaller. */
.entry.has-print { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 36px; align-items: start; }
.entry-print { --tilt: -1.4deg; margin: 10px 0 0; padding: 7px 7px 9px; }
.entry:nth-of-type(even) .entry-print { --tilt: 1.2deg; }
.entry-print img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.back { margin-top: 52px; }

@media (max-width: 1100px) {
  .nav { padding: 0 32px; }
  .footer { padding: 32px 32px 40px; }
}
@media (max-width: 700px) {
  /* The text links drop to a second row that swipes sideways if it runs out
     of room; the App Store pill stays up beside the name. */
  .nav { position: relative; height: auto; flex-wrap: wrap; padding: 12px 16px 0; }
  .brand { height: 40px; }
  .nav-links { width: calc(100% + 32px); margin: 8px -16px 0; padding: 0 16px; height: 44px; gap: 18px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(60,40,20,.1); }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-text { white-space: nowrap; }
  .nav .pill { position: absolute; top: 16px; right: 16px; padding: 7px 16px; font-size: 14px; }
  .nav-name { font-size: 18px; }
  .wrap { padding: 28px 20px 72px; }
  .lede { font-size: 18px; line-height: 29px; }
  h2 { margin-top: 44px; font-size: 23px; }
  .entry h2 { margin-top: 8px; }
  p, li { font-size: 16px; line-height: 27px; }
  .footer { flex-direction: column; align-items: flex-start; padding: 32px 20px 40px; }
  .footer-links { gap: 12px 24px; }
  /* A narrow print tilts half as far and wears a thinner border. */
  .post-body figure.wp-caption,
  .post-body figure.wp-block-image,
  .post-body p > img[class*="wp-image-"] { --tilt: -.35deg; padding: 7px 7px 9px; }
  .post-body figure.wp-caption:nth-of-type(even),
  .post-body figure.wp-block-image:nth-of-type(even),
  .post-body p:nth-of-type(even) > img[class*="wp-image-"] { --tilt: .3deg; }
  /* The list's print moves above its post and takes the column. */
  .entry.has-print { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .entry-print { order: -1; --tilt: -.7deg; }
  .entry:nth-of-type(even) .entry-print { --tilt: .6deg; }
}