/*
 * Chit Chat with Harry – WordPress additions on top of site.css (the prototype's
 * stylesheet, generated). Same tokens, same hard-shadow / thick-border language.
 */

/* ---------- WordPress basics ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100000;
background:var(--ink);color:var(--cream);padding:12px 20px}

/* Sticky nav sits under the admin bar when logged in. */
.admin-bar .pnav{top:32px}
@media(max-width:782px){.admin-bar .pnav{top:46px}}
@media(max-width:600px){.admin-bar .pnav{top:0}}

/* Honeypot – off-screen, never shown. */
.cch-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

.cch-err{margin-top:16px;padding:12px 16px;border:3px solid var(--ink);border-radius:12px;
background:var(--coral);color:var(--ink);font-weight:600;font-size:15px}
.ok:focus{outline:none}

/* ---------- mobile menu (the prototype hides the links under 1100px) ---------- */
.navtog{display:none;width:44px;height:40px;border:3px solid var(--ink);border-radius:12px;
background:var(--paper);cursor:pointer;padding:0;flex-direction:column;align-items:center;
justify-content:center;gap:4px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.navtog i{display:block;width:18px;height:3px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.navtog:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.nav-open .navtog i:nth-child(2){transform:translateY(7px) rotate(45deg)}
.nav-open .navtog i:nth-child(3){opacity:0}
.nav-open .navtog i:nth-child(4){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1100px){
  .navtog{display:inline-flex}
  .nav-open .navlinks{display:flex;flex-direction:column;gap:2px;position:fixed;left:0;right:0;
    top:var(--cch-navtop,61px);bottom:0;overflow:auto;background:var(--cream);
    border-top:3px solid var(--ink);padding:14px var(--pad) 40px;z-index:250}
  .admin-bar.nav-open .navlinks{--cch-navtop:107px}
  .nav-open .navlinks>li>a{font-family:var(--display);font-size:22px;font-weight:700;
    letter-spacing:-.03em;padding:12px 4px;border-radius:0;border-bottom:3px solid var(--ink)}
  .nav-open .navlinks>li>a:hover{background:transparent;color:inherit}
  .nav-open .navlinks .dd>a{border-bottom:0;padding-bottom:4px;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;opacity:.6;pointer-events:none}
  .nav-open .navlinks .ddm,.nav-open .navlinks .ddm.list{display:grid!important;position:static;
    grid-template-columns:1fr 1fr;gap:6px;border:0;box-shadow:none;background:transparent;
    padding:4px 0 14px;min-width:0;max-height:none;border-bottom:3px solid var(--ink);border-radius:0}
  .nav-open .navlinks .ddm a{background:var(--paper);border:2px solid var(--ink);border-radius:12px;
    padding:10px 12px;font-size:15px}
  .nav-open .navlinks .ddm::before{display:none}
  .nav-open{overflow:hidden}
}
@media(max-width:600px){.admin-bar.nav-open .navlinks{--cch-navtop:61px}}
@media(max-width:460px){
  .nav-open .navlinks .ddm,.nav-open .navlinks .ddm.list{grid-template-columns:1fr}
  .navin{gap:10px}
  .pnav .btn{padding:7px 12px;font-size:12.5px}
  .brand b{font-size:13px}
}
@media(max-width:380px){.brand b{display:none}}

/* ---------- blog listing ---------- */
a.fbtn{display:inline-block;text-decoration:none;line-height:1.5}
.bcard{display:flex;flex-direction:column;text-decoration:none}
.bcard > .n{align-self:flex-start}
.bcard .bthumb{display:block;margin:calc(-1 * clamp(24px,2.8vw,34px)) calc(-1 * clamp(24px,2.8vw,34px)) 20px;
border-bottom:3px solid var(--ink);aspect-ratio:16/10;overflow:hidden;border-radius:inherit;
border-bottom-left-radius:0;border-bottom-right-radius:0}
.bcard .bthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.bcard:hover .bthumb img{transform:scale(1.04)}
.bcard p:last-child{margin-top:auto!important;padding-top:15px}
.none{text-align:center;padding:44px 0}

.cch-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:44px}
.cch-pager a,.cch-pager span{font-family:var(--display);font-size:14px;font-weight:700;padding:8px 17px;
border:3px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;
transition:all .16s}
.cch-pager a:hover{background:var(--yellow)}
.cch-pager .current{background:var(--ink);color:var(--cream)}
.cch-pager .dots{border-color:transparent;background:transparent}

/* ---------- article ---------- */
a.kicker{color:var(--cream)}
.cch-feature{margin:0 0 34px;border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:var(--hard)}
.cch-feature img{display:block;width:100%;height:auto}

/* Elements the prototype's articles didn't use but WordPress posts will. */
.cch-entry > *:first-child{margin-top:0}
.post ul,.post ol{margin:0 0 22px;padding-left:1.4em}
.post li{font-size:17.5px;line-height:1.7;margin-bottom:8px}
.post li::marker{font-weight:700}
.post h3{font-size:clamp(19px,2.2vw,24px);margin:32px 0 12px}
.post h4{font-family:var(--display);font-size:18px;letter-spacing:-.02em;margin:26px 0 10px}
.post a:not(.btn):not(.deep):not(.card){color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.post a:not(.btn):not(.deep):not(.card):hover{background:var(--yellow)}
.post img{max-width:100%;height:auto;border-radius:14px}
.post figure{margin:30px 0}
.post figure img{border:3px solid var(--ink);border-radius:16px;display:block}
.post figcaption,.post .wp-element-caption{font-size:13.5px;color:var(--grey);margin-top:10px;text-align:center}
.post hr,.post .wp-block-separator{border:0;border-top:3px solid var(--ink);margin:40px 0}
.post code{font-size:.9em;background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:1px 6px}
.post pre{background:var(--ink);color:var(--cream);border-radius:16px;padding:20px 22px;overflow:auto;margin:0 0 24px;font-size:14.5px;line-height:1.6}
.post pre code{background:none;border:0;padding:0;color:inherit}
.post table{width:100%;border-collapse:separate;border-spacing:0;border:3px solid var(--ink);border-radius:16px;overflow:hidden;margin:0 0 26px;font-size:15.5px;background:var(--paper)}
.post th,.post td{padding:11px 14px;text-align:left;border-bottom:2px solid var(--ink)}
.post tr:last-child td{border-bottom:0}
.post th{background:var(--yellow);font-family:var(--display)}
.post .wp-block-quote,.post blockquote{background:var(--mint);border:3px solid var(--ink);border-radius:18px;
padding:22px 26px;margin:30px 0;box-shadow:var(--hard)}
.post blockquote p{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);font-weight:700;letter-spacing:-.035em;line-height:1.32;margin:0}
.post blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;font-weight:600}
.post .wp-block-button__link{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;
border:3px solid var(--ink);border-radius:999px;padding:12px 22px;background:var(--yellow);color:var(--ink);
text-decoration:none;box-shadow:var(--hard)}
.post .wp-block-embed,.post iframe{max-width:100%}
.post .wp-block-embed__wrapper iframe{border:3px solid var(--ink);border-radius:16px}
.post details{border:3px solid var(--ink);border-radius:14px;background:var(--paper);margin-bottom:12px;overflow:hidden}
.post summary{cursor:pointer;font-family:var(--display);font-weight:700;padding:14px 18px;list-style:none}
.post summary::-webkit-details-marker{display:none}
.post details[open] summary{background:var(--yellow);border-bottom:3px solid var(--ink)}
.post details > :not(summary){padding:14px 18px;margin:0}
.alignleft{float:left;margin:6px 24px 16px 0}
.alignright{float:right;margin:6px 0 16px 24px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{margin-left:calc(-1 * min(8vw,90px));margin-right:calc(-1 * min(8vw,90px))}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
@media(max-width:900px){.alignwide{margin-left:0;margin-right:0}}
@media(max-width:600px){.alignleft,.alignright{float:none;margin:0 0 18px}}

/* ---------- comments ---------- */
.cch-comment-list{list-style:none;padding:0;margin:0 0 20px}
.cch-comment-list .children{list-style:none;padding-left:clamp(16px,4vw,44px)}
.cch-comment-list .comment-body{background:var(--paper);border:3px solid var(--ink);border-radius:18px;
padding:18px 20px;margin-bottom:14px;box-shadow:4px 4px 0 var(--ink)}
.cch-comment-list .comment-author{display:flex;align-items:center;gap:10px;font-weight:700}
.cch-comment-list .comment-author img{border-radius:50%;border:2px solid var(--ink)}
.cch-comment-list .says{display:none}
.cch-comment-list .comment-metadata{font-size:12.5px;color:var(--grey);margin:4px 0 10px}
.cch-comment-list .comment-metadata a{color:inherit;text-decoration:none}
.cch-comment-list .reply a{font-family:var(--display);font-weight:700;font-size:13px}
.cch-comment-form{padding:clamp(22px,3.4vw,36px)}
.cch-comment-form p{margin-bottom:16px}
.cch-comment-form label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.cch-comment-form input[type=text],.cch-comment-form input[type=email],.cch-comment-form input[type=url],.cch-comment-form textarea{
width:100%;font:inherit;padding:12px 16px;border:3px solid var(--ink);border-radius:12px;background:var(--paper)}
.cch-comment-form .comment-form-cookies-consent{display:flex;gap:8px;align-items:flex-start}
.cch-comment-form .comment-form-cookies-consent label{display:inline;font-weight:400}

@media(prefers-reduced-motion:reduce){
  .navtog,.navtog i,.bcard .bthumb img{transition:none}
}