/* Bootstrap Icons 1.13.1: see LICENSE-bootstrap-icons.txt. */
/* Append these rules AFTER all existing styles, outside any media query. */
  footer .footer-socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  footer .fsocial {
    width: 36px;
    height: 36px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text, #c8c3bc);
    border: 1px solid var(--border2, #4a4744);
    border-radius: 2px;
    text-decoration: none;
    transition:
      color 0.2s ease,
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  /* Expands the pointer target to 44×44 without changing the visual footprint. */
  footer .fsocial::before {
    content: "";
    position: absolute;
    inset: -4px;
  }

  footer .fsocial svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
  }

  footer .fsocial:hover {
    color: var(--white, #f5f2ee);
    border-color: var(--red, #b8240f);
    background: var(--red-dim, rgba(184, 36, 15, 0.08));
  }

  footer .fsocial:focus-visible {
    color: var(--white, #f5f2ee);
    border-color: var(--red, #b8240f);
    outline: 2px solid var(--red, #b8240f);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    footer .fsocial {
      transition: none;
    }
  }

  /*
    Preserve the website's existing compact mobile-footer behavior.
    To show icons on mobile, change display:none to display:flex here.
    Removing this rule alone will not override the site's existing mobile CSS.
  */
  @media (max-width: 960px) {
    footer .footer-socials {
      display: none;
    }
  }