/* why: docs/code-notes.md § File header (public/css/site.css) */

.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;
}

.enquiry-form .row {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.enquiry-form .row input,
.enquiry-form .row select {
  flex: 1; min-width: 0;
}
.enquiry-form textarea {
  width: 100%; margin-bottom: 16px; box-sizing: border-box;
}
.enquiry-form .form-note {
  font-size: 13px; color: #fff; opacity: 0.75; margin: 4px 0 16px;
}
.enquiry-form .form-note a { color: inherit; text-decoration: underline; }
.enquiry-form .checkbox-field {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #fff; margin-bottom: 14px; cursor: pointer;
}
.enquiry-form .checkbox-field input {
  margin-top: 3px; flex: none; width: auto;
}
.enquiry-form .checkbox-field a { color: inherit; text-decoration: underline; }
.enquiry-form .js-enquiry-turnstile { margin-bottom: 16px; }
.enquiry-form .enquiry-status {
  font-size: 14px; margin-top: 12px; color: #fff;
}

@media (max-width: 700px) {
  .enquiry-form .row { flex-direction: column; gap: 0; }
}

/* why: docs/code-notes.md § .about-listing h2 (heading-level fix) */
.about-listing h2 {
  margin: 20px 0px 10px; font-size: 30px; line-height: 45px;
  font-family: var(--work-sans); font-weight: 500;
}

/* why: docs/code-notes.md § IMPACT System section (placeholder listings) */
.tag-analyser { background-color: #0b2239; color: #49cdcc; }
.reagent.placeholder .image.image-empty {
  background-color: #12263a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reagent.placeholder .coming-soon {
  color: #fafafa;
  opacity: 0.6;
  font-size: 13px;
  text-align: center;
  padding: 0 20px;
}
.reagent-hero .container .inner .image.image-empty {
  background-color: #12263a;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.reagent-hero .container .inner .image.image-empty .coming-soon {
  color: #fafafa;
  opacity: 0.6;
  font-size: 15px;
  text-align: center;
  padding: 0 20px;
}
.reagents-subheading {
  color: #fff; font-size: 24px; margin: 0 0 20px;
}

/* why: docs/code-notes.md § reagent card titles bold before hover (were
   only bold on :hover in the theme CSS) */
.reagents-container .reagent span {
  font-weight: 600;
}

/* why: docs/code-notes.md § reagents-hero image + jump buttons */
.reagents-hero-image {
  display: block;
  max-width: 520px;
  width: 100%;
  height: auto;
  margin: 0 auto 40px;
}
/* why: docs/code-notes.md § homePage() - the device image now lives in
   .homepage-hero itself (moved out of .text-cta, which no longer appears
   on the homepage - see below), and that context has no conflicting img
   rule, so the base .reagents-hero-image sizing above applies cleanly
   with no override needed. */

/* why: docs/code-notes.md § homePage() - .homepage-hero had a hard height
   (100svh / 900px / auto at three breakpoints, in the vendored theme CSS)
   sized for its original, shorter content. Now that the device image and
   an extra paragraph live inside it too, that hard height would clip
   them - switched to min-height so it still fills at least one screen
   but can grow. */
.homepage-hero {
  height: auto;
  min-height: 100svh;
}
.homepage-hero .container {
  height: auto;
  min-height: 100%;
  /* why: .inner is height:100% (vendored CSS) and centers .content via
     flex - with the taller hero content added above (image + extra
     paragraph + second button), .container's own height is now usually
     content-driven rather than stretched by min-height, leaving little
     or no spare room for that centering to actually push content down.
     Real padding, not centering, is what guarantees the fixed nav
     (148px desktop / 100px mobile, same figures used elsewhere) never
     overlaps the h1, and that the button row isn't flush with the
     hero's bottom edge. */
  padding: 170px 0 70px;
}
@media (max-width: 1200px) {
  .homepage-hero { height: auto; min-height: 900px; }
}
@media (max-width: 991px) {
  .homepage-hero .container { padding: 130px 0 50px; }
}
@media (max-width: 576px) {
  .homepage-hero { height: auto; }
}
.hero-jump-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

/* why: 404 page - reuses the homepage .text-cta wrapper (already dark-themed,
   centred, generously padded) rather than the cramped generic
   .standard-content block. Own explicit sizing on the code/title, since
   .text-cta p's 30px tagline size isn't right for either the big numeral or
   a heading. */
.notfound-code {
  font-family: var(--work-sans);
  font-size: 140px;
  line-height: 1;
  font-weight: 700;
  color: #49cdcc;
  opacity: .85;
  margin: 0 0 10px;
}
.notfound-title {
  font-family: var(--work-sans);
  font-size: 36px;
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px;
}
.notfound-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
  opacity: .8;
  max-width: 520px;
  margin: 0 auto;
}
/* why: the 404 body starts right after <div class="nav">, which is
   position:fixed (48px from top, 100px tall = 148px) on desktop and
   replaced by the shorter 100px-tall .nav-mobile below the theme's own
   991px breakpoint - without this the heading renders underneath it.
   150px matches the same clearance .reagent-hero already uses for the
   same reason on product pages. */
.notfound-hero { margin-top: 150px; }
@media (max-width: 991px) {
  .notfound-hero { margin-top: 100px; }
}
@media (max-width: 767px) {
  .notfound-code { font-size: 90px; }
  .notfound-title { font-size: 26px; }
}
/* why: docs/code-notes.md § reagentsIndexPage() second pass - equal-width
   jump buttons so the pair reads as one centered, evenly-weighted unit
   regardless of label length */
.hero-jump-buttons .btn {
  min-width: 320px;
}
/* why: docs/code-notes.md § #system/#reagents jump targets - .nav is
   position:fixed (100px tall, 48px from top) so anchor scrolls need an
   offset or the fixed nav covers the section heading */
#system, #reagents {
  scroll-margin-top: 170px;
}
/* why: docs/code-notes.md § reagentsIndexPage() second pass - smooth-scrolls
   the #system/#reagents jump buttons (and any other in-page anchor) */
html {
  scroll-behavior: smooth;
}

/* why: /products/ hero title/image gap - the vendored theme's
   .reagents-hero .container .inner h1 rule sets margin-bottom:40px, shared
   with the other two pages that reuse .reagents-hero (a product detail page
   and a static page), so it's tightened here via the page-specific
   .reagents-hero--products modifier rather than overridden globally. */
.reagents-hero--products .container .inner h1 {
  margin-bottom: 20px;
}
/* why: shrink the hero image itself (was overlapping the fixed scroll-hint
   chevron on shorter viewports) - scoped the same way as the h1 rule above,
   since .reagents-hero-image's base 40px bottom margin is shared too. */
.reagents-hero--products .reagents-hero-image {
  max-width: 460px;
  margin-bottom: 24px;
}
/* why: force the "Reagents are one part..." paragraph to start right at
   the fold on both mobile and desktop, so the scroll-hint chevron is
   always inviting a genuine scroll rather than sometimes already showing
   the paragraph/buttons on tall viewports. Sized as 100vh minus the real,
   confirmed vertical space eaten before this wrapper: the fixed-nav
   clearance (.reagents-hero margin-top 150px desktop / body padding-top
   100px mobile, both from the vendored theme) plus .reagents-hero's own
   80px top padding. svh (not just vh) matches .homepage-hero's existing
   convention for reliable mobile viewport sizing. */
.reagents-hero--products .reagents-hero-fold {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 230px);
  min-height: calc(100svh - 230px);
}
@media (max-width: 991px) {
  .reagents-hero--products .reagents-hero-fold {
    min-height: calc(100vh - 180px);
    min-height: calc(100svh - 180px);
  }
}

/* why: /products/ scroll invite - a bouncing chevron pinned to the bottom
   of the viewport, fading out once the visitor actually scrolls (see
   scroll-hint.js). Only used on this page. Sized down from an earlier pass
   (44px) since it was overlapping the hero image on shorter viewports. */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 40;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #49cdcc;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility .3s ease, background .2s ease;
  animation: scroll-hint-bounce 1.8s ease-in-out infinite;
}
.scroll-hint:hover { background: rgba(255, 255, 255, 0.16); }
.scroll-hint.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
}

/* why: docs/code-notes.md § homePage() reagent carousel - corrected after
   two wrong passes: Slick.js genuinely IS initialized here, bundled
   inside app.min.js's webpack chunk ($(".reagent-slider-inner").slick({
   slidesToShow:3, arrows:true, prevArrow:".prev", nextArrow:".next", ...
   })), confirmed live (.slick-initialized class present, slickNext()
   works). The earlier "nothing calls .slick()" conclusion was a bad grep
   read that never actually checked the one real match's context - the
   custom flex/overflow-x/scrollbar CSS that followed from it was fighting
   Slick's own .slick-list/.slick-track transform-based layout the whole
   time, which is what produced both the near-zero scrollable range and
   the stray scrollbar. Nothing needed here now - Slick owns the layout
   and the arrows already work via its own init config. See
   reagent-carousel.js for the trackpad/wheel support Slick doesn't
   provide out of the box. */

/* /news/ filter row and live search. The theme's style.min.css already
   carries .news-container .filters, .filter-btn, .active and the teal
   search button - the React rebuild had simply never rendered the markup
   for them. Only the gaps that stylesheet does not cover are set here. */
.news-container .search-bar input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.news-container .search-bar input[type="search"]::-webkit-search-decoration,
.news-container .search-bar input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.news-container .filters .filter-btn:hover {
  border-color: #49cdcc;
  color: #49cdcc;
}
.news-container .filters .filter-btn.active:hover {
  color: #000;
}
.news-container .filters .filter-btn:focus-visible,
.news-container .search-bar input:focus-visible,
.news-container .search-bar button:focus-visible {
  outline: 2px solid #49cdcc;
  outline-offset: 2px;
}
.news-container .news-empty {
  padding: 120px 0 80px 0;
  text-align: center;
  font-size: 18px;
  color: #fafafa;
}
@media (max-width: 991px) {
  .news-container .news-empty { padding: 80px 0 60px 0; }
}

/* /products/ filter row and live search. Same story as /news/ above: the
   theme's style.min.css already carries .reagents-container .filters,
   .filter-btn, .active and the 50x50 teal search button, so only the gaps
   it does not cover are set here. */
.reagents-container .search-bar input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.reagents-container .search-bar input[type="search"]::-webkit-search-decoration,
.reagents-container .search-bar input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.reagents-container .filters .filter-btn:hover {
  border-color: #49cdcc;
  color: #49cdcc;
}
.reagents-container .filters .filter-btn.active:hover {
  color: #000;
}
.reagents-container .filters .filter-btn:focus-visible,
.reagents-container .search-bar input:focus-visible,
.reagents-container .search-bar button:focus-visible {
  outline: 2px solid #49cdcc;
  outline-offset: 2px;
}
.reagents-container .reagents-empty {
  padding: 120px 0 80px 0;
  text-align: center;
  font-size: 18px;
  color: #fafafa;
}
@media (max-width: 991px) {
  .reagents-container .reagents-empty { padding: 80px 0 60px 0; }
}

/* Contact form: the theme sets the textarea to a single 50px line, which is
   too small for the message it asks for. */
.enquiry-form textarea,
.contact-page .inner .right textarea {
  min-height: 200px;
}
/* Honeypot - off-screen rather than display:none, which some bots skip. */
.enquiry-form .enquiry-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.enquiry-form .enquiry-turnstile { margin: 4px 0 16px; }
.enquiry-form .enquiry-status {
  margin: 12px 0 0; font-size: 14px; color: #fff; min-height: 1em;
}

/* FAQ answers were set at 30px/45px, the same weight as a heading, which
   made a two-paragraph answer fill the screen. 18px/30px is the body size
   this theme uses elsewhere (.reagent-slider p, .reagents-container span). */
.faq-block .panel p,
.faq-block .panel li {
  font-size: 18px;
  line-height: 30px;
}

/* Hero "Experience the Full Story" overlay. The old site built this inline
   with element.style; here it is a stylesheet so the breakpoints are real. */
.video-modal {
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.video-modal video {
  width: 100%; max-width: 1280px; max-height: 100%;
  outline: none;
}
.video-modal__close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.video-modal__close img { width: 24px; height: 24px; }
.video-modal__close:focus-visible { outline: 2px solid #49cdcc; outline-offset: 2px; }
@media (max-width: 576px) {
  .video-modal { padding: 12px; }
  .video-modal__close { top: 8px; right: 8px; }
}