/* layout: toc. Loads after seo.css and the WordPress stylesheets, before components.css; every colour
   and face comes from tokens.css. Spec: docs/superpowers/specs/2026-09-10-content-page-refresh-design.md
   Since the frame round (spec 2026-09-11) the hero, buttons, eyebrow, links, phone, article typography,
   FAQ, guides and appointment band live in components.css under body.pd-frame; this file keeps only the
   two-column body, the contents rail and the mobile contents bar (the related-reading rail is in
   components.css, spec 2026-09-11-frame-related-sections-design.md). The WordPress theme's .page-template-default
   rules still match by tag at (0,1,1), and components.css, which loads after this file, resets .pd-page a
   to display:inline at (0,1,1); so every anchor rule here carries two classes (.pd-page X) and hover
   states are declared explicitly. */

/* ---------- page frame ---------- */
.pd-page{color:var(--pd-text);font-family:var(--pd-body);}
.pd-page p,.pd-page li{font-family:var(--pd-body);}

/* ---------- two-column body ---------- */
.pd-body{max-width:1140px;margin:0 auto;padding:58px 24px 0;display:grid;grid-template-columns:250px minmax(0,680px);column-gap:80px;justify-content:center;}
.pd-rail{position:sticky;top:calc(var(--header-height,69px) + 24px);align-self:start;padding-top:6px;}
.pd-toc ul{list-style:none !important;margin:16px 0 0;padding:0;border-left:1px solid var(--pd-hair);}
.pd-toc li{list-style:none !important;margin:0;padding:0;position:relative;}
.pd-toc li::marker{content:none;}
/* block, not inline: a wrapped heading keeps its 20px indent on every line and the whole item is the target */
.pd-page .pd-toc a{display:block;padding:7px 0 7px 20px;font:400 15px/1.4 var(--pd-body);color:var(--pd-muted);text-decoration:none;text-wrap:pretty;overflow-wrap:anywhere;}
.pd-page .pd-toc a:hover,.pd-page .pd-toc a:focus{color:var(--pd-ink);text-decoration:none;}
.pd-page .pd-toc a.active{color:var(--pd-ink);font-weight:700;}
.pd-page .pd-toc a.active::before{content:"";position:absolute;left:-4px;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--pd-navy);}
.pd-contact{margin-top:38px;padding-top:26px;border-top:1px solid var(--pd-hair);}
.pd-contact p{font:400 14.5px/1.5 var(--pd-body);color:var(--pd-muted);max-width:22ch;margin:0 0 12px;letter-spacing:0;}

/* ---------- article ---------- */
.pd-article{min-width:0;}

/* ---------- mobile contents bar (hidden on desktop) ---------- */
.pd-mobile-toc{display:none;}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  .pd-body{display:block;padding:22px 20px 0;}
  .pd-rail{display:none;}
  .pd-mobile-toc{display:block;position:sticky;top:var(--header-height,69px);z-index:1020;background:#fff;border-bottom:1px solid var(--pd-hair);}
  .pd-mobile-toc-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 20px;background:#fff;border:0;text-align:left;cursor:pointer;font-family:var(--pd-body);}
  .pd-mobile-toc-labels{min-width:0;}
  .pd-page .pd-mobile-toc-cur{display:block;font:700 15px/1.3 var(--pd-body);color:var(--pd-ink);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pd-mobile-toc-btn svg{width:20px;height:20px;color:var(--pd-muted);flex:none;transition:transform .2s ease;}
  .pd-mobile-toc-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
  .pd-mobile-toc-list{padding:0 20px 12px;max-height:60vh;overflow-y:auto;}
  .pd-mobile-toc-list ul{list-style:none !important;margin:0;padding:0;}
  .pd-mobile-toc-list li{list-style:none !important;margin:0;padding:0;}
  .pd-mobile-toc-list li::marker{content:none;}
  /* block, not inline: the hairline sits between items instead of across the previous line of text */
  .pd-page .pd-mobile-toc-list a{display:block;padding:10px 0;font:400 15.5px/1.35 var(--pd-body);color:var(--pd-text);text-decoration:none;border-top:1px solid var(--pd-hair);}
  .pd-page .pd-mobile-toc-list a.active{color:var(--pd-ink);font-weight:700;}
}
@media (prefers-reduced-motion:reduce){
  .pd-mobile-toc-btn svg{transition:none;}
}