/* One hover accent for storefront text links, shared with the main menu.
 * Filled buttons and transparent utility controls keep their higher-priority
 * palettes. Never recolor images, logos or badges.
 */
@layer sg-button-utilities, sg-button-palette, sg-link-hover, sg-brand-palette;

:root {
  --sg-link-hover-color: var(--sg-brand-yellow, #f4d36a);
}

@layer sg-link-hover {
  :where(a[href]):is(:hover, :focus-visible):not(:where(
    .disabled, [aria-disabled="true"], [inert] *
  )) {
    color: var(--sg-link-hover-color) !important;
  }

  /* Card captions have explicit legacy colors and cannot inherit the link color. */
  :where(a[href]):is(:hover, :focus-visible):not(:where(.disabled, [aria-disabled="true"]))
    :is(.sg-studio-title, .sg-studio-action, .subcategory__name, .category-miniature__title,
        .product-miniature__title, .SGGLOVES-home-post em, .SGGLOVES-home-post__body strong,
        .ps-mainmenu__tree-link span, .menu__link span, .nav-link span) {
    color: var(--sg-link-hover-color) !important;
  }

  :where(a[data-sg-studio]):is(:hover, :focus-visible) {
    border-color: var(--sg-brand-yellow, #f4d36a) !important;
  }

  :where(a[href]):focus-visible:not(:where(
    .disabled, [aria-disabled="true"], [inert] *
  )) {
    outline: 2px solid var(--sg-brand-ink, #071b36) !important;
    outline-offset: 3px !important;
  }

  /* Match the desktop menu underline to the very same configured accent. */
  .SGGLOVES-headerbar__navigation :is(.top-menu, #top-menu, .navbar-nav)
    a:is(:hover, :focus-visible)::after {
    background-color: var(--sg-brand-yellow, #f4d36a) !important;
  }

  @media (forced-colors: active) {
    a[href]:is(:hover, :focus-visible),
    a[href]:is(:hover, :focus-visible) :is(.sg-studio-title, .sg-studio-action,
      .subcategory__name, .category-miniature__title, .product-miniature__title,
      .SGGLOVES-home-post em, .SGGLOVES-home-post__body strong) {
      color: LinkText !important;
    }
    a[href]:focus-visible { outline-color: Highlight !important; }
  }
}

/* Only the ink changes: disclosure arrows never acquire a filled background. */
@layer sg-button-utilities {
  .ps-categorytree .accordion-button:is(:hover, :focus-visible),
  a[data-sg-studio]:is(:hover, :focus-visible) .sg-studio-arrow {
    color: var(--sg-link-hover-color) !important;
  }
}