/* ────────────────────────────────────────────
   DD:s designsystem — fokusringen.

   Speglar states.css i designsystemet (.claude/skills/dd-design/).
   Regeln är dokumentglobal där och följde inte med klassimporten till
   Bricks — utan den visar Bricks sin egen vita 3px-outline, som är
   osynlig mot vit sida.

   Scopat till Bricks ytor. OBS: states.css sitter på :where() med noll
   specificitet; här höjer #-scopet specificiteten, därför ingår INTE
   border-radius-raden — den hade tvingat radius-sm på fokuserade
   element och skrivit över knapparnas egen radie.

   Kopia i repo: docs/hemsida/bricks-child/dd-states.css
   ──────────────────────────────────────────── */

#brx-header :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
#brx-content :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
#brx-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Mörka ytor: vit ring. Footern är mörk i sin helhet. */
#brx-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
#brx-content :where(.dd-section--dark, .dd-card--dark, .dd-plate--dark, .dd-cta:not(.dd-cta--vit):not(.dd-cta--gra)) :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--focus-ring-color-on-dark);
}

/* Musklick ska inte lämna en ring kvar. */
#brx-header :where(a, button):focus:not(:focus-visible),
#brx-content :where(a, button):focus:not(:focus-visible),
#brx-footer :where(a, button):focus:not(:focus-visible) {
  outline: none;
}