/* ==========================================================================
   Reset & base
   --------------------------------------------------------------------------
   Element defaults. Uses the tokens from theme.css.

   Cross-browser fixes are taken from Tailwind Preflight
   (https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css),
   but without its "unstyle everything" parts: headings, lists and links keep
   their meaning, because editor content (RTE, EXT:form, plugins) has no classes.
   Element defaults use :where() (specificity 0) so components can override them.
   ========================================================================== */

/* ==========================================================================
   BOX MODEL
   1. Padding and border don't affect the element width.
   2. Remove default margins and padding (spacing comes from components).
   3. Reset borders, so setting a border-width is enough to show a border.
   ========================================================================== */
*,
::before,
::after,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0;              /* 2 */
  padding: 0;             /* 2 */
  border: 0 solid;        /* 3 */
}


/* ==========================================================================
   DOCUMENT
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 0px) + 1rem);   /* --header-h: set by main-nav-top.js */
}

body {
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* Firefox: use the modern focus style for all focusable elements */
:-moz-focusring:where(:not(iframe)) { outline: auto; }

/* Elements with the hidden attribute stay hidden, even with a display rule */
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }


/* ==========================================================================
   TEXT
   ========================================================================== */
:where(a) { color: inherit; }

:where(b, strong) { font-weight: 700; }

:where(address) { font-style: normal; }

/* Correct text decoration in Chrome, Edge and Safari */
:where(abbr[title]) { text-decoration: underline dotted; }

:where(small) { font-size: 80%; }

/* sub / sup don't affect the line height */
:where(sub, sup) {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
:where(sub) { bottom: -0.25em; }
:where(sup) { top: -0.5em; }

:where(code, kbd, samp, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em; /* correct the odd em sizing in all browsers */
}

:where(hr) {
  height: 0;
  color: inherit;          /* Firefox border color inheritance */
  border-top-width: 1px;
}


/* ==========================================================================
   LISTS
   Lists keep their bullets (editor content). Lists with role="list" are used
   for navigation / layout and are unstyled.
   ========================================================================== */
:where(ul, ol):not([role="list"]) { padding-inline-start: 1.25em; }
:where(ul, ol, menu)[role="list"] { list-style: none; }


/* ==========================================================================
   EMBEDDED CONTENT
   1. Block by default (no gap below images).
   2. Sensible alignment when set to inline.
   3. Constrain to the parent width and keep the aspect ratio.
   ========================================================================== */
:where(img, picture, svg, video, canvas, audio, iframe, embed, object) {
  display: block;          /* 1 */
  vertical-align: middle;  /* 2 */
}
:where(img, picture, svg, video) { max-width: 100%; } /* 3 */
:where(img, video) { height: auto; }                  /* 3 */


/* ==========================================================================
   TABLES
   1. Remove text indentation from table contents in Chrome and Safari.
   2. Correct table border color inheritance in Chrome and Safari.
   3. Remove gaps between table borders.
   ========================================================================== */
:where(table) {
  text-indent: 0;            /* 1 */
  border-color: inherit;     /* 2 */
  border-collapse: collapse; /* 3 */
}


/* ==========================================================================
   INTERACTIVE
   ========================================================================== */
/* Correct display in Chrome and Safari (FAQ <details> uses its own style) */
:where(summary) { display: list-item; }

:where(progress) { vertical-align: baseline; }


/* ==========================================================================
   FORMS
   1. Inherit font styles in all browsers.
   2. Remove border radius and background in all browsers.
   3. Consistent opacity for disabled states.
   ========================================================================== */
:where(button, input, select, optgroup, textarea),
::file-selector-button {
  font: inherit;                   /* 1 */
  font-feature-settings: inherit;  /* 1 */
  font-variation-settings: inherit;/* 1 */
  letter-spacing: inherit;         /* 1 */
  color: inherit;                  /* 1 */
  border-radius: 0;                /* 2 */
  background-color: transparent;   /* 2 */
  opacity: 1;                      /* 3 */
}

:where(button, input:where([type="button"], [type="reset"], [type="submit"])),
::file-selector-button {
  appearance: button; /* allow border-radius in iOS Safari */
  cursor: pointer;
}

/* Text fields stay visible after the border / padding reset above
   (baseline until the form gets its own styles, e.g. for EXT:form) */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="reset"], [type="submit"], [type="image"]), select, textarea) {
  padding: 0.5em 0.75em;
  border-width: 1px;
}

:where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }

::file-selector-button { margin-inline-end: 4px; }

:where(textarea) { resize: vertical; }

/* Placeholder: same color in all browsers (half of the text color).
   Guarded, because color-mix() with currentcolor crashes Safari < 17. */
::placeholder { opacity: 1; }
@supports (not (-webkit-appearance: -apple-pay-button)) /* not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); }
}

/* Remove the inner padding in Chrome and Safari on macOS */
::-webkit-search-decoration { -webkit-appearance: none; }

/* Date / time inputs in Safari: same height when empty, alignable text */
::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field { padding-block: 0; }

/* Center the datalist marker in Chrome */
::-webkit-calendar-picker-indicator { line-height: 1; }

/* Correct the cursor of the number spin buttons in Safari */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }

/* Remove the extra :invalid styles in Firefox */
:-moz-ui-invalid { box-shadow: none; }


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}