/*!
 * Fontrova UX layer - styles for the behaviours added in fontrova-ux.js.
 * Tokens only; no literal colours, so both themes stay in sync automatically.
 */

/* --- chip overflow disclosure ------------------------------------------- */
.fr .fr-chips.is-expanded {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: var(--fr-sp-2, 8px);
  -webkit-mask-image: none;
  mask-image: none;
}

.fr .fr-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--fr-sp-2, 8px);
  padding-block: 6px;
  padding-inline: 12px;
  min-block-size: 36px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #2E4BFF);
  background: transparent;
  border: 1px solid var(--border, rgba(128,128,128,.25));
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  transition: border-color 150ms var(--ease, ease), color 150ms var(--ease, ease);
}

.fr .fr-chip-toggle:hover {
  border-color: var(--accent, #2E4BFF);
}

.fr .fr-chip-toggle svg {
  inline-size: 14px;
  block-size: 14px;
  transition: transform 150ms var(--ease, ease);
}

.fr .fr-chips.is-expanded ~ .fr-chip-toggle svg,
.fr .fr-chip-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.fr .fr-chip-toggle[hidden] {
  display: none;
}

/* Wrapped state can get tall on a small screen; keep it scannable rather than
   letting it push the results entirely out of view. */
@media (max-width: 600px) {
  .fr .fr-chips.is-expanded {
    max-block-size: 40vh;
    overflow-y: auto;
  }
}

/* --- desktop nav disclosure --------------------------------------------- */
/* The click handler opens groups explicitly; hover still works on its own.
   Both paths resolve to the same visible state. */
@media (min-width: 922px) {
  #ast-desktop-header .main-header-menu > li.fr-nav-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

/* --- focus visibility ---------------------------------------------------- */
/* Applies the accent focus ring uniformly to the controls added here, matching
   the rest of the design system rather than relying on the UA default. */
.fr .fr-chip-toggle:focus-visible,
#ast-desktop-header .main-header-menu > li > a:focus-visible {
  outline: 2px solid var(--accent, #2E4BFF);
  outline-offset: 2px;
  border-radius: 6px;
}