/* ============================================================================
 * Nana A11Y Primitive — utility styles for sr-only announcer + field errors.
 * Loaded alongside nana-a11y-primitive.js.
 * ========================================================================== */

/* Honour the HTML `hidden` attribute even when component CSS sets a
 * specific display value (e.g. `.cat-card { display: block }`). Without
 * this, hidden children remain visible to a11y tooling (axe-core still
 * inspects them) and can fail contrast/label checks. */
[hidden] {
  display: none !important;
}

.nana-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nana-field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  color: var(--nana-color-error, #b00020);
}

/* invalid form input gets a subtle red border + outline */
[aria-invalid="true"] {
  border-color: var(--nana-color-error, #b00020) !important;
  outline-color: var(--nana-color-error, #b00020);
}

/* Phase 5 W1 true-final contrast polish — approved design, token-only where
 * the Nana palette already provides the correct semantic foreground. */
.nana-product-page .nana-product-page__eyebrow,
.nana-product-page .nana-product-page__section-eyebrow,
.nana-product-page .nana-fit-panel__eyebrow {
  color: var(--nana-coral-dark);
}

/* The Fit card is ink-on-dark. Keep the approved canonical coral here:
 * #e56f51 on #1c201a is > 4.5:1; coral-dark is intentionally reserved for
 * light paper surfaces above. */
.nana-product-page .nana-product-page__fit-eyebrow {
  color: var(--nana-coral);
}

.nana-cart-page .nana-cart-page__checkout {
  background: var(--nana-coral-dark);
}

/* Canonical footer selector; #bbb on the ink footer exceeds AA for body text
 * while preserving the approved subdued footer hierarchy. */
.nana-site-footer .nana-site-footer__brand > p {
  color: #bbb;
}