/**
 * SAF Saved Resources -- save/unsave toggle (s154).
 *
 * Palette comes from the same custom properties this plugin's tab already
 * uses (class-saf-saved-resources.php), so contrast is inherited rather than
 * re-litigated against the brand tokens.
 */

.saf-save-toggle {
  display: inline-flex;
  align-items: center;
  /* The single-resource contact panel lays its actions out in INLINE flow, so
     without vertical-align the button sits on the text baseline and rides up
     over its neighbour. Found by eye on staging: the button was overlapping
     the "Download referral card (PDF)" link, while every attribute assertion
     passed. Attributes cannot see a layout collision. */
  vertical-align: middle;
}

/* Spacing is CONTEXT-dependent, so it is scoped rather than baked into the
   base rule: in the contact panel the toggle follows two inline actions and
   needs separation from them; on a directory card it is a block-level sibling
   under the CTA and must not be indented. */
.saf-resource-contact .saf-save-toggle {
  margin-top: var(--saf-gap-4, 16px);
  margin-left: var(--saf-gap-3, 12px);
}

.saf-card__cta + .saf-save-toggle {
  margin-top: 4px;
}

/* [hidden] ONLY sets display:none in the UA stylesheet, so ANY author `display`
   rule beats it. Without this, the button below renders for logged-out visitors
   -- who have no JS loaded and so can never make it work -- right next to the
   "Sign in to save" link. Caught by looking at the rendered panel; every
   attribute assertion passed, because the `hidden` attribute WAS present.
   Applies to both halves so the JS-hidden signin link cannot regress the same
   way if it ever gains a display rule. */
.saf-save-toggle__btn[hidden],
.saf-save-toggle__signin[hidden] {
  display: none;
}

.saf-save-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--saf-brand, #962432);
  border: 1px solid var(--saf-brand, #962432);
  border-radius: 6px;
  padding: 6px 12px;
  /* Matches the 44px touch target the neighbouring .saf-resource-contact__visit
     button already sets (WCAG 2.5.5), so the two actions line up instead of
     one sitting proud of the other. */
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.saf-save-toggle__btn:hover {
  background: var(--saf-brand, #962432);
  color: #fff;
}

/* The card already has a :focus-within treatment, but that styles the CARD.
   A focusable control needs its own visible indicator. */
.saf-save-toggle__btn:focus-visible {
  outline: 3px solid var(--saf-brand, #962432);
  outline-offset: 2px;
}

.saf-save-toggle__btn[aria-pressed="true"] {
  background: var(--saf-brand, #962432);
  color: #fff;
}

.saf-save-toggle__btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

.saf-save-toggle__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bookmark glyph, drawn in CSS so there is no request and no icon font.
   A solid shape dimmed when unsaved, opaque when saved -- the first cut used a
   border with clip-path and rendered as a thin vertical sliver at this size. */
.saf-save-toggle__icon {
  /* display is NOT optional here. A <span> is display:inline by default, and
     width/height DO NOT APPLY to a non-replaced inline box -- the computed
     style still reports 11px while getBoundingClientRect() returns 0, which is
     exactly what was measured on staging: the icon was invisible on every
     surface. It only had size at all on the assumption that the parent's
     inline-flex made it a flex item, and the theme's own button rules override
     that display. Sizing must not depend on an ancestor we do not control. */
  display: inline-block;
  width: 11px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  opacity: 0.4;
}

.saf-save-toggle__btn[aria-pressed="true"] .saf-save-toggle__icon {
  opacity: 1;
}

.saf-save-toggle__signin {
  font-size: 0.8125rem;
  color: var(--saf-brand, #962432);
  text-decoration: underline;
}

/* The visible state change IS the button label, so the live region only needs
   to exist for assistive tech. */
.saf-save-toggle__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}