/* Kantan Nenkin - single post layout + sidebar. Tokens mirror kn-header-footer.css. */

body.single-post{
  --color-ink:#15181b;
  --color-ink-2:#4c5459;
  --color-ink-3:#5f676c;
  --color-ink-4:#7d868c;
  --color-paper:#ffffff;
  --color-paper-2:#f5f3f0;
  --color-paper-3:#e9e5df;
  --color-accent:#d93d27;
  --color-line:#ded9d3;
  --color-line-2:#c6bfb6;
  --color-dark:#101d35;
  --font-sans:"IBM Plex Sans","Noto Sans JP","Helvetica Neue",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
  --ls-eyebrow:0.14em;
  --radius:2px;

  background:var(--color-paper-2);
  font-family:var(--font-sans);
  color:var(--color-ink);
}

/* ---------- shell ---------- */
/* Astra's narrow container caps the content at ~710px; widen it and lay the
   two columns out explicitly so the sidebar cannot be squeezed. */
body.single-post .site-content > .ast-container{
  display:flex;
  align-items:flex-start;
  gap:40px;
  width:100%;
  /* Astra prints its narrow-container cap (750px) in inline CSS after this
     file, at equal specificity, so this override has to be forced. */
  max-width:1200px !important;
  margin:0 auto;
  padding:0 40px;
}
body.single-post #primary{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  margin:0;
  padding:0;
}
body.single-post #secondary{
  flex:0 0 320px;
  width:320px;
  margin:0;
  padding:0;
}
body.single-post .ast-separate-container .ast-article-single{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  padding:48px;
  margin:0;
}

/* ---------- article type ---------- */
body.single-post .entry-title{
  font-family:var(--font-sans);
  font-size:38px;
  font-weight:700;
  line-height:1.16;
  color:var(--color-dark);
  margin:0 0 16px;
}
body.single-post .entry-meta,
body.single-post .entry-meta *{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--color-ink-4);
}
body.single-post .entry-meta a{color:var(--color-ink-3);}
body.single-post .entry-meta a:hover{color:var(--color-accent);}

body.single-post .entry-content{
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.7;
  color:var(--color-ink-2);
}
body.single-post .entry-content p{margin:0 0 22px;}
body.single-post .entry-content h2{
  font-family:var(--font-sans);
  font-size:26px;
  font-weight:700;
  line-height:1.24;
  color:var(--color-dark);
  margin:44px 0 16px;
}
body.single-post .entry-content h3{
  font-size:20px;
  font-weight:600;
  color:var(--color-dark);
  margin:32px 0 12px;
}
body.single-post .entry-content ul,
body.single-post .entry-content ol{margin:0 0 22px 20px;}
body.single-post .entry-content li{margin-bottom:10px;}
body.single-post .entry-content a{
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
body.single-post .entry-content strong{color:var(--color-ink);font-weight:600;}

/* ---------- featured image: title > image > content ---------- */
body.single-post .kn-single-featured{
  margin:0 0 32px;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  overflow:hidden;
  line-height:0;
}
body.single-post .kn-single-featured img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
/* Astra's own banner is switched off in the customizer; hide it if it returns */
body.single-post .ast-single-post-featured-section{display:none;}

/* ---------- sidebar ---------- */
body.single-post #secondary{
  font-family:var(--font-sans);
}
body.single-post #secondary .widget{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:24px;
}
body.single-post #secondary .widget:last-child{margin-bottom:0;}

body.single-post .kn-widget-title{
  position:relative;
  margin:0 0 20px;
  padding-bottom:12px;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--color-dark);
  border-bottom:1px solid var(--color-line);
}
body.single-post .kn-widget-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:40px;
  height:2px;
  background:var(--color-accent);
}

/* ---------- recent posts ---------- */
body.single-post .kn-recent-posts{
  list-style:none;
  margin:0;
  padding:0;
}
body.single-post .kn-recent-posts li{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:14px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid var(--color-line);
}
body.single-post .kn-recent-posts li:first-child{padding-top:0;}
body.single-post .kn-recent-posts li:last-child{padding-bottom:0;border-bottom:none;}

body.single-post .kn-recent-posts .wp-block-latest-posts__featured-image{
  margin:0;
  grid-column:1;
}
body.single-post .kn-recent-posts .wp-block-latest-posts__featured-image a{display:block;}
body.single-post .kn-recent-posts .wp-block-latest-posts__featured-image img{
  width:60px;
  height:60px;
  object-fit:cover;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  display:block;
}
body.single-post .kn-recent-posts .wp-block-latest-posts__post-title{
  grid-column:2;
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--color-dark);
  text-decoration:none;
  transition:color .2s ease;
}
body.single-post .kn-recent-posts .wp-block-latest-posts__post-title:hover{color:var(--color-accent);}

/* posts with no featured image keep the title in the same column */
body.single-post .kn-recent-posts li:not(:has(.wp-block-latest-posts__featured-image)){
  grid-template-columns:1fr;
}

/* ---------- categories ---------- */
body.single-post .kn-categories{
  list-style:none;
  margin:0;
  padding:0;
}
body.single-post .kn-categories li{
  padding:12px 0;
  border-bottom:1px solid var(--color-line);
}
body.single-post .kn-categories li:first-child{padding-top:0;}
body.single-post .kn-categories li:last-child{padding-bottom:0;border-bottom:none;}
body.single-post .kn-categories a{
  font-size:15px;
  font-weight:500;
  color:var(--color-ink-2);
  text-decoration:none;
  transition:color .2s ease;
}
body.single-post .kn-categories a:hover{color:var(--color-accent);}

/* ---------- responsive ---------- */
@media (max-width:921px){
  body.single-post .ast-container{padding:0 20px;}
  body.single-post #primary{padding-right:0;}
  body.single-post .ast-separate-container .ast-article-single{padding:28px 20px;}
  body.single-post .entry-title{font-size:28px;}
  body.single-post .entry-content h2{font-size:22px;}
  body.single-post #secondary{margin-top:32px;}
}