/* ==========================================================================
   Union Enterprises — WordPress layer
   --------------------------------------------------------------------------
   Everything the static prototype did not have to solve: the news section,
   editor output, Contact Form 7's markup, and WordPress's core classes.

   No new tokens. Every value here comes from :root in style.css so the news
   pages read as the same system — mono eyebrows, hairline rules, amber only
   where something is being pointed at.

   Load order: fonts.css → style.css → blog.css.
   ========================================================================== */

/* A .foo { display: flex } rule has the same specificity as [hidden] and loads
   later, so the attribute silently stops working. Force it. */
[hidden] { display: none !important; }

/* ---------- 1. Machine card note ----------
   The static pages set this inline; the render partial emits a class instead. */
.mcard__note { font-size: .88rem; color: var(--steel); margin: .55rem 0 0; }
.band--dark .mcard__note { font-size: .9rem; color: var(--steel-2); margin: .5rem 0 0; }
/* A lone machine card is full width, not one cell of a grid. */
.mcard--solo { margin-bottom: 1.6rem; }
.band--dark .mcard__note { color: var(--steel-2); }

/* ---------- 2. News index ---------- */
.post-col { min-width: 0; }

.post-list { display: grid; border-top: 1px solid var(--line); }

/* A horizontal row rather than a card grid: the article column is only ~790px
   inside the shell, and two stacked cards per row would leave the titles at
   four or five words a line. */
.pcard {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
  padding: 1.7rem 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
/* Without a photo the body would otherwise sit in the 244px image column. */
.pcard--noimg { grid-template-columns: minmax(0, 1fr); }
.pcard__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .25s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.05); opacity: .9; }

.pcard__body { min-width: 0; }
.pcard__body h3 { margin: .55rem 0 .5rem; font-size: clamp(1.14rem, 1.9vw, 1.36rem); }
.pcard__body h3 a { text-decoration: none; }
.pcard:hover h3 a { color: var(--amber-dk); }
.pcard__body p { font-size: .95rem; color: var(--steel); margin-bottom: .9rem; }

.pcard__more {
  font: 700 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: .45rem;
}
.pcard__more::after { content: "→"; transition: transform .2s var(--ease); }
.pcard:hover .pcard__more { color: var(--amber-dk); }
.pcard:hover .pcard__more::after { transform: translateX(4px); }

/* ---------- 3. Post meta line ---------- */
.post-meta {
  font: 500 .7rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--steel); margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem;
}
.post-meta a { color: var(--amber-dk); text-decoration: none; }
.post-meta a:hover { color: var(--ink); }
.post-meta span { color: var(--line); }
.prose > .post-meta { margin-bottom: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.prose > .post-meta a { border-bottom: 0; }

/* ---------- 4. Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: 2.6rem; }
.pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 .85rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 .76rem/1 var(--mono); letter-spacing: .07em; text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.pager .page-numbers:hover { border-color: var(--ink); }
.pager .current, .pager .current:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .dots { border-color: transparent; background: transparent; min-width: 24px; padding: 0; }

/* ---------- 5. Article furniture ----------
   Qualified with .prose because `.prose a` is (0,1,1) and would otherwise put
   an amber underline through every pill and panel below. */
.post-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.post-tags__label { font: 600 .67rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--steel); }
.prose .tagpill,
.tagpill {
  font: 500 .73rem/1 var(--mono); letter-spacing: .05em;
  padding: .5rem .72rem; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); text-decoration: none;
}
.prose .tagpill:hover, .tagpill:hover { border-color: var(--amber); background: var(--amber-soft); color: var(--ink); }

.postnav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.6rem; }
.prose .postnav__item,
.postnav__item {
  display: block; padding: 1.1rem 1.2rem;
  border: 1px solid var(--line); background: var(--surface); text-decoration: none;
  transition: border-color .15s var(--ease);
}
.prose .postnav__item:hover, .postnav__item:hover { border-color: var(--ink); }
.postnav__item--next { text-align: right; grid-column: 2; }
.postnav__dir { display: block; font: 600 .67rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--amber-dk); margin-bottom: .45rem; }
.postnav__title { font: 700 .97rem/1.35 var(--display); color: var(--ink); }

.post-pages { font: 600 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }

/* ---------- 6. Search form ---------- */
.searchform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin-bottom: 2rem; }
.searchform .field { margin-bottom: 0; }

/* ---------- 7. Editor output ----------
   Whatever the client writes in the Classic editor has to land inside .prose
   without breaking the measure or the rhythm. */
.prose img { margin: 1.6rem 0; }
.prose figure { margin: 1.8rem 0; }
.prose figure img { margin: 0; }
.prose figcaption,
.prose .wp-caption-text {
  font: 500 .715rem/1.6 var(--mono); letter-spacing: .04em; color: var(--steel);
  margin-top: .6rem; text-align: left;
}
.prose blockquote {
  margin: 1.9rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--amber);
  font-size: 1.06rem; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ol { padding-left: 1.3rem; margin: 0 0 1.4rem; }
.prose ol li { padding: .35rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .94rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .7rem .8rem; text-align: left; }
.prose th { background: var(--paper); font: 600 .69rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.prose code, .prose kbd { font: 500 .88em/1.5 var(--mono); background: var(--paper); padding: .1em .35em; }
.prose pre { background: var(--ink); color: var(--paper); padding: 1.1rem 1.2rem; overflow-x: auto; margin: 1.8rem 0; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

.alignleft { float: left; margin: .4rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { margin-inline: 0; }
.wp-caption { max-width: 100%; }
.sticky .pcard__body h3::after { content: " ★"; color: var(--amber); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto; clip: auto; clip-path: none;
}

/* ---------- 8. Contact Form 7 ----------
   CF7 wraps every control in a span and appends its own response block. The
   form itself carries .qform (set in the form's Additional Settings), so the
   field styles in style.css already apply — these rules only cover what CF7
   adds on top. */
.qform .wpcf7-form-control-wrap { display: block; }

/* The spinner is a sibling of a full-width submit button, so left in flow it
   wraps onto its own line and reserves 24px under every idle form. Give it
   space only while the form is actually submitting.

   The element selector is not decoration: CF7's own `.wpcf7 .wpcf7-spinner`
   is the same specificity as `.qform .wpcf7-spinner`, and it loads last. */
.qform span.wpcf7-spinner { display: none; margin: .7rem auto 0; }
.qform.submitting span.wpcf7-spinner { display: block; visibility: visible; }

.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0; padding: 1rem 1.1rem;
  border: 0; border-left: 3px solid var(--amber);
  background: var(--amber-soft); color: var(--ink); font-size: .9rem;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-left-color: #C0392B; background: #FDF3F2;
}
.wpcf7-not-valid-tip {
  display: block; margin-top: .35rem;
  font: 500 .7rem/1.45 var(--mono); letter-spacing: .03em; color: #C0392B;
}
.qform .wpcf7-not-valid { border-color: #C0392B; background-color: #FDF3F2; }

/* The sidebar card inverts to a dark ground, so the states have to invert too.
   Qualified with .qcard--side .qform to outrank the light-ground rules above. */
.qcard--side .qform .wpcf7-not-valid { border-color: #E4614F; background-color: #2A1C1A; }
.qcard--side .wpcf7-not-valid-tip { color: #E4614F; }
.qcard--side .wpcf7 form .wpcf7-response-output,
.qcard--side.wpcf7 form .wpcf7-response-output { background: rgba(245, 162, 0, .15); color: #fff; }

/* ---------- 9. Comments ----------
   Off by design, but a client can switch them on, and the markup should not
   fall out of the system when they do. */
.comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.comments h2, .comments h3 { font-size: 1.15rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list li { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.comment-list .children { list-style: none; padding-left: 1.4rem; border-left: 1px solid var(--line); }
.comment-meta { font: 500 .7rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--steel); }

/* ---------- 10. Admin bar ----------
   The header is sticky; without this the admin bar sits on top of it. */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* ---------- 11. Breakpoints ---------- */
@media (max-width: 700px) {
  .pcard { grid-template-columns: 1fr; gap: 1rem; }
  .pcard__img { aspect-ratio: 16 / 9; }
  .postnav { grid-template-columns: 1fr; }
  .postnav__item--next { grid-column: 1; text-align: left; }
  .searchform { grid-template-columns: 1fr; }
}