/*
  safety.resinmill.eu

  Tokens mirror resinmill.eu (src/styles/tokens.css in the resinmill-eu repo):
  same palette, type scale, radii and gutters, so the two sites read as one.
  If the brand tokens change there, change them here.

  No inline styles and no scripts anywhere on the site: the Content Security
  Policy allows this stylesheet, the fonts and the images, and nothing else.
*/

/* Montserrat, self-hosted (SIL OFL, see /assets/fonts/OFL.txt), in the two
   weights the brand guidelines set: Medium for body copy, SemiBold for
   headlines (in caps). The latin-ext subset carries the Romanian letters;
   Greek falls back to the system font, as it does on resinmill.eu, because
   Montserrat has no Greek. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --purple: #6725fc;
  --deep: #2a0650;
  --teal: #07fcd2;
  --orange: #f7931d;
  --paper: #f7f6f3;
  --white: #ffffff;
  --ink-600: #3c444c;
  --ink-300: #646d78;
  --line: rgba(100, 109, 120, 0.25);
  --line-strong: rgba(100, 109, 120, 0.4);

  --font: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Starts smaller than resinmill.eu's h1 so the longest one-word title
     ("Documentation", "Veiligheids-") fits a 360px screen in caps. */
  --text-h1: clamp(1.75rem, 0.95rem + 3.4vw, 3.25rem);
  --text-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-body: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --text-caption: clamp(0.8125rem, 0.8rem + 0.05vw, 0.875rem);

  --radius-card: 8px;
  --radius-btn: 6px;
  --gutter: 24px;
  --section: 56px;
}
@media (min-width: 768px) {
  :root {
    --gutter: 80px;
    --section: 96px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-600);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3 {
  margin: 0;
  color: var(--deep);
  font-weight: 600;
  line-height: 1.12;
}
p,
dl,
dd,
ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}
img,
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.caps {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eyebrow {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.text-link {
  color: var(--purple);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.text-link:hover {
  color: var(--deep);
}

/* Skip link: off-screen until focused. */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--deep);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 68px;
  padding-block: 12px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo img {
  width: auto;
  height: 28px;
}
.logo-word {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep);
  white-space: nowrap;
}
.logo-word b {
  font-weight: 600;
  color: var(--purple);
}
.site-footer .logo-word {
  color: var(--paper);
}

/* Language bar: every language is always one visible link. The choice never
   depends on where the visitor is. */
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-inline: -10px;
}
.langs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-600);
  text-decoration: none;
}
.langs a:hover {
  background: rgba(100, 109, 120, 0.1);
  color: var(--deep);
}
.langs a[aria-current] {
  background: rgba(103, 37, 252, 0.1);
  color: var(--purple);
}
@media (min-width: 768px) {
  .langs {
    margin-inline: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--deep);
  color: var(--paper);
}
/* The brand's background shape: the diagonal bars of the logo mark, one tone
   up from the deep purple, in the top right corner. Wide screens only, where
   the text does not run underneath it. */
@media (min-width: 960px) {
  .hero {
    background-image: url("/assets/hero-stripes.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
  }
}
.hero-inner {
  display: grid;
  gap: 32px;
  padding-block: 56px;
}
@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
    align-items: end;
  }
}

/* The local emergency number and 112, before anything else on the page. */
.hero-emergency {
  padding: 20px 24px;
  border: 1px solid rgba(247, 246, 243, 0.25);
  border-radius: var(--radius-card);
  background: var(--deep);
}
.hero-emergency h2 {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal);
}
.hero-emergency ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 12px;
}
.hero-emergency li span {
  display: block;
  font-size: 13px;
  color: rgba(247, 246, 243, 0.7);
}
.hero-emergency li a {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.hero-emergency li a:hover {
  color: var(--teal);
}
.hero-emergency-all {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero :focus-visible {
  outline-color: var(--teal);
}
.hero .eyebrow {
  color: var(--teal);
}
.hero h1 {
  margin-top: 16px;
  color: var(--paper);
  font-size: var(--text-h1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}
.hero-lead {
  margin-top: 24px;
  max-width: 42rem;
  font-size: var(--text-lead);
  color: rgba(247, 246, 243, 0.85);
}
.hero-note {
  margin-top: 16px;
  max-width: 42rem;
  font-size: 15px;
  color: rgba(247, 246, 243, 0.7);
}
.hero-updated {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(247, 246, 243, 0.6);
}
@media (min-width: 768px) {
  .hero-inner {
    padding-block: 88px;
  }
}

/* ---------- Emergency numbers ---------- */
.emergency {
  background: var(--white);
  border-block: 1px solid var(--line);
  scroll-margin-top: 16px;
}
.emergency-inner {
  padding-block: 32px;
}
.emergency h2 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.emergency-intro {
  margin-top: 8px;
  max-width: 46rem;
  font-size: 15px;
}
.numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  margin-top: 20px;
}
.number {
  padding: 14px 0 14px 16px;
  border-left: 3px solid var(--line);
}
.number + .number {
  margin-top: 12px;
}
/* The country of the page's own language leads and is marked. */
.number.is-local {
  border-left-color: var(--purple);
}
.number-country {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink-300);
}
.number-tel {
  display: inline-block;
  margin-top: 2px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--deep);
  text-decoration: none;
  white-space: nowrap;
}
.number-tel:hover {
  color: var(--purple);
}
.number-detail {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-300);
}
@media (min-width: 600px) {
  .numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
  }
  .number + .number {
    margin-top: 0;
  }
}
@media (min-width: 1100px) {
  .numbers {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- Document groups ---------- */
.library {
  padding-block: var(--section);
}
.group {
  display: grid;
  gap: 24px;
}
.group + .group {
  margin-top: 64px;
}
.group-head h2 {
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}
.group-head p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
}
.group-head p + p {
  color: var(--ink-300);
  font-size: 14px;
}
@media (min-width: 960px) {
  .group {
    grid-template-columns: 320px 1fr;
    gap: 48px;
  }
}

.doc {
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.doc:first-child {
  border-top: 1px solid var(--line);
}
.doc-title {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--deep);
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-300);
}
.doc-meta dt,
.doc-meta dd {
  display: inline;
}
.doc-meta dd {
  margin-left: 6px;
  font-weight: 600;
  color: var(--ink-600);
}

/* Language versions of one document. The version for the page's own market
   is the filled button; every other version sits beside it. */
.versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.versions li.is-primary {
  grid-column: 1 / -1;
}
.versions .version {
  display: flex;
}
.version-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (min-width: 600px) {
  .versions {
    display: flex;
    flex-wrap: wrap;
  }
  .versions .version {
    display: inline-flex;
  }
  .version-text {
    flex-direction: row;
    gap: 8px;
  }
}
.version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: 14px;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 150ms, background-color 150ms, color 150ms;
}
.version svg {
  flex: none;
  color: var(--ink-300);
}
.version-language {
  font-weight: 600;
  color: var(--deep);
}
.version-market {
  color: var(--ink-300);
}
.version:hover {
  border-color: var(--purple);
}
.version:hover svg,
.version:hover .version-language {
  color: var(--purple);
}
.version.is-primary {
  border-color: var(--purple);
  background: var(--purple);
}
.version.is-primary svg,
.version.is-primary .version-language {
  color: var(--white);
}
.version.is-primary .version-market {
  color: rgba(255, 255, 255, 0.85);
}
.version.is-primary:hover {
  border-color: var(--deep);
  background: var(--deep);
}
.version.is-primary:hover svg,
.version.is-primary:hover .version-language {
  color: var(--white);
}
.doc-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-300);
}
.group-note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- Withdrawn products ---------- */
.notice {
  padding: 20px 24px;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-card);
  background: var(--white);
}
.notice + .notice {
  margin-top: 12px;
}
.notice h3 {
  font-size: var(--text-body);
  line-height: 1.35;
}
.notice p {
  margin-top: 6px;
  font-size: 15px;
}

/* ---------- Revision history ---------- */
.history {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.history th {
  padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--line-strong);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-300);
}
.history td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
.history td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--deep);
}
.history td:nth-child(2) {
  width: 30%;
  font-weight: 600;
}
.history td:last-child,
.history th:last-child {
  padding-right: 0;
}
@media (max-width: 719px) {
  .history thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .history,
  .history tbody,
  .history tr,
  .history td {
    display: block;
  }
  .history tr {
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
  }
  .history tr:first-child {
    border-top: 1px solid var(--line);
  }
  .history td {
    padding: 0;
    border: 0;
  }
  .history td:nth-child(2) {
    width: auto;
    margin-top: 2px;
  }
  .history td:last-child {
    margin-top: 6px;
  }
}

/* ---------- Text blocks and facts ---------- */
.prose {
  max-width: 46rem;
  font-size: 15px;
}
.facts {
  display: grid;
  gap: 4px 32px;
  font-size: 15px;
}
.facts dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-300);
}
.facts dd + dt {
  margin-top: 14px;
}
@media (min-width: 600px) {
  .facts {
    grid-template-columns: max-content 1fr;
    gap: 14px 32px;
  }
  .facts dt {
    padding-top: 2px;
  }
  .facts dd + dt {
    margin-top: 0;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--deep);
  color: rgba(247, 246, 243, 0.7);
  font-size: 14px;
}
.footer-inner {
  display: grid;
  gap: 28px;
  padding-block: 48px;
}
.site-footer address {
  margin-top: 16px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(247, 246, 243, 0.6);
}
.footer-notes p + p {
  margin-top: 8px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
}
.footer-links a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 960px) {
  .footer-inner {
    grid-template-columns: 320px 1fr;
    gap: 48px;
  }
}

/* ---------- Not found ---------- */
.notfound {
  padding-block: var(--section);
}
.notfound h1 {
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.notfound p {
  margin-top: 12px;
}
.notfound .langs {
  margin-top: 16px;
}
.notfound section + section {
  margin-top: 40px;
}

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

@media print {
  .site-header .langs,
  .skip {
    display: none;
  }
  .hero,
  .site-footer {
    background: none;
    color: var(--ink-600);
  }
  .hero h1,
  .hero .eyebrow,
  .site-footer .logo-word {
    color: var(--deep);
  }
  .hero-lead,
  .hero-note,
  .hero-updated,
  .site-footer,
  .site-footer address {
    color: var(--ink-600);
  }
}