/* =============================================================================
   Site-wide hover and focus feedback.
   Many links and buttons are styled inline in the page, so they cannot carry
   their own :hover rule. These selectors match them by the shape of that inline
   style and give every clickable thing a visible reaction.
   Links that already script their own hover (onmouseover) are left alone.
   ============================================================================= */

/* Keyboard users: one consistent focus ring (zero specificity, so any component
   that defines its own focus style still wins). */
:where(a, button, [role="button"], summary):focus-visible{outline:2px solid #38bdf8;outline-offset:3px;border-radius:6px}
:where(button:not(:disabled), [role="button"], summary){cursor:pointer}

@media (hover:hover){

  /* ---- 1. Solid buttons: lift, brighten, deeper shadow ---- */
  a[style*="padding"][style*="linear-gradient"]:not([onmouseover]),
  a[style*="padding"][style*="border-radius"][style*="background:#"]:not([onmouseover]),
  .ar-btn,.cs-btn,.ts-cta,.pr-btn,.ty-btn,.ab-btn-p,.sector-resource-cta,.cx-btn{
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease,border-color .2s ease!important}
  a[style*="padding"][style*="linear-gradient"]:not([onmouseover]):hover,
  a[style*="padding"][style*="border-radius"][style*="background:#"]:not([onmouseover]):hover,
  .ar-btn:hover,.cs-btn:hover,.ts-cta:hover,.pr-btn:hover,.ty-btn:hover,.ab-btn-p:hover,.sector-resource-cta:hover{
    transform:translateY(-2px);
    filter:brightness(1.1) saturate(1.08);
    box-shadow:0 16px 32px -12px rgba(37,99,235,.6),0 0 0 2px rgba(147,197,253,.55)!important}

  /* ---- 2. Outline ("ghost") buttons: fill in and show a clear border ---- */
  a[style*="padding"][style*="border:1px solid"]:not([style*="linear-gradient"]):not([style*="background:#"]):not([onmouseover]){
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease!important}
  a[style*="padding"][style*="border:1px solid"]:not([style*="linear-gradient"]):not([style*="background:#"]):not([onmouseover]):hover{
    transform:translateY(-2px);
    background-color:rgba(96,165,250,.2)!important;
    border-color:#60a5fa!important;
    box-shadow:0 12px 26px -14px rgba(37,99,235,.55)!important}

  /* ---- 3. Text links: underline plus a soft tinted background ---- */
  main a[style*="color:"]:not([style*="padding"]):not([style*="display:flex"]):not([style*="display:inline-flex"]):not([style*="display:block"]):not([style*="display:grid"]):not([class]):not([onmouseover]),
  .op-link,.sdm-founder-link,.bl-aname-sm{
    border-radius:4px;
    transition:background-color .18s ease,box-shadow .18s ease}
  main a[style*="color:"]:not([style*="padding"]):not([style*="display:flex"]):not([style*="display:inline-flex"]):not([style*="display:block"]):not([style*="display:grid"]):not([class]):not([onmouseover]):hover,
  .op-link:hover,.sdm-founder-link:hover,.bl-aname-sm:hover{
    text-decoration:underline!important;
    text-decoration-thickness:2px!important;
    text-underline-offset:3px;
    background-color:color-mix(in srgb,currentColor 14%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent)}
  /* plain links inside paragraphs and lists: always underline on hover */
  main p a:not([class]):not([style]):hover,
  main li a:not([class]):not([style]):hover{
    text-decoration:underline!important;
    text-decoration-thickness:2px!important;
    text-underline-offset:3px}
  /* ...and add the tint too, unless the link is a card with an image or heading inside.
     Kept as its own rule so browsers without :has() still apply the rules above. */
  main p a:not([class]):not([style]):not(:has(img,div,h3,h4,svg)):hover,
  main li a:not([class]):not([style]):not(:has(img,div,h3,h4,svg)):hover{
    border-radius:4px;
    background-color:color-mix(in srgb,currentColor 14%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent)}

  /* ---- 4. Tabs and small controls that had no reaction ---- */
  .ixo-tab,.ma-tab{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  .ixo-tab:hover,.ma-tab:hover{background-color:rgba(37,99,235,.1);border-color:#60a5fa}

  /* ---- 5. Logo and "go" arrows ---- */
  a.logo,a.logo-wrap{transition:opacity .2s ease,transform .2s ease}
  a.logo:hover,a.logo-wrap:hover{opacity:.85}
  a.go{transition:transform .2s ease}
  a.go:hover{transform:translateX(3px)}
}

@media (prefers-reduced-motion:reduce){
  a[style]:hover,.ar-btn:hover,.cs-btn:hover,.ts-cta:hover,.pr-btn:hover,.ty-btn:hover,.ab-btn-p:hover,.sector-resource-cta:hover,a.go:hover{transform:none!important}
}