/* ==========================================================================
   Design system: font, reset, typography, utilities

   Scope: everything is limited to .ds (the container of pages or blocks moved to the DS).
   Selectors use :where(.ds) so they keep the export's specificity: a reset rule such as
   :where(.ds) button weighs the same as "button", so component classes still win over it.
   The legacy style.css stays loaded for the header, the footer and legacy pages:
   its global rules (reset, strong, .grid, .switch) are neutralized inside .ds.
   ========================================================================== */

/* ---- Mont (Fontfabric): .otf files from the designer's export ----
   To be replaced by the .woff2 files of the Fontfabric web kit, with the web license (before production).
   CSS weights set by the design system:
   Regular 600 · SemiBold 700 · Bold 800 · Heavy 900 · Regular Italic 600 italic
   The site's legacy Mont (families 'Mont-Regular', 'Mont-Bold'…) lives in /fonts/old/. */
@font-face {
  font-family: "Mont";
  src: url("../fonts/mont-regular.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../fonts/mont-regular-italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../fonts/mont-semibold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../fonts/mont-bold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../fonts/mont-heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset ---- */
.ds,
:where(.ds) *,
:where(.ds) *::before,
:where(.ds) *::after {
  box-sizing: border-box;
}

:where(.ds) * {
  margin: 0;
}

/* The legacy style.css global reset forces font-size: 100% and font-weight: normal
   on div, span, p, li, button… which would break weight inheritance in components.
   :where() keeps the specificity of a single class (.ds): beaten by components,
   loaded later, but stronger than the legacy reset's type selectors. */
.ds :where(header, footer, nav, p, ul, ol, li, form, input, textarea, fieldset, blockquote,
  section, article, aside, dl, dt, dd, table, td, th, tr, button, div, span) {
  font-size: inherit;
  font-weight: inherit;
}
.ds :where(hr) {
  display: revert;
}

/* What the export puts on body (the background only on a page root: .ds also marks
   small containers such as the toast region, which must stay transparent) */
.ds {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--font-family-mont);
  font-weight: var(--font-weight-regular);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  color: var(--content-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ds-page {
  background: var(--background-primary);
}

/* A section with data-theme repaints its background and text */
:where(.ds)[data-theme],
:where(.ds) [data-theme] {
  color: var(--content-primary);
  background-color: var(--background-primary);
}

/* The hidden attribute must always win over component display values */
:where(.ds) [hidden] {
  display: none !important;
}

:where(.ds) img,
:where(.ds) picture,
:where(.ds) video,
:where(.ds) svg {
  display: block;
  max-width: 100%;
}

:where(.ds) input,
:where(.ds) button,
:where(.ds) textarea,
:where(.ds) select {
  font: inherit;
  color: inherit;
}

:where(.ds) button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(.ds) button:disabled {
  cursor: default;
}

:where(.ds) a {
  color: inherit;
  text-decoration: none;
}

:where(.ds) ul[role="list"],
:where(.ds) ol[role="list"] {
  list-style: none;
  padding: 0;
}

:where(.ds) h1,
:where(.ds) h2,
:where(.ds) h3,
:where(.ds) h4,
:where(.ds) h5,
:where(.ds) h6 {
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
  overflow-wrap: break-word;
}

:where(.ds) p {
  overflow-wrap: break-word;
}

/* The legacy style.css forces strong to 'Mont-SemiBold' (legacy Mont), weight 400:
   back to the browser default used by the export (bolder: Heavy inside a heading) */
:where(.ds) strong,
:where(.ds) b {
  font-family: inherit;
  font-weight: bolder;
}

.ds :focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(.ds) *,
  :where(.ds) *::before,
  :where(.ds) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Text styles (26 Figma styles)
   Scoped with :where(.ds): same specificity as in the export (components and page
   styles keep winning), and loaded after style.css so they beat its global reset.
   ========================================================================== */

/* Display: headings. Mont Heavy, Italic for emphasized words. 100% */
:where(.ds) .display-h1,
:where(.ds) .display-h2,
:where(.ds) .display-h3,
:where(.ds) .display-h4,
:where(.ds) .display-h5,
:where(.ds) .display-h6 {
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-display);
}
:where(.ds) .display-h1 { font-size: var(--type-display-h1); }
:where(.ds) .display-h2 { font-size: var(--type-display-h2); }
:where(.ds) .display-h3 { font-size: var(--type-display-h3); }
:where(.ds) .display-h4 { font-size: var(--type-display-h4); }
:where(.ds) .display-h5 { font-size: var(--type-display-h5); }
:where(.ds) .display-h6 { font-size: var(--type-display-h6); }

/* Display Italic: on <em> inside a heading, or on its own */
:where(.ds) .display-italic,
:where(.ds) [class^="display-h"] em,
:where(.ds) [class*=" display-h"] em {
  font-weight: var(--font-weight-regular);
  font-style: italic;
}

/* Body: running text. 140% */
:where(.ds) .body-xl,
:where(.ds) .body-lg,
:where(.ds) .body-md,
:where(.ds) .body-sm,
:where(.ds) .body-xs {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text);
}
:where(.ds) .body-xl { font-size: var(--type-body-xl); }
:where(.ds) .body-lg { font-size: var(--type-body-lg); }
:where(.ds) .body-md { font-size: var(--type-body-md); }
:where(.ds) .body-sm { font-size: var(--type-body-sm); }
:where(.ds) .body-xs { font-size: var(--type-body-xs); }

/* Body Strong: emphasis inside a paragraph */
:where(.ds) .body-strong,
:where(.ds) .body-md strong,
:where(.ds) .body-sm strong,
:where(.ds) .body-xs strong {
  font-weight: var(--font-weight-bold);
}

/* Label: component text. 100% */
:where(.ds) .label-xl,
:where(.ds) .label-lg,
:where(.ds) .label-md-strong {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
:where(.ds) .label-xl { font-size: var(--type-label-xl); }
:where(.ds) .label-lg { font-size: var(--type-label-lg); }

/* Label/MD: 14 / 100%, SemiBold (menu items, fields) */
:where(.ds) .label-md {
  font-size: var(--type-label-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
/* Label/MD Strong: 14 / 100%, Bold (buttons, segments, avatar…) */
:where(.ds) .label-md-strong { font-size: var(--type-label-md); }
:where(.ds) .label-sm {
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Overline: uppercase, 6% letter spacing */
:where(.ds) .overline-lg,
:where(.ds) .overline-md,
:where(.ds) .overline-sm {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
}
:where(.ds) .overline-lg { font-size: var(--type-label-lg); }
:where(.ds) .overline-md { font-size: var(--type-label-md); }
:where(.ds) .overline-sm { font-size: var(--type-label-sm); }

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Container: 1440 max, grid margins */
:where(.ds) .container {
  width: 100%;
  max-width: calc(var(--container-max-width) + 2 * var(--grid-margin));
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* 12 / 8 / 4 column grid.
   The legacy style.css also has a .grid class (3 columns, grid-template-areas, z-index):
   we reset what it sets. */
:where(.ds) .grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: none;
  grid-template-areas: none;
  gap: var(--grid-gutter);
  position: static;
  z-index: auto;
}

:where(.ds) .section {
  padding-block: var(--spacing-section);
}

:where(.ds) .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* MAD logo: text color (turns white in dark mode) */
:where(.ds) .logo {
  display: block;
  width: 109px;
  height: 40px;
  background-color: currentColor;
  -webkit-mask: var(--mask-logo) center / contain no-repeat; /* defined in icons.css */
  mask: var(--mask-logo) center / contain no-repeat;
}