/* AlienTech vehicles — NZ-side overrides on top of the vendored
 * attnvl.css. Only rules that diverge from upstream because of
 * NZ-side concerns live here.
 */

/* ---------------------------------------------------------------------
 * 0. Lato font (SIL Open Font License 1.1 — see
 *    assets/vendored/fonts/OFL.txt). Self-hosted from the canonical
 *    Google Fonts woff2 build (v25), four weights × two subsets each
 *    so European glyphs are covered without dragging the latin-ext
 *    payload onto plain English content (browsers fetch the latin-ext
 *    file only when the page actually contains a matching code-point).
 *    font-display: swap keeps the system-font fallback visible during
 *    the brief load window.
 * ------------------------------------------------------------------- */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../vendored/fonts/lato-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../vendored/fonts/lato-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendored/fonts/lato-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendored/fonts/lato-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendored/fonts/lato-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendored/fonts/lato-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../vendored/fonts/lato-900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../vendored/fonts/lato-900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.attnvl,
.attnvl input,
.attnvl select,
.attnvl button,
.attnvl textarea {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
 * 1. Sticky-offset variable seed. The upstream defaults to 0 + 0
 *    which makes the sticky controls bar and the sticky table thead
 *    overlap. JS in alientech-vehicles.js measures the live toolbar
 *    height and refines this on load + resize.
 * ------------------------------------------------------------------- */
:root {
    --attnvl-controls-height: 96px;
}

/* ---------------------------------------------------------------------
 * 2. Neutralise the upstream `section[aria-labelledby="attnvl-title"]`
 *    grid layout so our flat toolbar can flow as a normal block.
 *    Upstream's grid splits search / promo / filters / pagination
 *    into a four-column band on desktop; we use a single `.attnvl-
 *    toolbar` instead, so the grid would only fight us.
 * ------------------------------------------------------------------- */
.attnvl-archive section[aria-labelledby="attnvl-title"] {
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
}

.attnvl-archive section[aria-labelledby="attnvl-title"]::before {
    /* Upstream emits a sticky background pseudo-element behind the
     * grid's row 2 to mask the table behind the sticky band. We
     * replace this with a real `.attnvl-toolbar` background, so the
     * pseudo isn't needed. */
    content: none;
}

/* ---------------------------------------------------------------------
 * 3. Single sticky toolbar holding cascade + search + per-page +
 *    pagination. This is THE source of `--attnvl-controls-height`
 *    via the JS measurement. The vendored attnvl.css sticks the
 *    table thead at top: calc(--attnvl-wp-header-height +
 *    --attnvl-controls-height), so the thead lands flush with the
 *    bottom of this band.
 * ------------------------------------------------------------------- */
.attnvl-archive .attnvl-toolbar {
    position: sticky;
    top: var(--attnvl-wp-header-height, 0px);
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--attnvl-border-color, #e5e7eb);
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
        padding: 12px 16px;
    }
}

.attnvl-archive .attnvl-toolbar > form {
    margin: 0;
}

/* Children of the toolbar must NOT also be sticky individually —
 * the wrapper is the sticky element. The vendored attnvl.css sets
 * .attnvl-controls / .attnvl-filters / .attnvl-pagination to
 * `position: sticky` on desktop; we override here so they sit
 * statically inside the toolbar. */
.attnvl-archive .attnvl-toolbar .attnvl-controls,
.attnvl-archive .attnvl-toolbar .attnvl-controls--hidden,
.attnvl-archive .attnvl-toolbar .attnvl-filters,
.attnvl-archive .attnvl-toolbar .attnvl-pagination,
.attnvl-archive .attnvl-toolbar .attnvl-cascade {
    position: static;
    z-index: auto;
    background-color: transparent;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border-top: none;
    padding: 0;
    margin: 0;
}

/* Search + per-page row. On mobile the search fills its own row and
 * the per-page select pairs with the pagination form on the next row.
 * On desktop (>=1024px) everything sits inline. */
.attnvl-archive .attnvl-toolbar .attnvl-controls-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.attnvl-archive .attnvl-toolbar .attnvl-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1 1 100%;
}

.attnvl-archive .attnvl-toolbar .attnvl-controls .attnvl-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.attnvl-archive .attnvl-toolbar .attnvl-filters {
    flex: 0 0 auto;
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-toolbar .attnvl-controls-form {
        flex: 1 1 320px;
        width: auto;
    }
    .attnvl-archive .attnvl-toolbar .attnvl-controls {
        flex: 1 1 240px;
    }
    .attnvl-archive .attnvl-toolbar .attnvl-controls .attnvl-input {
        max-width: 360px;
    }
}

.attnvl-archive .attnvl-toolbar .attnvl-controls .attnvl-input,
.attnvl-archive .attnvl-toolbar .attnvl-filters .attnvl-select,
.attnvl-archive .attnvl-toolbar .attnvl-controls #attnvl-reset {
    /* All three inputs in the toolbar share the same 44px height so
     * `align-items: flex-end` lines them up cleanly at the baseline. */
    height: 44px;
}

/* Pagination form sits on its own row on mobile next to per-page,
 * tighter so it doesn't waste vertical space. */
.attnvl-archive .attnvl-toolbar .attnvl-pagination-form {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.attnvl-archive .attnvl-toolbar .attnvl-pagination {
    flex-wrap: nowrap;
    gap: 4px;
}

.attnvl-archive .attnvl-toolbar .attnvl-pagination__btn {
    width: 40px;
    height: 40px;
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-toolbar .attnvl-pagination__btn {
        width: 44px;
        height: 44px;
    }
}

.attnvl-archive .attnvl-toolbar .attnvl-pagination__input {
    width: 52px !important;
    height: 40px !important;
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-toolbar .attnvl-pagination__input {
        height: 44px !important;
        width: 60px !important;
    }
}

/* Hide the "of N" info on very narrow screens — the page input
 * already shows the current page number. */
@media (max-width: 480px) {
    .attnvl-archive .attnvl-toolbar .attnvl-pagination__info {
        display: none;
    }
}

.attnvl-archive .attnvl-toolbar .attnvl-input {
    flex: 1 1 160px;
    max-width: 360px;
    min-width: 0;
}

.attnvl-archive .attnvl-toolbar .attnvl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* ---------------------------------------------------------------------
 * 4. Cascade filter (NZ-only). On desktop reads as one inline row;
 *    on mobile it falls back to a 2-column grid (brand+model on row 1,
 *    year+Apply on row 2) so each field stays large enough to tap.
 *    Below 380px (small phones) it stacks fully.
 * ------------------------------------------------------------------- */
.attnvl-archive .attnvl-cascade {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    flex: 1 1 100%;
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-cascade {
        flex: 1 1 auto;
    }
}

.attnvl-archive .attnvl-cascade__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 8px;
    width: 100%;
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-cascade__row {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .attnvl-archive .attnvl-cascade__row {
        grid-template-columns: 1fr;
    }
}

.attnvl-archive .attnvl-cascade__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .attnvl-archive .attnvl-cascade__field {
        flex: 1 1 140px;
    }
}

.attnvl-archive .attnvl-cascade__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--attnvl-text-muted, #6b7280);
}

.attnvl-archive button.attnvl-cascade__submit {
    width: 100%;
    height: 44px;
    padding: 0 18px;
    font: inherit;
    font-weight: 700;
    color: var(--attnvl-text-dark, #1f2937);
    background-color: var(--attnvl-accent-color, #ffee00);
    border: 1px solid var(--attnvl-accent-color, #ffee00);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.attnvl-archive button.attnvl-cascade__submit:hover {
    background-color: #ffd900;
    border-color: #ffd900;
}

.attnvl-archive button.attnvl-cascade__submit:active {
    transform: translateY(1px);
}

.attnvl-archive button.attnvl-cascade__submit:focus-visible {
    outline: 2px solid var(--attnvl-text-dark, #111);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .attnvl-archive button.attnvl-cascade__submit {
        flex: 0 0 auto;
        width: auto;
    }
}

/* ---------------------------------------------------------------------
 * 5. Anchor + disabled-span pagination buttons. Vendored attnvl.css
 *    scopes its boxed look to `button.attnvl-pagination__btn`; mirror
 *    the relevant declarations for `<a>` and disabled `<span>` so
 *    they share the visual.
 * ------------------------------------------------------------------- */
.attnvl-archive a.attnvl-pagination__btn,
.attnvl-archive span.attnvl-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: #fff;
    color: var(--attnvl-text-muted, #6b7280);
    border: 1px solid var(--attnvl-border-color, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.attnvl-archive a.attnvl-pagination__btn:hover {
    background-color: #f3f4f6;
}

.attnvl-archive span.attnvl-pagination__btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
 * 6. Sticky table thead lands directly under the toolbar. The
 *    vendored attnvl.css already sets the position + offset; we
 *    just bump the z-index so it doesn't fall behind the toolbar
 *    during scroll.
 * ------------------------------------------------------------------- */
.attnvl-archive .attnvl-table thead tr,
.attnvl-archive .attnvl-table th {
    z-index: 11;
}

/* ---------------------------------------------------------------------
 * 7. Empty pills-row suppression — server-side guard already prevents
 *    the row from being emitted when no pills apply, but keep this
 *    rule for defensive rendering on cached HTML or future code paths.
 * ------------------------------------------------------------------- */
.attnvl-archive .attnvl-table .attnvl-pills-row:has(.attnvl-pills:empty) {
    display: none;
}

/* ---------------------------------------------------------------------
 * 8. Landing — visually hide the specs <dl> so the page collapses
 *    straight from hero to the ECM accordion (matches upstream). The
 *    DOM is preserved for SEO crawlers and the JSON-LD generator
 *    that reads `engine_code` etc. server-side, so the structured
 *    data on the head isn't affected.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-vehicle-specs {
    display: none;
}

/* ---------------------------------------------------------------------
 * 9. Tool logos — upstream renders these at 36x36 inside the
 *    .attnvl-tool-header. The vendored SVG carries its own viewBox
 *    + width + height attributes; we just ensure the wrapper span
 *    sits inline with the .attnvl-tool-name link.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-tool-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.attnvl-landing .attnvl-tool-logo svg {
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------
 * 9b. Conn-table function cell. The .attnvl-fn-icons row sits under
 *     the Functions <th>; on narrow viewports the icon row needs to
 *     hug the right edge so it doesn't drift into the connection
 *     description column. Also constrain icon size at small widths
 *     so a 4-icon Bench/Boot row stays on a single line.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-fn-cell {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.attnvl-landing .attnvl-fn-cell .attnvl-fn-icons {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.attnvl-landing .attnvl-fn-cell .attnvl-fn {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .attnvl-landing .attnvl-fn-cell .attnvl-fn svg {
        width: 24px;
        height: 24px;
    }
    .attnvl-landing .attnvl-fn-cell .attnvl-fn-icons {
        gap: 2px;
    }
}

/* ---------------------------------------------------------------------
 * 9c. Conn-table "Functions" header. Upstream renders
 *     `Functions <button class="attnvl-legend-btn">i</button>` on a
 *     single line; on tablet/small-laptop widths the inline-block
 *     button was wrapping to its own line because the <th> wasn't
 *     `white-space: nowrap` and the button has no inline-flex
 *     baseline. Force the header text + legend button onto one line
 *     and align the button to the baseline of the label.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-conn-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.attnvl-landing .attnvl-conn-table thead th .attnvl-legend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * 9d. The conn cell on the LEFT (description) is the elastic column;
 *     allow its text to wrap freely but keep its label/desc tightly
 *     packed so the right column has room for the icon row.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-conn-cell,
.attnvl-landing .attnvl-extra-cell {
    word-break: break-word;
}

@media (max-width: 480px) {
    .attnvl-landing .attnvl-conn-cell .attnvl-conn-desc,
    .attnvl-landing .attnvl-extra-cell .attnvl-extra-desc {
        font-size: 0.85rem;
    }
}

/* ---------------------------------------------------------------------
 * 9e. Coming-soon state on a connection row. When a method is flagged
 *     `*_coming_soon=1` in wp_alientech_vehicle_ecus, the template adds
 *     `data-coming-soon="true"` to the <tr> and emits an extra pill
 *     sibling next to .attnvl-conn-desc. Hide the description text
 *     (visibility:hidden so the row preserves its natural height and
 *     adjacent rows stay aligned) and show a yellow "Coming soon" pill
 *     centred over the desc area. The pill is positioned against the
 *     inner label/desc wrapper inside .attnvl-conn-cell.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-conn-desc-wrap {
    position: relative;
    display: inline-block;
}
.attnvl-landing [data-coming-soon="true"] .attnvl-conn-icon,
.attnvl-landing [data-coming-soon="true"] .attnvl-conn-label,
.attnvl-landing .attnvl-conn-desc-wrap .attnvl-conn-desc {
    opacity: 0.5;
}

/* Vendored attnvl.css scopes the back-button styling to
 * `button.attnvl-btn--back`, but our template renders the back
 * control as an <a>. Without this override the link picks up only
 * the generic .attnvl-btn rules and looks like a wide pill instead
 * of a 40x40 icon-only square. Mirror the vendored shape here. */
.attnvl-landing a.attnvl-btn--back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--attnvl-text-dark);
    background-color: #fff;
    border: 1px solid var(--attnvl-border-color);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.attnvl-landing a.attnvl-btn--back:hover {
    background-color: var(--attnvl-bg-light);
}
.attnvl-landing a.attnvl-btn--back svg {
    width: 20px;
    height: 20px;
}
.attnvl-landing .attnvl-coming-soon-pill {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(250, 250, 250, 1);
    border: 1px solid #ffee00;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.attnvl-landing .attnvl-coming-soon-pill__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
/* Neutralise the vendored .attnvl-coming-soon overlay positioning
 * (designed to float over method icons) when the SVG is rendered
 * inline inside our pill. Same pattern as .attnvl-legend-item's
 * reset in attnvl.css. */
.attnvl-landing .attnvl-coming-soon-pill__icon .attnvl-coming-soon {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    display: block;
}
.attnvl-landing .attnvl-coming-soon-pill__icon .attnvl-coming-soon path {
    stroke: none;
    stroke-width: 0;
}

/* ---------------------------------------------------------------------
 * 11. Related vehicles. Card grid below the ECU accordions, styled
 *     to match the rest of the landing's attnvl-* visual language —
 *     white cards with the same subtle border + radius as the
 *     conn-table sections, yellow accent on hover/focus, the version
 *     line in muted secondary text. Grid is auto-fill so cards reflow
 *     1/2/3-up depending on viewport width.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-related {
    margin: 32px 0 24px;
    padding: 0;
}

.attnvl-landing .attnvl-related .attnvl-section__title {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--attnvl-text-dark, #1f2937);
    letter-spacing: -0.005em;
}

.attnvl-landing .attnvl-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.attnvl-landing .attnvl-related__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.attnvl-landing .attnvl-related__item::before {
    content: none;
}

.attnvl-landing .attnvl-related__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 20px;
    background: #fff;
    border: 1px solid var(--attnvl-border-color, #e5e7eb);
    border-radius: 10px;
    color: var(--attnvl-text-dark, #1f2937);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    position: relative;
}

.attnvl-landing .attnvl-related__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--attnvl-text-dark, #1f2937);
    background-color: #f7f7f5;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.attnvl-landing .attnvl-related__icon .attnvl-type-icon,
.attnvl-landing .attnvl-related__icon svg {
    width: 22px;
    height: 22px;
}

.attnvl-landing .attnvl-related__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attnvl-landing .attnvl-related__link::before {
    /* Brand-yellow accent bar that grows on hover, mirroring the
     * KESS3 logo accent. Hidden until hover/focus. */
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background-color: var(--attnvl-accent-color, #ffee00);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.attnvl-landing .attnvl-related__link:hover,
.attnvl-landing .attnvl-related__link:focus-visible {
    border-color: var(--attnvl-text-dark, #1f2937);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

.attnvl-landing .attnvl-related__link:hover::before,
.attnvl-landing .attnvl-related__link:focus-visible::before {
    opacity: 1;
}

.attnvl-landing .attnvl-related__link:hover .attnvl-related__icon,
.attnvl-landing .attnvl-related__link:focus-visible .attnvl-related__icon {
    background-color: var(--attnvl-accent-color, #ffee00);
}

.attnvl-landing .attnvl-related__link:focus-visible {
    outline: 2px solid var(--attnvl-text-dark, #111);
    outline-offset: 2px;
}

.attnvl-landing .attnvl-related__link:active {
    transform: translateY(1px);
}

.attnvl-landing .attnvl-related__title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    color: inherit;
}

.attnvl-landing .attnvl-related__version {
    display: block;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--attnvl-text-muted, #6b7280);
}

@media (max-width: 480px) {
    .attnvl-landing .attnvl-related__list {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
 * 12. SEO copy block at the bottom of the landing — descriptive
 *     paragraph + a list of cross-archive links. Styled as a calm
 *     muted region with a top divider so it reads as supplementary
 *     content rather than primary navigation. Links match the
 *     breadcrumb / cascade-Apply brand-blue, with a yellow underline
 *     hover effect that mirrors the related-card accent.
 * ------------------------------------------------------------------- */
.attnvl-landing .attnvl-seo {
    margin: 32px 0 16px;
    padding: 20px 0 0;
    border-top: 1px solid var(--attnvl-border-color, #e5e7eb);
    color: var(--attnvl-text-muted, #6b7280);
    font-size: 0.95rem;
    line-height: 1.55;
}

.attnvl-landing .attnvl-seo > p {
    margin: 0 0 12px;
    color: var(--attnvl-text-muted, #6b7280);
}

.attnvl-landing .attnvl-seo__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.attnvl-landing .attnvl-seo__links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.attnvl-landing .attnvl-seo__links li::before {
    content: none;
}

.attnvl-landing .attnvl-seo__links .attnvl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--attnvl-text-dark, #1f2937);
    background: #fff;
    border: 1px solid var(--attnvl-border-color, #e5e7eb);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.attnvl-landing .attnvl-seo__links .attnvl-link:hover,
.attnvl-landing .attnvl-seo__links .attnvl-link:focus-visible {
    border-color: var(--attnvl-text-dark, #1f2937);
    background-color: var(--attnvl-accent-color, #ffee00);
    color: var(--attnvl-text-dark, #1f2937);
    text-decoration: none;
}

.attnvl-landing .attnvl-seo__links .attnvl-link:focus-visible {
    outline: 2px solid var(--attnvl-text-dark, #111);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .attnvl-landing .attnvl-seo__links {
        flex-direction: column;
        align-items: flex-start;
    }
    .attnvl-landing .attnvl-seo__links .attnvl-link {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------
 * 10. Breadcrumbs. NZ-only addition; upstream is a single-page archive
 *     so attnvl.css doesn't ship breadcrumb rules. Styled here in the
 *     same minimal flat-list shape upstream uses for its in-page text:
 *     muted separators, blue link colour matching the cascade Apply
 *     button, current page bolded.
 * ------------------------------------------------------------------- */
.attnvl .attnvl-breadcrumbs {
    margin: 16px 0 8px;
    padding: 0;
    font-size: 0.875rem;
    color: var(--attnvl-text-muted, #6b7280);
}

.attnvl .attnvl-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
}

.attnvl .attnvl-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    /* Reset any list-marker spacing the active theme might apply. */
    list-style: none;
}

.attnvl .attnvl-breadcrumbs__item::before {
    content: none;
}

.attnvl .attnvl-breadcrumbs__item a {
    color: #1d86da;
    text-decoration: none;
    padding: 2px 0;
    transition: color 0.15s ease;
}

.attnvl .attnvl-breadcrumbs__item a:hover,
.attnvl .attnvl-breadcrumbs__item a:focus-visible {
    color: #176fb4;
    text-decoration: underline;
}

.attnvl .attnvl-breadcrumbs__item a:focus-visible {
    outline: 2px solid var(--attnvl-text-dark, #111);
    outline-offset: 2px;
    border-radius: 2px;
}

.attnvl .attnvl-breadcrumbs__sep {
    margin: 0 8px;
    color: #d1d5db;
    user-select: none;
}

.attnvl .attnvl-breadcrumbs__item [aria-current="page"] {
    color: var(--attnvl-text-dark, #1f2937);
    font-weight: 600;
}