.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  color: #f8fbfa;
  background: #0c665c;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

:focus-visible {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.2rem;
}

[hidden] {
  display: none !important;
}

html[data-support="english"] .arabic-support {
  display: none !important;
}

.arabic-support {
  font-family: var(--font-arabic);
  line-height: 1.9;
}

html[data-text-size="large"] {
  font-size: 125%;
}

html[data-contrast="high"] {
  --page: #f8fbfa;
  --surface: #f8fbfa;
  --surface-muted: #e3ece9;
  --surface-strong: #c4d8d2;
  --ink: #101715;
  --ink-soft: #263a35;
  --border: #425d56;
  --border-strong: #1d3a33;
  --brand: #004f47;
  --brand-hover: #003c36;
  --brand-soft: #c7e8e2;
}

@media (prefers-color-scheme: dark) {
  html[data-contrast="high"] {
    --page: #101715;
    --surface: #101715;
    --surface-muted: #1b2925;
    --surface-strong: #2a423c;
    --ink: #f8fbfa;
    --ink-soft: #d8e6e2;
    --border: #9bb6ae;
    --border-strong: #c1d5cf;
    --brand: #8ee1d5;
    --brand-hover: #b8f0e8;
    --brand-soft: #244c45;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .scroll-controls {
    background: var(--surface);
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .brand-mark,
  .stage-code,
  .skills-grid article > span {
    border: 1px solid CanvasText;
  }
}

@media (max-width: 25rem) {
  html[data-text-size="large"] {
    font-size: 112.5%;
  }
}