/* Small additions on top of W3.CSS (loaded after it). No inline styles are
   used anywhere because the CSP forbids them. */
.brand { font-weight: 700; letter-spacing: .02em; }
.page-main { min-height: 60vh; }
#nav-mobile.w3-show { display: block !important; }

a:focus-visible, button:focus-visible { outline: 3px solid #ff9800; outline-offset: 2px; }

.post-card .post-title { text-decoration: none; color: inherit; }
.post-card .post-title:hover { text-decoration: underline; }
.post-thumb { display: block; width: 100%; height: 100%; min-height: 10rem; max-height: 16rem; object-fit: cover; }
.post-hero { max-height: 24rem; width: 100%; object-fit: cover; }

/* Markdown output is plain HTML, so give it readable defaults. */
.post-content { overflow-wrap: break-word; }
.post-content img { max-width: 100%; height: auto; }
.post-content pre { overflow-x: auto; padding: 1rem; background: #f1f1f1; border-radius: 4px; }
.post-content code { background: #f1f1f1; padding: .1rem .3rem; border-radius: 3px; }
.post-content pre code { background: none; padding: 0; }
.post-content blockquote { margin-left: 0; padding: .2rem 1rem; border-left: 4px solid #2196f3; background: #fafafa; }
.post-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.post-content th, .post-content td { border: 1px solid #ddd; padding: .4rem .7rem; }

/* Dedicated "hello" layout: content centred in the viewport. */
.hello-body { min-height: 100vh; display: flex; flex-direction: column; }
.hello-main { flex: 1; display: flex; flex-direction: column; justify-content: center; }