/** * AksharAvira — front end. * * ============================================================================= * FROZEN SELECTORS — the plugin's inquiry.js binds to these by name. * Restyle them freely; NEVER rename them. Breaking one means the modal silently * stops opening, with no console error. * * #av-inquiry-modal #av-inquiry-form #av-newsletter-form * .av-modal__panel .av-form__status .av-form__submit * .av-newsletter__status .has-error * [data-av-open-inquiry] [data-av-close-inquiry] * body.av-modal-open .is-open * .av-hp — honeypot. Must stay visually hidden but NOT display:none: * some bots treat display:none as a tell, and screen readers skip it. * ============================================================================= * * There are no brand colours, font names or sizes in this file. They arrive as * custom properties from inc/tokens.php (settings-derived) and tokens.css * (static). If you are about to type a hex value here, add a setting instead. * The only literals are neutral scaffolding and WhatsApp's brand green, which * WhatsApp fixes, not us. * * Layer order is declared once, below. Note the UNLAYERED TAIL at the very * bottom: unlayered CSS always beats layered CSS regardless of source order, and * WordPress core block styles are unlayered. Block-editor overrides must live * there or core silently outranks every component here. * * Naming: * .av-block__element--modifier structure (CSS owns this) * .is-* / .has-* state (JS → CSS channel) * [data-av-*] behaviour (JS owns this; CSS never styles it) * .av-u-* utility */ @layer reset, base, layout, components, utilities; /* ============================================================================ RESET ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The whole rem scale — spacing included — hangs off this. */ font-size: var(--av-base); scroll-padding-top: calc(var(--av-header-h) + 1rem); } /* * The single most valuable accessibility block in the file. It neutralises * every transition and animation defined below, so no component needs to * think about reduced motion individually. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--av-ground); color: var(--av-text); font-family: var(--av-font-body); font-size: var(--av-fs-base); line-height: var(--av-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* * clip, NOT hidden. `overflow-x: hidden` forces overflow-y to compute * to auto, which makes a scroll container — but the page * actually scrolls on , so body's scrollHeight equals its * clientHeight and it never moves. Every `position: sticky` * descendant then resolves against that frozen scrollport and can * never activate. Measured: the article sidebar, and the asides on * the contact, product and service templates, all sat still. * * `clip` blocks the same horizontal overflow without establishing a * scroll container, so sticky resolves against and works. * Unsupported in Safari < 16, where the declaration is simply dropped * — no horizontal guard, which the layout audit says nothing needs. */ overflow-x: clip; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } /*

is normalised in the unlayered tail — see the note there. It cannot be done from inside a layer. */ button, input, select, textarea { font: inherit; color: inherit; } } /* ============================================================================ BASE — element defaults ========================================================================== */ @layer base { h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--av-font-head); font-weight: var(--av-head-weight); letter-spacing: var(--av-head-track); line-height: var(--av-lh-tight); color: var(--av-ink); text-wrap: balance; } h1 { font-size: var(--av-fs-h1); } h2 { font-size: var(--av-fs-h2); } h3 { font-size: var(--av-fs-h3); } h4 { font-size: var(--av-fs-h4); } p { margin: 0; } a { color: var(--av-primary); text-underline-offset: 0.18em; } a:hover { color: var(--av-primary-hover); } /* Visible, generous, and never removed. */ :focus-visible { outline: 2px solid var(--av-primary); outline-offset: 3px; border-radius: var(--av-radius-sm); } ::selection { background: rgb(var(--av-primary-rgb) / 15%); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .av-skip { position: absolute; left: -9999px; top: 0; z-index: var(--av-z-skip); padding: 0.75rem 1.25rem; background: var(--av-primary); color: var(--av-on-primary); border-radius: 0 0 var(--av-radius-sm) 0; text-decoration: none; font-weight: 600; } .av-skip:focus { left: 0; top: 0; color: var(--av-on-primary); } /* Icons inherit colour and take their stroke from the token. */ .av-icon { stroke-width: var(--av-icon-stroke); flex: 0 0 auto; } } /* ============================================================================ LAYOUT ========================================================================== */ @layer layout { .av-wrap { width: min(100% - (var(--av-gutter) * 2), var(--av-container)); margin-inline: auto; } .av-wrap--wide { max-width: var(--av-container-wide); } .av-wrap--narrow { max-width: 820px; } .av-section { padding-block: var(--av-section-y); } .av-section--sm { padding-block: var(--av-section-y-sm); } .av-section--flush-top { padding-block-start: 0; } .av-section--flush-bottom { padding-block-end: 0; } /* Alternating grounds. --dark re-themes its descendants via the card chassis. */ .av-section--muted { background: var(--av-muted); } .av-section--surface { background: var(--av-surface); } .av-section--dark { background: var(--av-deep); color: var(--av-on-dark-muted); } /* The --dark text overrides are NOT here. They set the same properties as rules in the components layer, and layer order beats specificity, so a layout-layer override loses no matter how specific it is. They live at the end of the components layer instead — search "dark-ground text". */ /* * Generic gradient surface. Currently unused — the hero, CTA and newsletter * each carry their own version — but kept as the shared definition, and kept * on the SAME vivid ramp as those three so a future section that reaches for * it does not reintroduce the near-black gradient the others were moved off. */ .av-section--gradient { position: relative; background: radial-gradient(65% 85% at 88% 88%, rgb(var(--av-accent-rgb) / 30%) 0%, transparent 62%), radial-gradient(60% 80% at 8% 4%, rgb(255 255 255 / 12%) 0%, transparent 58%), linear-gradient(125deg, var(--av-primary-hover) 0%, var(--av-primary) 45%, var(--av-secondary) 100%); color: var(--av-on-dark-muted); isolation: isolate; } /* * Prose — long-form editor content. * * 68ch is the readable measure, but a 68ch column pinned to the left of a * 1280px container leaves ~600px of dead space beside it, which is what the * About page looked like. Centre it by default; the split layouts below opt * out, because there the column sits beside something. */ .av-prose { max-width: 68ch; margin-inline: auto; display: flex; flex-direction: column; gap: var(--av-para-space); } /* Inside a split or a card, prose is one column of two — do not centre it. The product page's main column is the same situation: centring pushed its copy 63px right of the page h1 it sits under, so nothing lined up. */ .av-u-split .av-prose, .av-card .av-prose, .av-product__main .av-prose { margin-inline: 0; max-width: none; } /* * When prose IS the page container — page.php and page-about.php put both * .av-wrap and .av-prose on one element — fill the container like the * homepage instead of collapsing to a 68ch strip with dead side margins * (the "not the same container as homepage" complaint). The container width * comes back; only the text RUNS keep a readable measure (left-anchored), so * grids, columns, wide blocks and the product shortcode span full width. * * Scoped to .av-wrap.av-prose so a standalone reading column (single.php's * blog prose, nested inside .av-wrap--narrow) still gets its 68ch measure. */ .av-wrap.av-prose { max-width: none; } .av-wrap.av-prose > :not(.alignwide):not(.alignfull):not(.wp-block-columns):not(.av-prose__bleed):not([class*="av-u-grid"]) { max-width: 72ch; } /* Explicit full-container breakout for shortcode/grid output inside prose. */ .av-prose__bleed { max-width: none; width: 100%; } .av-prose > h2 { margin-block-start: 1.5em; } .av-prose > h3 { margin-block-start: 1em; } .av-prose > :first-child { margin-block-start: 0; } .av-prose ul, .av-prose ol { margin: 0; padding-inline-start: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; } .av-prose img { border-radius: var(--av-radius-img); } } /* ============================================================================ UTILITIES ========================================================================== */ @layer utilities { /* * One auto-fit grid replaces the five bespoke grid classes the old CSS had * (cards-grid, offer-grid, quotes, certgrid, statband__grid). */ .av-u-grid { display: grid; gap: var(--av-gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); } .av-u-grid--min-200 { --min: 200px; } .av-u-grid--min-240 { --min: 240px; } .av-u-grid--min-280 { --min: 280px; } .av-u-grid--min-320 { --min: 320px; } /* * auto-fill keeps the empty tracks that auto-fit collapses, so a grid with a * single item leaves it at column width instead of stretching it across the * whole row. Used by search/blog results, where a 1-result page otherwise * rendered one enormous full-width card. */ .av-u-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 260px), 100%), 1fr)); justify-content: start; } /* * Equal card height in a row. * * .av-u-grid relies on the default align-items:stretch, so a card that is a * direct grid child already fills its row. But where a card is wrapped (the * product archive wraps each in a data-av-reveal div for the stagger), the * WRAPPER stretches and the card inside sits at content height. Make the * wrapper a flex column and let the card fill it, so tiles line up whether or * not they are wrapped. */ /* * :not(.av-card) is essential. This rule exists for a plain WRAPPER div that * holds a card — but some templates put data-av-reveal on the card itself * (the certification list does). Without the guard this forced those cards to * flex-direction:column and stretched their children, which silently turned * the row-layout cert card into a centred stack with an orphaned tick. */ .av-u-grid > [data-av-reveal]:not(.av-card), .av-u-cols-2 > [data-av-reveal]:not(.av-card), .av-u-cols-3 > [data-av-reveal]:not(.av-card), .av-u-cols-4 > [data-av-reveal]:not(.av-card) { display: flex; flex-direction: column; } .av-u-grid > [data-av-reveal]:not(.av-card) > *, .av-u-cols-2 > [data-av-reveal]:not(.av-card) > *, .av-u-cols-3 > [data-av-reveal]:not(.av-card) > *, .av-u-cols-4 > [data-av-reveal]:not(.av-card) > * { flex: 1 1 auto; } .av-u-grid > .av-card, .av-u-cols-2 > .av-card, .av-u-cols-3 > .av-card, .av-u-cols-4 > .av-card, .av-u-grid > [data-av-reveal] > .av-card, .av-u-cols-2 > [data-av-reveal] > .av-card, .av-u-cols-3 > [data-av-reveal] > .av-card, .av-u-cols-4 > [data-av-reveal] > .av-card { height: 100%; } /* Fixed column counts, collapsing on small screens. */ .av-u-cols-2, .av-u-cols-3, .av-u-cols-4 { display: grid; gap: var(--av-gap); } .av-u-cols-2 { grid-template-columns: repeat(2, 1fr); } .av-u-cols-3 { grid-template-columns: repeat(3, 1fr); } .av-u-cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .av-u-cols-3, .av-u-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .av-u-cols-2, .av-u-cols-3, .av-u-cols-4 { grid-template-columns: 1fr; } } /* Split layouts — the alternating image/text rhythm. */ .av-u-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, var(--av-gap-lg)); align-items: center; } .av-u-split--wide-left { grid-template-columns: 1.15fr 0.85fr; } .av-u-split--wide-right { grid-template-columns: 0.85fr 1.15fr; } @media (max-width: 900px) { .av-u-split, .av-u-split--wide-left, .av-u-split--wide-right { grid-template-columns: 1fr; } } /* Reverse visual order without touching DOM order (keeps reading order sane). */ @media (min-width: 901px) { .av-u-split--reverse > :first-child { order: 2; } } .av-u-stack { display: flex; flex-direction: column; gap: var(--av-gap); align-items: flex-start; } .av-u-stack--sm { gap: var(--av-gap-sm); } .av-u-stack--center { align-items: center; text-align: center; } .av-u-row { display: flex; flex-wrap: wrap; gap: var(--av-gap-sm); align-items: center; } /* Anything wide must scroll inside itself, never the page. */ .av-u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* * The utilities below exist because the same eight declarations were being * repeated as inline style="" attributes across 22 call sites. Inline styles * cannot be kept consistent, cannot be overridden by a modifier, and cannot * be audited — which is exactly how the spacing drifted apart. */ /* Strip list chrome. A

fell back to the UA default — each value on its * own line under a 40px indent — the body had no padding, and because the * body never grew, the auto top margin on .av-more had nothing to push * against, so CTAs sat wherever the copy happened to end. * * This is the shared component; catalogue.css keeps only the filter bar and * other archive-specific furniture. */ .av-pcard { --card-pad: 0; overflow: hidden; } .av-pcard__media { position: relative; border-radius: 0; } .av-pcard__media img, .av-pcard__media .av-ph { width: 100%; aspect-ratio: 640 / 420; object-fit: cover; border-radius: 0; } /* * Text-only card, when Catalogue → "Image on product cards" suppresses the * media block. * * A thin brand rule along the top replaces the visual weight the image was * carrying. Without it a grid of text cards reads as a table that has lost * its lines — there is nothing to mark where one product ends and the next * begins beyond a hairline border. */ .av-pcard--flat { border-block-start: 3px solid var(--av-primary); } /* The body's top padding was tuned to sit under an image; with the media gone the title crowds the rule above it. */ .av-pcard--flat .av-pcard__body { padding-block-start: 1.4rem; } .av-pcard__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-width: 0; } .av-pcard__title { font-size: 1rem; line-height: 1.3; } /* CAS is what B2B buyers scan for — give it monospace-like alignment. */ .av-pcard__specs { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--av-fs-xs); } .av-pcard__spec { display: flex; gap: 0.4rem; } .av-pcard__spec dt { color: var(--av-text-subtle); font-weight: 600; flex: 0 0 auto; min-width: 2.4rem; } /* margin:0 kills the UA's default

indent. */ .av-pcard__spec dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--av-text); overflow-wrap: anywhere; } .av-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: auto; padding-block-start: 0.6rem; border-top: 1px solid var(--av-border); } /* .av-more carries margin-block-start:auto for cards where it is the only footer child; in this flex row that would push it off the baseline. */ .av-pcard__foot .av-more { margin-block-start: 0; } /* Right-hand group: WhatsApp then Details, with the badge still pushed left by the foot's space-between. */ .av-pcard__actions { display: inline-flex; align-items: center; gap: 0.6rem; } /* * WhatsApp enquiry on the card. * * position/z-index are load-bearing: the card title carries .av-card__link, * whose ::after stretches over the whole card to make it one big click * target. Without lifting above that overlay this link would be unclickable * — the card would swallow every tap. * * 32px is below the 44px pointer-target guideline, which is a deliberate * trade in a dense 4-across grid: it sits beside the always-available * full-size button on the product page, and the whole card remains tappable * for the primary action. */ .av-pcard__wa { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgb(37 211 102 / 14%); color: #0b6b35; /* 5.96:1 on the tint over a white card */ transition: background-color var(--av-dur) var(--av-ease), color var(--av-dur) var(--av-ease); } .av-pcard__wa:hover, .av-pcard__wa:focus-visible { background: #25d366; color: #04310f; /* 7.30:1 — same pair as the other WhatsApp controls */ } /* Availability badge. */ .av-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--av-radius-pill); } /* * Brand green on its own 10% tint measures 3.13:1 — under AA, and this text * is 11px, so the large-text allowance does not apply. Mixing toward ink * lands ~4.9:1 and still reads as the same green. */ .av-badge.is-yes { background: rgb(var(--av-success-rgb) / 10%); color: color-mix(in srgb, var(--av-success) 72%, var(--av-ink)); } .av-badge.is-no { background: rgb(var(--av-ink-rgb) / 7%); color: var(--av-text-subtle); } /* The post card reuses .av-service__text, whose vertical centring is meant for short service blurbs and leaves a blog excerpt floating. */ .av-card--bleed .av-service__text { justify-content: flex-start; } /* --------------------------------------------------------- BLOG SECTION */ /* * The grid itself is .av-u-grid, which auto-fits from three columns down to * one — no breakpoints here on purpose. * * .av-u-stack aligns its children to flex-start. The CTA reads as a closing * action so it centres under the grid, done on the element itself rather * than with .av-u-stack--center, which would also force text-align:center * onto every card in the row. */ .av-blogsec__more { align-self: center; margin: 0; } /* ------------------------------------------------------------- PERSON */ .av-person { overflow: hidden; } .av-person .av-pcard__media img, .av-person .av-pcard__media .av-ph { aspect-ratio: 1; object-fit: cover; border-radius: 0; } /* ------------------------------------------------------------- PROCESS */ /* Connect the steps on wide screens — reads as a flow, not four cards. */ @media (min-width: 901px) { .av-process .av-u-grid { position: relative; } .av-process__step::after { content: ""; position: absolute; top: calc(var(--av-card-pad) + 24px); inset-inline-start: 100%; width: var(--av-gap); height: 2px; background: repeating-linear-gradient( 90deg, rgb(var(--av-primary-rgb) / 30%) 0 4px, transparent 4px 8px ); } .av-process__step:last-child::after { display: none; } } } /* ============================================================================ CHROME — topbar, header, footer ========================================================================== */ @layer components { /* ---------------------------------------------------------------- TOPBAR */ /* * Shimmer — a slow highlight sweeping across the deep bar. * * Done as a moving BACKGROUND rather than a sliding ::after element, and * that choice is load-bearing: the element version needed `overflow: hidden` * to stop the sheen spilling out of the bar, and that clipped the language * switcher's dropdown — a 320px menu inside a 45px bar, so it opened and was * entirely invisible. A background layer is confined to the box for free, so * the bar can stay `overflow: visible` and the dropdown can escape it. * * Low alpha, behind the text, and off entirely under reduced motion. */ .av-topbar { background-color: var(--av-deep); background-image: linear-gradient( 100deg, transparent 40%, rgb(255 255 255 / 7%) 48%, rgb(var(--av-accent-rgb) / 10%) 53%, transparent 61% ); background-repeat: no-repeat; background-size: 260% 100%; color: var(--av-on-dark-muted); font-size: var(--av-fs-xs); position: relative; animation: av-sheen 7s var(--av-ease) infinite; } @keyframes av-sheen { 0% { background-position: 130% 0; } 55% { background-position: -30% 0; } 100% { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { .av-topbar { animation: none; background-image: none; } } .av-topbar__inner { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 0.6rem; } .av-topbar__msg { display: inline-flex; align-items: center; gap: 0.5rem; } .av-topbar__contact { display: flex; flex-wrap: wrap; gap: 1.25rem; } .av-topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--av-dur) var(--av-ease); } .av-topbar a:hover { color: var(--av-on-dark); } .av-topbar .av-icon { opacity: 0.55; } @media (max-width: 860px) { .av-topbar__msg { display: none; } .av-topbar__inner { justify-content: center; } } /* ---------------------------------------------------------------- HEADER */ .av-sentinel { position: absolute; height: 1px; width: 1px; pointer-events: none; } .av-header { background: var(--av-surface); border-bottom: 1px solid var(--av-border); z-index: var(--av-z-sticky); transition: box-shadow var(--av-dur) var(--av-ease), background-color var(--av-dur) var(--av-ease); } .av-header--sticky { position: sticky; top: 0; } .av-header.is-stuck { box-shadow: var(--av-shadow-md); background: rgb(var(--av-surface-rgb) / 92%); backdrop-filter: blur(10px); } .av-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--av-gap); min-height: var(--av-header-h); transition: min-height var(--av-dur) var(--av-ease); } .av-header.is-stuck .av-header__inner { min-height: var(--av-header-h-stuck); } /* ------------------------------------------------ FLOATING HEADER STYLE * Optional layout (Site Settings → Header → Header style): the bar becomes a * dark rounded pill inset from the page edges rather than a full-width band. * The chrome moves onto .av-header__inner; .av-header itself goes * transparent so the pill appears to float over the page. * -------------------------------------------------------------------- */ .av-header--floating { background: transparent; border-bottom: 0; padding-block: 0.85rem; } .av-header--floating .av-header__inner { background: var(--av-deep); border-radius: var(--av-radius-pill); padding-inline: 1.25rem; min-height: 64px; box-shadow: var(--av-shadow-lg); transition: min-height var(--av-dur) var(--av-ease), background-color var(--av-dur) var(--av-ease); } /* Stuck: the pill tightens and frosts; the bar behind it stays transparent so the full-width white sheet never reappears. */ .av-header--floating.is-stuck { background: transparent; box-shadow: none; backdrop-filter: none; } .av-header--floating.is-stuck .av-header__inner { background: rgb(var(--av-deep-rgb) / 90%); backdrop-filter: blur(12px); min-height: 56px; } .av-header--floating .av-logo { color: var(--av-on-dark); } /* * Colour inversion is DESKTOP ONLY, and that scope is load-bearing. * * Below 1025px the nav is a fixed drawer with a white (--av-surface) * background. Inverting these links globally would paint white text on that * white drawer and make the whole menu invisible — the same failure mode as * the newsletter button. Above 1025px the links sit on the dark pill, which * is the only place the inversion is correct. */ @media (min-width: 1025px) { .av-header--floating .av-menu a { color: var(--av-on-dark-muted); } .av-header--floating .av-menu > li > a:hover, .av-header--floating .av-menu > .current-menu-item > a, .av-header--floating .av-menu > .current-menu-ancestor > a { color: var(--av-on-dark); } .av-header--floating .av-menu > li > a::after { background: var(--av-accent); } /* The dropdown is still a light card, so its links keep ink. */ .av-header--floating .av-menu .sub-menu a { color: var(--av-ink); } .av-header--floating .av-menu .sub-menu a:hover { color: var(--av-primary); } .av-header--floating .av-nav__quote { color: var(--av-on-dark-muted); } .av-header--floating .av-nav__quote:hover { color: var(--av-on-dark); } } /* The burger sits on the pill at every width, so it inverts unconditionally. Its bars are all `background: currentColor`, so setting the colour on the button covers the span and both pseudo-elements in one rule. */ .av-header--floating .av-burger { color: var(--av-on-dark); } .av-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--av-ink); flex: 0 0 auto; } .av-logo__img { max-height: 44px; width: auto; transition: max-height var(--av-dur) var(--av-ease); } .av-header.is-stuck .av-logo__img { max-height: 36px; } .av-logo__text { font-family: var(--av-font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; } /* --- primary nav --- */ .av-nav { display: flex; align-items: center; gap: var(--av-gap-lg); } .av-menu { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .av-menu > li { position: relative; } .av-menu a { color: var(--av-ink); text-decoration: none; font-family: var(--av-font-head); font-weight: 500; font-size: 0.9375rem; padding-block: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem; position: relative; } /* Underline grows from the centre on hover / when current. */ .av-menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--av-primary); border-radius: 2px; transform: scaleX(0); transition: transform var(--av-dur) var(--av-ease-out); } .av-menu > li > a:hover::after, .av-menu > .current-menu-item > a::after, .av-menu > .current-menu-ancestor > a::after, .av-menu > .current-menu-parent > a::after { transform: scaleX(1); } .av-menu > li > a:hover, .av-menu > .current-menu-item > a { color: var(--av-primary); } /* --- mega menu --- */ .av-menu .sub-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 260px; background: var(--av-surface); border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); box-shadow: var(--av-shadow-lg); list-style: none; margin: 0; padding: 0.5rem; display: flex; flex-direction: column; z-index: var(--av-z-dropdown); /* Fade + lift. visibility keeps it out of the tab order when closed. */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--av-dur) var(--av-ease), transform var(--av-dur) var(--av-ease-out), visibility var(--av-dur); } .av-menu li:hover > .sub-menu, .av-menu li:focus-within > .sub-menu, .av-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .av-menu .sub-menu a { padding: 0.6rem 0.8rem; border-radius: var(--av-radius-sm); display: block; font-weight: 500; width: 100%; } .av-menu .sub-menu a::after { display: none; } .av-menu .sub-menu a:hover { background: var(--av-muted); color: var(--av-primary); } .av-nav__actions { display: flex; align-items: center; gap: var(--av-gap-sm); flex: 0 0 auto; } .av-nav__quote { background: none; border: 0; font-family: var(--av-font-head); font-weight: 500; font-size: 0.9375rem; color: var(--av-ink); cursor: pointer; padding: 0.5rem 0; white-space: nowrap; } .av-nav__quote:hover { color: var(--av-primary); } .av-nav__empty a { font-size: var(--av-fs-sm); } /* --- burger --- */ .av-burger { display: none; background: none; border: 0; padding: 0.6rem; cursor: pointer; color: var(--av-ink); order: 3; } .av-burger__box, .av-burger__box span, .av-burger__box::before, .av-burger__box::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--av-dur) var(--av-ease), opacity var(--av-dur) var(--av-ease); } .av-burger__box { position: relative; background: transparent; } .av-burger__box::before, .av-burger__box::after { content: ""; position: absolute; left: 0; } .av-burger__box::before { top: -7px; } .av-burger__box::after { top: 7px; } .av-burger[aria-expanded="true"] .av-burger__box span { opacity: 0; } .av-burger[aria-expanded="true"] .av-burger__box::before { transform: translateY(7px) rotate(45deg); } .av-burger[aria-expanded="true"] .av-burger__box::after { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1024px) { .av-burger { display: block; } .av-nav { position: fixed; inset: 0 0 0 26%; background: var(--av-surface); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 5.5rem 1.5rem 2rem; transform: translateX(100%); transition: transform var(--av-dur-slow) var(--av-ease-out); overflow-y: auto; box-shadow: -20px 0 40px -20px rgb(var(--av-deep-rgb) / 30%); z-index: var(--av-z-overlay); } .av-nav.is-open { transform: translateX(0); } .av-menu { flex-direction: column; align-items: stretch; gap: 0; } .av-menu > li { border-bottom: 1px solid var(--av-border); } .av-menu a { padding: 0.9rem 0; font-size: 1rem; } .av-menu > li > a::after { display: none; } .av-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 0.5rem 0.85rem; min-width: 0; } .av-nav__actions { flex-direction: column; align-items: stretch; margin-block-start: var(--av-gap); gap: var(--av-gap-sm); } .av-nav__actions .av-btn { width: 100%; } body.av-nav-open { overflow: hidden; } } @media (max-width: 560px) { .av-nav { inset: 0; } } /* ---------------------------------------------------------------- FOOTER */ .av-footer { background: var(--av-footer); color: var(--av-on-footer-muted); margin-block-start: auto; } .av-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--av-gap-lg); padding-block: clamp(3rem, 6vw, 4.5rem); } @media (max-width: 1024px) { .av-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .av-footer__grid { grid-template-columns: 1fr; gap: var(--av-gap); } } .av-footer .av-logo, .av-footer .av-logo__text { color: var(--av-on-footer); } .av-footer__brand { display: flex; flex-direction: column; gap: var(--av-gap-sm); align-items: flex-start; } .av-footer__intro { font-size: var(--av-fs-sm); max-width: 42ch; color: var(--av-on-footer-subtle); } .av-footer__title { font-family: var(--av-font-head); font-size: var(--av-fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--av-on-footer); margin-block-end: 1rem; } .av-footer__menu, .av-contact-list, /* Icon-only round buttons. These were always sized for an icon — the markup was emitting the network's NAME as text, which then had to fit a 36px circle. The brand marks come from Core\Brands; the name stays as screen-reader text. */ .av-social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .av-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--av-on-footer-surface); border: 1px solid var(--av-on-footer-border); color: var(--av-on-footer-muted); transition: background-color var(--av-dur) var(--av-ease), border-color var(--av-dur) var(--av-ease), color var(--av-dur) var(--av-ease), transform var(--av-dur) var(--av-ease-out); } .av-social a:hover { background: var(--av-primary); border-color: var(--av-primary); color: var(--av-on-primary); transform: translateY(-2px); } .av-footer a { color: inherit; text-decoration: none; font-size: var(--av-fs-sm); transition: color var(--av-dur) var(--av-ease); } .av-footer a:hover { color: var(--av-on-footer); } .av-footer__menu a:hover { padding-inline-start: 0.25rem; } .av-footer__menu a { transition: color var(--av-dur) var(--av-ease), padding var(--av-dur) var(--av-ease); } .av-contact-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--av-fs-sm); } .av-contact-list .av-icon { margin-block-start: 0.15rem; opacity: 0.45; } .av-footer__bar { border-top: 1px solid var(--av-on-footer-border); } .av-footer__bar-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1.25rem; font-size: var(--av-fs-xs); } .av-legal__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; } /* Certification strip in the footer. */ .av-footer__certs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.5rem; } .av-footer__cert { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--av-radius-pill); background: var(--av-on-footer-surface); border: 1px solid var(--av-on-footer-border); color: var(--av-on-footer-muted); } /* -------------------------------------------------------------- WHATSAPP */ /* WhatsApp green is fixed by WhatsApp's brand guidelines, not our palette. */ .av-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: var(--av-z-sticky); display: inline-flex; align-items: center; gap: 0.5rem; background: #25d366; color: #04310f; border-radius: var(--av-radius-pill); padding: 0.75rem 1.15rem; font-family: var(--av-font-head); font-weight: 700; font-size: var(--av-fs-sm); text-decoration: none; box-shadow: var(--av-shadow-lg); transition: transform var(--av-dur) var(--av-ease); } .av-whatsapp:hover { color: #04310f; transform: translateY(-2px); } /* On mobile the sticky CTA bar takes the bottom; move the FAB up. */ @media (max-width: 720px) { .av-whatsapp { bottom: 76px; } } /* ------------------------------------------------------- STICKY MOBILE CTA */ .av-stickycta { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: var(--av-z-sticky); background: rgb(var(--av-surface-rgb) / 96%); backdrop-filter: blur(10px); border-top: 1px solid var(--av-border); padding: 0.6rem var(--av-gutter); gap: 0.5rem; } @media (max-width: 720px) { .av-stickycta { display: flex; } .av-stickycta .av-btn { flex: 1; } body { padding-block-end: 68px; } } } /* ============================================================================ PLUGIN-OWNED MARKUP — modal + forms The theme styles HTML it does not emit. See the frozen list at the top. ========================================================================== */ @layer components { .av-modal { position: fixed; inset: 0; z-index: var(--av-z-modal); display: grid; place-items: center; padding: 1.25rem; } .av-modal[hidden] { display: none; } .av-modal__backdrop { position: absolute; inset: 0; background: var(--av-overlay); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--av-dur) var(--av-ease); } .av-modal.is-open .av-modal__backdrop { opacity: 1; } .av-modal__panel { position: relative; width: min(100%, 640px); max-height: 90vh; overflow-y: auto; background: var(--av-surface); border-radius: var(--av-radius-card); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--av-shadow-xl); transform: translateY(12px) scale(0.99); opacity: 0; transition: transform var(--av-dur-slow) var(--av-ease-out), opacity var(--av-dur-slow) var(--av-ease); } .av-modal.is-open .av-modal__panel { transform: none; opacity: 1; } /* * Form panels are banded instead of being one scrolling box: fixed head, * scrolling body, fixed foot. The old single-scroll panel pushed the heading * out of view and left the submit button below the fold, so the visitor had * to scroll a dialog to find out how to finish it. * * Padding moves to the bands so the scrollbar tracks the panel edge rather * than floating inside a padded box. */ .av-modal__panel--form { display: flex; flex-direction: column; padding: 0; overflow: hidden; width: min(100%, 620px); } .av-modal__head { flex: none; padding: clamp(1.35rem, 3.5vw, 1.85rem) clamp(1.35rem, 4vw, 2.15rem) clamp(1rem, 2.5vw, 1.25rem); padding-inline-end: 3.75rem; /* clears the close button */ background: linear-gradient(180deg, rgb(var(--av-primary-rgb) / 6%), transparent); border-block-end: 1px solid var(--av-border-soft); } .av-modal__close { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 1; display: grid; place-items: center; /* 40px is a comfortable pointer target; the bare glyph before this was roughly 24px and easy to miss. */ width: 40px; height: 40px; background: var(--av-surface); border: 1px solid var(--av-border); border-radius: 50%; cursor: pointer; color: var(--av-text-muted); padding: 0; transition: background-color var(--av-dur) var(--av-ease), border-color var(--av-dur) var(--av-ease), color var(--av-dur) var(--av-ease); } .av-modal__close:hover { color: var(--av-ink); background: var(--av-muted); border-color: var(--av-border-strong); } .av-modal__title { font-size: var(--av-fs-h3); padding-inline-end: 2rem; } .av-modal__panel--form .av-modal__title { padding-inline-end: 0; margin: 0; } .av-modal__intro { margin-block-start: 0.5rem; color: var(--av-text-muted); font-size: 0.9375rem; } .av-modal__panel--form .av-modal__intro { margin-block-start: 0.4rem; margin-block-end: 0; max-width: 46ch; } body.av-modal-open { overflow: hidden; } /* ------------------------------------------------------ 14. INQUIRY FORM */ .av-form { display: flex; flex-direction: column; gap: var(--av-gap-sm); margin-block-start: var(--av-gap); } /* ---- banded layout, used by the inquiry modal ---- */ /* min-height:0 is what actually lets the body scroll: without it the flex item refuses to shrink below its content and the panel grows instead. */ .av-modal__panel--form .av-form { flex: 1; min-height: 0; margin-block-start: 0; gap: 0; } .av-form__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* stops the page scrolling once the body bottoms out */ display: flex; flex-direction: column; gap: var(--av-gap-sm); padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.35rem, 4vw, 2.15rem); } .av-form__foot { flex: none; display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.35rem, 4vw, 2.15rem); background: var(--av-ground); border-block-start: 1px solid var(--av-border-soft); } .av-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--av-gap-sm); } @media (max-width: 520px) { .av-form__grid { grid-template-columns: 1fr; } } .av-form__row { display: flex; flex-direction: column; gap: 0.35rem; } .av-form label { font-family: var(--av-font-head); font-size: var(--av-fs-sm); font-weight: 600; color: var(--av-ink); } .av-form input, .av-form select, .av-form textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--av-border); border-radius: var(--av-radius-input); font-size: 0.9375rem; background: var(--av-surface); color: var(--av-ink); transition: border-color var(--av-dur) var(--av-ease), box-shadow var(--av-dur) var(--av-ease); } .av-form input::placeholder, .av-form textarea::placeholder { color: var(--av-text-subtle); } .av-form input:focus, .av-form select:focus, .av-form textarea:focus { border-color: var(--av-primary); box-shadow: var(--av-shadow-focus); outline: none; } /* Applied by inquiry.js on a 422. */ .av-form .has-error { border-color: var(--av-danger); background: rgb(var(--av-danger-rgb) / 4%); } .av-form textarea { resize: vertical; min-height: 104px; } .av-form__consent { display: flex; gap: 0.6rem; align-items: flex-start; } .av-form__consent input { width: auto; margin-block-start: 0.3rem; flex: 0 0 auto; } .av-form__consent label { font-weight: 400; font-size: var(--av-fs-sm); line-height: 1.5; color: var(--av-text-muted); } /* Native selects: draw our own chevron so Country/Interest match the inputs rather than showing the OS default arrow. */ .av-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; padding-inline-end: 2.4rem; } .av-form__submit { margin-block-start: 0.6rem; width: 100%; padding-block: 0.95rem; font-size: 1rem; } /* In the banded foot the button is already spaced by the flex gap. */ .av-form__foot .av-form__submit { margin-block-start: 0; } /* The status line only occupies space once inquiry.js writes into it — otherwise an empty

would leave a permanent gap above the button. */ .av-form__foot .av-form__status:empty { display: none; } .av-form__foot .av-form__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin: 0; padding: 0; list-style: none; font-size: var(--av-fs-xs); color: var(--av-text-muted); } .av-form__foot .av-form__trust li { display: inline-flex; align-items: center; gap: 0.35rem; } .av-form__foot .av-form__trust .av-icon { color: var(--av-success); } /* Required marker — the bare red asterisk read as an error character. */ .av-form label span[aria-hidden="true"] { color: var(--av-danger); font-weight: 700; } /* * Mobile: a bottom sheet rather than a floating card. A centred dialog on a * short viewport leaves slivers of page above and below and puts the submit * button mid-screen; anchoring to the bottom keeps it under the thumb. */ @media (max-width: 560px) { /* Scoped with :has() so this only reshapes the form dialog — a future confirm/alert modal keeps the centred card. */ .av-modal:has(.av-modal__panel--form) { padding: 0; place-items: end stretch; } .av-modal__panel--form { width: 100%; max-height: 92vh; border-radius: var(--av-radius-card) var(--av-radius-card) 0 0; transform: translateY(24px); } } .av-form__status { margin: 0; font-size: var(--av-fs-sm); min-height: 1.2em; color: var(--av-text-muted); } /* Trust row under the submit — quiet reassurance, not a second CTA. */ .av-form__trust { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; } .av-form__trust li { display: flex; align-items: center; gap: 0.4rem; font-size: var(--av-fs-xs); color: var(--av-text-muted); } .av-form__trust .av-icon { color: var(--av-success); flex: 0 0 auto; } .av-form__status.is-error { color: var(--av-danger); } .av-form__done { text-align: center; padding: 2rem 0.5rem; font-size: 1rem; color: var(--av-success); font-weight: 600; } /* * Honeypot. Visually hidden but NOT display:none — some bots read that as a * tell, and it must stay in the DOM for the server-side check. */ .av-hp { position: absolute !important; left: -9999px; top: -9999px; height: 0; overflow: hidden; } /* ---------------------------------------------------------- NEWSLETTER */ /* * Mirrored version of the CTA ramp. This sat on deep-2 → deep, ending at * near-black, and it renders directly beneath the CTA panel — so the page * closed on two dark slabs in a row, both dull. Running the gradient the * other way keeps the pair related without making them identical. */ .av-newsletter__panel { border-radius: var(--av-radius-card); padding: clamp(2rem, 5vw, 3rem); background: radial-gradient(70% 120% at 100% 0%, rgb(var(--av-accent-rgb) / 26%) 0%, transparent 60%), linear-gradient(125deg, var(--av-secondary) 0%, var(--av-primary) 55%, var(--av-primary-hover) 100%); color: var(--av-on-dark-muted); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; } @media (max-width: 860px) { .av-newsletter__panel { grid-template-columns: 1fr; } } .av-newsletter__copy { display: flex; flex-direction: column; gap: 0.5rem; } .av-newsletter__title { color: var(--av-on-dark); max-width: 20ch; font-size: var(--av-fs-h3); } .av-newsletter__text { color: var(--av-on-dark-muted); font-size: var(--av-fs-sm); max-width: 48ch; } .av-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .av-newsletter__input { flex: 1 1 200px; min-width: 0; padding: 0.85rem 1.1rem; border-radius: var(--av-radius-pill); border: 1px solid rgb(255 255 255 / 20%); background: rgb(255 255 255 / 10%); color: #fff; font-size: 0.9375rem; } .av-newsletter__input::placeholder { color: rgb(255 255 255 / 45%); } .av-newsletter__input:focus { outline: none; border-color: var(--av-accent); background: rgb(255 255 255 / 16%); box-shadow: 0 0 0 3px rgb(var(--av-accent-rgb) / 25%); } /* Colour comes from .av-btn--on-dark (white pill → primary fill on hover), which carries the unlayered text guard so the label can't vanish. This used to force .av-btn--primary here, whose unlayered white-text guard painted white on the white surface below — an invisible button. Layout only now. */ .av-newsletter__btn { flex: 0 0 auto; } .av-newsletter__status { flex: 1 0 100%; margin: 0; font-size: var(--av-fs-xs); min-height: 1.1em; color: var(--av-on-dark-subtle); } .av-newsletter__status.is-error { color: #ffb4ab; } .av-newsletter__status.is-ok { color: var(--av-accent); } } /* ============================================================================ PAGINATION + SEARCH ========================================================================== */ @layer components { .navigation.pagination { margin-block-start: var(--av-gap-lg); display: flex; justify-content: center; } .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; } .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 0.65rem; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); background: var(--av-surface); text-decoration: none; color: var(--av-ink); font-size: var(--av-fs-sm); font-variant-numeric: tabular-nums; transition: background-color var(--av-dur) var(--av-ease), color var(--av-dur) var(--av-ease); } .page-numbers.current, .page-numbers:hover { background: var(--av-primary); border-color: var(--av-primary); color: var(--av-on-primary); } .page-numbers.dots { border-color: transparent; background: none; } .av-search { display: flex; gap: 0.5rem; max-width: 520px; width: 100%; } .av-search__input { flex: 1; padding: 0.8rem 1rem; border: 1px solid var(--av-border); border-radius: var(--av-radius-input); background: var(--av-surface); color: var(--av-ink); font-size: 0.9375rem; } .av-search__input:focus { outline: none; border-color: var(--av-primary); box-shadow: var(--av-shadow-focus); } .av-404__links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 0; margin: var(--av-gap) 0 0; } /* ------------------------------------------- ARTICLE + STICKY SIDEBAR */ /* * A fixed sidebar track rather than a fraction. .av-u-split would give * 0.85fr here — about 520px on a 1280 container — which is a second * column, not a sidebar. A fixed 320px also keeps the reading column at a * sane measure as the viewport grows instead of widening with it. * * minmax(0, 1fr) not 1fr: a grid item defaults to min-width:auto, so one * wide table or

 in a post would push the column past its track and
	 * blow out the page. This is long-form content — that will happen.
	 */
	.av-article {
		display: grid;
		/* 72ch, not 1fr: on a 1280 container a fraction gave the reading column
		   904px — past 90 characters a line, which is punishing over an article
		   this long. Capping the track holds the measure and lets the pair
		   centre in whatever space is left. */
		grid-template-columns: minmax(0, 72ch) 320px;
		justify-content: center;
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start; /* required, or the sticky item stretches and never sticks */
	}

	@media (max-width: 960px) {
		.av-article { grid-template-columns: minmax(0, 1fr); }
	}

	/* Prose centres itself and caps at 68ch when it is the page container. As
	   one column of two it should fill its track and stay left. */
	.av-article__body .av-prose {
		max-width: none;
		margin-inline: 0;
	}

	.av-article__comments {
		margin-block-start: var(--av-gap-lg);
		padding-block-start: var(--av-gap-lg);
		border-block-start: 1px solid var(--av-border-soft);
	}

	.av-article__aside {
		display: flex;
		flex-direction: column;
		gap: var(--av-gap);
		min-width: 0;
	}

	.av-sidecard {
		background: var(--av-surface);
		border: 1px solid var(--av-border-strong);
		border-radius: var(--av-radius-card);
		padding: var(--av-card-pad);
	}

	.av-sidecard__title {
		font-family: var(--av-font-head);
		font-size: var(--av-fs-lg);
		font-weight: 600;
		line-height: 1.3;
		color: var(--av-ink);
		margin: 0 0 var(--av-gap-sm);
	}

	.av-sidecard__text {
		margin: 0 0 var(--av-gap);
		font-size: var(--av-fs-sm);
		line-height: 1.6;
		color: var(--av-text-muted);
	}

	.av-sidecard__list {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.av-sidecard__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.55rem 0.7rem;
		border-radius: var(--av-radius-sm);
		font-size: var(--av-fs-sm);
		color: var(--av-text);
		transition:
			background-color var(--av-dur) var(--av-ease),
			color var(--av-dur) var(--av-ease);
	}

	.av-sidecard__link:hover,
	.av-sidecard__link:focus-visible {
		background: rgb(var(--av-primary-rgb) / 7%);
		color: var(--av-primary);
	}

	/*
	 * The current topic is marked with weight and a tinted ground as well as
	 * colour. Colour alone would fail WCAG 1.4.1 — it is the only thing
	 * separating this row from its neighbours.
	 */
	.av-sidecard__link.is-current {
		background: rgb(var(--av-primary-rgb) / 9%);
		color: var(--av-primary);
		font-weight: 600;
	}

	.av-sidecard__count {
		flex: 0 0 auto;
		font-size: var(--av-fs-xs);
		font-variant-numeric: tabular-nums;
		color: var(--av-text-subtle);
	}

	.av-sidecard__link.is-current .av-sidecard__count { color: inherit; }

	.av-sidecard--contact {
		background: var(--av-muted);
		border-color: transparent;
	}

	.av-sidecard__actions {
		display: flex;
		flex-direction: column;
		gap: var(--av-gap-sm);
		margin-block-start: var(--av-gap);
	}

	/* Full-width buttons: in a 320px column two side-by-side pills wrap into a
	   ragged pair, and the CTA reads as an afterthought. */
	.av-sidecard__actions .av-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------------------------------------------------------- dark-ground text
 * These were in the layout layer, where they were dead: they set the same
 * properties as the component rules above, and a later layer wins over an
 * earlier one no matter how specific the earlier selector is. Nothing used
 * --dark until the Process section did, so the breakage never surfaced —
 * section intros rendered at 2.14:1 on the deep ground.
 *
 * Kept last in components so ordinary component colours are what they
 * override, and so this stays out of the unlayered tail, which is reserved
 * for beating WordPress core.
 */
@layer components {
	/* :not(.av-card ...) is load-bearing. A dark section still contains white
	   cards, and those keep their own light surface — an unscoped
	   `.av-section--dark h3` painted card titles white on white. The card
	   chassis already themes its own text through --card-fg, so headings
	   inside a card must be left to it. */
	.av-section--dark h2:not(.av-card h2),
	.av-section--dark h3:not(.av-card h3),
	.av-section--dark h4:not(.av-card h4),
	.av-section--dark .av-secthead__title { color: var(--av-on-dark); }

	.av-section--dark .av-secthead__intro,
	.av-section--dark > .av-wrap > p { color: var(--av-on-dark-muted); }

	.av-section--dark .av-eyebrow {
		color: var(--av-accent);
		background: rgb(255 255 255 / 10%);
	}
}

/* ============================================================================
   UNLAYERED TAIL
   ----------------------------------------------------------------------------
   MUST stay outside @layer. Unlayered CSS beats layered CSS regardless of
   specificity or source order, and WordPress emits its global styles unlayered.
   Nothing in the @layer blocks above can override them — these rules are the
   only ones that can.

   Because both sides are unlayered here, ordinary specificity decides. Core
   wraps its selectors in :where(), which contributes ZERO specificity, so
   `body a` (0,0,2) beats `a:where(:not(.wp-element-button))` (0,0,1).

   Keep this section short and say why each rule is here.
   ========================================================================== */

/*
 * Links.
 *
 * WordPress core emits, unlayered, from its own theme.json:
 *
 *     a:where(:not(.wp-element-button)) { text-decoration: underline; }
 *
 * That underlines every link on the site — the primary navigation, footer
 * columns, breadcrumbs, card links and any button rendered as an . It cannot
 * be turned off from inside a layer.
 *
 * (The matching `color: var(--av-primary)` came from THIS theme's own
 * theme.json elements.link and has been removed there — it was painting
 * "Explore Products" primary-blue on a primary-blue button, i.e. invisible,
 * while "Watch Overview" was fine because it is a