/*
 * Shared page kit — the primitives every designed page on this site reuses.
 *
 * Used by: the shop archive, the product category archives, the product detail
 * template, the content hubs (Technical Resources, Learn, Evidence,
 * Applications), the search results page and the order tracking page.
 *
 * Same palette, radii, container width and type scale as assets/css/home.css,
 * about.css and static-page.css, so an interior page reads as the same brand as
 * the homepage and the ten business pages. Enqueued on every page by
 * functions.php, before any page-level sheet, so a page may restyle a primitive
 * by scoping its own rule under its page class.
 *
 * Markup contract (a page template emits exactly these):
 *   <main class="aq-page aq-shop">           page shell: palette + font
 *     <nav class="aq-crumbs" aria-label="Breadcrumb"><ol>…</ol></nav>
 *     <section class="aq-hero"><p class="aq-kicker">…</p><h1>…</h1>
 *       <p class="aq-hero-lede">…</p><ul class="aq-hero-facts">…</ul></section>
 *     <section class="aq-section aq-section--alt"><div class="aq-wrap">
 *       <div class="aq-section-head"><h2>…</h2><p>…</p></div> … </div></section>
 *     <ul class="aq-rail"><li><a class="aq-chip" aria-current="page">…</a></li></ul>
 *     <nav class="aq-pager">…</nav>
 *     <div class="aq-empty">…</div>
 *     <div class="aq-prose">…long-form body copy…</div>
 *   </main>
 *
 * The product grid is NOT here: the markup comes from WooCommerce's own
 * content-product.php inside <div class="aq-products">, and its styles live in
 * assets/css/shop.css, which functions.php enqueues on every page that shows a
 * product grid.
 */

.aq-page {
  --aq-blue: #0F5FB8;
  --aq-blue-dark: #0A4D95;
  --aq-cyan: #1697B8;
  --aq-navy: #0D1B2A;
  --aq-white: #FFFFFF;
  --aq-surface: #EEF3F7;
  --aq-alt: #F5F7FA;
  --aq-border: #DBE3EA;
  --aq-line: #B9C8D6;
  --aq-ink: #17212B;
  --aq-body: #40505E;
  --aq-muted: #687684;
  --aq-green: #2F7B4B;
  --aq-amber: #A86A12;
  --aq-red: #B42318;
  --aq-radius: 8px;
  --aq-control: 44px;
  --aq-wrap: 1220px;
  --aq-shadow: 0 10px 30px rgba(13, 27, 42, 0.06);

  background: var(--aq-white);
  color: var(--aq-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.aq-page,
.aq-page *,
.aq-page *::before,
.aq-page *::after { box-sizing: border-box; }

.aq-wrap {
  max-width: var(--aq-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Breadcrumb ------------------------------------------------------------- */

.aq-crumbs { padding: 18px 0 0; font-size: 12.5px; color: var(--aq-muted); }
.aq-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.aq-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.aq-crumbs li + li::before { content: "/"; color: #A9B6C2; }
.aq-crumbs a { color: var(--aq-muted); text-decoration: none; }
.aq-crumbs a:hover { color: var(--aq-blue); text-decoration: underline; }
.aq-crumbs [aria-current="page"] { color: var(--aq-ink); font-weight: 600; }

/* Hero ------------------------------------------------------------------- */

.aq-hero {
  background: linear-gradient(158deg, #0D1B2A 0%, #102438 52%, #0E2C42 100%);
  color: #fff;
  padding: 52px 0 56px;
  margin-top: 18px;
}

.aq-hero--compact { padding: 38px 0 42px; }

/* The articles index and the topic archives. The hero there carries a kicker, a
   one-line heading and a lede and nothing else, so it is tightened again: the
   first article has to be on the first screen, not below it. */
.aq-hero--list { padding: 24px 0 28px; }
.aq-hero--list .aq-kicker { margin-bottom: 10px; }
.aq-hero--list h1 { margin-bottom: 10px; font-size: 30px; max-width: 34ch; }
.aq-hero--list .aq-hero-lede { font-size: 15px; line-height: 1.55; }

.aq-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6FC3DC;
}

.aq-hero h1 {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 26ch;
}

.aq-hero-lede {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #C3D2DF;
  max-width: 72ch;
}

.aq-hero-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: #8FA6B8; max-width: 72ch; }

.aq-hero-facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.aq-hero-facts b { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.aq-hero-facts span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: #9FB4C6; }

.aq-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }

/* Sections --------------------------------------------------------------- */

.aq-section { padding: 64px 0; }
.aq-section--tight { padding: 40px 0; }
.aq-section--alt { background: var(--aq-alt); }
.aq-section--surface { background: var(--aq-surface); }
.aq-section--line { border-top: 1px solid var(--aq-border); }

.aq-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.aq-section-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--aq-ink);
}
.aq-section-head p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--aq-body); max-width: 72ch; }
.aq-section-head > div { min-width: 0; }

/* Chip rail (term filters, anchors) -------------------------------------- */

.aq-rail {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--aq-line);
  border-radius: 999px;
  background: #fff;
  color: var(--aq-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.aq-chip:hover { border-color: var(--aq-blue); color: var(--aq-blue); }
.aq-chip[aria-current="page"],
.aq-chip.is-current { background: var(--aq-blue); border-color: var(--aq-blue); color: #fff; }
.aq-chip-count { font-weight: 600; color: var(--aq-muted); font-variant-numeric: tabular-nums; }
.aq-chip[aria-current="page"] .aq-chip-count,
.aq-chip.is-current .aq-chip-count { color: rgba(255, 255, 255, 0.82); }

/* Counts and meta -------------------------------------------------------- */

.aq-count { margin: 0 0 18px; font-size: 13px; color: var(--aq-muted); }
.aq-meta { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--aq-muted); }

/* Cards ------------------------------------------------------------------ */

.aq-card {
  background: #fff;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  padding: 20px;
}

.aq-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.aq-facts li { border-left: 3px solid var(--aq-border); padding-left: 14px; }
.aq-facts b { display: block; font-size: 15px; color: var(--aq-ink); }
/* Only the label that follows the value, never a badge or a link a value may
   carry: a badge is a pill and a plain "span" rule would stretch it full width. */
.aq-facts > li > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--aq-muted); }

/* Pager ------------------------------------------------------------------ */

.aq-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 34px;
}
.aq-pager a,
.aq-pager span {
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--aq-border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--aq-body);
  text-decoration: none;
  background: #fff;
}
.aq-pager a:hover { border-color: var(--aq-blue); color: var(--aq-blue); }
.aq-pager .is-current { background: var(--aq-blue); border-color: var(--aq-blue); color: #fff; }
.aq-pager .is-gap { border-color: transparent; background: transparent; }
.aq-pager .aq-pager-next,
.aq-pager .aq-pager-prev { padding: 0 16px; }

/* Empty state ------------------------------------------------------------ */

.aq-empty {
  border: 1px dashed var(--aq-line);
  border-radius: var(--aq-radius);
  background: var(--aq-alt);
  padding: 34px 24px;
  text-align: center;
}
.aq-empty h2, .aq-empty h3 { margin: 0 0 10px; font-size: 19px; color: var(--aq-ink); }
.aq-empty p { margin: 0 auto; max-width: 60ch; font-size: 14.5px; line-height: 1.7; color: var(--aq-body); }
.aq-empty .aq-btns { justify-content: center; margin-top: 20px; }

/* Long-form body copy ---------------------------------------------------- */

.aq-prose { font-size: 15.5px; line-height: 1.78; color: var(--aq-body); }
.aq-prose > * + * { margin-top: 18px; }
.aq-prose h2 { margin: 38px 0 0; font-size: 24px; line-height: 1.25; color: var(--aq-ink); letter-spacing: -0.01em; }
.aq-prose h3 { margin: 30px 0 0; font-size: 19px; line-height: 1.3; color: var(--aq-ink); }
.aq-prose h4 { margin: 24px 0 0; font-size: 16px; color: var(--aq-ink); }
.aq-prose p { margin: 0; }
.aq-prose ul, .aq-prose ol { margin: 0; padding-left: 22px; }
.aq-prose li + li { margin-top: 6px; }
.aq-prose a { color: var(--aq-blue); text-decoration: underline; text-underline-offset: 2px; }
.aq-prose strong { color: var(--aq-ink); }
.aq-prose img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.aq-prose figure { margin: 0; }
.aq-prose figcaption { margin-top: 8px; font-size: 12.5px; color: var(--aq-muted); }
.aq-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.aq-prose th, .aq-prose td { border: 1px solid var(--aq-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.aq-prose th { background: var(--aq-alt); color: var(--aq-ink); font-weight: 700; }
.aq-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  background: var(--aq-surface);
  border-radius: 4px;
  padding: 2px 5px;
}
.aq-prose pre { margin: 0; padding: 16px; background: var(--aq-navy); color: #E6EEF5; border-radius: 6px; overflow-x: auto; }
.aq-prose pre code { background: transparent; color: inherit; padding: 0; }
.aq-prose blockquote {
  margin: 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--aq-cyan);
  color: var(--aq-body);
}

/* Buttons — header.php already skins .aq-btn for the header row, so these
   extensions carry a deeper scope to win over that sheet. ----------------- */

.aq-page .aq-btn.aq-btn-lg { min-height: 50px; padding: 0 24px; font-size: 14px; }
.aq-page .aq-btn.aq-btn-block { width: 100%; }
.aq-page .aq-btn.aq-btn-quiet {
  background: #fff;
  color: var(--aq-body);
  border-color: var(--aq-border);
}
.aq-page .aq-btn.aq-btn-quiet:hover { border-color: var(--aq-blue); color: var(--aq-blue); }

.aq-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Product grids sit in this wrapper; the grid itself is styled by shop.css. */
.aq-products { min-width: 0; }

/* Small screens ---------------------------------------------------------- */

@media (max-width: 900px) {
  .aq-hero { padding: 42px 0 46px; }
  .aq-hero h1 { font-size: 32px; }
  .aq-section { padding: 48px 0; }
  .aq-section-head h2 { font-size: 24px; }
}

@media (max-width: 680px) {
  .aq-wrap { padding: 0 16px; }
  .aq-hero h1 { font-size: 27px; }
  .aq-hero-lede { font-size: 15px; }
  .aq-section { padding: 38px 0; }
  .aq-section--tight { padding: 28px 0; }
  .aq-prose h2 { font-size: 21px; }
}

/* Status badges, loop-card parameters and the specification table ----------
   These carry the same palette as the rest of the kit but lean on the token
   with a literal fallback, because the search form and the loop cards are also
   rendered from header.php, footer.php and WooCommerce markup that sit outside
   a .aq-page shell. ------------------------------------------------------ */

.aq-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: 999px;
  background: #fff;
  color: var(--aq-body, #40505E);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.aq-badge--ok { border-color: rgba(47, 123, 75, 0.35); background: rgba(47, 123, 75, 0.08); color: var(--aq-green, #2F7B4B); }
.aq-badge--warn { border-color: rgba(168, 106, 18, 0.35); background: rgba(168, 106, 18, 0.08); color: var(--aq-amber, #A86A12); }
.aq-badge--muted { background: var(--aq-surface, #EEF3F7); color: var(--aq-muted, #687684); }

/* Availability on a WooCommerce loop card, over the product photo. */
.aq-loop-flag { position: absolute; top: 10px; left: 10px; z-index: 3; }

.aq-card-specs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--aq-muted, #687684);
}
.aq-card-specs li { display: flex; justify-content: space-between; gap: 12px; }
.aq-card-specs b { color: var(--aq-ink, #17212B); font-weight: 700; text-align: right; }

/* Specification table: parameter repeated down the left, value emphasised. */
.aq-specs + .aq-specs { margin-top: 26px; }
.aq-specs-group {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
}
.aq-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 22px;
}
.aq-specs-table th,
.aq-specs-table td {
  border-bottom: 1px solid var(--aq-border, #DBE3EA);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.aq-specs-table th {
  width: 44%;
  font-weight: 600;
  color: var(--aq-body, #40505E);
  background: var(--aq-alt, #F5F7FA);
}
.aq-specs-table td { color: var(--aq-body, #40505E); }
.aq-specs-table td b { color: var(--aq-ink, #17212B); font-weight: 700; font-variant-numeric: tabular-nums; }
.aq-specs-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--aq-muted, #687684); }

/* The specification table is placed between the buy box and the description
   tabs, inside WooCommerce's own markup, so it separates itself from both:
   a rule above it, no extra container width, and tighter padding than a section
   that sits in the page's own flow. */
.aq-specs-block {
  margin-top: 30px;
  padding: 30px 0 10px;
  border-top: 1px solid var(--aq-border, #DBE3EA);
}
@media (max-width: 680px) {
  .aq-specs-block { margin-top: 22px; padding: 22px 0 6px; }
}

/* Product video: the provider's player keeps its own 16:9 box at every width. */
.aq-video {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: 10px;
  background: #0D1B2A;
}
.aq-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Link cards — how related records are listed ---------------------------- */

.aq-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.aq-links[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.aq-links[data-cols="4"] { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }

.aq-link-card {
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius, 8px);
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aq-link-card-title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.aq-link-card-title a { color: var(--aq-ink, #17212B); text-decoration: none; }
.aq-link-card-title a:hover { color: var(--aq-blue, #0F5FB8); text-decoration: underline; }
.aq-link-card-meta {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
}
.aq-link-card-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--aq-body, #40505E); }
.aq-links-empty { margin: 0; font-size: 14px; line-height: 1.7; color: var(--aq-muted, #687684); }

/* Closing action band ---------------------------------------------------- */

.aq-band { padding: 60px 0; }
.aq-band--dark { background: linear-gradient(158deg, #0D1B2A 0%, #102438 52%, #0E2C42 100%); color: #fff; }
.aq-band--light { background: var(--aq-alt, #F5F7FA); color: var(--aq-ink, #17212B); }
.aq-band-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; max-width: 30ch; }
.aq-band--dark .aq-band-title { color: #fff; }
.aq-band-text { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; max-width: 70ch; color: var(--aq-body, #40505E); }
.aq-band--dark .aq-band-text { color: #C3D2DF; }
.aq-band-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--aq-muted, #687684); }
.aq-band--dark .aq-band-note { color: #8FA6B8; }
.aq-band-actions { margin-top: 26px; }
.aq-band--dark .aq-btn.aq-btn-quiet,
.aq-page .aq-band--dark .aq-btn.aq-btn-quiet {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}
.aq-band--dark .aq-btn.aq-btn-quiet:hover,
.aq-page .aq-band--dark .aq-btn.aq-btn-quiet:hover { border-color: #fff; color: #fff; }

/* Search form — one implementation, rendered by the drawer, the footer and the
   hub pages, so it also has to stand on its own outside a .aq-page shell. -- */

.aq-search { display: grid; gap: 8px; margin: 0; }
.aq-search label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
}
.aq-search--dark label { color: #9FB4C6; }
.aq-search-row { display: flex; align-items: stretch; gap: 8px; }
.aq-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--aq-line, #B9C8D6);
  border-radius: var(--aq-radius, 8px);
  background: #fff;
  color: var(--aq-ink, #17212B);
  font-size: 14.5px;
}
.aq-search input[type="search"]::placeholder { color: #8C99A6; }
.aq-search input[type="search"]:focus {
  outline: 2px solid var(--color-focus, #B55718);
  outline-offset: 1px;
  border-color: var(--aq-blue, #0F5FB8);
}
.aq-search--wide input[type="search"] { min-height: 48px; font-size: 15.5px; }

@media (max-width: 520px) {
  .aq-search-row { flex-wrap: wrap; }
  .aq-search-row .aq-btn { width: 100%; }
}

/* Sub-heading inside a section that groups more than one list, and a plain note
   line under a record. --------------------------------------------------- */

.aq-subhead { margin: 32px 0 14px; font-size: 18px; font-weight: 700; color: var(--aq-ink); }
.aq-subhead:first-of-type { margin-top: 0; }
.aq-note { margin: 20px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--aq-muted); max-width: 72ch; }

/* Record cards — maintained records (technical resources, evidence) and
   written articles (Learn) are listed the same way: a type line, a title, the
   record's own facts, a short summary and the action that opens it. --------- */

.aq-records {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.aq-records > li { display: flex; min-width: 0; }

.aq-record {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: 20px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius, 8px);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.aq-record:hover { border-color: var(--aq-line, #B9C8D6); box-shadow: var(--aq-shadow, 0 10px 30px rgba(13, 27, 42, 0.06)); }

.aq-record-type {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
}
.aq-record-title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.aq-record-title a { color: var(--aq-ink, #17212B); text-decoration: none; }
.aq-record-title a:hover { color: var(--aq-blue, #0F5FB8); text-decoration: underline; }

.aq-record-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--aq-muted, #687684);
}
.aq-record-meta li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aq-record-meta b { font-weight: 700; color: var(--aq-body, #40505E); }
.aq-record-meta--wide { gap: 10px 26px; font-size: 13px; max-width: 720px; }

.aq-record-text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--aq-body, #40505E); }

.aq-record-actions {
  margin: auto 0 0;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.aq-record-actions .aq-btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; }

@media (max-width: 680px) {
  .aq-record { padding: 16px; }
}

/* Labelled block pairs — conditions and result on an evidence record, working
   environment and technical challenges on an application page. ------------ */

.aq-record-pair {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.aq-record-block {
  padding: 20px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-left: 3px solid var(--aq-line, #B9C8D6);
  border-radius: var(--aq-radius, 8px);
  background: var(--aq-alt, #F5F7FA);
}
.aq-record-block h2 {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
}
.aq-record-block p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--aq-ink, #17212B); overflow-wrap: anywhere; }
.aq-record-block--result { border-left-color: var(--aq-blue, #0F5FB8); background: #fff; }

@media (max-width: 680px) {
  .aq-record-block { padding: 16px; }
}

/* ---------------------------------------------------------------------------
 * The skip link — the first element of the document (header.php).
 *
 * Every page opens with the same header: brand, primary navigation, the search
 * field and the cart. A keyboard or screen-reader visitor would walk through all of
 * it on every page before reaching the page's own heading, so this link jumps to
 * <main id="aq-content">.
 *
 * The id is deliberately not "content": WooCommerce's legacy layout stylesheet
 * scopes the 48% widths of the product gallery and the product summary to
 * "#content", and an id of "content" lets those ID rules outrank this theme's
 * class selectors, squeezing both columns into half of their grid area.
 *
 * It is moved off screen rather than hidden, so it stays in the tab order and in
 * the page's text; the focus rule brings it back into the corner it covers.
 * ------------------------------------------------------------------------- */
.aq-skip {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--color-ink, #17212b);
  color: var(--color-background, #f6f3ed);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-control, 8px) 0;
}
.aq-skip:focus {
  left: 0;
  outline: 3px solid var(--color-focus, #b55718);
  outline-offset: 2px;
}

/*
 * The skip target is a landmark, not a control: it only has to receive the caret so
 * the browser scrolls the page's heading into view. Its own outline would draw a
 * frame around the whole page, so it is suppressed; everything inside keeps its
 * normal focus styles.
 */
main[tabindex="-1"]:focus { outline: none; }

/* Figures, captions, footnote references and the closing sources list of
   Markdown-authored articles. Shared, because any post type can carry them. */
.aq-article-figure { margin: 30px 0; }
.aq-article-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-control, 8px); }
.aq-article-figure figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--aq-body, #40505E); }
.aq-note-ref a { font-size: 0.78em; text-decoration: none; padding: 0 1px; }
.aq-article-sources { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(23, 33, 43, 0.12); }
.aq-article-sources h2 { font-size: 18px; margin: 0 0 12px; }
.aq-article-sources ol { margin: 0; padding-left: 20px; }
.aq-article-sources li { font-size: 14.5px; line-height: 1.7; color: var(--aq-body, #40505E); }
.aq-article-sources li + li { margin-top: 8px; }

/* Pipe tables in Markdown-authored articles: readable rows instead of pipes. */
.aq-md-table { margin: 28px 0; overflow-x: auto; }
.aq-md-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.aq-md-table th,
.aq-md-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(23, 33, 43, 0.12); }
.aq-md-table thead th { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aq-body, #40505E); background: rgba(23, 33, 43, 0.04); }
.aq-md-table tbody tr:last-child td { border-bottom: 0; }
.aq-md-table a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aq-md-table code { font-size: 13px; }