/*
Theme Name: Affordable Tuckpointing Pros Child
Theme URI: https://affordabletuckpointingpros.com/
Description: Child theme with the blog post typography baked in. Styles apply to single blog posts only.
Author: Affordable Tuckpointing Pros
Version: 3.0.0
Template: popularfx
License: GPL v2 or later
Text Domain: atp-child
*/

/* ==========================================================================
   Blog post typography, version 2

   Applies to single blog posts only. Nothing here touches the home page,
   service pages or anything else built with Pagelayer.

   Scope: everything hangs off the body class only. This theme adds no
   wrapper div and filters no content, because PopularFX runs its header and
   footer templates through the same content pipeline as the post body.

     body.atp-blog   added on single blog posts by functions.php

   Colors and sizes are variables below. Change --brick and every accent
   recolors at once.
   ========================================================================== */

:root {
  /* Ink */
  --ink:        #1f1d1b;
  --ink-2:      #4a453f;
  --muted:      #757068;

  /* Surfaces and lines */
  --page:       #ffffff;
  --surface:    #faf9f7;
  --surface-2:  #f3f1ed;
  --line:       #e7e3dc;
  --line-soft:  #f0ece5;

  /* Accent */
  --brick:      #933f2a;
  --brick-dark: #74301f;
  --brick-wash: rgba(147, 63, 42, 0.07);

  /* Type */
  --serif: "Source Serif 4", Georgia, "Iowan Old Style", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Shape */
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 1px 2px rgba(31, 29, 27, 0.04),
                0 8px 24px -12px rgba(31, 29, 27, 0.10);
  --measure:    40rem;
}


/* --------------------------------------------------------------------------
   1. Reading column
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) p {
  margin: 0 0 1.4em;
  text-wrap: pretty;
}

/* Opening paragraph reads a step larger. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) > p:first-of-type {
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--ink-2);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) strong { font-weight: 600; color: var(--ink); }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ::selection {
  background: var(--brick-wash);
  color: var(--ink);
}

body.atp-blog { scroll-behavior: smooth; }


/* --------------------------------------------------------------------------
   2. Headings
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-title, .entry-header h1, .post-title),
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h1 {
  font-family: var(--sans);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 0 0.5em;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h2 {
  font-family: var(--sans);
  font-size: clamp(1.55rem, 3.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
  margin: 3.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  position: relative;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h2::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--brick);
  border-radius: 2px;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h3 {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 2.5rem 0 0.6rem;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h4 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(h2, h3, h4) { scroll-margin-top: 6rem; }


/* --------------------------------------------------------------------------
   3. The "In short" summary under each heading
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(h2, h3) + p:has(> em:only-child),
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) p.in-short {
  font-family: var(--sans);
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brick);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 0 0 1.75em;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(h2, h3) + p:has(> em:only-child) em,
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) p.in-short em { font-style: normal; }


/* --------------------------------------------------------------------------
   4. Lists
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(ul, ol) { margin: 0 0 1.6em; padding-left: 1.5rem; }
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) li { margin-bottom: 0.65em; padding-left: 0.25rem; }
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) li > :is(ul, ol) { margin: 0.65em 0 0; }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ul { list-style: none; padding-left: 1.55rem; }
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ul > li { position: relative; }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ul > li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brick);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ol > li::marker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9em;
  color: var(--brick);
}

/* TL;DR panel. Add class="tldr" to the list. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ul.tldr {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem 1.4rem 2.5rem;
  font-size: 1.0625rem;
  box-shadow: var(--shadow);
}
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ul.tldr li:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   5. Tables
   The scroll wrapper is added automatically by functions.php.
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(figure.wp-block-table, .atp-table-scroll) {
  margin: 2.25rem 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;

  /* Soft shadow on the edge while there is more table to scroll to. */
  background:
    linear-gradient(to right, var(--page) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--page) 30%, rgba(255,255,255,0)) right center,
    linear-gradient(to right, rgba(31,29,27,0.09), rgba(255,255,255,0)) left center,
    linear-gradient(to left,  rgba(31,29,27,0.09), rgba(255,255,255,0)) right center;
  background-color: var(--page);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}



body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  background: transparent;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) thead th {
  text-align: left;
  vertical-align: bottom;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody :is(td, th) {
  padding: 1rem 1.15rem;
  vertical-align: top;
  border-top: 1px solid var(--line-soft);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody tr:first-child :is(td, th) { border-top: 0; }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody tr { transition: background-color .12s ease; }
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody tr:hover { background: var(--surface); }

/* First column carries the label. It stays put while the rest scrolls. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 600;
  color: var(--ink);
  background: var(--page);
  border-right: 1px solid var(--line-soft);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody tr:hover td:first-child { background: var(--surface); }

/* Long first columns should wrap. Add class="wrap-first" to the table. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) table.wrap-first td:first-child {
  white-space: normal;
  min-width: 12rem;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) caption {
  caption-side: bottom;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: left;
  padding: 0.85rem 1.15rem 0;
}

/* Dollar figures read better a touch tighter. Add class="fig" to the cell. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) td.fig {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* A table with no figure wrapper scrolls itself. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) table:not(figure table):not(.atp-table-scroll table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 640px) {
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) table { font-size: 0.875rem; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) thead th { padding: 0.7rem 0.9rem; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody :is(td, th) { padding: 0.85rem 0.9rem; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody td:first-child { max-width: 9rem; }
}


/* --------------------------------------------------------------------------
   6. Links, quotes, media
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) a {
  color: var(--brick);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--brick) 35%, transparent);
  transition: color .12s ease, text-decoration-color .12s ease;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) a:hover {
  color: var(--brick-dark);
  text-decoration-color: var(--brick-dark);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) a:focus-visible,
body.atp-blog :is(a, button):focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 3px;
  border-radius: 3px;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) blockquote {
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--brick);
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) blockquote p:last-child { margin-bottom: 0; }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(img, iframe, video) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) figure:not(.wp-block-table) { margin: 2.25rem 0; }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) figcaption {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  padding-top: 0.65rem;
  text-align: left;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 3rem 0;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(code, kbd) {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.1em 0.38em;
  border-radius: 5px;
}

/* Citation markers written as <sup class="cite">3</sup> */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) sup.cite {
  font-family: var(--sans);
  font-size: 0.66em;
  font-weight: 700;
  color: var(--brick);
  padding-left: 0.15em;
}

/* Pull a number out of the text: <p class="stat"><b>62%</b> of chimneys ...</p> */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) p.stat {
  font-family: var(--sans);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0;
  margin: 2.5rem 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) p.stat b {
  display: block;
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brick);
  margin-bottom: 0.35rem;
  font-variant-numeric: lining-nums tabular-nums;
}


/* --------------------------------------------------------------------------
   7. Sources
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ol.sources {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ol.sources li { margin-bottom: 0.9em; }
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) ol.sources a { color: var(--ink-2); }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) a[href^="http"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* --------------------------------------------------------------------------
   8. Post furniture: meta, tags, next and previous, sidebar
   Class names vary by theme. Swap them if PopularFX uses different ones.
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-meta, .entry-footer, .post-meta) {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
}

body.atp-blog .entry-meta a { color: var(--muted); text-decoration: none; }
body.atp-blog .entry-meta a:hover { color: var(--brick); }

body.atp-blog .entry-meta img.avatar {
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.55rem;
  width: 30px;
  height: 30px;
}

body.atp-blog :is(.tags-links, .post-tags) a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin: 0 0.35rem 0.45rem 0;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

body.atp-blog :is(.tags-links, .post-tags) a:hover {
  background: var(--brick);
  border-color: var(--brick);
  color: #fff;
}

body.atp-blog :is(.post-navigation, .nav-links) {
  max-width: var(--measure);
  margin: 3.5rem auto;
  padding: 1.75rem 1.25rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.9375rem;
}

body.atp-blog :is(.widget, .wp-block-group.widget-area) {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.atp-blog .widget :is(.widget-title, h2) {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}

body.atp-blog .widget ul { list-style: none; padding: 0; margin: 0; }
body.atp-blog .widget li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
body.atp-blog .widget a { color: var(--ink-2); text-decoration: none; }
body.atp-blog .widget a:hover { color: var(--brick); }


/* --------------------------------------------------------------------------
   9. Small screens, motion, print
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) > p:first-of-type { font-size: 1.1875rem; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h2 { margin-top: 2.75rem; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) blockquote { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.atp-blog { scroll-behavior: auto; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) * { transition: none !important; animation: none !important; }
}

@media print {
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) { max-width: none; font-size: 11pt; color: #000; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) h2 { page-break-after: avoid; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(figure.wp-block-table, .atp-table-scroll) {
    overflow: visible;
    box-shadow: none;
    page-break-inside: avoid;
  }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) tbody td:first-child { position: static; }
  body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  body.atp-blog :is(.widget, .post-navigation, .tags-links) { display: none; }
}


/* --------------------------------------------------------------------------
   10. Beating PopularFX
   The theme sets fonts and colors on the elements themselves, which outranks
   a rule set on the container. These name the elements to settle it.
   -------------------------------------------------------------------------- */

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(p, li) {
  font-family: var(--serif);
  color: var(--ink);
}

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(h1, h2, h3, h4) { font-family: var(--sans); }

body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) :is(td, th) { font-family: var(--sans); }

/* Give the article room. PopularFX indents its columns heavily. */
body.atp-blog :is(.entry-content, .post-content, .pagelayer-post-content) {
  max-width: 54rem;
  margin-left: 0;
}