/**
 * Developmizer Site — Base CSS
 *
 * Reset + typography + accessibility utilities, fully scoped to `.dz-app`.
 *
 * IMPORTANT: Every rule in this file either uses `.dz-app` as its selector
 * ancestor or targets a `.dz-*` utility class. This ensures base.css can
 * safely load in the WP admin (for the styleguide page) without overriding
 * any admin chrome styles.
 *
 * Front-end templates must wrap all content in an element with class `dz-app`.
 */

/* -----------------------------------------------------------------------------
 * Box-sizing reset (scoped — WP admin keeps its own conventions)
 * -------------------------------------------------------------------------- */

.dz-app,
.dz-app *,
.dz-app *::before,
.dz-app *::after {
  box-sizing: border-box;
  margin: 0;
}

/* -----------------------------------------------------------------------------
 * Body & base typography (scoped to .dz-app)
 * -------------------------------------------------------------------------- */

.dz-app {
  font-family: var(--dz-font-body);
  font-size: var(--dz-text-md);
  line-height: var(--dz-lh-normal);
  color: var(--dz-fg);
  background: var(--dz-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  transition:
    background-color var(--dz-dur-base) var(--dz-ease-out),
    color var(--dz-dur-base) var(--dz-ease-out);
}

/* Full-viewport wrapper rules (min-height: 100vh, page-level smooth scroll)
   are Phase 4 concerns. They require `html`-level rules to work correctly
   and depend on the Phase 4 front-end render output. */

/* Arabic: Noto Kufi Arabic for everything.
   The explicit font-family below is kept for clarity, but the real magic is
   the token swap: any component using `var(--dz-font-sans)` or `var(--dz-font-body)`
   automatically resolves to Arabic without needing per-component overrides. */
html[lang="ar"] .dz-app {
  --dz-font-sans: var(--dz-font-arabic);
  --dz-font-body: var(--dz-font-arabic);
  font-family: var(--dz-font-arabic);
}

.dz-app h1,
.dz-app h2,
.dz-app h3,
.dz-app h4,
.dz-app h5,
.dz-app h6 {
  font-family: var(--dz-font-sans);
  font-weight: var(--dz-weight-semibold);
  line-height: var(--dz-lh-tight);
  letter-spacing: var(--dz-tracking-tight);
  color: var(--dz-fg);
  text-wrap: balance;
}

html[lang="ar"] .dz-app h1,
html[lang="ar"] .dz-app h2,
html[lang="ar"] .dz-app h3,
html[lang="ar"] .dz-app h4,
html[lang="ar"] .dz-app h5,
html[lang="ar"] .dz-app h6 {
  font-family: var(--dz-font-arabic);
  letter-spacing: var(--dz-tracking-normal);
  line-height: var(--dz-lh-snug);
}

.dz-app h1 { font-size: var(--dz-text-5xl); font-weight: var(--dz-weight-bold); }
.dz-app h2 { font-size: var(--dz-text-4xl); }
.dz-app h3 { font-size: var(--dz-text-2xl); }
.dz-app h4 { font-size: var(--dz-text-xl); }
.dz-app h5 { font-size: var(--dz-text-lg); }
.dz-app h6 { font-size: var(--dz-text-md); }

.dz-app p {
  line-height: var(--dz-lh-relaxed);
  text-wrap: pretty;
}

.dz-app a {
  color: var(--dz-accent);
  text-decoration: none;
  transition: color var(--dz-dur-fast) var(--dz-ease-out);
}
.dz-app a:hover {
  color: var(--dz-accent-hover);
}

.dz-app code,
.dz-app pre,
.dz-app kbd,
.dz-app samp {
  font-family: var(--dz-font-mono);
  font-size: 0.9em;
}

.dz-app img,
.dz-app video,
.dz-app canvas,
.dz-app svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.dz-app input,
.dz-app button,
.dz-app select,
.dz-app textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.dz-app button {
  cursor: pointer;
  background: none;
  border: none;
}

.dz-app ul,
.dz-app ol {
  list-style: none;
  padding: 0;
}

/* -----------------------------------------------------------------------------
 * Focus (scoped — do NOT touch admin focus outlines)
 *
 * Both :focus reset AND :focus-visible replacement are applied together
 * at the same scope so keyboard users never lose a visible focus indicator.
 * -------------------------------------------------------------------------- */

.dz-app :focus {
  outline: none;
}

.dz-app :focus-visible {
  outline: 2px solid var(--dz-ring-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.dz-app ::selection {
  background: var(--dz-accent);
  color: var(--dz-accent-fg);
}

/* -----------------------------------------------------------------------------
 * Scrollbar theming (scoped, @supports-guarded)
 * -------------------------------------------------------------------------- */

@supports (scrollbar-color: auto) {
  .dz-app {
    scrollbar-color: var(--dz-border-strong) transparent;
    scrollbar-width: thin;
  }
}

/* -----------------------------------------------------------------------------
 * Accessibility utilities (utility classes — only active where explicitly applied)
 * -------------------------------------------------------------------------- */

.dz-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;
}

.dz-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  background: var(--dz-fg);
  color: var(--dz-bg);
  padding: 8px 16px;
  border-radius: var(--dz-radius-md);
  z-index: var(--dz-z-toast);
  text-decoration: none;
  font-family: var(--dz-font-sans);
  font-weight: var(--dz-weight-medium);
}
.dz-skip-link:focus {
  inset-inline-start: 8px;
}

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

/* -----------------------------------------------------------------------------
 * Reduced motion (scoped to .dz-app — do not touch admin animations)
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dz-app,
  .dz-app *,
  .dz-app *::before,
  .dz-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}