/* ==========================================================================
   EV Clinic — long-form content, archives, single posts, search.

   The posts on this site are technical: part numbers, fault codes, torque
   figures, wiring notes. So the reading column is narrow, the measure is
   short, and mono is used wherever a string is a value rather than a word.
   ========================================================================== */

/* ------------------------------------------------------------- archives -- */

.archive-head{padding-top:clamp(28px,5vw,56px)}
.archive-children{margin-top:20px}

.post-grid{margin-block:8px clamp(36px,5vw,56px)}

.pagination,.navigation.pagination{
  display:flex;justify-content:center;
  padding-block:clamp(24px,4vw,44px);
  border-top:1px solid var(--line);
}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding-inline:10px;
  font-family:var(--mono);font-size:13px;
  color:var(--mute);text-decoration:none;
  border:1px solid transparent;border-radius:var(--radius);
}
.page-numbers:hover,.page-numbers:focus-visible{border-color:var(--line);color:var(--ink)}
.page-numbers.current{color:var(--ink);border-color:var(--amber)}
.page-numbers.dots{border:0;color:var(--faint)}

/* --------------------------------------------------------- single post -- */

.post-head{padding-top:clamp(28px,5vw,60px)}
.post-head h1{margin-top:.3em;max-width:20ch}

.post-hero{margin:clamp(24px,4vw,44px) auto;max-width:var(--wide)}
.post-hero img{width:100%;border-radius:var(--radius)}

.entry-content{
  max-width:var(--content);
  margin-inline:auto;
  font-size:17.5px;
  line-height:1.68;
}
.entry-content > *{margin-block:0 1.15em}
.entry-content > *:last-child{margin-bottom:0}

.entry-content h2{
  font-size:clamp(24px,2.6vw,32px);
  margin-top:1.8em;margin-bottom:.5em;
  /* A rule above a heading separates two ideas without boxing either. */
  padding-top:.7em;border-top:1px solid var(--line-soft);
}
.entry-content h3{font-size:20px;margin-top:1.6em;margin-bottom:.4em}
.entry-content h4{margin-top:1.4em;margin-bottom:.3em}

.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.45em}
.entry-content li::marker{color:var(--faint)}

.entry-content img,.entry-content figure{border-radius:var(--radius)}
.entry-content figure{margin-block:1.6em}
.entry-content figcaption{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--mute);margin-top:9px;
}

.entry-content blockquote{
  margin:1.6em 0;padding:2px 0 2px 22px;
  border-left:2px solid var(--amber);
  font-size:19px;line-height:1.5;color:var(--ink);
}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content blockquote cite{
  display:block;margin-top:.7em;
  font-family:var(--mono);font-size:12px;font-style:normal;
  letter-spacing:.08em;color:var(--mute);
}

/* Inline code carries a part number or a DTC more often than a function
   name, so it is tinted rather than boxed — it should read as a value in the
   sentence, not as an interruption. */
.entry-content :not(pre) > code{
  background:rgba(var(--cold-rgb),.07);
  color:#1D3AAE;
  padding:.12em .38em;border-radius:2px;
  font-size:.9em;
  word-break:break-word;
}

.entry-content pre{
  background:var(--raise);
  border-left:2px solid var(--line);
  padding:16px 18px;
  overflow-x:auto;
  font-size:13.5px;line-height:1.55;
  border-radius:0 var(--radius) var(--radius) 0;
}

/* Tables of specs are wide by nature. They scroll inside their own container
   so the page body never does. */
.entry-content table{
  width:100%;border-collapse:collapse;
  font-size:14.5px;
  display:block;overflow-x:auto;
}
.entry-content th,.entry-content td{
  text-align:left;padding:9px 14px 9px 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.entry-content th{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  border-bottom-color:var(--line);white-space:nowrap;
}

.entry-content .wp-block-separator{border-top:1px solid var(--line);opacity:1}

/* Blocks that break the reading column. */
.entry-content .alignwide{
  width:min(var(--wide),100vw - var(--gut) * 2);
  margin-inline:calc(50% - min(var(--wide),100vw - var(--gut) * 2) / 2);
  max-width:none;
}
.entry-content .alignfull{
  width:100vw;margin-inline:calc(50% - 50vw);max-width:none;
}
.entry-content .alignleft{float:left;margin:.4em 1.6em 1em 0;max-width:44%}
.entry-content .alignright{float:right;margin:.4em 0 1em 1.6em;max-width:44%}
@media (max-width:640px){
  .entry-content .alignleft,.entry-content .alignright{float:none;margin-inline:0;max-width:100%}
}

.post-foot{padding-block:clamp(26px,4vw,40px)}
.post-tags{margin:0}

.page-links{
  font-family:var(--mono);font-size:13px;
  display:flex;gap:8px;align-items:center;
  margin-top:2em;padding-top:1em;border-top:1px solid var(--line);
}

/* -------------------------------------------------------------- search -- */

.search-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;max-width:520px}
.search-field{
  flex:1 1 240px;
  padding:11px 14px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;
}
.search-field:focus{outline:2px solid var(--cold);outline-offset:1px;border-color:transparent}
.search-field::placeholder{color:var(--faint)}

/* ------------------------------------------------------- knowledge base --

   BasePress renders its own templates. Rather than override each of them, the
   theme supplies the reading column and the type, which is most of what they
   were missing. A full KB redesign is its own piece of work. */

.evc-kb .basepress-wrap,
.evc-kb #basepress-wrap{
  max-width:var(--wide);
  margin-inline:auto;
  padding-inline:var(--gut);
  padding-block:clamp(28px,5vw,56px);
}
.evc-kb .bpress-section-title,
.evc-kb .bpress-kb-title{font-family:var(--display);letter-spacing:-.02em}
.evc-kb .bpress-post-content{max-width:var(--content);font-size:17px;line-height:1.68}

/* ------------------------------------------------------------ comments -- */

.comments-area{
  max-width:var(--content);margin:clamp(36px,5vw,64px) auto 0;
  padding-inline:var(--gut);
}
.comments-title,.comment-reply-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{border-top:1px solid var(--line-soft);padding-block:18px}
.comment-meta{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;padding:11px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;
}
.comment-form label{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute);
}
.comment-form p{margin-bottom:16px}