@charset "UTF-8";
/* CSS Document */
 
  /* Container needs positioning so the tooltip anchors correctly */
  .logos [role="img"] {
    position: relative;
    outline: none; /* we’ll still show a visible focus ring below */
  }

  /* Visible focus for keyboard users */
  .logos [role="img"]:focus {
    box-shadow: 0 0 0 3px rgba(55,59,68,.35);
    border-radius: 10px;
  }

  /* Tooltip bubble */
  .logos [role="img"]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: 100%;               /* sit above the logo */
    transform: translate(-50%, -4px);
    background: #373b44;
    color: #fff;
    padding: .55rem .7rem;
    border-radius: .6rem;
    font-size: .8rem;
    line-height: 1.2;
    white-space: normal;        /* allow wrapping */
    width: clamp(260px, 50vw, 340px); 
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    z-index: 50;
  }

  /* Tooltip arrow */
  .logos [role="img"]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 6px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #373b44;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 49;
  }

  /* Show on hover OR keyboard focus */
  .logos [role="img"]:hover::after,
  .logos [role="img"]:focus::after,
  .logos [role="img"]:hover::before,
  .logos [role="img"]:focus::before {
    opacity: 1;
    transform: translate(-50%, -8px);
  }

  /* If a logo is near the top of the viewport, flip tooltip below (auto-fix) */
  .logos [role="img"].tip-below::after {
    bottom: auto;
    top: 100%;
    transform: translate(-50%, 4px);
  }
  .logos [role="img"].tip-below::before {
    bottom: auto;
    top: calc(100% - 6px);
    border-top-color: transparent;
    border-bottom-color: #373b44;
  }

  /* Optional: slightly larger tooltips on very small screens */
  @media (max-width: 35em) {
    .logos [role="img"]::after { font-size: .9rem; max-width: 90vw; }
  }