/* Phoenix theme additions: styles for WordPress output the prototype did not need. Uses the prototype's tokens only. */

/* Core accessibility helper (used by WordPress navigation and comment output). */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}

/* Category pills are links in WordPress (the prototype used filter buttons). */
.topicbar a{display:inline-block;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 14px/38px var(--font);color:var(--ink);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.topicbar li{flex:none}
.topicbar a{white-space:nowrap}
.topicbar a:hover{border-color:var(--blue);color:var(--blue-deep)}
.topicbar a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:620px){.topicbar a{flex:none}}

/* "Previous Page" in the pager. */
.arrow-link--prev::after{content:none}
.arrow-link--prev::before{content:"←";transition:transform .2s}
.arrow-link--prev:hover::before{transform:translateX(-4px)}

/* Posts without a featured image: brand-blue panel with the white wordmark. */
.phoenix-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--blue)}
.post__img .phoenix-fallback img{width:56%;max-width:260px;height:auto;object-fit:contain}
.feat__img .phoenix-fallback{position:absolute;inset:0}
.feat__img .phoenix-fallback img{position:static;width:44%;max-width:360px;height:auto;object-fit:contain}
.post:hover .post__img .phoenix-fallback img,.feat:hover .feat__img .phoenix-fallback img{transform:none}

/* Newsletter box without an image. */
.news--no-image{grid-template-columns:minmax(0,1fr)}

/* WordPress adds the class "search" to <body> on search pages; the prototype's .search is the search-form component (display:flex). */
body.search{display:block;gap:0}

/* Empty results. */
.bl-empty .search{max-width:480px;margin:20px auto 0}

/* Comments. */
.comments{margin-top:clamp(40px,5vw,56px);padding-top:32px;border-top:1px solid var(--line)}
.comments__title{margin-bottom:24px;font-size:clamp(26px,2.4vw,34px)}
.comments__list,.comments__list .children{margin:0;padding:0;list-style:none}
.comments__list .children{margin-left:clamp(14px,3vw,36px);padding-left:clamp(14px,3vw,24px);border-left:2px solid var(--line)}
.comment__body{padding:20px 0;border-top:1px solid var(--line)}
.comment__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:8px;font-size:15px;color:var(--muted)}
.comment__author{font-size:17px;color:var(--ink)}
.comment__text{font-size:17px;line-height:1.6}
.comment__text p{margin:0 0 .8em}
.comment__reply{margin:0;font-size:14px;font-weight:700}
.comment__moderation{margin:0 0 8px;padding:8px 12px;background:var(--blue-tint);border-radius:var(--radius);font-size:14px;color:var(--navy)}
.comments__closed{margin-top:32px;font-size:15px;color:var(--muted)}
.reply .comment-reply-title small{margin-left:12px;font-size:15px;font-weight:600}
.reply .must-log-in{margin:0}

/* Rich text from the editor and plugins: keep old content inside the column. */
.prose{overflow-wrap:break-word}
.prose::after{content:"";display:table;clear:both}
.prose img,.prose video,.prose iframe,.prose embed,.prose object{max-width:100%}
.prose img{height:auto}
.prose iframe{border:0}
.prose figure{margin:1.6em 0}
.prose figcaption,.prose .wp-caption-text{margin-top:.6em;font-size:15px;color:var(--muted)}
.prose .wp-caption{max-width:100%}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.prose td,.prose th{padding:8px 12px;border:1px solid var(--line);text-align:left}
.prose pre{overflow-x:auto;padding:16px;background:var(--paper);border-radius:var(--radius);font-size:16px}
.prose hr{margin:2em 0;border:0;border-top:1px solid var(--line)}
.prose h4{margin-top:1.4em}
.prose .alignleft{float:left;margin:.3em 1.4em 1em 0}
.prose .alignright{float:right;margin:.3em 0 1em 1.4em}
.prose .aligncenter{display:block;margin-inline:auto}
.prose a{overflow-wrap:anywhere}
@media (max-width:620px){.prose .alignleft,.prose .alignright{float:none;margin:1em auto}}

/* Heading levels follow the document outline (h3 under an h2) while keeping the prototype's h4 look. */
.h4{font-size:21px;font-stretch:90%;line-height:1.2;letter-spacing:0}
.pains .h4{color:#fff;margin-bottom:6px}
.steps .h4{color:#fff;margin-bottom:8px}
.steps--light .h4{color:var(--ink)}

/* About: "What sets us apart" body copy in two columns on wide screens. */
.sets-apart{max-width:1100px;column-gap:clamp(32px,5vw,80px);font-size:18px;color:var(--muted)}
.sets-apart p{margin:0 0 1em;break-inside:avoid}
.sets-apart strong{color:var(--ink)}
@media (min-width:900px){.sets-apart{column-count:2}}

/* Home hero with a single wide photo (both coaches together). */
.hero__photos--single{grid-template-columns:minmax(0,1fr)}
.hero__photos--single figure:last-child{margin-top:0}
.hero__photos--single .photo img{aspect-ratio:2/1;object-position:50% 28%}
@media (max-width:760px){.hero__photos--single .photo img{aspect-ratio:4/3}}