/* Foreman blog: foreman.everydaymactools.com/blog/
   Loaded after css/foreman.css, which brings the tokens (cool grey page, white paper, ink, hairlines, Efficiency
   Mode's green), the system fonts, the sticky nav, the footer and the buttons. This file only styles the article,
   the blog index and the breadcrumbs, in the page's own vocabulary: white panels on the grey page, ink links with
   hairline underlines, light code blocks. No amber, no cream, no gradients. Built by
   everydaymactools/scripts/build-blogs.py. */

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--text); }
.crumbs a:hover { color: var(--ink); }
.crumbs a::after { content: "›"; margin-left: 8px; color: var(--muted); opacity: .7; }
.crumbs span[aria-current] { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- article ---------- */
/* the nav is sticky, so the page flows under it with no offset */
.post { padding: clamp(40px, 6vw, 84px) 0 clamp(72px, 9vw, 120px); }
.post__head { max-width: 780px; }
.post__head h1 { font: 600 clamp(36px, 4.6vw, 56px) / 1.04 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.post__head .sub { margin-top: 18px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--text); max-width: 36em; text-wrap: pretty; }
.post__meta { margin-top: 18px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

.post__body { max-width: 700px; margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--hair); }
.post__body h2 { margin: 48px 0 12px; font: 600 clamp(24px, 2.4vw, 30px) / 1.15 var(--display); letter-spacing: -0.03em; }
.post__body h3 { margin: 30px 0 8px; font: 600 19px / 1.3 var(--display); letter-spacing: -0.02em; }
.post__body p, .post__body li { font-size: 17.5px; line-height: 1.68; color: var(--text); text-wrap: pretty; }
.post__body p + p, .post__body ul + p, .post__body ol + p, .post__body table + p, .post__body pre + p, .post__body h3 + p { margin-top: 1em; }
.post__body h3 + p { margin-top: 0; }
.post__body ul, .post__body ol { display: grid; gap: .45em; margin: .8em 0 1em; padding-left: 1.3em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li::marker { color: var(--muted); }
.post__body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #b9c0ca; }
.post__body a:hover { text-decoration-color: currentColor; }
.post__body strong, .post__body b { color: var(--ink); font-weight: 600; }
.post__body code { padding: 2px 6px; border-radius: 6px; background: #e8ebef; color: var(--ink); font: .86em/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.post__body pre { margin: 1em 0; padding: 18px 20px; border-radius: 12px; overflow-x: auto; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-cut); font: 13.5px/1.7 ui-monospace, "SF Mono", Menlo, monospace; }
.post__body pre code { padding: 0; background: none; color: inherit; font: inherit; }
.post__body blockquote { margin: 1.2em 0; padding: 14px 20px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--leaf); }
.post__body blockquote p { color: var(--ink); }
.post__body hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--hair); }

/* tables: hairline rows on white; scroll sideways on a phone rather than squash */
.post__body table { background: var(--paper); display: block; max-width: 100%; overflow-x: auto; margin: 1.2em 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hair); border-radius: 16px; font-size: 15.5px; line-height: 1.5; }
.post__body th, .post__body td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair-soft); }
.post__body th { color: var(--ink); font-weight: 600; background: #f6f7f9; white-space: nowrap; }
.post__body td { color: var(--text); }
.post__body tr:last-child td { border-bottom: 0; }

/* ---------- the call to action and Read next ---------- */
.post__cta { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; max-width: 700px; margin-top: 52px; padding: 28px 30px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-cut); }
.post__cta img { width: 56px; height: 56px; transform: scale(1.14); }
.post__cta b { display: block; color: var(--ink); font: 600 21px / 1.2 var(--display); letter-spacing: -0.025em; }
.post__cta p { margin-top: 6px; color: var(--text); font-size: 15.5px; line-height: 1.55; }
.post__cta .btn { margin-top: 16px; }

.post__more { max-width: 700px; margin-top: 44px; border-top: 1px solid var(--ink); }
.post__more h2 { padding: 16px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.post__more a { display: block; padding: 13px 0; border-bottom: 1px solid var(--hair-soft); color: var(--ink); font-weight: 500; transition: color .2s; }
.post__more a:hover { color: var(--leaf); text-decoration: none; }

/* ---------- the blog index ---------- */
.blog__grid { display: grid; max-width: 860px; margin-top: clamp(32px, 4vw, 52px); }
.blog__cat { margin: 48px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font: 600 22px / 1.2 var(--display); letter-spacing: -0.025em; }
.blog__cat:first-child { margin-top: 0; }
.blog__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 15px 8px; border-bottom: 1px solid var(--hair-soft); color: var(--ink); transition: background-color .2s ease; }
.blog__item:hover { background: var(--paper); text-decoration: none; }
.blog__item b { font-size: 17px; font-weight: 500; }
.blog__item:hover b { color: var(--leaf); }
.blog__item span { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .post__cta { grid-template-columns: 1fr; padding: 22px 20px; }
  .crumbs span[aria-current] { display: none; }
  .crumbs a:nth-last-child(2)::after { display: none; } /* no dangling separator once the title is hidden */
  .post__body table { font-size: 14.5px; }
  .post__body th, .post__body td { padding: 10px 12px; }
  .post__body td + td, .post__body th + th { min-width: 8em; }
  .post__body p, .post__body li { font-size: 17px; }
  .blog__item { padding: 14px 2px; }
}