/* ==========================================================
   A-CX BLOCKS — front-end + editor styles
   Uses Kadence global palette + font-size + spacing tokens.
   All var() calls include a hex/rem fallback so cards render
   correctly even before the global custom CSS is in place.
   ==========================================================
   Token reference (Kadence global palette slots):
     1  Signal Red  #cc2936   primary CTA, Red accent
     2  Burgundy    #3a0612   Dev & Design accent
     3  Carbon      #1e1f24   dark body text, dark surface
     4  Navy        #1a2332   default dark card/container surface
     5  Ash         #76767d   dark border, light hover border
     6  Graphite    #424249   body text on light surfaces
     7  Stone       #b5b5bd   light border, dark hover/secondary
     8  Linen       #f3f2ef   light surface swap
     9  Cream       #fafaf8   default light card surface
    10  Teal        #0b8a82   Secure Cloud accent
    11  Cyan        #4ac5db   (reserved)
    12  Volt        #c8e000   Hero CTA button background
   ========================================================== */


/* ==========================================================
   EQUAL HEIGHT — cards inside Kadence row columns

   Confirmed DOM structure (from live page HTML):

     .kb-row-layout-wrap.a-cx-container          ← row IS the container
       └─ .kt-row-column-wrap.kt-row-valign-top  ← flex row; valign-top
            └─ .wp-block-kadence-column
                 └─ .kt-inside-inner-col         ← Kadence's inner wrapper
                      └─ .wp-block-group.a-cx-card

   Two problems were stopping equal height:
   1. .kt-row-valign-top sets align-items: flex-start on the column
      wrap — columns shrink to their content height instead of
      stretching to match the tallest sibling.
   2. .kt-inside-inner-col (the real inner wrapper) doesn't fill
      the column, so height:100% / flex:1 on the card had nothing
      to grow into.

   Applies to two host classes:
   · .a-cx-container — styled section wrapper (cream/linen/navy/burgundy surface)
   · .a-cx-card-row  — unstyled row; equal-height wiring only, no visual chrome
   ========================================================== */

/* 1 — override valign-top; stretch all columns to the tallest height */
.a-cx-container .kt-row-column-wrap,
.a-cx-card-row  .kt-row-column-wrap {
    align-items: stretch !important;
}

/* 2 — column becomes a flex column so its children can fill it */
.a-cx-container .wp-block-kadence-column,
.a-cx-card-row  .wp-block-kadence-column {
    display:        flex;
    flex-direction: column;
}

/* 3 — .kt-inside-inner-col is Kadence's actual inner wrapper; fill the column */
.a-cx-container .kt-inside-inner-col,
.a-cx-card-row  .kt-inside-inner-col {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
}

/* 4 — card fills the inner wrapper; is itself a flex column so its children
       stack vertically and a sticky-footer element works via margin-top:auto */
.a-cx-container .kt-inside-inner-col > .a-cx-card,
.a-cx-container .kt-inside-inner-col > .wp-block-group.a-cx-card,
.a-cx-card-row  .kt-inside-inner-col > .a-cx-card,
.a-cx-card-row  .kt-inside-inner-col > .wp-block-group.a-cx-card {
    display:        flex;
    flex-direction: column;
    flex-wrap:      nowrap;  /* guard against WP is-layout-flex adding wrap */
    flex:           1 1 auto;
    box-sizing:     border-box;
}


/* ==========================================================
   LARGE CONTAINERS  (0.85rem radius)
   Used as section wrappers around standard card grids.
   ========================================================== */

.a-cx-container {
    border-radius: var(--a-cx-radius-large, 0.85rem);
    padding: var(--global-md-lg-spacing, 1.75rem);
    border: 1px solid transparent;
}

/* Cream surface */
.a-cx-container--cream {
    background:   var(--global-palette9, #fafaf8);   /* Cream */
    border-color: var(--global-palette7, #b5b5bd);   /* Stone */
    color:        var(--global-palette3, #1e1f24);   /* Carbon */
}
/* Linen surface */
.a-cx-container--linen {
    background:   var(--global-palette8, #f3f2ef);   /* Linen */
    border-color: var(--global-palette7, #b5b5bd);   /* Stone */
    color:        var(--global-palette3, #1e1f24);   /* Carbon */
}
/* Navy surface */
.a-cx-container--navy {
    background:   var(--global-palette4, #1a2332);   /* Navy */
    border-color: var(--global-palette5, #76767d);   /* Ash */
    color:        var(--global-palette9, #fafaf8);   /* Cream */
}

/* Burgundy surface */
.a-cx-container--burgundy {
    background:   var(--global-palette2, #3a0612);   /* Burgundy */
    border-color: var(--global-palette5, #76767d);   /* Ash */
    color:        var(--global-palette9, #fafaf8);   /* Cream */
}


/* ==========================================================
   STANDARD CARDS — base  (0.7rem radius)
   ========================================================== */

.a-cx-card {
    border-radius: var(--a-cx-radius-standard, 0.7rem);
    padding: var(--global-md-spacing, 1.25rem);
    border: 1px solid transparent;
    transition: border-color .2s ease;
}

/* Light tone — Cream surface, Stone border, Carbon text */
.a-cx-card--light {
    background:   var(--global-palette9, #fafaf8);   /* Cream */
    border-color: var(--global-palette7, #b5b5bd);   /* Stone */
    color:        var(--global-palette3, #1e1f24);   /* Carbon */
}
/* Dark tone — Navy surface, Ash border, Cream text */
.a-cx-card--dark {
    background:   var(--global-palette4, #1a2332);   /* Navy */
    border-color: var(--global-palette5, #76767d);   /* Ash */
    color:        var(--global-palette9, #fafaf8);   /* Cream */
}

/*
 * Hover effects — gated by .is-linked
 * Add the class "is-linked" via the block's Additional CSS Class(es) field
 * whenever a card is meant to be clickable. Cards without this class show
 * no hover state, regardless of whether they contain inline links.
 */
/* Non-accent cards: subtle border colour shift only. No border-width change — prevents layout shift. */
.a-cx-card--light.is-linked:hover { border-color: var(--global-palette5, #76767d); } /* Ash   */
.a-cx-card--dark.is-linked:hover  { border-color: var(--global-palette7, #b5b5bd); } /* Stone */

/* Surface swaps */
.a-cx-card--light.is-surface-linen   { background: var(--global-palette8, #f3f2ef); } /* Linen  */
.a-cx-card--dark.is-surface-carbon   { background: var(--global-palette3, #1e1f24); } /* Carbon */
.a-cx-card--dark.is-surface-burgundy { background: var(--global-palette2, #3a0612); } /* Burgundy */
.a-cx-card.is-surface-ghost          { background: transparent; }


/* ==========================================================
   TYPOGRAPHY INHERITANCE
   Text colour and link rules that cascade automatically to
   all content inside A-CX cards and containers.

   Brand guidelines mapping:
     Light surfaces → Carbon headings, Graphite body text
     Dark surfaces  → Cream headings and body text
     Light links    → Signal Red + underline / Burgundy hover + visited
     Dark links     → Cyan + underline / Cream hover + visited

   Specificity is intentionally low (class + element = 0,1,1
   or 0,2,1 for body/link rules) so WP block-level colour
   overrides (inline styles) and Kadence block colour settings
   always take precedence. No !important used here.

   Kadence button anchors (.kb-button, .kb-btn) are excluded
   from the link rules — they carry their own colour system.
   ========================================================== */

/* --- Headings: light surfaces → Carbon --- */
.a-cx-card--light h1, .a-cx-card--light h2, .a-cx-card--light h3,
.a-cx-card--light h4, .a-cx-card--light h5, .a-cx-card--light h6,
.a-cx-container--cream h1, .a-cx-container--cream h2, .a-cx-container--cream h3,
.a-cx-container--cream h4, .a-cx-container--cream h5, .a-cx-container--cream h6,
.a-cx-container--linen h1, .a-cx-container--linen h2, .a-cx-container--linen h3,
.a-cx-container--linen h4, .a-cx-container--linen h5, .a-cx-container--linen h6 {
    color: var(--global-palette3, #1e1f24);  /* Carbon */
}

/* --- Headings: dark surfaces → Cream --- */
.a-cx-card--dark h1, .a-cx-card--dark h2, .a-cx-card--dark h3,
.a-cx-card--dark h4, .a-cx-card--dark h5, .a-cx-card--dark h6,
.a-cx-container--navy h1, .a-cx-container--navy h2, .a-cx-container--navy h3,
.a-cx-container--navy h4, .a-cx-container--navy h5, .a-cx-container--navy h6,
.a-cx-container--burgundy h1, .a-cx-container--burgundy h2, .a-cx-container--burgundy h3,
.a-cx-container--burgundy h4, .a-cx-container--burgundy h5, .a-cx-container--burgundy h6 {
    color: var(--global-palette9, #fafaf8);  /* Cream */
}

/* --- Body text: light surfaces → Graphite --- */
.a-cx-card--light p,
.a-cx-card--light li,
.a-cx-card--light figcaption,
.a-cx-container--cream p,
.a-cx-container--cream li,
.a-cx-container--cream figcaption,
.a-cx-container--linen p,
.a-cx-container--linen li,
.a-cx-container--linen figcaption {
    color: var(--global-palette6, #424249);  /* Graphite */
}

/* --- Body text: dark surfaces → Cream --- */
.a-cx-card--dark p,
.a-cx-card--dark li,
.a-cx-card--dark figcaption,
.a-cx-container--navy p,
.a-cx-container--navy li,
.a-cx-container--navy figcaption,
.a-cx-container--burgundy p,
.a-cx-container--burgundy li,
.a-cx-container--burgundy figcaption {
    color: var(--global-palette9, #fafaf8);  /* Cream */
}

/* --- Links: light surfaces ---
 * Default:        Signal Red + underline
 * Hover / visited: Burgundy + underline
 *
 * Opt out: add "has-custom-links" to the card's Additional CSS Class(es)
 * field to disable this cascade and let block-level colours take effect.
 */
.a-cx-card--light:not(.has-custom-links) a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link),
.a-cx-container--cream a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link),
.a-cx-container--linen a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link) {
    color:           var(--global-palette1, #cc2936);  /* Signal Red */
    text-decoration: underline;
}
.a-cx-card--light:not(.has-custom-links) a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-card--light:not(.has-custom-links) a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited,
.a-cx-container--cream a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-container--cream a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited,
.a-cx-container--linen a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-container--linen a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited {
    color:           var(--global-palette2, #3a0612);  /* Burgundy */
    text-decoration: underline;
}

/* --- Links: dark surfaces ---
 * Default:        Cyan + underline
 * Hover / visited: Cream + underline
 *
 * Opt out: add "has-custom-links" to the card's Additional CSS Class(es)
 * field to disable this cascade and let block-level colours take effect.
 */
.a-cx-card--dark:not(.has-custom-links) a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link),
.a-cx-container--navy a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link),
.a-cx-container--burgundy a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link) {
    color:           var(--global-palette11, #4ac5db);  /* Cyan */
    text-decoration: underline;
}
.a-cx-card--dark:not(.has-custom-links) a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-card--dark:not(.has-custom-links) a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited,
.a-cx-container--navy a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-container--navy a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited,
.a-cx-container--burgundy a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-container--burgundy a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited {
    color:           var(--global-palette9, #fafaf8);  /* Cream */
    text-decoration: underline;
}

/* --- has-custom-links reset ---
 * Adding "has-custom-links" to a card's Additional CSS Class(es) disables
 * the cascade above (via :not(.has-custom-links) on those rules). This block
 * also resets the default and visited states against global theme link styles
 * so block-level colour settings can fully take effect.
 *
 * :hover is intentionally NOT reset here — the global theme hover style
 * (e.g. Kadence's underline/colour change) provides visible hover feedback.
 *
 * Specificity (0,6,1) matches the cascade rules and sits after them, so
 * "has-custom-links" reliably wins the override.
 */
.a-cx-card.has-custom-links a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link),
.a-cx-card.has-custom-links a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited {
    color:           inherit;
    text-decoration: inherit;
}


/* ==========================================================
   CARD TYPE: IMAGE  (a-cx-card--media)
   16:9 image bleeds to the top edge; heading + body sit below.
   Works with core/group as parent (children stack vertically).
   ========================================================== */

.a-cx-card--media {
    overflow: hidden;
    padding: 0;  /* image handles top; text wrapper adds padding below */
}

/* 16:9 image slot — bleeds to card edges */
.a-cx-card--media .wp-block-image.a-cx-card-image__media,
.a-cx-card--media > .wp-block-image:first-child {
    display: block;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-top-left-radius:  var(--a-cx-radius-standard, 0.7rem);
    border-top-right-radius: var(--a-cx-radius-standard, 0.7rem);
    width: 100%;
}
.a-cx-card--media .wp-block-image.a-cx-card-image__media img,
.a-cx-card--media > .wp-block-image:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* All non-image children get the standard horizontal padding */
.a-cx-card--media > *:not(.wp-block-image) {
    padding-inline: var(--global-md-spacing, 1.25rem);
}
/* First non-image child gets top padding */
.a-cx-card--media > *:not(.wp-block-image):first-of-type {
    padding-top: var(--global-md-spacing, 1.25rem);
}
/* Last child gets bottom padding */
.a-cx-card--media > *:last-child {
    padding-bottom: var(--global-md-spacing, 1.25rem);
}


/* ==========================================================
   CARD TYPE: ICON  (a-cx-card--icon)
   Small tinted circle above the heading.
   Uses an editable core/image block (.a-cx-card-icon__img).
   ========================================================== */

/*
 * Constrain the image block to a small circle.
 * !important overrides core/image block-level width styles
 * that would otherwise stretch the image to full card width.
 */
.a-cx-card--icon .wp-block-image.a-cx-card-icon__img {
    display: block !important;
    width:     3.5rem !important;   /* ~56px — matches Kadence thumbnail */
    height:    3.5rem !important;
    max-width: 3.5rem !important;
    min-width: 0 !important;
    border-radius: 0;
    overflow: hidden;
    margin-top:    0;
    margin-bottom: var(--global-xs-spacing, 0.5rem);
    margin-left:   0;
    margin-right:  auto;
    float: none !important;
    background: transparent;
}
.a-cx-card--icon .wp-block-image.a-cx-card-icon__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}


/* ==========================================================
   CARD TYPE: STAT  (a-cx-card--stat)
   Large metric value (paragraph) + smaller caption.
   ========================================================== */

.a-cx-card--stat .a-cx-stat-value {
    font-size:      var(--global-kb-font-size-xxl, 1.75rem);
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.1;
    margin-bottom:  var(--global-xxs-spacing, 0.25rem);
}
.a-cx-card--stat.a-cx-card--light .a-cx-stat-value { color: var(--global-palette3, #1e1f24); } /* Carbon */
.a-cx-card--stat.a-cx-card--dark  .a-cx-stat-value { color: var(--global-palette9, #fafaf8); } /* Cream  */

.a-cx-card--stat .a-cx-stat-label {
    font-size:   var(--global-kb-font-size-xsm, 0.75rem);
    font-weight: 300;
    margin: 0;
}
.a-cx-card--stat.a-cx-card--light .a-cx-stat-label { color: var(--global-palette6, #424249); } /* Graphite */
.a-cx-card--stat.a-cx-card--dark  .a-cx-stat-label { color: var(--global-palette7, #b5b5bd); } /* Stone    */


/* ==========================================================
   LEFT ACCENT SYSTEM  (a-cx-card--offering)
   2px left border in offering theme colour.
   ========================================================== */

.a-cx-card--offering { border-left-width: 0.25rem; }

.is-accent-red      { border-left-width: 0.25rem; border-left-color: var(--global-palette1,  #cc2936); } /* Signal Red */
.is-accent-teal     { border-left-width: 0.25rem; border-left-color: var(--global-palette10, #0b8a82); } /* Teal       */
.is-accent-burgundy { border-left-width: 0.25rem; border-left-color: var(--global-palette2,  #3a0612); } /* Burgundy   */

/*
 * Accent card hover — full border in accent colour. Border stays 1px — no layout shift.
 * On hover the right/top/bottom borders match the left accent colour,
 * creating a complete accent-coloured frame around the card.
 * Gated by .is-linked — no hover state unless the card is clickable.
 *
 * Dark accent cards override to Cyan: Signal Red and Burgundy both fail
 * WCAG 3:1 against Deep Navy, so Cyan (8.1:1) is used for all dark surfaces.
 */
.a-cx-card--light.is-accent-red.is-linked:hover      { border-color: var(--global-palette1,  #cc2936); } /* Signal Red */
.a-cx-card--light.is-accent-teal.is-linked:hover     { border-color: var(--global-palette10, #0b8a82); } /* Teal       */
.a-cx-card--light.is-accent-burgundy.is-linked:hover { border-color: var(--global-palette2,  #3a0612); } /* Burgundy   */

/* Dark surfaces — use Cyan for all (accent colours fail contrast against Navy). */
.a-cx-card--dark.is-accent-red.is-linked:hover,
.a-cx-card--dark.is-accent-teal.is-linked:hover,
.a-cx-card--dark.is-accent-burgundy.is-linked:hover { border-color: var(--global-palette11, #4ac5db); } /* Cyan */


/* ==========================================================
   HOVER COLOUR MODIFIERS
   Add one of these classes to a card's "Additional CSS Class(es)"
   field to override the default hover border colour for that card.
   These sit after the accent hover rules so they always win.

   Available classes:
     is-hover-red      → Signal Red  #cc2936
     is-hover-teal     → Teal        #0b8a82
     is-hover-burgundy → Burgundy    #3a0612
     is-hover-cyan     → Cyan        #4ac5db
     is-hover-ash      → Ash         #76767d  (subtle, light cards)
     is-hover-stone    → Stone       #b5b5bd  (subtle, dark cards)
   ========================================================== */

.a-cx-card.is-hover-red.is-linked:hover      { border-color: var(--global-palette1,  #cc2936); } /* Signal Red */
.a-cx-card.is-hover-teal.is-linked:hover     { border-color: var(--global-palette10, #0b8a82); } /* Teal       */
.a-cx-card.is-hover-burgundy.is-linked:hover { border-color: var(--global-palette2,  #3a0612); } /* Burgundy   */
.a-cx-card.is-hover-cyan.is-linked:hover     { border-color: var(--global-palette11, #4ac5db); } /* Cyan       */
.a-cx-card.is-hover-ash.is-linked:hover      { border-color: var(--global-palette5,  #76767d); } /* Ash        */
.a-cx-card.is-hover-stone.is-linked:hover    { border-color: var(--global-palette7,  #b5b5bd); } /* Stone      */


/* ==========================================================
   INNER CARDS — radius + padding override  (0.55rem)
   Applied via .is-radius-inner modifier class.
   ========================================================== */

.a-cx-card.is-radius-inner {
    border-radius: var(--a-cx-radius-inner, 0.55rem);
    padding:       var(--global-sm-spacing, 0.875rem);
}


/* ==========================================================
   HERO CTA BUTTON  (kadence/advancedbtn variation)
   Volt background, Carbon text. Dark backgrounds only.

   Selector notes:
   · .kb-button   — Kadence's actual rendered <a> class
   · .kb-btn      — legacy Kadence fallback
   · .wp-block-kadence-singlebtn a — belt-and-braces
   Hex fallbacks ensure Volt renders before Kadence palette
   vars are in scope (e.g. in the editor inserter preview).
   ========================================================== */

.a-cx-btn--hero-cta .kb-button,
.a-cx-btn--hero-cta .kb-btn,
.a-cx-btn--hero-cta .wp-block-kadence-singlebtn a {
    background:     var(--global-palette12, #c8e000) !important;  /* Volt   */
    color:          var(--global-palette3,  #1e1f24) !important;  /* Carbon */
    border:         none !important;
    border-radius:  var(--a-cx-radius-button, 0.35rem) !important;
    padding:        var(--global-sm-spacing, 0.875rem) var(--global-md-spacing, 1.25rem) !important;
    font-size:      var(--global-kb-font-size-lg, 1.125rem) !important;
    font-weight:    600 !important;
    letter-spacing: 0 !important;
    transition:     filter .2s ease, transform .2s ease;
}
.a-cx-btn--hero-cta .kb-button:hover,
.a-cx-btn--hero-cta .kb-btn:hover,
.a-cx-btn--hero-cta .wp-block-kadence-singlebtn a:hover {
    filter:    brightness(0.95);
    transform: translateY(-1px);
}
.a-cx-btn--hero-cta .kb-button:focus-visible,
.a-cx-btn--hero-cta .kb-btn:focus-visible,
.a-cx-btn--hero-cta .wp-block-kadence-singlebtn a:focus-visible {
    outline:        2px solid var(--global-palette1, #cc2936);    /* Signal Red focus ring */
    outline-offset: 3px;
}


/* ==========================================================
   LINKED CARDS — whole card is one click target
   Pattern: "stretched link". Add the class is-linked to a card
   AND place a single link inside (typically on the heading via
   the toolbar Link button). The link's ::after pseudo-element
   covers the entire card surface, so a click anywhere on the
   card follows that link.

   Accessibility:
   · Uses one real anchor — screen readers announce one link.
   · Focus ring lands on the actual link, not the card.
   · Secondary buttons or links inside the card stay clickable
     because they sit above the overlay (z-index 2).

   Editor steps for the user:
   1. Insert any A-CX card.
   2. Select the heading text → toolbar Link button → set URL.
   3. In the card group's Advanced settings, add `is-linked` to
      "Additional CSS class(es)".
   ========================================================== */

.a-cx-card.is-linked { position: relative; }

/* The first link inside an is-linked card stretches over the whole
   card surface. Use :first-of-type so we don't accidentally pick up
   a "Read more" link below it. */
.a-cx-card.is-linked a:first-of-type::after {
    content:  "";
    position: absolute;
    inset:    0;
    z-index:  1;
}

/* The stretched link drops its underline — the card border hover
   communicates clickability instead. Inline links lower in the
   card keep their normal underline + brand colour. */
.a-cx-card.is-linked a:first-of-type {
    text-decoration: none;
}

/* Heading links inside is-linked cards are structural (stretched-link trigger),
   not visible hyperlinks. Suppress colour and underline so the heading reads
   as plain text. The card border hover communicates interactivity instead.
   Specificity matches the link cascade rules (0,6,1) so this always wins. */
.a-cx-card.is-linked .wp-block-heading a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link),
.a-cx-card.is-linked .wp-block-heading a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):hover,
.a-cx-card.is-linked .wp-block-heading a:not(.kb-button):not(.kb-btn):not(.wp-element-button):not(.wp-block-button__link):visited {
    color:           inherit;
    text-decoration: none;
}

/* Any additional interactive elements inside a linked card need
   to sit above the overlay so they remain independently clickable. */
.a-cx-card.is-linked a:not(:first-of-type),
.a-cx-card.is-linked .wp-block-button,
.a-cx-card.is-linked .wp-block-button .wp-block-button__link,
.a-cx-card.is-linked .kb-button,
.a-cx-card.is-linked .kb-btn,
.a-cx-card.is-linked .wp-block-kadence-singlebtn {
    position: relative;
    z-index:  2;
}

/* Focus ring on the stretched link traces the whole card so keyboard
   users see the click target clearly. */
.a-cx-card.is-linked a:first-of-type:focus-visible::after {
    outline:        2px solid var(--global-palette1, #cc2936);   /* Signal Red */
    outline-offset: 2px;
    border-radius:  inherit;
}
.a-cx-card.is-linked a:first-of-type:focus-visible {
    outline: none;
}