/* =====================================================================
   Fujairah Web Components - Base / Host page styles
   Base styles for the host page + RTL and Arabic support

   This file is optional for the consuming sites, it sets the font and the
   page direction. The components themselves are isolated inside the Shadow
   DOM and use the logical properties (margin-inline / padding-inline /
   inset-inline) so they flip automatically between RTL and LTR by the page
   direction.
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Reserve the scrollbar gutter permanently so the page never changes width
     when a modal surface (fj-dialog / fj-drawer) locks body scroll and removes
     the scrollbar. With the gutter always reserved, both normal-flow content
     and position:fixed chrome (header, floating tools) stay perfectly still on
     open and close, with no JS compensation needed. The cost is a small blank
     gutter on short pages that do not scroll, which only shows with classic
     (non-overlay) scrollbars, so it is a Windows / Linux desktop tradeoff;
     overlay-scrollbar systems (macOS, iOS) reserve nothing and never shifted. */
  scrollbar-gutter: stable;
}

/* The default direction is Arabic (RTL) when there is no explicit dir
   attribute. We use :not([dir]) so this declaration does not override the dir
   attribute, so the direction switch (dir="ltr") stays effective. */
html:not([dir]) {
  direction: rtl;
}

body {
  margin: 0;
  font-family: var(--fj-font-family-base);
  font-size: var(--fj-font-size-md);
  line-height: var(--fj-line-height-normal);
  color: var(--fj-color-text);
  background-color: var(--fj-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Zero letter spacing: Arabic comes apart with positive spacing. */
  letter-spacing: var(--fj-letter-spacing-normal);
}

/* Headings: unified font, weight, and color. Negative spacing for the large headings only. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fj-font-family-heading);
  color: var(--fj-color-heading);
  line-height: var(--fj-line-height-tight);
  letter-spacing: var(--fj-letter-spacing-tight);
}

/* Respect the user's reduced motion preference - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* A clear focus ring for accessibility - Visible focus ring */
:focus-visible {
  outline: var(--fj-border-width-thick) solid var(--fj-color-focus-ring);
  outline-offset: 2px;
}