/* Additions on top of the ported WordPress theme stylesheet.
   Code blocks: the old site highlighted these at runtime with EnlighterJS;
   the static build ships them pre-highlighted (shiki), so give the <pre>
   a similar boxed look. */

.article-content pre.astro-code {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-x: auto;
}

.article-content pre.astro-code code {
  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
  background: none;
}

/* The YouTube embed WordPress wrapped in a responsive figure */
.article-content iframe {
  max-width: 100%;
}

/* Form plumbing: honeypot stays invisible, response lines mimic the old
   CF7 / Mailchimp-for-WP feedback strip. */
.hp-field {
  display: none !important;
}

.wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 2px solid #e2401c;
  font-size: 0.875rem;
  text-align: center;
}

.mc4wp-response {
  margin-top: 1rem;
  font-size: 0.875rem;
}

.wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Lighthouse fixes.
   The hero video has no declared size, so its box jumps from 300x150 to the
   1920x1080 intrinsic size once metadata loads (CLS 0.6 on desktop). Pin it
   to the section and let object-fit do the cropping the overflow used to. */
#video-background {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* White text on the brand red (#da4033) is 4.4:1; nudge the red darker to
   clear WCAG AA (4.5:1) where white text sits on it. */
.btn.btn-primary,
.btn.wpcf7-submit,
.btn#submit,
input[type="submit"].btn-primary,
input[type="submit"].wpcf7-submit,
input[type="submit"]#submit,
section.cta {
  background-color: #c73629;
}

/* Footer copyright was rgba(202,200,226,.5) on black — 3.6:1. */
#footer p,
#footer p a {
  color: rgba(202, 200, 226, 0.7);
}

/* The hero heading used to stay at opacity 0 until a 1s timer in home.js
   added .animated, which made the hero text the LCP element at 10s+ on
   throttled mobile. Show it from first paint; the .animated class the JS
   still adds is now a no-op. */
#start .heading.fade-in {
  opacity: 1;
}

/* The project images carry width/height attributes so the browser can
   reserve space before they lazy-load; the CSS only constrains width, so
   height has to follow the aspect ratio rather than the attribute. */
.section-project .image {
  height: auto;
}

/* Visually hidden text, used to give repeated "Read more" links unique
   accessible names. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}