/*
Theme Name: Just Joseph Editorial
Template: twentytwentyfive
Description: Editorial child theme: warm paper, serif long-form, one accent colour.
Version: 1.7
*/

/* ---------- tokens ---------- */
:root {
  --na-paper: #fbfaf7;
  --na-surface: #ffffff;
  --na-ink: #14140f;
  --na-muted: #5c5c56;
  --na-rule: #e3dfd6;
  --na-accent: #1a2bff;
  --na-accent-soft: #eef0ff;
  --na-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --na-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --na-measure: 68ch;
}

body {
  background: var(--na-paper);
  color: var(--na-ink);
  font-family: var(--na-serif);
  font-size: clamp(1.05rem, 0.6vw + 0.92rem, 1.19rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--na-accent-soft); }

a { color: var(--na-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--na-ink); }

/* ---------- header ---------- */
.wp-block-template-part > header,
header.wp-block-template-part {
  border-bottom: 1px solid var(--na-rule);
  background: var(--na-paper);
}

.wp-block-site-title a,
.wp-block-site-title {
  font-family: var(--na-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--na-sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--na-muted);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--na-accent);
}

/* masthead logo: the space lockup, small */
.na-header-logo { display: block; }
.na-header-logo img {
  display: block; width: 240px; height: auto; border-radius: 3px;
}

/* masthead strapline under the site title */
.wp-block-site-tagline.na-tagline,
.wp-block-site-tagline {
  font-family: var(--na-sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--na-muted);
  margin: .1rem 0 0;
  line-height: 1.4;
}

/* ---------- blog index ---------- */
.na-latest {
  font-family: var(--na-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--na-accent);
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--na-ink);
}

.na-index .wp-block-post {
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--na-rule);
}

/* decorative section band (calm nature imagery) */
.na-band { margin: 0 0 2.2rem; }
.na-band img {
  display: block; width: 100%; height: clamp(150px, 24vw, 250px);
  object-fit: cover; border-radius: 2px; background: #dde3d8;
}

/* section chips on the News page */
.na-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.4rem; }
.na-chips a {
  font-family: var(--na-sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  color: var(--na-muted);
  background: var(--na-surface);
  border: 1px solid var(--na-rule);
  border-radius: 999px;
  padding: .42em .9em;
}
.na-chips a:hover { color: var(--na-accent); border-color: var(--na-accent); background: var(--na-accent-soft); }

.na-deck { color: var(--na-muted); font-size: 1.05rem; margin: 0 0 2.2rem; max-width: 56ch; }

.na-index .wp-block-post-title {
  font-family: var(--na-serif);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0.35rem 0 0.6rem;
  font-size: clamp(1.35rem, 1.2vw + 1.05rem, 1.75rem);
}

.na-index .wp-block-post-title a { color: var(--na-ink); text-decoration: none; }
.na-index .wp-block-post-title a:hover { color: var(--na-accent); }

/* the newest post leads the page */
.na-index .wp-block-post:first-child { padding-top: 0.4rem; }
.na-index .wp-block-post:first-child .wp-block-post-title {
  font-size: clamp(2.05rem, 4.4vw, 3.15rem);
  line-height: 1.06;
  margin-bottom: 0.7rem;
}
.na-index .wp-block-post:first-child .wp-block-post-excerpt__excerpt {
  font-size: 1.12em;
  color: var(--na-ink);
}

.na-cat,
.na-kicker .wp-block-post-terms__separator {
  font-family: var(--na-sans);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}

.na-cat a { color: var(--na-accent); text-decoration: none; }

.na-card-excerpt p,
.wp-block-post-excerpt__excerpt {
  color: var(--na-muted);
  margin: 0 0 0.7rem;
}

.na-card-date,
.na-date {
  font-family: var(--na-sans);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--na-muted);
}

/* ---------- single article ---------- */
.na-article { max-width: var(--na-measure); }

.na-article > .na-kicker {
  font-family: var(--na-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.na-article > .na-kicker a { text-decoration: none; }

.na-title {
  font-family: var(--na-serif);
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

.na-meta {
  gap: 0.4rem 1.1rem;
  font-family: var(--na-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--na-muted);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--na-rule);
  margin-bottom: 2rem;
}
.na-meta .wp-block-post-author-name { font-weight: 600; color: var(--na-ink); }

.na-hero img { border-radius: 2px; }

.na-body > p:first-of-type::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: 0.84;
  padding: 0.08em 0.1em 0 0;
  font-weight: 700;
  color: var(--na-accent);
}

.na-body h2, .na-body h3, .na-body h4 {
  font-family: var(--na-serif);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}

.na-body p { margin: 0 0 1.15em; }

.na-body blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid var(--na-accent);
  font-style: italic;
  color: var(--na-ink);
}

.na-body code, .na-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--na-accent-soft);
  border-radius: 3px;
}
.na-body code { padding: 0.14em 0.34em; }
.na-body pre { padding: 1.1em 1.2em; overflow-x: auto; }

.na-body img, .na-body figure img { border-radius: 2px; }

.na-tags {
  gap: 0.5rem;
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--na-rule);
}
.na-tags a {
  font-family: var(--na-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--na-accent-soft);
  color: var(--na-accent);
  padding: 0.32em 0.7em;
  border-radius: 999px;
}

.na-nav {
  max-width: var(--na-measure);
  margin: 3rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--na-rule);
  font-family: var(--na-sans);
  font-size: 0.84rem;
}

/* ---------- pagination ---------- */
.wp-block-query-pagination { margin-top: 2.6rem; font-family: var(--na-sans); font-size: 0.84rem; }
.wp-block-query-pagination a { text-decoration: none; }

/* ---------- footer credit spacing ---------- */
.na-credit { border-top: 1px solid var(--na-rule); }

@media (max-width: 700px) {
  .na-body > p:first-of-type::first-letter { font-size: 2.6em; }
}