/*
Theme Name: nanopico blog
Theme URI: https://nanopico.jp/blog/
Template: twentytwentyfive
Version: 1.0.0
Description: nanopico brand child theme (dark x gold)
Text Domain: nanopico-blog
*/
body { background: #050505; color: #e5e7eb; font-feature-settings: "palt"; }
.wp-site-blocks { background: #050505; }
h1, h2, h3, h4, h5 { font-family: "Shippori Mincho", serif; color: #fff; font-weight: 500; }
a { color: #d4af37; }
.np-header { position: sticky; top: 0; z-index: 50; background: rgba(5,5,5,.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.np-inner { max-width: 1280px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-logo { font-family: "Shippori Mincho", serif; font-size: 22px; font-weight: 700; letter-spacing: .2em; color: #fff; text-decoration: none; }
.np-nav { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.np-nav a { font-size: 12px; letter-spacing: .2em; color: #d1d5db; text-decoration: none; transition: color .3s; }
.np-nav a:hover { color: #fff; }
.np-nav a.np-current { color: #d4af37; }
.np-nav a.np-cta { border: 1px solid #d4af37; color: #d4af37; padding: 10px 22px; }
.np-nav a.np-cta:hover { background: #d4af37; color: #000; }
@media (max-width: 767px) { .np-nav { gap: 14px; } .np-nav a { font-size: 11px; letter-spacing: .12em; } .np-nav a.np-cta { padding: 8px 12px; } }
.np-footer { background: #000; border-top: 1px solid rgba(255,255,255,.05); padding: 56px 24px; margin-top: 64px; }
.np-footer .np-inner { flex-direction: column; text-align: center; gap: 24px; }
@media (min-width: 768px) { .np-footer .np-inner { flex-direction: row; text-align: left; } }
.np-tagline { font-size: 10px; letter-spacing: .3em; color: #4b5563; text-transform: uppercase; margin: 8px 0 0; }
.np-links { display: flex; gap: 28px; }
.np-links a { font-size: 12px; letter-spacing: .2em; color: #6b7280; text-decoration: none; }
.np-links a:hover { color: #d4af37; }
.np-copy { font-size: 10px; letter-spacing: .2em; color: #374151; }
.np-breadcrumb { font-size: 12px; letter-spacing: .15em; color: #6b7280; margin: 0 0 16px; }
.np-breadcrumb a { color: #9ca3af; text-decoration: none; }
.np-breadcrumb a:hover { color: #d4af37; }
.np-post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; }
.np-post-meta .wp-block-post-terms a { text-decoration: none; letter-spacing: .06em; }
.wp-block-post-title a { color: #fff; text-decoration: none; }
.wp-block-post-title a:hover { color: #d4af37; }
.wp-block-post-content, .wp-block-post-excerpt { color: #d1d5db; font-size: 1.05rem; line-height: 2; }
/* Undo the parent theme's text-wrap:pretty on body paragraphs (twentytwentyfive/style.css:58-60,
   "blockquote, caption, figcaption, h1, h2, h3, h4, h5, h6, p { text-wrap: pretty }"). ul/li and the
   inline-styled boxes in post content aren't in that selector, so they were never affected; on iOS
   Safari the "pretty" balancing can shrink every line of some paragraphs by ~15-20% instead of only
   the last one, which is what made plain <p> look narrower than the lists/boxes next to it. */
.wp-block-post-content p { text-wrap: wrap; }
.wp-block-post-content h2 { margin-top: 2.5em; padding-bottom: .4em; border-bottom: 1px solid rgba(212,175,55,.35); }
.wp-block-post-content h3 { margin-top: 2em; }
.wp-block-post-content blockquote { border-left: 2px solid #d4af37; color: #9ca3af; }
.wp-block-post-date, .wp-block-post-author-name, .wp-block-post-terms { color: #9ca3af; }
.wp-block-post-terms a { color: #d4af37; }
.wp-block-separator { border-color: rgba(255,255,255,.1); }
.wp-block-query-pagination, .wp-block-query-pagination a { color: #d1d5db; }
.wp-block-search__input { background: #0f0f0f; color: #fff; border: 1px solid rgba(255,255,255,.15); }
.wp-block-search__button { background: #d4af37; color: #000; border: 0; }
.wp-block-post-featured-image img { border: 1px solid rgba(255,255,255,.06); }
.wp-block-comments, .wp-block-post-comments-form { color: #d1d5db; }

/* readability fixes */
.wp-block-post-date, .wp-block-post-date a, .wp-block-post-date time { color: #9ca3af !important; }
.wp-block-post-author-name a, .wp-block-post-terms a { color: #d4af37; }
.wp-block-comments, .wp-block-post-comments-form, .wp-block-comments-title { display: none; }

/* type scale aligned with the main site */
body { font-size: 16px; }
.wp-block-post-content, .wp-block-post-excerpt { font-size: 1rem; line-height: 1.9; }
.wp-block-query-no-results p, .wp-block-query-no-results { font-size: 1rem !important; color: #9ca3af; }
h1, .wp-block-query-title, h1.wp-block-post-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important; line-height: 1.4; }
h2.wp-block-post-title { font-size: 1.5rem !important; }
.wp-block-post-content h2 { font-size: 1.5rem !important; }
.wp-block-post-content h3 { font-size: 1.25rem !important; }
.wp-block-post-content h4 { font-size: 1.1rem !important; }
.wp-block-post-content blockquote { font-size: 1rem; }
.wp-block-comments-title, .wp-block-post-navigation-link, .wp-block-query-pagination { font-size: 0.9rem; }

/* body copy = main site scale */
.wp-site-blocks, .wp-site-blocks p, .wp-site-blocks li, .wp-block-post-content, .wp-block-post-excerpt, .wp-block-query-no-results p { font-size: 16px !important; line-height: 1.9; }
@media (min-width: 768px) { .wp-site-blocks, .wp-site-blocks p, .wp-site-blocks li, .wp-block-post-content, .wp-block-post-excerpt, .wp-block-query-no-results p { font-size: 18px !important; } }
.np-nav a, .np-links a, .np-copy, .np-tagline, .np-breadcrumb, .wp-block-post-date, .wp-block-post-terms, .wp-block-post-author-name { font-size: 12px !important; }
.np-breadcrumb { font-size: 13px !important; }
.wp-site-blocks p.np-tagline { font-size: 10px !important; line-height: 1.6; }
h1, .wp-block-query-title, h1.wp-block-post-title { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; }
h2.wp-block-post-title { font-size: 1.6rem !important; }
.wp-block-post-content h2 { font-size: 1.65rem !important; }
.wp-block-post-content h3 { font-size: 1.35rem !important; }

/* article list cards (home/index/archive/search) */
.np-blog-heading { margin: 0 0 40px; }

/* side padding override (16px mobile / 24px desktop) for list pages AND single post pages. */
.np-page-pad { --wp--style--root--padding-left: 16px; --wp--style--root--padding-right: 16px; }
@media (min-width: 768px) {
  .np-page-pad { --wp--style--root--padding-left: 24px; --wp--style--root--padding-right: 24px; }
}

/* grid: !important is required to win over WP's auto-generated core-block-supports-inline-css
   rule (single class, e.g. .wp-container-core-post-template-is-layout-xxxxx{grid-template-columns:...})
   and over core's own "@media (max-width:600px) .wp-block-post-template-is-layout-grid[class*=columns-]
   {grid-template-columns:1fr}" mobile fallback - confirmed by inspecting the live rendered HTML. */
.np-blog-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .np-blog-grid .wp-block-post-template { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}

/* card shell: rounded top corners only (image side), square bottom */
.np-card { background: #0f0f0f; border: 1px solid rgba(255,255,255,.08); border-radius: 6px 6px 0 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.np-card .np-card-thumb { margin: 0; }
.np-card .np-card-thumb img { display: block; }

.np-card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
@media (min-width: 768px) {
  .np-card-body { padding: 16px; gap: 8px; }
}
/* the 6-8px gap above is the only spacing between elements: kill WP's own block margins inside the card */
.np-card-body > * { margin-top: 0 !important; margin-bottom: 0 !important; }

.np-card .np-card-cat a { font-size: 11px !important; color: #d4af37; letter-spacing: .06em; font-weight: 400; text-decoration: none; }
.np-card .np-card-title { line-height: 1.5; }
.np-card .np-card-title a {
  font-size: 15px !important; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.np-card .wp-block-post-excerpt__excerpt {
  font-size: 13px !important; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* the block's built-in "more" link/paragraph is replaced by the wp:read-more block below */
.np-card .wp-block-post-excerpt__more-text { display: none !important; }

.np-card-foot { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 0; margin-top: auto !important; }
.np-card .np-card-date,
.np-card .np-card-date time { font-size: 11px !important; color: #9ca3af; white-space: nowrap; }
.np-card .np-card-more { font-size: 12px; color: #d4af37; text-decoration: none; white-space: nowrap; }
.np-card .np-card-more:hover { color: #fff; }

@media (min-width: 768px) {
  .np-card .np-card-cat a { font-size: 12px !important; }
  .np-card .np-card-title a { font-size: 18px !important; }
  .np-card .wp-block-post-excerpt__excerpt { font-size: 14px !important; }
  .np-card .np-card-date,
  .np-card .np-card-date time { font-size: 12px !important; }
  .np-card .np-card-more { font-size: 13px; }
}