/*
* 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):
* page shell: palette + font
* … …
* …long-form body copy…
*
*
* The product grid is NOT here: the markup comes from WooCommerce's own
* content-product.php inside , 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; }
/* The store's "featured" flag, on the same loop cards. The availability badge
states the part and stays at the top left; this one is a recommendation and
takes the opposite corner, quiet enough not to compete with it. Both sit in the
card's top padding row, above the photo, which is what keeps them off the
picture and off each other however narrow the card gets. It is a shared rule
rather than a shop rule because the same loop hook prints the badge in the home
and landing grids too. */
.aq-loop-featured {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border: 1px solid var(--aq-border, #DBE3EA);
border-radius: 999px;
background: var(--aq-white, #FFFFFF);
color: var(--aq-ink, #17212B);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
}
.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));
}
/*
* Two columns means two, not "as many 320px cards as fit": auto-fit resolved a
* 1440px screen to three columns, so a four-card section read as a cramped row
* over an almost empty one. With the floor dropped and the count fixed, four
* cards are two rows of two at every width where two cards fit side by side,
* and one per row on a phone (below).
*/
.aq-links[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 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); }
@media (max-width: 680px) {
/* Two columns of this copy are under 300px on a phone, so the two-up section
drops to one card per row here rather than in the card's own text. */
.aq-links[data-cols="2"] { grid-template-columns: minmax(0, 1fr); }
}
/* 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; }
/* The row keeps the kit's own gap but one step wider (14px against .aq-btns'
12px): the band is the page's last word, and its two actions are read as a
pair rather than as a row inside a card. */
.aq-band-actions { margin-top: 26px; gap: 14px; }
.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; }
/*
* The band's actions are one primary and one quiet. The base .aq-btn carries no
* fill of its own — header.php leaves that to the aq-btn-primary / aq-btn-outline
* classes it dresses the header row's buttons in, and this component passes
* neither — so on the band's dark ground the leading action stood as bare white
* text with an outlined quiet button beside it: the stronger of the two read as
* the weaker, and it was the only control on the page with no hover of its own.
* The pair is given its rank here, in the blue the static pages' own closing
* band fills its primary with, at one padding and one type size for both, so a
* longer label is the same control rather than a bigger one. Nothing here needs
* the .aq-page prefix the quiet overrides above carry: the rule they have to
* outrank is .aq-btn itself, one class deep.
*/
.aq-band--dark .aq-band-actions > .aq-btn {
padding: 0 22px;
font-size: 14px;
}
.aq-band--dark .aq-band-actions > .aq-btn:not(.aq-btn-quiet) {
background: var(--aq-blue);
border-color: var(--aq-blue);
color: #fff;
}
.aq-band--dark .aq-band-actions > .aq-btn:not(.aq-btn-quiet):hover {
background: var(--aq-blue-dark);
border-color: var(--aq-blue-dark);
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
* .
*
* 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; }