/**
 * @file
 * Page defaults: type, colour, links, focus, motion.
 *
 * Embedded in another theme, the portal's container (.gdrfad-dds-embedded)
 * takes the :root and body rules (scripts/scope-css.py).
 */

:root:where(.gdrfad-dds),
.gdrfad-dds-embedded {
  color: var(--surface-on-surface);
  background: var(--surface-surface-dim);
  font-family: var(--font-family), system-ui, "Segoe UI", Tahoma, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(.gdrfad-dds) body,
.gdrfad-dds-embedded {
  margin: 0;
  background: var(--surface-surface-dim);
}

/* Embedded in another theme (hand-written, scope-css.py leaves it alone):
 * - a size container, so the design's width rules follow the container's
 *   own width, not the screen's (the @container copies scope-css.py writes);
 * - the text properties that theme sets on <body> stop here instead of
 *   being inherited into the design. */
.gdrfad-dds-embedded {
  container: gdrfad-dds / inline-size;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-indent: 0;
  text-transform: none;
  text-shadow: none;
  font-feature-settings: normal;
  font-variant: normal;
  hyphens: manual;
  overflow-wrap: normal;
  white-space: normal;
}

/* That theme's element rules (h1 { font-family … }) do not reach the type:
 * as on the staff theme, these take the container's. */
.gdrfad-dds-embedded :is(h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, label, legend, button, input, textarea, th, td, caption, blockquote, small, strong, b, em) {
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

:where(.gdrfad-dds) h1,
:where(.gdrfad-dds) h2,
:where(.gdrfad-dds) h3,
:where(.gdrfad-dds) h4,
:where(.gdrfad-dds) h5,
:where(.gdrfad-dds) h6,
.gdrfad-dds-embedded h1,
.gdrfad-dds-embedded h2,
.gdrfad-dds-embedded h3,
.gdrfad-dds-embedded h4,
.gdrfad-dds-embedded h5,
.gdrfad-dds-embedded h6 {
  font-weight: 700;
  color: var(--surface-on-surface);
}

/* Arabic: no tracking, and a taller line for text blocks only. A blanket
 * :lang(ar) line-height would also stretch fixed-height controls. */
:where(.gdrfad-dds) :is(:lang(ar)),
.gdrfad-dds-embedded :is(:lang(ar)) {
  letter-spacing: 0;
}

html:where(.gdrfad-dds):lang(ar) :is(body, p, li, dd, label, legend, .description, .dds-field__help, .dds-field__error),
.gdrfad-dds-embedded:lang(ar) :is(body, p, li, dd, label, legend, .description, .dds-field__help, .dds-field__error) {
  line-height: 1.7;
}

:where(.gdrfad-dds) a,
.gdrfad-dds-embedded a {
  color: var(--primary-primary);
  text-decoration: none;
  text-underline-offset: 3px;
}

:where(.gdrfad-dds) a:hover,
.gdrfad-dds-embedded a:hover {
  color: var(--state-layers-primary-hovered);
  text-decoration: underline;
}

:where(.gdrfad-dds) :focus-visible,
.gdrfad-dds-embedded :focus-visible {
  outline: 2px solid var(--primary-primary);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  :where(.gdrfad-dds) :focus-visible,
  .gdrfad-dds-embedded :focus-visible {
    outline-color: CanvasText;
  }
}

:where(.gdrfad-dds) :is([dir="rtl"] .dds-mirror),
.gdrfad-dds-embedded :is([dir="rtl"] .dds-mirror) {
  transform: scaleX(-1);
}

:where(.gdrfad-dds) .tnum,
.gdrfad-dds-embedded .tnum {
  font-variant-numeric: tabular-nums;
}

/* Skip link: core's .visually-hidden.focusable, shown on focus. */
:where(.gdrfad-dds) .skip-link:focus,
.gdrfad-dds-embedded .skip-link:focus {
  position: fixed !important;
  z-index: 100;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: var(--padding-padding-sm) var(--padding-padding-lg);
  border-radius: var(--radius-xs);
  background: var(--primary-primary);
  color: var(--primary-on-primary);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  :where(.gdrfad-dds) *,
  :where(.gdrfad-dds) *::before,
  :where(.gdrfad-dds) *::after,
  .gdrfad-dds-embedded *,
  .gdrfad-dds-embedded *::before,
  .gdrfad-dds-embedded *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}