/* components.css: logo, CTA sections, blog. Uses the color variables from styles.css,
   so a restyle (design A, B or C) only needs a new styles.css. */
.logo img{display:block;height:52px;width:auto}
.logo .brk{font-weight:400;color:var(--g2);font-size:.72rem;border-left:2px solid var(--y);padding-left:10px;white-space:normal;max-width:90px}
.foot-logo{display:block;height:56px;width:auto;margin-bottom:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cta-band{background:var(--soft);border-top:5px solid var(--y);border-radius:12px;padding:24px;margin:30px 0;scroll-margin-top:110px}
.cta-band h2{margin-top:0}
.blog-list{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));list-style:none;padding:0}
.blog-list a{text-decoration:none;color:inherit;display:block;height:100%}.blog-list h2{font-size:1.2rem}
.meta{color:var(--g2);font-size:.85rem}
.draft-flag{background:#2f2f2f;color:#fff;padding:.5em;text-align:center;font-size:.9rem}
.post{max-width:760px}.post img{max-width:100%;height:auto}
.tldr{background:#fffbea;border-left:6px solid var(--y);padding:1em 1.2em}
.ph{background:#eee;border:1px dashed #888;padding:.1em .3em;font-family:monospace;font-size:.85em;word-break:break-word}
.post table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}.post td,.post th{border:1px solid #ccc;padding:.4em;vertical-align:top}
.author{border-top:3px solid var(--y);margin-top:2em;padding-top:1em}
.crumbs{font-size:.85rem;color:var(--g2)}.crumbs a{color:var(--g)}
.related{margin-top:2em}
@media(max-width:860px){.logo img{height:42px}.logo .brk{display:none}}

/* ===== Direction D theme (Neighborhood First), applied site-wide. Oct 29, 2026 ===== */
:root{--y:#f5c518;--g:#3a3f45;--g2:#6b7178;--ink:#2b2e33;--soft:#f4f4f2}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#2b2e33;padding-bottom:64px}
h1,h2,h3{color:#2b2e33}h1{font-family:Georgia,serif}
header.site{background:#2b2e33;border-bottom:3px solid var(--y)}
header.site nav a{color:#fff;opacity:.92;font-weight:600}header.site nav a[aria-current]{border-bottom-color:var(--y);opacity:1}
header.site .logo{color:#fff}.logo img{height:46px}
.logo .brk{color:#fff;opacity:.85}
header.site .btn.call{background:transparent;color:var(--y);padding:8px 4px}
header.site .menu{background:var(--y);color:#2b2e33;font-weight:700}
.btn{border-radius:8px;padding:13px 20px}.btn.alt{background:#2b2e33;color:#fff}
.card{border:0;box-shadow:0 2px 14px rgba(0,0,0,.08)}.tile{border-top:4px solid var(--y)}
.eyebrow{letter-spacing:.12em;font-size:.75rem;color:var(--g2)}
.band{background:#2b2e33}
.hero{background:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.65)),url(pier.jpg) center 60%/cover;color:#fff}
.hero h1,.hero h2,.hero .lead,.hero .eyebrow{color:#fff}
footer.site{background:#2b2e33;color:#d6d8da}
.callbar{position:fixed;left:0;right:0;bottom:0;background:var(--y);z-index:30;box-shadow:0 -2px 12px rgba(0,0,0,.15)}
.callbar .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;font-weight:700}
.callbar .sp{margin-left:auto;display:flex;gap:8px}.callbar .btn{padding:9px 14px}
.callbar .bg{background:#2b2e33;color:#fff}.callbar .bod{background:transparent;border:2px solid #2b2e33;color:#2b2e33}
.todo{background:#fff3c4;color:#6b4b00;padding:0 4px;border-radius:3px;font-weight:700;font-size:.85em}
/* community guides */
.c-hero{background:#2b2e33;color:#fff;padding:48px 0}.c-hero h1,.c-hero p{color:#fff}.c-hero .meta{color:#d6d8da}
.c-hero.photo{background:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.7)),var(--img) center/cover}
.c-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:20px 0}
.c-body{max-width:860px}.c-body table{border-collapse:collapse;width:100%}.c-body td,.c-body th{border:1px solid #ddd;padding:.5em;text-align:left;vertical-align:top}
.comm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;list-style:none;padding:0}
.comm-list a{display:block;background:#2b2e33;color:#fff;border-radius:12px;padding:18px;text-decoration:none;font-weight:700}.comm-list span{display:block;font-weight:400;font-size:.85rem;opacity:.85}
@media(max-width:860px){header.site .btn.call{display:none}.logo img{height:38px}}
@media(max-width:560px){.callbar .txt{display:none}.callbar .sp{margin:0;width:100%}.callbar .sp a{flex:1;text-align:center;white-space:nowrap}.callbar .sp a.bod{flex:0 0 auto}}
.comm-list a.has-img{min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
/* Round 2: one standard border (2px solid #2b2e33) on every button, card and box */
.btn,.card,.cta-band,.comm-list a,form.lead{border:2px solid #2b2e33}
.btn.call{border-color:transparent}

/* Uniform button border sitewide (Brian, Oct 30) */
.btn,a.btn,button.btn,.dh .btn,.dh .by,.dh .bo,.dh .bod,.btn.alt,.btn.by,button[type=submit],input[type=submit]{border:2px solid #2b2e33 !important}
.btn.call,header.site a.call{border-color:transparent !important}