/* ==========================================================================
   ACB Technologies — WordPress layer

   Two kinds of rule live here, kept apart on purpose.

   1. "Requested design changes" — the only place the original design is
      deliberately altered. Overrides live here rather than in style.css or
      animate.css so those stay the untouched files that came from the design
      build, and so every change is in one place to review or revert.

   2. Everything below that covers markup the static design never had: the
      form's error state, WordPress core content classes, and the plain-content
      pages a site grows (privacy policy, 404, search results).

   Design tokens come from style.css, which always loads first. This file is
   enqueued last, so its overrides win.
   ========================================================================== */

/* --- Requested design changes -------------------------------------------- */

/* The hover underline (animate.css section 3) is switched off. Removing the
   pseudo-element outright is cheaper than animating it to nothing, and it
   takes the transition with it. */
.nav__link::after { content: none; }

/* That underline was also the keyboard focus indicator, so focus needs its own
   marker — colour alone is not a sufficient one. Mouse users never see this. */
.nav__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 6px;
  border-radius: 3px;
}

/* The page you are on, in the brand gold. The design marked it with weight
   alone (500 -> 600), which is nearly invisible against the navy bar. */
.nav__link[aria-current="page"] {
  color: var(--primary-500);
  font-weight: 700;
}

/* Hover still wins over the current-page colour, so the bar keeps responding
   to the pointer even on the page you are already on. */
.nav__link[aria-current="page"]:hover,
.nav__link[aria-current="page"]:focus-visible { color: var(--nav-hover); }

/* --- Contact form error state -------------------------------------------- */
/* Mirrors .form-success so the two states sit on the same baseline. */
.form-error {
  width: 100%;
  padding: 19px;
  border: 1px solid #e3c3c3;
  border-radius: 8px;
  background: #fdf6f6;
  color: #8a2b2b;
  font-size: 14px;
}

.contact-form button[aria-busy="true"] { opacity: .65; cursor: progress; }

/* --- Accessibility ------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 12px 24px;
  border-radius: 6px;
  background: var(--secondary-900);
  color: var(--white-100);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* --- Core content classes ------------------------------------------------ */
.alignleft   { float: left; margin: 0 24px 16px 0; }
.alignright  { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.alignwide, .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: 24px; }
.wp-caption img { margin: 0 auto; }
.wp-caption-text,
.gallery-caption {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.sticky, .bypostauthor { display: block; }

/* --- Generic content pages ----------------------------------------------- */
/* Privacy policy, 404, search results — anything without a bespoke design. */
.acb-page { padding: 80px 0 96px; }

.acb-page__header { max-width: 760px; margin-bottom: 40px; }

.acb-page__title {
  margin: 0 0 16px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.acb-page__lede { color: var(--muted); font-size: 17px; line-height: 1.6; }

.acb-entry { max-width: 760px; font-size: 16px; line-height: 1.7; }
.acb-entry > * + * { margin-top: 20px; }
.acb-entry h2 { margin-top: 40px; font-size: 26px; }
.acb-entry h3 { margin-top: 32px; font-size: 20px; }
.acb-entry a { color: var(--accent); }
.acb-entry a:hover { color: var(--nav-hover); }
.acb-entry ul, .acb-entry ol { padding-left: 22px; }
.acb-entry ul { list-style: disc; }
.acb-entry ol { list-style: decimal; }
.acb-entry li + li { margin-top: 8px; }
.acb-entry img { border-radius: 8px; }
.acb-entry blockquote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--primary-500);
  color: var(--muted);
}
.acb-entry pre {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow-x: auto;
  font-size: 14px;
}
.acb-entry code { font-size: .92em; }
.acb-entry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.acb-entry th, .acb-entry td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
}

/* --- Search and lists ---------------------------------------------------- */
.acb-list { display: grid; gap: 28px; max-width: 760px; }

.acb-list__item {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.acb-list__item:last-child { padding-bottom: 0; border-bottom: 0; }

.acb-list__title { margin: 0 0 8px; font-size: 22px; }
.acb-list__title a { text-decoration: none; }
.acb-list__title a:hover { color: var(--accent); }
.acb-list__meta { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.acb-list__excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; }

.acb-search { display: flex; gap: 8px; max-width: 420px; margin-top: 24px; }
.acb-search input[type="search"] {
  flex: 1;
  height: 44px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white-100);
  color: var(--secondary-900);
  font-family: inherit;
  font-size: 14px;
}
.acb-search input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.acb-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.acb-pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
}
.acb-pagination .page-numbers.current,
.acb-pagination .page-numbers:hover {
  border-color: var(--secondary-900);
  background: var(--secondary-900);
  color: var(--white-100);
}

@media (max-width: 900px) {
  .acb-page { padding: 56px 0 72px; }
  .acb-page__title { font-size: 34px; }
}

/* --- Contact form: human verification ------------------------------------ */
/* The form is a flex column with a 24px gap, so the challenge needs no margin
   of its own — it sits in the rhythm the design already set. A vendor widget
   is a fixed-size iframe: let it shrink rather than push the card wider. */
.contact-form__captcha {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* The built-in question reuses .field, so it is already laid out; only the
   answer box needs narrowing, because a 4-character answer in a full-width
   input reads as though a sentence were expected. */
.contact-form__captcha--math input { max-width: 140px; }

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* --- WebP assets ---------------------------------------------------------
   The design's images ship as WebP; the PNGs stay in assets/img/ as the
   editable source. Only one of them is referenced from a stylesheet rather
   than from PHP, and style.css is an untouched design file, so the swap is
   made here instead of there.

   No PNG fallback is declared, and does not need to be: this design lays out
   with container query units (`cqw`), which need Chrome 105 / Safari 16 —
   browser generations newer than WebP support by two to eight years. Anything
   that cannot decode the WebP could not have laid the page out either. */
.features__noise { background-image: url(../assets/img/noise.webp); }