/* ===== Global styles ===== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-bg-primary);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

main { display: block; }

.page-section { margin-block: var(--space-section); }

/* Headings */
h1, h2, h3 { color: var(--color-white); line-height: 1.2; }
h1 { font-family: var(--font-body); font-size: var(--fs-h1); font-weight: var(--fw-heading); }
h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  color: var(--color-heading);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-btn);
  color: var(--color-white);
  letter-spacing: 0.5px;
}

/* Text */
p { color: var(--color-text); }
strong { color: var(--color-white); }
a.text-link { color: var(--color-heading); text-decoration: underline; transition: color var(--transition); }
a.text-link:hover { color: var(--color-accent); }

/* Contextual internal links inside body text — product accent, stands out */
.content__link {
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.content__link:hover,
.content__link:focus-visible { color: var(--color-heading); }

/* Content article */
.content { display: block; }
.content__section { margin-block: var(--space-section); }
.content__section > h2 { margin-bottom: var(--space-h2-text); }
.content__section > h3 { margin-top: var(--space-paragraph); margin-bottom: var(--space-h3-text); }
.content__section p { margin-bottom: var(--space-paragraph); }
.content__section p:last-child { margin-bottom: 0; }

/* Lists inside content */
.content__list { margin-bottom: var(--space-paragraph); display: grid; gap: 0.5rem; }
.content__list li { position: relative; padding-left: 1.5rem; }
.content__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; background: var(--color-heading); transform: translateY(-50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.content__list--ordered { counter-reset: step; }
.content__list--ordered li { padding-left: 2.25rem; }
.content__list--ordered li::before {
  content: counter(step); counter-increment: step;
  width: auto; height: auto; top: 0; background: none; transform: none;
  color: var(--color-heading); font-weight: var(--fw-heading);
  clip-path: none;
}

/* Content image after H2 — full, not cropped */
.content__media { margin-bottom: var(--space-paragraph); }
.content__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  clip-path: var(--clip-cut);
}

/* Tables */
.table-wrap { margin-bottom: var(--space-paragraph); overflow-x: auto; }
.data-table {
  background: var(--color-card);
  clip-path: var(--clip-cut);
  min-width: 480px;
}
.data-table th, .data-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-cool);
  vertical-align: top;
}
.data-table thead th {
  background: var(--color-cool);
  color: var(--color-white);
  font-weight: var(--fw-btn);
}
.data-table tbody th { color: var(--color-white); font-weight: var(--fw-medium); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  color: var(--color-btn-text);
  font-weight: var(--fw-btn);
  text-transform: none;
  border: none;
  clip-path: var(--clip-cut);
  transition: filter var(--transition), transform var(--transition);
  text-align: center;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--btn-primary); }
.btn--secondary { background: var(--btn-secondary); }
.btn--block { width: 100%; }

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--color-accent); color: var(--color-white);
  padding: 0.65rem 1rem; clip-path: var(--clip-cut); font-weight: var(--fw-btn);
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* Breadcrumb */
.breadcrumb { margin-top: 1.5rem; font-size: 0.85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--color-cool); }
.breadcrumb a { color: var(--color-text); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-heading); }
.breadcrumb [aria-current="page"] { color: var(--color-heading); }

/* Intro */
.intro { margin-block: var(--space-paragraph); }
.intro p { margin-bottom: var(--space-paragraph); font-size: clamp(1rem, 1.6vw, 1.125rem); }

/* Section lead heading (over table etc.) */
.section-title { color: var(--color-heading); margin-bottom: var(--space-h2-text); }

/* Fade-in animation (JS toggles .is-visible) */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* CTA row */
.cta-row { margin-block: var(--space-paragraph); display: flex; flex-wrap: wrap; gap: var(--space-card-gap); }
.cta-row--center { justify-content: center; }
.final-cta { margin-block: var(--space-section); }
.final-cta .btn { padding: 0.95rem 2.5rem; }

/* Visually hidden */
.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;
}

/* 404 */
.notfound { padding-block: var(--space-section); }
.notfound__inner { display: grid; gap: 1rem; justify-items: center; text-align: center; min-height: 50dvh; align-content: center; }
.notfound__code {
  font-size: clamp(5rem, 20vw, 11rem); font-weight: var(--fw-heading);
  line-height: 1; color: var(--color-heading);
}
.notfound__title { color: var(--color-white); }
.notfound__text { max-width: 52ch; color: var(--color-text); }
.notfound .btn { margin-top: 0.75rem; }

/* Scroll-to-top */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--btn-primary); color: var(--color-white);
  clip-path: var(--clip-cut); opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }