/*
Theme Name:   JerryGamblin Child
Theme URI:    https://jerrygamblin.com
Description:  GeneratePress child theme for jerrygamblin.com. Handles the one
              thing the Customizer cannot: a readable text measure inside a wide
              container, so long-form posts stay comfortable to read while charts
              and tables get room to breathe.
Author:       Jerry Gamblin
Template:     generatepress
Version:      1.5.0
Text Domain:  jerrygamblin-child
*/

/* ---------------------------------------------------------------------------
   REQUIRES: Customizer > Layout > Container > Content Layout = "One Container"

   With GeneratePress' default "Separate Containers", every post sits on a white
   card as wide as the container. Since charts need 1100px, the card must be
   1100px — which leaves ~200px of empty white either side of a 660px text
   column. That dead space is what makes the layout look unfinished.

   "One Container" drops the card. The text column then sits on the page itself,
   and figures breaking out wider read as deliberate rather than as a narrow
   column rattling around inside a big white box.

   Everything below still works with separate containers; it just looks worse.
   --------------------------------------------------------------------------- */

:root {
  --jg-measure: 660px;   /* text column — ~75 characters at 18px Lora */
  --jg-wide: 1100px;     /* charts, wide tables */
}

/* ---------------------------------------------------------------------------
   Measure

   GeneratePress has one width setting: the container. With no sidebar, setting
   it to 1200px means body text also runs to ~1120px — about 133 characters per
   line, where 60-78 is comfortable. Narrowing the container instead would cap
   every chart at the same narrow width, which is worse for a blog built on data
   visualisation. So: keep the container wide, constrain the text, and let
   visual content opt back out.
   --------------------------------------------------------------------------- */

.entry-content > *,
.entry-summary > *,
.inside-article > .entry-header,
.inside-article > footer.entry-meta,
.inside-article > .post-navigation,
.paging-navigation {
  max-width: var(--jg-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Visual content breaks back out. These are the elements that actually gain
   something from the extra width. */
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-table,
.entry-content > .alignwide {
  max-width: var(--jg-wide);
}

.entry-content > .alignfull {
  max-width: 100%;
}

.entry-content img {
  height: auto;
}

/* ---------------------------------------------------------------------------
   Tables

   A wide table should use the room; a two-column "Metric / Value" table should
   not be stretched across 1100px just because it can be. Letting the table size
   to its own content — inside a figure that permits up to 1100px — means each
   table takes exactly the width it needs.
   --------------------------------------------------------------------------- */

.entry-content .wp-block-table {
  overflow-x: auto;
}

.entry-content .wp-block-table table {
  width: auto;
  min-width: min(100%, var(--jg-measure));
  max-width: 100%;
  margin-inline: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  padding: 8px 14px;
}

/* ---------------------------------------------------------------------------
   Typography

   Matches the `gp-modern` treatment from mockups/theme-comparison.html: the
   character of the old Writing theme (Lora serif) at a size set for reading
   today rather than in 2016. Delete this block to fall back to GeneratePress'
   system-font defaults.

   Lora must be loaded for this to apply — set it in Customizer > Typography,
   which serves it from your own server.
   --------------------------------------------------------------------------- */

body,
.entry-content {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.65;
  color: #26292e;
}

.entry-content h2 {
  font-size: 30px;
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.5em;
  letter-spacing: -0.005em;
}

.entry-content h3 {
  font-size: 23px;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

/* No text-wrap: balance here on purpose. Several post titles contain
   non-breaking spaces pasted in from elsewhere, and balancing a line that
   cannot break produces worse breaks than leaving it alone. See
   docs/generatepress-setup.md for the affected posts. */
.entry-title {
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.entry-content a {
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Archive
   --------------------------------------------------------------------------- */

.blog .site-main > article,
.archive .site-main > article {
  padding-bottom: 2.5em;
  margin-bottom: 2.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.blog .site-main > article:last-of-type,
.archive .site-main > article:last-of-type {
  border-bottom: 0;
}

.blog .entry-title,
.archive .entry-title {
  margin-bottom: 0.15em;
}

.read-more {
  white-space: nowrap;
}

@media (max-width: 768px) {
  body,
  .entry-content {
    font-size: 17px;
  }

  .entry-content h2 {
    font-size: 25px;
  }

  .entry-content h3 {
    font-size: 21px;
  }
}