/* Real links - the CSS half of assets/js/links.js.
 *
 * Loaded for every design (v1, v2, v3) because this is a mechanism, not a look:
 * it makes a card-shaped div carry a real anchor and paints nothing of its own.
 * Every visible hover/selected state still comes from the container's own rules.
 */

/* The overlay's containing block. Adding position:relative to a container that
   was static moves nothing - it only makes inset:0 mean "this card". */
.has-go-link { position: relative; }

/* The stretched link itself: the whole container's clickable area, invisible,
   and beneath everything the container's own children need. */
.has-go-link > a.go-link {
  position: absolute;
  inset: 0;
  /* z-index 0, not 1, and deliberately the lowest positioned layer: being
     positioned at all already puts it above the container's ordinary in-flow
     content (the artwork, the text), which is everything it needs to cover. Any
     descendant that raises itself - v3's Stack chip sits at z-index 1 under a
     more specific selector than anything here could win - then stays clickable
     without this file having to out-specify it. */
  z-index: 0;
  display: block;
  border-radius: inherit;
  font-size: 0;                 /* no text, and no line-box to grow the card */
  text-decoration: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
a.go-link:hover { text-decoration: none; }
/* The overlay has no box a ring could sensibly sit on, so the ring is drawn
   around the thing the eye reads as the target - the card. :has(> …) rather than
   :focus-within so tabbing to the card's Get button doesn't also ring the card. */
.has-go-link:has(> a.go-link:focus-visible) {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
a.go-link:focus-visible { outline: none; }

/* Lift every interactive descendant above the overlay. Without this the overlay
   - the container's last child - would paint over the Get button, v3's Stack
   chip, the lightbox shots and any nested [data-go] cell, and swallow their
   clicks. position:relative with no offsets shifts nothing.
   `:not(.go-link)` is load-bearing: :is() takes the highest specificity of its
   arguments, so without it this rule outranks the absolute positioning above and
   drops the overlay back INTO the flow - where it becomes a flex/grid item and
   steals a gap's worth of width from the card it was supposed to cover. */
.has-go-link :is(
  a[href]:not(.go-link), button, input, select, textarea, label, summary,
  [role="tab"], [role="button"],
  [data-install], [data-save], [data-lb], [data-vid], [data-car],
  [data-go], [data-ext], [data-v3-stack-toggle]
) {
  position: relative;
  z-index: 2;
}

/* ---- links that used to be buttons -------------------------------------
   The sidebar rows and v3's topbar links are authored as <a> now (they are
   destinations, and "open in a new tab" is exactly what people want from a nav
   item). Their own class rules already set colour and background; the only thing
   leaking through from the global `a:hover` rule is the underline. */
:is(
  a.nav-item, a.v3-link, a.v3-util-link, a.v3-brand, a.v3-account, a.v3-saved,
  a.get-btn, a.cta, a.see
):hover { text-decoration: none; }

/* A <button> centres its text by UA default; an <a> start-aligns it. Every one of
   these is content-sized today, so the swap moved nothing - this keeps it that
   way if one of them ever gets a width. .nav-item and .v3-stack-open-item are
   absent on purpose: they declare text-align themselves. */
:is(
  a.v3-link, a.v3-util-link, a.v3-brand, a.v3-account, a.v3-saved, a.get-btn
) { text-align: center; }