/* Single blog post (post-template.php). Loaded after page.css and blog.css. A reading column of about 70
   characters on white, generous line height, the contents list in the left margin on wide screens. */

body.cw-post-page{background:var(--cw-white)}
.cw-post{--post-col:42rem}

/* Reading progress, under the fixed header */
.cw-progress{position:fixed;left:0;right:0;top:var(--cfy-hdr-h,64px);height:2px;z-index:997;pointer-events:none}
.admin-bar .cw-progress{top:calc(var(--cfy-hdr-h,64px) + 32px)}
.cw-progress span{display:block;height:100%;background:var(--cfy-success,#368F4D);transform:scaleX(var(--p,0));transform-origin:0 50%}

/* Header */
.cw-post-head{padding-top:var(--cw-hero-top)}
.cw-post-col{max-width:var(--post-col);margin:0 auto;padding:0 var(--cw-gutter);box-sizing:content-box}
.cw-post .cw-eyebrow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;color:var(--cw-ink-3)}
#main.cw-post .cw-eyebrow a{color:var(--cw-ink-3);text-decoration:none}
#main.cw-post .cw-eyebrow a:hover{color:var(--cw-primary)}
.cw-page.cw-page.cw-post h1{max-width:none;font-size:clamp(2.125rem,1.5rem + 2.6vw,3.25rem);font-weight:500;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
#main.cw-post .cw-post-dek{margin:1.25rem 0 0;font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);line-height:1.55;color:var(--cw-ink-2);text-wrap:pretty}

.cw-post-byline{display:flex;align-items:center;flex-wrap:wrap;gap:.875rem 1rem;margin-top:2rem;padding:1rem 0;border-top:1px solid var(--cw-line);border-bottom:1px solid var(--cw-line)}
.cw-post-avatar{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--cw-primary);color:#fff;font-weight:600}
.cw-post-by{flex:1 1 0;min-width:0}
#main.cw-post .cw-post-author{margin:0;font-weight:600;color:var(--cw-ink)}
#main.cw-post .cw-post-meta{margin:.1rem 0 0;font-size:.9rem;color:var(--cw-ink-3)}
.cw-post-meta span{margin:0 .3rem}
.cw-post-byline .cw-share{margin-left:auto}

/* Share */
.cw-share{display:flex;gap:.5rem}
#main.cw-post .cw-share-btn{position:relative;display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--cw-line);border-radius:50%;background:var(--cw-white);color:var(--cw-ink-2);cursor:pointer;text-decoration:none;transition:color var(--cw-d) var(--cw-ease),border-color var(--cw-d) var(--cw-ease),transform var(--cw-d) var(--cw-ease)}
#main.cw-post .cw-share-btn:hover{color:var(--cw-primary);border-color:var(--cw-primary);transform:translateY(-2px)}
.cw-share-btn:focus-visible{outline:2px solid var(--cw-primary);outline-offset:2px}
.cw-share-done{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translateX(-50%);padding:.25rem .5rem;border-radius:4px;background:var(--cw-ink);color:#fff;font-size:.75rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.cw-share-done:not(:empty){opacity:1}

/* Art */
.cw-post-art{max-width:60rem;margin:2.5rem auto 0;padding:0 var(--cw-gutter)}
.cw-post-art svg{display:block;width:100%;height:auto;aspect-ratio:12 / 5;border:1px solid var(--cw-line);border-radius:10px;background:#F4F7FB}

/* Layout: contents list in the left margin from 1200px */
.cw-post-layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--cw-max);margin:3.5rem auto 0;padding:0 var(--cw-gutter)}
.cw-post-layout>.cw-post-body{padding:0;max-width:var(--post-col);width:100%}
.cw-post-toc{display:none}
@media (min-width:1200px){
  .cw-post-layout{grid-template-columns:minmax(0,1fr) var(--post-col) minmax(0,1fr);column-gap:3rem}
  .cw-post-layout>.cw-post-body{grid-column:2}
  .cw-post-toc{display:block;grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:15rem;position:sticky;top:calc(var(--cfy-hdr-h,64px) + 2.5rem);align-self:start}
}
#main.cw-post .cw-post-toc-h{margin:0 0 .75rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cw-ink-3)}
.cw-post-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--cw-line)}
#main.cw-post .cw-post-toc li{margin:0}
#main.cw-post .cw-post-toc a{display:block;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:2px solid transparent;color:var(--cw-ink-3);font-size:.9rem;line-height:1.4;text-decoration:none;transition:color var(--cw-d),border-color var(--cw-d)}
#main.cw-post .cw-post-toc a:hover,#main.cw-post .cw-post-toc a[aria-current="true"]{color:var(--cw-ink);border-left-color:var(--cw-primary)}

/* Body text */
.cw-post-body{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.75;color:var(--cw-ink)}
#main.cw-post .cw-post-body p{margin:0 0 1.5em}
.cw-page.cw-page.cw-post .cw-post-body h2{font-size:clamp(1.5rem,1.3rem + .9vw,1.875rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:2.5em 0 .6em;scroll-margin-top:calc(var(--cfy-hdr-h,64px) + 2rem)}
.cw-page.cw-page.cw-post .cw-post-body h3{font-size:1.25rem;font-weight:600;line-height:1.3;margin:2em 0 .5em}
.cw-post-body h2:first-child{margin-top:0}
#main.cw-post .cw-post-body a:not(.cw-gloss):not(.cw-share-btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
#main.cw-post .cw-post-body .cw-post-tags a{text-decoration:none}
.cw-post-body strong{font-weight:600;color:var(--cw-ink)}
.cw-post-body .cw-list{margin:0 0 1.75em}
#main.cw-post .cw-post-body .cw-list li{padding:.35rem 0 .35rem 1.6rem}
.cw-post-body .cw-list li::before{top:1.05em}
.cw-post-body ul:not(.cw-list),.cw-post-body ol{margin:0 0 1.5em;padding-left:1.25em}
#main.cw-post .cw-post-body li{margin:.4em 0}
.cw-post-body blockquote{margin:2em 0;padding:.25em 0 .25em 1.5em;border-left:3px solid var(--cw-primary);font-size:1.15em;color:var(--cw-ink)}

/* The short answer that opens most articles */
.cw-post-answer{margin:0 0 2.25em;padding:1.25rem 1.5rem;background:var(--cw-paper);border:1px solid var(--cw-line);border-left:3px solid var(--cfy-success,#368F4D);border-radius:0 8px 8px 0}
#main.cw-post .cw-post-answer p{margin:0;font-size:1.0625rem;line-height:1.65;text-align:left}

/* Boxed lists and further reading */
.cw-post-box{margin:2.25em 0;padding:1.5rem 1.75rem;border:1px solid var(--cw-line);border-radius:10px;background:var(--cw-white)}
#main.cw-post .cw-post-box-h{margin:0 0 .5rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cw-ink-3)}
.cw-post-box .cw-list{margin:0;font-size:1rem}
.cw-post-box-related .cw-list li::before{content:"→";border:0;width:auto;height:auto;top:.35rem;color:var(--cw-primary);font-size:.9rem}

.cw-post-table{margin:0 0 2em;overflow-x:auto;border:1px solid var(--cw-line);border-radius:8px;font-size:.95rem;line-height:1.5}
.cw-post-table table{margin:0}
.cw-post-note{font-size:.9rem;color:var(--cw-ink-3)}
.cw-post-figure{margin:2.25em 0}
.cw-post-figure img{display:block;width:100%;height:auto;border-radius:8px}
.cw-post-figure figcaption{margin-top:.6rem;font-size:.875rem;color:var(--cw-ink-3);text-align:center}

/* End of article */
.cw-post-foot{margin:3rem 0 4.5rem;padding-top:2rem;border-top:1px solid var(--cw-line)}
.cw-post-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0}
#main.cw-post .cw-post-tags li{margin:0}
#main.cw-post .cw-post-tags a{display:inline-block;padding:.35rem .9rem;border-radius:999px;background:var(--cw-sunken);color:var(--cw-ink-2);font-size:.875rem;text-decoration:none;transition:background var(--cw-d),color var(--cw-d)}
#main.cw-post .cw-post-tags a:hover{background:var(--cw-primary);color:#fff}
.cw-post-share-end{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
#main.cw-post .cw-post-share-end p{margin:0;font-size:1rem;color:var(--cw-ink-2)}

/* Related */
.cw-post-related{background:var(--cw-paper);border-top:1px solid var(--cw-line);padding:clamp(3.5rem,2.5rem + 3vw,5.5rem) 0}
.cw-post-related-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.cw-page.cw-page.cw-post .cw-post-related-head h2{margin:0;font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
#main.cw-post .cw-post-all{font-weight:500;text-decoration:none}
.cw-post-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.cw-post .cw-faq+.cw-post-related{border-top:0}

@media (max-width:900px){
  .cw-post-related-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cw-post-byline .cw-share{margin-left:0;width:100%}
  .cw-post-art{margin-top:2rem}
  .cw-post-layout{margin-top:2.5rem}
}
@media (prefers-reduced-motion:reduce){
  #main.cw-post .cw-share-btn:hover{transform:none}
}