/* =============================================
   DecodeGear V8 — Utilities
   Classes pequenas e reutilizáveis. Nenhum componente novo usa CSS inline
   (ver docs/restructure/43-design-system-v8.md).
   ============================================= */

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

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: fixed; width: auto; height: auto; padding: var(--dg-space-3) var(--dg-space-4);
  margin: 0; overflow: visible; clip: auto; white-space: normal;
  top: var(--dg-space-2); left: var(--dg-space-2); z-index: 10000;
  background: var(--dg-accent); color: var(--dg-button-primary-text);
  border-radius: var(--radius-md); font-weight: 600;
}

.dg-container-shell   { max-width: var(--dg-container-shell);   margin-inline: auto; padding-inline: var(--dg-space-4); }
.dg-container-landing { max-width: var(--dg-container-landing); margin-inline: auto; padding-inline: var(--dg-space-4); }
.dg-container-article { max-width: var(--dg-container-article); margin-inline: auto; padding-inline: var(--dg-space-4); }
.dg-container-narrow  { max-width: var(--dg-container-narrow);  margin-inline: auto; padding-inline: var(--dg-space-4); }

.dg-hidden { display: none !important; }

@media (max-width: 767px) {
  .dg-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .dg-hide-desktop { display: none !important; }
}

/* body scroll lock — aplicado via JS quando o drawer mobile abre (ver header-v8.js) */
body.dg-scroll-lock {
  overflow: hidden;
  height: 100%;
}