/*
Theme Name: My Oyaji
Theme URI: https://myoyaji.com
Author: Edwon
Description: Blog theme for My Oyaji — マイオヤジ. Matches the landing page.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: myoyaji
*/

/*
 * Tokens, reset, nav and footer come from shared.css, which is copied here
 * from src/shared.css by `npm run sync:css`. This file holds blog-only rules.
 */

@font-face {
  font-family: OyajiDisplay;
  src: url(./oyaji-display.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.nav-links a.current { opacity: 1; color: var(--purple); }

/* ── Layout: sticky footer, so short posts still pin it to the bottom.
      Scoped to the blog — the landing page's #hero relies on height:100dvh
      and would shrink if body became a flex container there. ── */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }

footer.site-footer { flex-shrink: 0; }

.site-main { width: 100%; max-width: 780px; margin: 0 auto; padding: calc(56px + 4rem) 2rem 5rem; }

.page-title {
  font-family: var(--font-display);
  color: var(--purple);
  letter-spacing: .05em;
  margin-bottom: 2.5rem;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.1;
}

/* ── Post list ── */
.post-list { display: flex; flex-direction: column; gap: 3rem; }

.post-card-title {
  font-family: var(--font-display);
  color: var(--purple);
  letter-spacing: .03em;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: .35rem;
}

.post-card-title a:hover { text-decoration: underline; }

.post-meta {
  color: var(--gray);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  margin-bottom: .9rem;
}

.post-thumb { border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-excerpt { color: var(--gray); font-size: .95rem; }

.read-more {
  color: var(--purple);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .05em;
  display: inline-block;
  margin-top: .75rem;
}

.read-more:hover { text-decoration: underline; }

/* ── Single post ── */
.entry-title {
  font-family: var(--font-display);
  color: var(--purple);
  letter-spacing: .03em;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: .4rem;
}

.entry-content { margin-top: 2rem; }

.entry-content > * + * { margin-top: 1.1rem; }

.entry-content p { color: var(--gray); font-size: 1rem; }

.entry-content h2,
.entry-content h3 {
  font-family: var(--font-display);
  color: var(--purple);
  letter-spacing: .03em;
  margin-top: 2.25rem;
}

.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.2rem; }

.entry-content a { color: var(--purple); font-weight: 600; text-decoration: underline; }

.entry-content img,
.entry-content figure img { border-radius: 12px; }

.entry-content blockquote {
  border-left: 4px solid var(--purple);
  padding-left: 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.6;
}

.entry-content ul,
.entry-content ol { padding-left: 1.5rem; color: var(--gray); }

.entry-content code {
  background: #0000000d;
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .9em;
}

.entry-content pre {
  background: #0000000d;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  font-weight: 700;
  font-size: .85rem;
}

.pagination .page-numbers {
  color: var(--purple);
  border: 2px solid var(--purple);
  border-radius: 999px;
  padding: 4px 13px;
  transition: all .2s;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current { background: var(--purple); color: #fff; }

@media (max-width: 768px) {
  .site-main { padding: calc(56px + 2.5rem) 1.25rem 3rem; }
  .post-list { gap: 2.25rem; }
}