/*
Theme Name: Toy Pick Guide
Theme URI: https://toypickguide.com/
Description: Gift-guide layout layer for Toy Pick Guide. Child theme of Newsup Baymax: keeps the parent's header, navigation and editor compatibility, replaces the magazine home/archive/article layouts with gift-guide templates (age, occasion, budget, recipient) and a single design system.
Author: Toy Pick Guide
Author URI: https://toypickguide.com/
Template: newsup_baymax
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: tpg-guide
Tags: blog, one-column, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  --tpg-ink: #101d33;
  --tpg-body: #40506b;
  --tpg-muted: #5f6b82;   /* WCAG AA on white 5.37:1 and on surface-2 4.98:1 */
  --tpg-line: #e7e1d6;
  --tpg-line-soft: #f1ece2;
  --tpg-bg: #fffdf8;
  --tpg-surface: #ffffff;
  --tpg-surface-2: #fbf6ec;
  --tpg-accent: #c2410c;  /* carries white button text: 5.18:1 (was #e2552c at 3.77:1, below AA) */
  --tpg-accent-ink: #a83a19;
  --tpg-accent-soft: #fdeee7;
  --tpg-sun: #f5a524;
  --tpg-mint: #0f9e8a;
  --tpg-mint-soft: #e6f6f3;
  --tpg-radius-sm: 10px;
  --tpg-radius: 16px;
  --tpg-radius-lg: 24px;
  --tpg-shadow-sm: 0 1px 2px rgba(16, 29, 51, .06), 0 2px 8px rgba(16, 29, 51, .05);
  --tpg-shadow: 0 2px 4px rgba(16, 29, 51, .05), 0 12px 28px rgba(16, 29, 51, .08);
  --tpg-max: 1160px;
  --tpg-measure: 44rem;
  --tpg-gap: clamp(16px, 2.2vw, 28px);
  --tpg-font-head: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tpg-font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   2. Base
   ========================================================= */
body.tpg {
  background: var(--tpg-bg);
  color: var(--tpg-body);
  font-family: var(--tpg-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.tpg h1, body.tpg h2, body.tpg h3, body.tpg h4 {
  font-family: var(--tpg-font-head);
  color: var(--tpg-ink);
  letter-spacing: -.01em;
  line-height: 1.24;
}

body.tpg a { color: var(--tpg-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.tpg a:hover { color: var(--tpg-accent); }

body.tpg img { max-width: 100%; height: auto; }

.tpg-skip:focus,
body.tpg a:focus-visible,
body.tpg button:focus-visible {
  outline: 3px solid var(--tpg-sun);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================
   3. Neutralise parent magazine chrome that has no business on a gift guide
   ========================================================= */
.newsup-baymax-topbar,
.newsup-baymax-nav-cta { display: none !important; }

/* The magazine "You missed" strip and footer widget columns render empty
   blocks such as "No categories" / "No archives". Our own footer replaces them. */
.missed-section,
.mg-footer-copyright { display: none !important; }

/* Single-column reading: no empty sidebar on guide pages. */
body.tpg-single-column #secondary,
body.tpg-single-column .col-md-4,
body.tpg-single-column .sidebar-right { display: none !important; }
body.tpg-single-column #primary,
body.tpg-single-column .col-md-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100%; }

/* Parent hero + magazine modules are removed in functions.php; keep a belt-and-braces rule. */
.newsup-baymax-home-hero,
.newsup-baymax-home-modules { display: none !important; }

/* =========================================================
   4. Layout primitives
   ========================================================= */
.tpg-wrap { max-width: var(--tpg-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.tpg-section { padding: clamp(36px, 5vw, 64px) 0; }
.tpg-section--tight { padding: clamp(24px, 3vw, 40px) 0; }
.tpg-section--band { background: var(--tpg-surface-2); border-block: 1px solid var(--tpg-line-soft); }

.tpg-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.tpg-eyebrow {
  display: inline-block;
  font-family: var(--tpg-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tpg-accent-ink);
  background: var(--tpg-accent-soft);
  border-radius: 999px;
  padding: 6px 12px;
}
.tpg-h2 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 6px; }
.tpg-lede { margin: 0; color: var(--tpg-muted); font-size: 16px; max-width: 46rem; }
.tpg-more { font-family: var(--tpg-font-head); font-weight: 700; font-size: 14px; white-space: nowrap; }

.tpg-grid { display: grid; gap: var(--tpg-gap); }
/* 7 age bands: fixed 4-up keeps the last row at 3 instead of tailing one orphan tile. */
.tpg-grid--age { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tpg-grid--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tpg-grid--budget { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tpg-grid--steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* =========================================================
   5. Hero
   ========================================================= */
.tpg-hero {
  background:
    radial-gradient(900px 420px at 12% -10%, #fff3dd 0%, rgba(255, 243, 221, 0) 60%),
    radial-gradient(700px 380px at 92% 0%, #e9f6f2 0%, rgba(233, 246, 242, 0) 55%),
    var(--tpg-bg);
  border-bottom: 1px solid var(--tpg-line-soft);
}
.tpg-hero__inner { padding: clamp(36px, 6vw, 76px) 0 clamp(28px, 4vw, 52px); max-width: 52rem; }
.tpg-hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  margin: 16px 0 14px;
  letter-spacing: -.02em;
  /* Avoids a single orphan word on the last line; ignored by browsers without support. */
  text-wrap: balance;
}
.tpg-hero p { font-size: clamp(16px, 1.6vw, 18px); color: var(--tpg-body); margin: 0 0 24px; max-width: 40rem; }
.tpg-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tpg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tpg-font-head); font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tpg-btn--primary { background: var(--tpg-accent); color: #fff !important; box-shadow: 0 8px 20px rgba(226, 85, 44, .24); }
.tpg-btn--primary:hover { background: var(--tpg-accent-ink); transform: translateY(-1px); }
.tpg-btn--ghost { background: #fff; color: var(--tpg-ink) !important; border-color: var(--tpg-line); }
.tpg-btn--ghost:hover { border-color: var(--tpg-ink); transform: translateY(-1px); }

.tpg-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding: 0; list-style: none; }
.tpg-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tpg-muted); }
.tpg-trust li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tpg-mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%230f9e8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* =========================================================
   6. Cards
   ========================================================= */
.tpg-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--tpg-surface); border: 1px solid var(--tpg-line);
  border-radius: var(--tpg-radius); padding: 18px;
  text-decoration: none !important; color: var(--tpg-ink) !important;
  box-shadow: var(--tpg-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tpg-card:hover { transform: translateY(-2px); box-shadow: var(--tpg-shadow); border-color: #d9d1c2; }
.tpg-card__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tpg-muted); }
.tpg-card__title { font-family: var(--tpg-font-head); font-weight: 700; font-size: 17px; line-height: 1.3; }
.tpg-card__meta { font-size: 13px; color: var(--tpg-muted); margin-top: auto; padding-top: 8px; }
.tpg-card__arrow { position: absolute; top: 16px; right: 16px; color: var(--tpg-accent); opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.tpg-card:hover .tpg-card__arrow { opacity: 1; transform: translateX(2px); }

/* Age tiles read as a row of quick filters, not as content cards. */
.tpg-age {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--tpg-surface); border: 1px solid var(--tpg-line);
  border-radius: var(--tpg-radius); padding: 16px 16px 14px;
  text-decoration: none !important; box-shadow: var(--tpg-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tpg-age:hover { transform: translateY(-2px); box-shadow: var(--tpg-shadow); border-color: var(--tpg-accent); }
.tpg-age__num { font-family: var(--tpg-font-head); font-weight: 800; font-size: 26px; color: var(--tpg-ink); line-height: 1.1; }
.tpg-age__unit { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tpg-muted); }
.tpg-age__note { font-size: 13px; color: var(--tpg-muted); margin-top: 6px; }

/* Chips: compact links for occasions / interests / sibling categories. */
.tpg-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.tpg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tpg-surface); border: 1px solid var(--tpg-line); border-radius: 999px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--tpg-ink) !important;
  text-decoration: none !important; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tpg-chip:hover { border-color: var(--tpg-accent); background: var(--tpg-accent-soft); color: var(--tpg-accent-ink) !important; }
.tpg-chip--muted { color: var(--tpg-muted) !important; background: transparent; }

/* Budget keeps a money-first layout: amount is the visual anchor. */
.tpg-budget { display: flex; align-items: baseline; gap: 10px; }
.tpg-budget__amount { font-family: var(--tpg-font-head); font-weight: 800; font-size: 30px; color: var(--tpg-ink); }
.tpg-budget__label { font-size: 13px; color: var(--tpg-muted); }

/* =========================================================
   7. Trust / method
   ========================================================= */
.tpg-step {
  background: var(--tpg-surface); border: 1px solid var(--tpg-line); border-radius: var(--tpg-radius);
  padding: 20px; box-shadow: var(--tpg-shadow-sm);
}
.tpg-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tpg-accent-soft); color: var(--tpg-accent-ink);
  font-family: var(--tpg-font-head); font-weight: 800; font-size: 14px; margin-bottom: 12px;
}
.tpg-step h3 { font-size: 17px; margin: 0 0 6px; }
.tpg-step p { margin: 0; font-size: 15px; color: var(--tpg-body); }

/* =========================================================
   8. Breadcrumb + archive header
   ========================================================= */
.tpg-crumbs { font-size: 13px; color: var(--tpg-muted); padding: 18px 0 0; }
.tpg-crumbs a { color: var(--tpg-muted); text-decoration: none; }
.tpg-crumbs a:hover { color: var(--tpg-accent-ink); text-decoration: underline; }
.tpg-crumbs span[aria-current] { color: var(--tpg-ink); font-weight: 600; }
.tpg-crumbs .sep { padding: 0 8px; opacity: .55; }

.tpg-archive-head { padding: clamp(20px, 3vw, 34px) 0 clamp(16px, 2vw, 24px); }
.tpg-archive-head h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 10px; }
.tpg-archive-head .tpg-termdesc { max-width: var(--tpg-measure); color: var(--tpg-body); }
.tpg-archive-head .tpg-termdesc p:last-child { margin-bottom: 0; }

/* =========================================================
   9. Empty state (the honest state of a category with 0 guides)
   ========================================================= */
.tpg-empty {
  border: 1px dashed #d8d0c0; border-radius: var(--tpg-radius-lg);
  background: var(--tpg-surface-2); padding: clamp(24px, 4vw, 40px);
  display: grid; gap: 14px; max-width: 46rem;
}
.tpg-empty h2 { font-size: 20px; margin: 0; }
.tpg-empty p { margin: 0; color: var(--tpg-body); font-size: 15.5px; }
.tpg-empty .tpg-actions { margin-top: 4px; }

/* =========================================================
   10. Post list (only used once guides exist)
   ========================================================= */
.tpg-list { display: grid; gap: var(--tpg-gap); }
.tpg-list--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tpg-post {
  display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: start;
  background: var(--tpg-surface); border: 1px solid var(--tpg-line); border-radius: var(--tpg-radius);
  padding: 14px; text-decoration: none !important; color: inherit;
  box-shadow: var(--tpg-shadow-sm); transition: box-shadow .16s ease, transform .16s ease;
}
.tpg-post:hover { box-shadow: var(--tpg-shadow); transform: translateY(-2px); }
/* No featured image yet: a 132px thumb column would squeeze the text into a
   strip and leave the rest of the card blank. Collapse to one column instead. */
.tpg-post--no-thumb { grid-template-columns: 1fr; }
.tpg-post__thumb { aspect-ratio: 4 / 3; border-radius: var(--tpg-radius-sm); overflow: hidden; background: var(--tpg-surface-2); }
.tpg-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tpg-post__body { display: flex; flex-direction: column; gap: 6px; }
.tpg-post__cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tpg-accent-ink); }
.tpg-post__title { font-family: var(--tpg-font-head); font-weight: 700; font-size: 18px; color: var(--tpg-ink); line-height: 1.3; }
.tpg-post__excerpt { font-size: 14.5px; color: var(--tpg-body); }
.tpg-post__meta { font-size: 12.5px; color: var(--tpg-muted); }

/* Pagination */
.tpg-pager { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.tpg-pager .page-numbers {
  display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 12px; border: 1px solid var(--tpg-line); background: #fff;
  color: var(--tpg-ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.tpg-pager .page-numbers.current { background: var(--tpg-ink); border-color: var(--tpg-ink); color: #fff; }
.tpg-pager .page-numbers:hover { border-color: var(--tpg-accent); color: var(--tpg-accent-ink); }

/* =========================================================
   11. Article
   ========================================================= */
.tpg-article { padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 6vw, 72px); }
.tpg-article__head { max-width: var(--tpg-measure); margin: 0 auto clamp(20px, 3vw, 32px); }
.tpg-article__head h1 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; letter-spacing: -.02em; }
.tpg-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--tpg-muted); }
.tpg-meta strong { color: var(--tpg-ink); font-weight: 600; }

/* Standfirst: the one sentence that says what the guide is for. Reference sites
   put it directly under the H1, before the byline. */
.tpg-dek { margin: 0 0 14px; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; color: var(--tpg-body); max-width: 40rem; }
.tpg-byline a { text-decoration: none; }
.tpg-updated time { font-variant-numeric: tabular-nums; }

/* "How we picked": sits between disclosure and the first pick. */
.tpg-method {
  max-width: var(--tpg-measure); margin: 0 auto clamp(20px, 3vw, 30px);
  border: 1px solid var(--tpg-line); background: var(--tpg-surface);
  border-radius: var(--tpg-radius); padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 24px);
}
.tpg-method__title { font-size: 15px; margin: 0 0 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--tpg-ink); }
.tpg-method ul { margin: 0; padding-left: 1.15em; }
.tpg-method li { font-size: 14.5px; line-height: 1.68; color: var(--tpg-body); }
.tpg-method li + li { margin-top: 8px; }
.tpg-method li::marker { color: var(--tpg-accent); }

.tpg-disclosure {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #f0dcc2; background: #fff8ec; border-radius: var(--tpg-radius);
  padding: 14px 16px; font-size: 14px; color: #6a4a1e; max-width: var(--tpg-measure); margin: 0 auto clamp(20px, 3vw, 30px);
}
.tpg-disclosure strong { color: #4d3312; }

.tpg-prose { max-width: var(--tpg-measure); margin: 0 auto; font-size: 17.5px; line-height: 1.78; color: var(--tpg-body); }
.tpg-prose > * + * { margin-top: 1.1em; }
.tpg-prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 2em; scroll-margin-top: 96px; }
.tpg-prose h3 { font-size: clamp(18px, 2vw, 21px); margin-top: 1.6em; }
.tpg-prose ul, .tpg-prose ol { padding-left: 1.3em; }
.tpg-prose li + li { margin-top: .4em; }
.tpg-prose blockquote {
  margin: 1.6em 0; padding: 14px 20px; border-left: 4px solid var(--tpg-accent);
  background: var(--tpg-surface-2); border-radius: 0 var(--tpg-radius-sm) var(--tpg-radius-sm) 0; color: var(--tpg-ink);
}
.tpg-prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tpg-prose th, .tpg-prose td { border: 1px solid var(--tpg-line); padding: 10px 12px; text-align: left; }
/* First column carries a short label ("Under $25"), so it must not wrap mid-value. */
.tpg-prose th:first-child, .tpg-prose td:first-child { white-space: nowrap; width: 1%; }
.tpg-prose th { background: var(--tpg-surface-2); font-family: var(--tpg-font-head); font-size: 14px; }
.tpg-prose img { border-radius: var(--tpg-radius); }

/* Product recommendation rows used inside guides (content-side, not hardcoded data) */
.tpg-picks { display: grid; gap: 12px; margin: 1.6em 0; }
.tpg-pick {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center;
  border: 1px solid var(--tpg-line); border-radius: var(--tpg-radius); background: #fff; padding: 14px 16px;
}
.tpg-pick__name { font-family: var(--tpg-font-head); font-weight: 700; color: var(--tpg-ink); font-size: 16px; }
.tpg-pick__why { font-size: 14px; color: var(--tpg-body); }
.tpg-pick__cta { font-size: 13.5px; font-weight: 700; white-space: nowrap; }

/* =========================================================
   12. Policy / static page
   ========================================================= */
.tpg-page { padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 6vw, 72px); }
.tpg-page__head { max-width: var(--tpg-measure); margin: 0 auto clamp(16px, 2vw, 24px); }
.tpg-page__head h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 8px; }
.tpg-updated { font-size: 13px; color: var(--tpg-muted); }

/* =========================================================
   13. Footer
   ========================================================= */
.tpg-footer { background: #0f1a2e; color: #c9d2e3; padding: clamp(36px, 5vw, 56px) 0 0; }
/*
 * 深色底要压过全局的 body.tpg a / body.tpg h2（特异性 0,1,2 > 0,1,1）。
 * 否则页脚标题拿到 --tpg-ink（#101d33 on #0f1a2e = 1.03:1，肉眼看不见），
 * 链接拿到 --tpg-accent-ink（2.72:1，低于 AA）。两处均已用截图确认。
 */
body.tpg .tpg-footer a { color: #e7edf9; text-decoration: none; }
body.tpg .tpg-footer a:hover { color: #fff; text-decoration: underline; }
.tpg-footer__grid { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr)); }
.tpg-footer__brand { font-family: var(--tpg-font-head); font-weight: 800; font-size: 20px; color: #fff; margin: 0 0 10px; }
.tpg-footer p { font-size: 14px; line-height: 1.65; color: #a9b5cb; margin: 0 0 10px; }
body.tpg .tpg-footer h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8fa0bd; margin: 0 0 12px; font-family: var(--tpg-font-head); }
.tpg-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.tpg-footer__bottom {
  margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: 13px; color: #8fa0bd;}

/* =========================================================
   14. Responsive + motion + a11y
   ========================================================= */
@media (max-width: 1080px) {
  .tpg-grid--age { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tpg-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body.tpg { font-size: 16.5px; }
  .tpg-post { grid-template-columns: 1fr; }
  .tpg-post__thumb { aspect-ratio: 16 / 9; }
  .tpg-footer__grid { grid-template-columns: 1fr; }
  .tpg-grid--age { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpg-prose th, .tpg-prose td { padding: 8px 10px; font-size: 14.5px; }
  .tpg-actions .tpg-btn { width: 100%; justify-content: center; }
  .tpg-pick { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .tpg-grid--age { grid-template-columns: 1fr; }
  .tpg-age { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
  .tpg-age__note { flex: 1 1 100%; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  body.tpg *, body.tpg *::before, body.tpg *::after { transition: none !important; animation: none !important; }
  .tpg-card:hover, .tpg-age:hover, .tpg-post:hover, .tpg-btn:hover { transform: none !important; }
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================
   15. Inherited chrome (parent header + nav)
   The parent paints its nav with --pri-color (#1151d3), which fights the warm
   palette the moment the child theme goes live. Repaint the chrome only — the
   parent's markup, menus and mobile drawer are untouched.
   ========================================================= */
/* The blue bar is painted by the parent's skin layer:
   body[class*="baymax-skin-"] .navbar-wp { background: var(--baymax-nav-bg) !important; }
   So the only reliable override is the variable itself, declared later with one
   extra element of specificity. */
html body.tpg {
  --pri-color: var(--tpg-ink);
  --baymax-primary: var(--tpg-ink);
  --baymax-primary-dark: var(--tpg-ink);
  --baymax-link: var(--tpg-accent-ink);
  --baymax-nav-bg: var(--tpg-ink);
  --baymax-nav-active-bg: var(--tpg-accent);
}

body.tpg .mg-headwidget .navbar-wp,
body.tpg .mg-headwidget.center .navbar-wp { background: var(--tpg-ink); }

body.tpg .mg-headwidget .navbar-wp .navbar-nav > li > a { color: rgba(255, 255, 255, .78); }
body.tpg .mg-headwidget .navbar-wp .navbar-nav > li > a:hover,
body.tpg .mg-headwidget .navbar-wp .navbar-nav > li > a:focus,
body.tpg .mg-headwidget .navbar-wp .navbar-nav > .active > a { color: #fff; background: var(--tpg-accent); }

/* Keep the nav on one line where the viewport allows it. */
@media (min-width: 1200px) {
  body.tpg .mg-headwidget .navbar-wp .navbar-nav > li > a { padding-inline: 12px; font-size: 13.5px; }
}

/* =========================================================
   16. In-body figures
   The guides carry one or two original diagrams per article. They sit inside the
   text measure, so they must not be wider than the prose column, and the caption
   has to stay readable at 390px.
   ========================================================= */
.tpg-figure { margin: 2em 0; }
.tpg-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--tpg-line); border-radius: var(--tpg-radius); background: var(--tpg-surface); }
.tpg-figure__zoom { display: block; cursor: zoom-in; }
.tpg-figure__zoom img { transition: opacity .15s ease; }
.tpg-figure__zoom:hover img, .tpg-figure__zoom:focus-visible img { opacity: .93; }
.tpg-figure figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--tpg-muted); }
@media (max-width: 520px) {
  .tpg-figure { margin: 1.6em -4px; }
  .tpg-figure__zoom { display: block; cursor: zoom-in; }
.tpg-figure__zoom img { transition: opacity .15s ease; }
.tpg-figure__zoom:hover img, .tpg-figure__zoom:focus-visible img { opacity: .93; }
.tpg-figure figcaption { font-size: 12.5px; }
}