/* Blog-only additions. Everything else comes from /css/site.css. */
.blog-head { padding: calc(var(--header-h) + 96px) 0 64px; background: var(--bone); }
.blog-head h1 { font-size: 60px; }
.blog-head .eyebrow { color: var(--gold-hue-3); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.post-card { text-decoration: none; color: inherit; display: block; }
.post-card .thumb { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--bone); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card h2 { font-size: 27px; margin: 22px 0 12px; }
.post-card .meta { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hue-3); }
.post-card p { font-size: 16px; margin-top: 12px; }

.post-body { max-width: 720px; margin: 0 auto; }
/* IDX pages run full width: the widget brings its own map/list split and needs the
   room. Also trims the head padding, which left a dead band above the results. */
.blog-head-idx { padding: calc(var(--header-h) + 56px) 0 28px; }
.blog-head-idx h1 { font-size: 46px; }
.block-idx { padding-top: 40px; }
/* Listing detail: the widget repeats the address right below, so the page title is a
   quiet label, not a headline. Smaller, normal case, less air above the widget. */
.blog-head-detail { padding: calc(var(--header-h) + 44px) 0 26px; }
/* Pin the solid header on every page this theme renders: dark wordmark, dark nav,
   hairline underneath. Every template opens on the pale .blog-head band, never a dark
   hero, so the transparent state was white on bone. Scoped to IDX pages only until
   2026-09-24, which left the blog index, posts and 404 with an invisible logo. */
body.wp-theme-kohala .site-header { background: var(--menu-bg); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .08); }
body.wp-theme-kohala .site-header .logo .logo-light { display: none; }
body.wp-theme-kohala .site-header .logo .logo-dark { display: block; }
body.wp-theme-kohala .site-header .header-nav a { color: var(--menu-ink); }
body.wp-theme-kohala .site-header .menu-toggle span { background: var(--menu-ink); }
/* with a solid white header above it the bone band reads as a second stripe, so
   drop it and let the title sit on the page */
body.idx-page .blog-head-idx { background: transparent; }
/* head and widget share a left edge: same container width */
.blog-head-idx .container { max-width: 1440px; }
.blog-head-detail h1 { font-size: 30px; letter-spacing: 0; font-weight: 500; }
.block-idx .container { max-width: 1440px; }
.block-idx .ihf-container { position: relative; z-index: 0; isolation: isolate; }
.post-body h2 { font-size: 38px; margin: 48px 0 18px; }
.post-body h3 { font-size: 28px; margin: 38px 0 14px; }
.post-body img { border-radius: var(--radius); margin: 34px 0; }
.post-body blockquote {
  margin: 38px 0; padding: 8px 0 8px 30px;
  border-left: 2px solid var(--gold);
  font-family: var(--display-font); font-size: 27px; line-height: 1.4;
}
.post-body ul, .post-body ol { padding-left: 24px; }
.post-body li { margin-bottom: 10px; }
.post-hero { aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; margin-bottom: 52px; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

.pager { display: flex; gap: 16px; justify-content: center; margin-top: 72px; }
.pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid rgba(var(--ink-rgb), .15); text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pager .page-numbers:hover, .pager .page-numbers.current {
  background: var(--gold); border-color: var(--gold); color: var(--btn-ink);
}

.empty-state { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 0 20px; }

@media (max-width: 991px) {
  .post-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-head h1 { font-size: 38px; }
  .post-body blockquote { font-size: 22px; }
}